feat(型号、系列、设备): 型号、系列物模型新增功能参数配置，运行状态调整参数显示
This commit is contained in:
fhysy
parent
9556c21440
commit
868fd9b46f
|
|
@ -17,6 +17,7 @@ const getters = {
|
|||
userId: state => state.user.userId,
|
||||
attributeList: state => state.attribute.attributeList,
|
||||
groupList: state => state.attribute.groupList,
|
||||
functionList: state => state.attribute.functionList,
|
||||
attributeInfo: state => state.permission.attribute
|
||||
}
|
||||
export default getters
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@ import { Notification, MessageBox, Message } from 'element-ui'
|
|||
const attribute = {
|
||||
state: {
|
||||
attributeList: [],
|
||||
groupList: []
|
||||
groupList: [],
|
||||
functionList: [],
|
||||
},
|
||||
|
||||
mutations: {
|
||||
|
|
@ -12,39 +13,59 @@ const attribute = {
|
|||
// debugger
|
||||
state.attributeList = list
|
||||
},
|
||||
SET_GROUP_LIST: (state, list) => {
|
||||
state.groupList = list
|
||||
},
|
||||
PUSH_ATTRIBUTE: (state, item) => {
|
||||
state.attributeList.push(item)
|
||||
},
|
||||
PUSH_GROUP: (state, item) => {
|
||||
state.groupList.push(item)
|
||||
},
|
||||
UPDATE_ATTRIBUTE: (state, {item, idx}) => {
|
||||
state.attributeList[idx] = item
|
||||
},
|
||||
UPDATE_GROUP: (state, {item, idx}) => {
|
||||
state.groupList[idx] = item
|
||||
},
|
||||
DELETE_ATTRIBUTE: (state, idx) => {
|
||||
state.attributeList.splice(idx,1);
|
||||
},
|
||||
DELETE_GROUP: (state, idx) => {
|
||||
state.groupList.splice(idx,1);
|
||||
},
|
||||
GET_ATTRIBUTE_ITEM: (state, idx) => {
|
||||
return state.attributeList[idx]
|
||||
},
|
||||
GET_GROUP_ITEM: (state, idx) => {
|
||||
return state.groupList[idx]
|
||||
},
|
||||
GET_ATTRIBUTE_LIST: (state) => {
|
||||
return state.attributeList
|
||||
},
|
||||
|
||||
SET_GROUP_LIST: (state, list) => {
|
||||
state.groupList = list
|
||||
},
|
||||
PUSH_GROUP: (state, item) => {
|
||||
state.groupList.push(item)
|
||||
},
|
||||
UPDATE_GROUP: (state, {item, idx}) => {
|
||||
state.groupList[idx] = item
|
||||
},
|
||||
DELETE_GROUP: (state, idx) => {
|
||||
state.groupList.splice(idx,1);
|
||||
},
|
||||
GET_GROUP_ITEM: (state, idx) => {
|
||||
return state.groupList[idx]
|
||||
},
|
||||
GET_GROUP_LIST: (state) => {
|
||||
return state.groupList
|
||||
},
|
||||
//功能
|
||||
SET_FUNCTION_LIST: (state, list) => {
|
||||
state.functionList = list
|
||||
},
|
||||
PUSH_FUNCTION: (state, item) => {
|
||||
state.functionList.push(item)
|
||||
},
|
||||
UPDATE_FUNCTION: (state, {item, idx}) => {
|
||||
state.functionList[idx] = item
|
||||
},
|
||||
DELETE_FUNCTION: (state, idx) => {
|
||||
state.functionList.splice(idx,1);
|
||||
},
|
||||
GET_FUNCTION_ITEM: (state, idx) => {
|
||||
return state.functionList[idx]
|
||||
},
|
||||
GET_FUNCTION_LIST: (state) => {
|
||||
return state.functionList
|
||||
},
|
||||
},
|
||||
|
||||
actions: {
|
||||
|
|
@ -59,6 +80,11 @@ const attribute = {
|
|||
resolve(state.groupList)
|
||||
})
|
||||
},
|
||||
GetFunctionList({state}) {
|
||||
return new Promise((resolve, reject) => {
|
||||
resolve(state.functionList)
|
||||
})
|
||||
},
|
||||
setAttribute({ commit, state }, data){
|
||||
commit('SET_ATTRIBUTE_LIST', data)
|
||||
},
|
||||
|
|
@ -66,6 +92,7 @@ const attribute = {
|
|||
InitAttributeAndGroup({ commit, state }, data) {
|
||||
commit('SET_ATTRIBUTE_LIST', data.attrList)
|
||||
commit('SET_GROUP_LIST', data.groupList)
|
||||
commit('SET_FUNCTIon_LIST', data.functionList)
|
||||
console.log('res:', state, data)
|
||||
},
|
||||
// 新增 属性
|
||||
|
|
@ -76,6 +103,10 @@ const attribute = {
|
|||
AddGroup({ commit, state }, data) {
|
||||
commit('PUSH_GROUP', data)
|
||||
},
|
||||
// 新增 功能
|
||||
AddFunction({ commit, state }, data) {
|
||||
commit('PUSH_FUNCTION', data)
|
||||
},
|
||||
// 获取 属性 单个信息
|
||||
GetAttributeItem({ commit, state }, idx) {
|
||||
return new Promise((resolve, reject) => {
|
||||
|
|
@ -96,6 +127,10 @@ const attribute = {
|
|||
EditGroup({ commit, state }, param) {
|
||||
commit('UPDATE_GROUP', param)
|
||||
},
|
||||
// 修改 列表
|
||||
EditFunction({ commit, state }, param) {
|
||||
commit('UPDATE_FUNCTION', param)
|
||||
},
|
||||
// 删除分组 删除分组 判断分组是否有属性，有属性就不能删除
|
||||
DeleteGroup({ commit, state }, idx) {
|
||||
let groupItem = state.groupList[idx];
|
||||
|
|
@ -113,7 +148,12 @@ const attribute = {
|
|||
// 删除属性
|
||||
DeleteAttribute({ commit, state }, idx) {
|
||||
commit('DELETE_ATTRIBUTE', idx)
|
||||
}
|
||||
},
|
||||
// 删除方法
|
||||
DeleteFunction({ commit, state }, idx) {
|
||||
commit('DELETE_FUNCTION', idx)
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -517,7 +517,10 @@ export default {
|
|||
(this.childOpt.paramIdx = data.paramIdx);
|
||||
this.AttributeViewShow = true;
|
||||
this.functionList = JSON.parse(
|
||||
JSON.stringify(this.$store.getters.attributeList)
|
||||
JSON.stringify({
|
||||
properties:this.$store.getters.attributeList,
|
||||
functions:this.$store.getters.groupList,
|
||||
})
|
||||
);
|
||||
this.componectVal = data.component;
|
||||
},
|
||||
|
|
@ -1032,8 +1035,19 @@ export default {
|
|||
});
|
||||
groupList.sort((a, b) => a.sort - b.sort);
|
||||
}
|
||||
console.log(groupList, attrList);
|
||||
this.form.prodJson = JSON.stringify(attrList) || null;
|
||||
let functionList = [];
|
||||
if (
|
||||
this.$store.getters.functionList &&
|
||||
this.$store.getters.functionList.length > 0
|
||||
) {
|
||||
functionList = this.$store.getters.functionList;
|
||||
}
|
||||
|
||||
this.form.prodJson = JSON.stringify({
|
||||
properties:attrList,
|
||||
functions:functionList,
|
||||
events:[]
|
||||
}) || null;
|
||||
this.form.remark = JSON.stringify(groupList) || null;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -522,7 +522,20 @@ export default {
|
|||
});
|
||||
groupList.sort((a, b) => a.sort - b.sort);
|
||||
}
|
||||
this.form.prodJson = JSON.stringify(attrList) || null;
|
||||
|
||||
let functionList = [];
|
||||
if (
|
||||
this.$store.getters.functionList &&
|
||||
this.$store.getters.functionList.length > 0
|
||||
) {
|
||||
functionList = this.$store.getters.functionList;
|
||||
}
|
||||
|
||||
this.form.prodJson = JSON.stringify({
|
||||
properties:attrList,
|
||||
functions:functionList,
|
||||
events:[]
|
||||
}) || null;
|
||||
this.form.remark = JSON.stringify(groupList) || null;
|
||||
// }
|
||||
|
||||
|
|
|
|||
|
|
@ -1,53 +1,53 @@
|
|||
<template>
|
||||
<div class="device-run-starts-wrap">
|
||||
<div v-for="(doct, index) in cmdList" :key="index" class="cmd-list">
|
||||
<div class="cmd-list">
|
||||
<div class="cmd-title-wrap">
|
||||
<svg-icon
|
||||
icon-class="A_product1"
|
||||
style="margin-right: 2px; height: 20px; width: 20px"
|
||||
/>分组名称：
|
||||
<span class="cmd-title">{{ doct.cmdName }}</span>
|
||||
<span class="cmd-title">全部</span>
|
||||
</div>
|
||||
<div
|
||||
v-for="(doctItem, indexs) in doct.children"
|
||||
v-for="(item, indexs) in prodObj.properties"
|
||||
:key="indexs"
|
||||
class="param-item2"
|
||||
>
|
||||
<div class="title-top">
|
||||
<span class="name-wr">{{ doctItem.funName }}</span>
|
||||
<span class="type-wr" @click="handleShowData(doctItem)">查看</span>
|
||||
<span class="name-wr">{{ item.funName }}</span>
|
||||
<span class="type-wr" @click="handleShowData(item)">查看</span>
|
||||
</div>
|
||||
<div class="value-info">
|
||||
<div class="value-wrap">
|
||||
<span
|
||||
v-if="doctItem.dataFormatType =='ENUM'"
|
||||
v-if="item.dataFormatType =='ENUM'"
|
||||
class="val-span"
|
||||
v-text="doctItem.dataFormatObj[doctItem.lastValue]||doctItem.lastValue"
|
||||
v-text="item.dataFormatObj[item.lastValue]||item.lastValue"
|
||||
>
|
||||
</span>
|
||||
<span
|
||||
v-else-if="doctItem.dataFormatType =='TIME'"
|
||||
v-else-if="item.dataFormatType =='TIME'"
|
||||
class="val-span"
|
||||
v-text="formatTime(doctItem.lastValue)"
|
||||
v-text="formatTime(item.lastValue)"
|
||||
>
|
||||
</span>
|
||||
<span
|
||||
v-else
|
||||
class="val-span"
|
||||
v-text="
|
||||
doctItem.lastValue === null || doctItem.lastValue === undefined
|
||||
item.lastValue === null || item.lastValue === undefined
|
||||
? '--'
|
||||
: doctItem.lastValue
|
||||
: item.lastValue
|
||||
"
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="time-w">
|
||||
<span class="time-warp">{{ doctItem.unitName }}</span>
|
||||
<span class="time-warp">{{ item.unitName }}</span>
|
||||
<span
|
||||
class="time"
|
||||
v-text="doctItem.lastTime ? parseTime(doctItem.lastTime) : '--'"
|
||||
v-text="item.lastTime ? parseTime(item.lastTime) : '--'"
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -98,14 +98,55 @@ export default {
|
|||
socket_flag: true,
|
||||
dialogData: {},
|
||||
dialogShow: false,
|
||||
firstWsMassage: true
|
||||
firstWsMassage: true,
|
||||
prodObj:{
|
||||
properties:[],
|
||||
events:[],
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getProdObj();
|
||||
this.getCmdList();
|
||||
|
||||
// this.connection();
|
||||
},
|
||||
methods: {
|
||||
getProdObj(){
|
||||
let prodJson = {
|
||||
properties: [],
|
||||
events: []
|
||||
}
|
||||
try {
|
||||
prodJson = JSON.parse(this.deviceInfo.prodJson);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
if(prodJson.properties){
|
||||
let list = prodJson.properties.filter(item => item.show === true) || [];
|
||||
let properties = list.map(item => {
|
||||
if (item.dataFormat) {
|
||||
let dataFormat = item.dataFormat;
|
||||
item.dataFormatType = dataFormat.type;
|
||||
if (dataFormat.list && dataFormat.type === 'ENUM') {
|
||||
try {
|
||||
item.dataFormatObj = JSON.parse(dataFormat.list.replace(/\\/g, ''));
|
||||
} catch (e) {
|
||||
item.dataFormatObj = {};
|
||||
}
|
||||
}
|
||||
}
|
||||
return item;
|
||||
});
|
||||
console.log("properties",properties)
|
||||
this.$nextTick(()=>{
|
||||
this.$set(this.prodObj,'properties',properties)
|
||||
})
|
||||
}else{
|
||||
this.prodObj.properties=[];
|
||||
}
|
||||
this.prodObj.events=prodJson.events || [];
|
||||
},
|
||||
formatTime(date){
|
||||
// 检查时间戳长度
|
||||
if (date && date.toString().length === 10) {
|
||||
|
|
@ -151,47 +192,61 @@ export default {
|
|||
this.stompClient.onclose = this.socket_onclose;
|
||||
},
|
||||
socket_onmsg(evt) {
|
||||
console.log("evt.data",evt.data)
|
||||
this.setListData(evt.data);
|
||||
},
|
||||
setListData(data) {
|
||||
this.recursionSet(this.cmdList, JSON.parse(data));
|
||||
// this.recursionSet(this.cmdList, JSON.parse(data));
|
||||
this.recursionSet('', JSON.parse(data));
|
||||
this.firstWsMassage = false;
|
||||
this.$forceUpdate();
|
||||
},
|
||||
recursionSet(list, result) {
|
||||
for (var i = 0; i < list.length; i++) {
|
||||
// if (this.firstWsMassage) {
|
||||
// // result["cmd"] && list[i]['cmdKey'] === result["cmd"]
|
||||
// // if (result["cmd"] && list[i]['cmdKey'] === result["cmd"]) {
|
||||
// for (var v = 0; v < list[i].children.length; v++) {
|
||||
// if (
|
||||
// result.params[list[i].children[v]["funKey"]] !== null &&
|
||||
// result.params[list[i].children[v]["funKey"]] !== undefined
|
||||
// ) {
|
||||
// list[i].children[v]["lastValue"] =
|
||||
// result.params[list[i].children[v]["funKey"]];
|
||||
// list[i].children[v]["lastTime"] = result.params["timestamp"]
|
||||
// ? result.params["timestamp"]
|
||||
// : "";
|
||||
// }
|
||||
// }
|
||||
// // }
|
||||
// } else {
|
||||
if (result["cmd"] && list[i]["cmdKey"] === result["cmd"]) {
|
||||
console.log("list[i].children",list[i])
|
||||
for (var v = 0; v < list[i].children.length; v++) {
|
||||
if (
|
||||
result.params[list[i].children[v]["funKey"]] !== null &&
|
||||
result.params[list[i].children[v]["funKey"]] !== undefined
|
||||
) {
|
||||
list[i].children[v]["lastValue"] = result.params[list[i].children[v]["funKey"]];
|
||||
list[i].children[v]["lastTime"] = result.params["timestamp"] ? result.params["timestamp"] : "";
|
||||
}
|
||||
}
|
||||
break;
|
||||
if(result.type === "properties"){
|
||||
if(result.tags.device_key === this.deviceInfo.deviceKey){
|
||||
this.prodObj.properties = this.prodObj.properties.map(item => ({
|
||||
...item,
|
||||
...(item.funKey in result.properties && {
|
||||
lastValue: result.properties[item.funKey],
|
||||
lastTime: result.properties.timestamp
|
||||
})
|
||||
}));
|
||||
}
|
||||
// }
|
||||
}
|
||||
|
||||
// for (var i = 0; i < list.length; i++) {
|
||||
// // if (this.firstWsMassage) {
|
||||
// // // result["cmd"] && list[i]['cmdKey'] === result["cmd"]
|
||||
// // // if (result["cmd"] && list[i]['cmdKey'] === result["cmd"]) {
|
||||
// // for (var v = 0; v < list[i].children.length; v++) {
|
||||
// // if (
|
||||
// // result.params[list[i].children[v]["funKey"]] !== null &&
|
||||
// // result.params[list[i].children[v]["funKey"]] !== undefined
|
||||
// // ) {
|
||||
// // list[i].children[v]["lastValue"] =
|
||||
// // result.params[list[i].children[v]["funKey"]];
|
||||
// // list[i].children[v]["lastTime"] = result.params["timestamp"]
|
||||
// // ? result.params["timestamp"]
|
||||
// // : "";
|
||||
// // }
|
||||
// // }
|
||||
// // // }
|
||||
// // } else {
|
||||
// if (result["cmd"] && list[i]["cmdKey"] === result["cmd"]) {
|
||||
// console.log("list[i].children",list[i])
|
||||
// for (var v = 0; v < list[i].children.length; v++) {
|
||||
// if (
|
||||
// result.params[list[i].children[v]["funKey"]] !== null &&
|
||||
// result.params[list[i].children[v]["funKey"]] !== undefined
|
||||
// ) {
|
||||
// list[i].children[v]["lastValue"] = result.params[list[i].children[v]["funKey"]];
|
||||
// list[i].children[v]["lastTime"] = result.params["timestamp"] ? result.params["timestamp"] : "";
|
||||
// }
|
||||
// }
|
||||
// break;
|
||||
// }
|
||||
// // }
|
||||
// }
|
||||
},
|
||||
socket_onclose(e) {
|
||||
this.stompClient = null;
|
||||
|
|
@ -252,7 +307,6 @@ export default {
|
|||
cmdType: "1"
|
||||
};
|
||||
getDeviceCmdList(params).then(response => {
|
||||
// debugger
|
||||
this.cmdList = response.data;
|
||||
});
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,745 @@
|
|||
<template>
|
||||
<div class="attribute-form-view">
|
||||
<el-dialog
|
||||
:modal="false"
|
||||
:title="title"
|
||||
:visible.sync="visible"
|
||||
class="params-eldialog"
|
||||
top="5vh"
|
||||
width="800px">
|
||||
<el-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-position="top"
|
||||
style="padding: 10px"
|
||||
>
|
||||
<el-form-item label="标识:" prop="id">
|
||||
<el-input
|
||||
v-model="form.id"
|
||||
placeholder="请输入标识"
|
||||
@input="inputChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="参数名称:" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入参数名称" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="输入参数:" prop="inputs">
|
||||
<el-table :data="form.inputs" height="300px">
|
||||
<el-table-column align="left" label="标识" prop="id" />
|
||||
<el-table-column align="left" label="参数名称" prop="name" />
|
||||
<el-table-column align="center" label="是否必选" prop="required" >
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.expands.required ? '是' : '否'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="left" label="数据类型" prop="funDataType" >
|
||||
<template slot-scope="scope">
|
||||
<span>{{ funDataTypeOption[scope.row.funDataType] }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
class-name="small-padding fixed-width"
|
||||
label="操作"
|
||||
width="100px"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
type="text"
|
||||
@click="handleInputUpdate(scope.row, scope.$index)"
|
||||
>修改</el-button
|
||||
>
|
||||
|
||||
<el-button
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
type="text"
|
||||
@click="handleInputDelete(scope.row, scope.$index)"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-button
|
||||
icon="el-icon-plus"
|
||||
style="width: 100%;margin-top: 10px"
|
||||
type="info"
|
||||
@click="addInputParam"
|
||||
>新增输入参数</el-button>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="是否异步:" prop="async">
|
||||
<el-switch v-model="form.async"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="$emit('update:visible', false)">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 输入参数弹窗 -->
|
||||
<el-dialog
|
||||
:visible.sync="inputParamOpen"
|
||||
append-to-body
|
||||
class="params-eldialog"
|
||||
title="输入参数"
|
||||
width="600px"
|
||||
>
|
||||
<el-form
|
||||
ref="inputForm"
|
||||
:model="inputFormObj.form"
|
||||
:rules="inputFormRules"
|
||||
label-position="top"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="标识:" prop="id">
|
||||
<el-input v-model="inputFormObj.form.id" placeholder="请输入标识" />
|
||||
</el-form-item>
|
||||
<el-form-item label="参数名称:" prop="name">
|
||||
<el-input v-model="inputFormObj.form.name" placeholder="请输入参数名称" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="数据类型:" prop="funDataType">
|
||||
<el-select v-model="inputFormObj.form.funDataType" placeholder="请选择数据类型" style="width: 100%" @change="inputDataTypeChange">
|
||||
<el-option
|
||||
v-for="(dice, value) in funDataTypeOption"
|
||||
:key="value"
|
||||
:label="dice"
|
||||
:value="value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="inputFormObj.form.funDataType === 'enum'" label="枚举值:">
|
||||
<div class="enum-box">
|
||||
<div class="enum-header">
|
||||
<el-button size="mini" type="primary" @click="addEnumItem">添加枚举项</el-button>
|
||||
</div>
|
||||
<el-table :data="inputFormObj.form.valueType.elements" border style="width: 100%">
|
||||
<el-table-column align="center" label="序号" type="index" width="60"></el-table-column>
|
||||
<el-table-column label="值" prop="value" width="180">
|
||||
<template slot-scope="scope">
|
||||
<el-input
|
||||
v-model="scope.row.value"
|
||||
:class="{ 'is-error': scope.row.valueError }"
|
||||
placeholder="请输入值"
|
||||
@blur="validateEnumItem(scope.row, 'value', scope.$index)"
|
||||
></el-input>
|
||||
<div v-if="scope.row.valueError" class="el-form-item__error">值不能为空</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="描述" prop="text">
|
||||
<template slot-scope="scope">
|
||||
<el-input
|
||||
v-model="scope.row.text"
|
||||
:class="{ 'is-error': scope.row.textError }"
|
||||
placeholder="请输入描述"
|
||||
@blur="validateEnumItem(scope.row, 'text', scope.$index)"
|
||||
></el-input>
|
||||
<div v-if="scope.row.textError" class="el-form-item__error">描述不能为空</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="操作" width="80">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
circle
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
type="danger"
|
||||
@click="removeEnumItem(scope.$index)"
|
||||
></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否必选:" prop="required">
|
||||
<el-switch v-model="inputFormObj.form.expands.required" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitInputForm">确 定</el-button>
|
||||
<el-button @click="inputParamOpen = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters, mapState } from "vuex";
|
||||
import JsonEditor from "./jsonEditor";
|
||||
const funDataTypeOption = {
|
||||
int: 'int(整数型)',
|
||||
long: 'long(长整数型)',
|
||||
float: 'float(单精度浮点型)',
|
||||
double: 'double(双精度浮点数)',
|
||||
string: 'text(字符串)',
|
||||
boolean: 'boolean(布尔型)',
|
||||
date: 'date(时间型)',
|
||||
enum: 'enum(枚举)',
|
||||
array: 'array(数组)',
|
||||
object: 'object(结构体)',
|
||||
file: 'file(文件)',
|
||||
password: 'password(密码)',
|
||||
geoPoint: 'geoPoint(地理位置)',
|
||||
};
|
||||
const funRwTypeOption = {
|
||||
READWRITE: "可上报可下发",
|
||||
READ: "只上报",
|
||||
WRITE: "只下发",
|
||||
};
|
||||
|
||||
const funValidTypeOption = {
|
||||
ENUM: "枚举",
|
||||
RANGE: "范围",
|
||||
LENGTH: "长度",
|
||||
NOT: "不校验",
|
||||
};
|
||||
|
||||
const dataFormatTypeOption = {
|
||||
null: "无",
|
||||
ENUM: "枚举",
|
||||
TIME: "时间戳格式化为yyyy-mm-dd hh:MM:ss",
|
||||
};
|
||||
const defaultenumForm = {
|
||||
value: '',
|
||||
text: ''
|
||||
}
|
||||
|
||||
const defaultInputForm = {
|
||||
id: '',
|
||||
name: '',
|
||||
expands: {
|
||||
required:false
|
||||
},
|
||||
funDataType: 'int',
|
||||
valueType: {
|
||||
expands: {},
|
||||
type: 'int',
|
||||
elements: []
|
||||
}
|
||||
};
|
||||
|
||||
export default {
|
||||
name: "FunctionFormModel",
|
||||
components: { JsonEditor },
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '新增',
|
||||
},
|
||||
row: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
tempType: {
|
||||
type: String,
|
||||
default: "add",
|
||||
},
|
||||
paramIdx: {
|
||||
type: Number,
|
||||
default: -1
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["groupList"]),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
funDataTypeOption,
|
||||
funRwTypeOption,
|
||||
funValidTypeOption,
|
||||
dataFormatTypeOption,
|
||||
inputParamOpen: false,
|
||||
form: {
|
||||
id: '',
|
||||
name: '',
|
||||
expands: {},
|
||||
async: false,
|
||||
inputs: [],
|
||||
output: {},
|
||||
},
|
||||
inputFormObj: {
|
||||
isEdit: false,
|
||||
index: -1,
|
||||
form: JSON.parse(JSON.stringify(defaultInputForm))
|
||||
},
|
||||
inputFormRules: {
|
||||
id: [
|
||||
{ required: true, message: "标识不能为空", trigger: "blur" },
|
||||
{ pattern: /^[a-zA-Z0-9_\-]+$/,message: '标识只能由数字、字母、下划线、中划线组成',trigger: "blur"}
|
||||
],
|
||||
name: [
|
||||
{ required: true, message: "参数名称不能为空", trigger: "blur" }
|
||||
],
|
||||
funDataType: [
|
||||
{ required: true, message: "数据类型不能为空", trigger: "blur" }
|
||||
]
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" },
|
||||
],
|
||||
cmdKey: [{ required: true, message: "分组不能为空", trigger: "blur" }],
|
||||
id: [
|
||||
{ required: true, message: "标识不能为空", trigger: "blur" },
|
||||
{ pattern: /^[a-zA-Z0-9_\-]+$/,message: '标识只能由数字、字母、下划线、中划线组成',trigger: "blur"}
|
||||
],
|
||||
funDataType: [
|
||||
{ required: true, message: "数据类型不能为空", trigger: "blur" },
|
||||
],
|
||||
funRwType: [
|
||||
{ required: true, message: "传输类型不能为空", trigger: "blur" },
|
||||
],
|
||||
funValidType: [
|
||||
{ required: true, message: "校验方式不能为空", trigger: "blur" },
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
console.log("this.paramIdx", this.paramIdx, this.tempType);
|
||||
if (this.tempType === "update" && this.paramIdx >= 0) {
|
||||
this.form = JSON.parse(JSON.stringify(this.row));
|
||||
} else {
|
||||
// 新增时初始化表单
|
||||
this.form = {
|
||||
id: '',
|
||||
name: '',
|
||||
expands: {},
|
||||
async: false,
|
||||
inputs: [],
|
||||
output: {}
|
||||
};
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible(val) {
|
||||
if (val) {
|
||||
// 当弹窗打开时
|
||||
if (this.tempType === "update" && this.paramIdx >= 0) {
|
||||
// 编辑模式，复制传入的数据
|
||||
this.form = JSON.parse(JSON.stringify(this.row));
|
||||
} else {
|
||||
// 新增模式，重置表单数据
|
||||
this.form = {
|
||||
id: '',
|
||||
name: '',
|
||||
expands: {},
|
||||
async: false,
|
||||
inputs: [],
|
||||
output: {}
|
||||
};
|
||||
}
|
||||
|
||||
// 确保输入参数表单也被重置
|
||||
this.inputFormObj = {
|
||||
isEdit: false,
|
||||
index: -1,
|
||||
form: JSON.parse(JSON.stringify(defaultInputForm))
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submitForm() {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
// 新增和修改操作
|
||||
if (this.tempType === "add") {
|
||||
this.$store.dispatch("AddFunction", this.form).then(() => {
|
||||
this.$message.success("添加成功");
|
||||
this.$emit("ok");
|
||||
}).catch(err => {
|
||||
this.$message.error("添加失败：" + err);
|
||||
});
|
||||
} else if (this.tempType === "update") {
|
||||
this.$store.dispatch("EditFunction", {
|
||||
item: this.form,
|
||||
idx: this.paramIdx,
|
||||
}).then(() => {
|
||||
this.$message.success("修改成功");
|
||||
this.$emit("ok");
|
||||
}).catch(err => {
|
||||
this.$message.error("修改失败：" + err);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
inputDataTypeChange(val) {
|
||||
// 根据选择的数据类型设置valueType的type属性
|
||||
if (val === 'int') {
|
||||
this.inputFormObj.form.valueType.type = 'int';
|
||||
this.inputFormObj.form.valueType.elements = [];
|
||||
} else if (val === 'long') {
|
||||
this.inputFormObj.form.valueType.type = 'long';
|
||||
this.inputFormObj.form.valueType.elements = [];
|
||||
} else if (val === 'float') {
|
||||
this.inputFormObj.form.valueType.type = 'float';
|
||||
this.inputFormObj.form.valueType.elements = [];
|
||||
} else if (val === 'double') {
|
||||
this.inputFormObj.form.valueType.type = 'double';
|
||||
this.inputFormObj.form.valueType.elements = [];
|
||||
} else if (val === 'string') {
|
||||
this.inputFormObj.form.valueType.type = 'string';
|
||||
this.inputFormObj.form.valueType.elements = [];
|
||||
} else if (val === 'boolean') {
|
||||
this.inputFormObj.form.valueType.type = 'boolean';
|
||||
this.inputFormObj.form.valueType.elements = [];
|
||||
} else if (val === 'date') {
|
||||
this.inputFormObj.form.valueType.type = 'date';
|
||||
this.inputFormObj.form.valueType.elements = [];
|
||||
} else if (val === 'enum') {
|
||||
this.inputFormObj.form.valueType.type = 'enum';
|
||||
if (!this.inputFormObj.form.valueType.elements || this.inputFormObj.form.valueType.elements.length === 0) {
|
||||
this.inputFormObj.form.valueType.elements = [];
|
||||
// 默认添加一个空的枚举项
|
||||
this.addEnumItem();
|
||||
}
|
||||
} else if (val === 'array') {
|
||||
this.inputFormObj.form.valueType.type = 'array';
|
||||
this.inputFormObj.form.valueType.elements = [];
|
||||
} else if (val === 'object') {
|
||||
this.inputFormObj.form.valueType.type = 'object';
|
||||
this.inputFormObj.form.valueType.elements = [];
|
||||
} else if (val === 'file') {
|
||||
this.inputFormObj.form.valueType.type = 'file';
|
||||
this.inputFormObj.form.valueType.elements = [];
|
||||
} else if (val === 'password') {
|
||||
this.inputFormObj.form.valueType.type = 'password';
|
||||
this.inputFormObj.form.valueType.elements = [];
|
||||
} else if (val === 'geoPoint') {
|
||||
this.inputFormObj.form.valueType.type = 'geoPoint';
|
||||
this.inputFormObj.form.valueType.elements = [];
|
||||
}
|
||||
},
|
||||
|
||||
addEnumItem() {
|
||||
// 确保elements数组已初始化
|
||||
if (!this.inputFormObj.form.valueType.elements) {
|
||||
this.inputFormObj.form.valueType.elements = [];
|
||||
}
|
||||
|
||||
// 添加一个新的枚举项
|
||||
const newEnumItem = JSON.parse(JSON.stringify(defaultenumForm));
|
||||
newEnumItem.valueError = false;
|
||||
newEnumItem.textError = false;
|
||||
this.inputFormObj.form.valueType.elements.push(newEnumItem);
|
||||
},
|
||||
|
||||
validateEnumItem(item, field, index) {
|
||||
if (field === 'value') {
|
||||
item.valueError = !item.value;
|
||||
} else if (field === 'text') {
|
||||
item.textError = !item.text;
|
||||
}
|
||||
return !item.valueError && !item.textError;
|
||||
},
|
||||
|
||||
// 修改提交方法，增加枚举项验证
|
||||
submitInputForm() {
|
||||
// 验证表单
|
||||
this.$refs.inputForm.validate(valid => {
|
||||
if (valid) {
|
||||
// 如果是枚举类型，确保至少有一个枚举项
|
||||
if (this.inputFormObj.form.funDataType === 'enum' &&
|
||||
(!this.inputFormObj.form.valueType.elements ||
|
||||
this.inputFormObj.form.valueType.elements.length === 0)) {
|
||||
this.$message.warning('枚举类型至少需要一个枚举项');
|
||||
return;
|
||||
}
|
||||
|
||||
// 验证枚举项的值和描述不能为空
|
||||
if (this.inputFormObj.form.funDataType === 'enum') {
|
||||
let hasError = false;
|
||||
for (let i = 0; i < this.inputFormObj.form.valueType.elements.length; i++) {
|
||||
const item = this.inputFormObj.form.valueType.elements[i];
|
||||
item.valueError = !item.value;
|
||||
item.textError = !item.text;
|
||||
if (item.valueError || item.textError) {
|
||||
hasError = true;
|
||||
}
|
||||
}
|
||||
if (hasError) {
|
||||
this.$message.warning('请完善枚举项的值和描述');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// 如果是编辑模式
|
||||
if (this.inputFormObj.isEdit) {
|
||||
// 更新现有输入参数
|
||||
this.$set(this.form.inputs, this.inputFormObj.index, this.inputFormObj.form);
|
||||
} else {
|
||||
// 添加新的输入参数
|
||||
this.form.inputs.push(JSON.parse(JSON.stringify(this.inputFormObj.form)));
|
||||
}
|
||||
|
||||
// 关闭弹窗
|
||||
this.inputParamOpen = false;
|
||||
|
||||
// 提示成功
|
||||
this.$message.success(this.inputFormObj.isEdit ? '修改成功' : '添加成功');
|
||||
}
|
||||
});
|
||||
},
|
||||
addInputParam(){
|
||||
this.inputFormObj = {
|
||||
isEdit: false,
|
||||
index: -1,
|
||||
form: JSON.parse(JSON.stringify(defaultInputForm))
|
||||
};
|
||||
this.inputParamOpen = true;
|
||||
},
|
||||
/**
|
||||
* 修改输入参数
|
||||
* @param {Object} row 行数据
|
||||
* @param {Number} index 行索引
|
||||
*/
|
||||
handleInputUpdate(row, index) {
|
||||
this.inputFormObj = {
|
||||
isEdit: true,
|
||||
index: index,
|
||||
form: JSON.parse(JSON.stringify(row))
|
||||
};
|
||||
this.inputParamOpen = true;
|
||||
},
|
||||
|
||||
/**
|
||||
* 删除输入参数
|
||||
* @param {Object} row 行数据
|
||||
* @param {Number} index 行索引
|
||||
*/
|
||||
handleInputDelete(row, index) {
|
||||
this.$confirm('是否确认删除该输入参数?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.form.inputs.splice(index, 1);
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '删除成功!'
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '已取消删除'
|
||||
});
|
||||
});
|
||||
}, inputChange() {
|
||||
this.$forceUpdate();
|
||||
},
|
||||
cmdChange(val) {
|
||||
let newArr = this.groupList.filter((v) => {
|
||||
if (v["cmdKey"] === val) {
|
||||
return v["cmdType"];
|
||||
}
|
||||
});
|
||||
this.form.funRwType = newArr[0] || this.form.funRwType;
|
||||
},
|
||||
getParamIten(idx) {
|
||||
this.$store.dispatch("GetAttributeItem", idx).then((res) => {
|
||||
console.log("GetAttributeItem",res,idx);
|
||||
this.form = {show: true, sort: 100,dataFormat: {
|
||||
type: null,
|
||||
list: {}
|
||||
}, ...JSON.parse(JSON.stringify(res))};
|
||||
});
|
||||
},
|
||||
/** 提交验证 */
|
||||
submitForm: function () {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
// 新增和修改操作
|
||||
if (this.tempType === "add") {
|
||||
this.$store.dispatch("AddFunction", this.form).then(() => {
|
||||
this.$message.success("添加成功");
|
||||
this.$emit("ok");
|
||||
}).catch(err => {
|
||||
this.$message.error("添加失败：" + err);
|
||||
});
|
||||
} else if (this.tempType === "update") {
|
||||
this.$store.dispatch("EditFunction", {
|
||||
item: this.form,
|
||||
idx: this.paramIdx,
|
||||
}).then(() => {
|
||||
this.$message.success("修改成功");
|
||||
this.$emit("ok");
|
||||
}).catch(err => {
|
||||
this.$message.error("修改失败：" + err);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 回调 ok
|
||||
//数据类型值变化出发方法
|
||||
funDataTypeChange(val) {
|
||||
this.form.funValAcc = null;
|
||||
this.form.funValidType = "";
|
||||
},
|
||||
addJsonObj() {
|
||||
this.$refs["jsonEditors"].addHandel();
|
||||
},
|
||||
jsonEvent(data) {
|
||||
this.form.funObj = data;
|
||||
},
|
||||
addEnumJsonObj() {
|
||||
this.$refs["enumJsonEditors"].addHandel();
|
||||
},
|
||||
enumJsonEvent(data) {
|
||||
this.form.dataFormat.list = data;
|
||||
},
|
||||
// 校验方式发生变化的方法
|
||||
funValidTypeChange(val) {
|
||||
this.form.funValidType = val;
|
||||
this.form.funValMax = "";
|
||||
this.form.funValMin = "";
|
||||
this.form.funObj = "";
|
||||
if (val === "ENUM") {
|
||||
this.form.funObj = '{"0":""}';
|
||||
}
|
||||
this.$forceUpdate()
|
||||
},
|
||||
dataFormatTypeChange(val) {
|
||||
this.form.dataFormat.type = val;
|
||||
this.form.dataFormat.list = '';
|
||||
if (val === "ENUM") {
|
||||
this.form.dataFormat.list = '{"0":""}';
|
||||
}
|
||||
this.$forceUpdate()
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.attribute-form-view {
|
||||
.item-title-wrap {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
height: 30px;
|
||||
}
|
||||
.custom-wrap {
|
||||
border: 1px solid #d8d7d7;
|
||||
padding-top: 20px;
|
||||
margin-top: 10px;
|
||||
background: #f0f0f0;
|
||||
padding-right: 10px;
|
||||
.el-form-item {
|
||||
border-bottom: 1px dashed #bdbdbd;
|
||||
padding-bottom: 12px;
|
||||
margin-bottom: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.el-form-item--medium .el-form-item__label {
|
||||
width: 90px !important;
|
||||
}
|
||||
.el-form-item--medium .el-form-item__content {
|
||||
margin-left: 90px !important;
|
||||
}
|
||||
.enumTypeDiv {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
max-height: 200px;
|
||||
overflow: auto;
|
||||
.enum-item {
|
||||
width: 90%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.max-min-row {
|
||||
width: 90%;
|
||||
padding: 0;
|
||||
margin-left: 5% !important;
|
||||
margin-right: 0 !important;
|
||||
.el-form-item {
|
||||
border: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
.el-form-item--medium .el-form-item__content {
|
||||
margin-left: 0px !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.enum-box{
|
||||
border: 1px solid #d8d7d7;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
.enumTypeDiv{
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
.el-input-number {
|
||||
width: 100%;
|
||||
}
|
||||
.enumTypeDiv {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
max-height: 200px;
|
||||
overflow: auto;
|
||||
.enum-item {
|
||||
width: 90%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.max-min-row {
|
||||
width: 90%;
|
||||
padding: 0;
|
||||
margin-left: 5% !important;
|
||||
margin-right: 0 !important;
|
||||
.el-form-item {
|
||||
border: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
.el-form-item--medium .el-form-item__content {
|
||||
margin-left: 0px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.enum-box {
|
||||
border: 1px solid #d8d7d7;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.enum-header {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.is-error input {
|
||||
border-color: #F56C6C;
|
||||
}
|
||||
|
||||
.el-form-item__error {
|
||||
color: #F56C6C;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
padding-top: 4px;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,433 @@
|
|||
<template>
|
||||
<div class="app-container product-customparams-wrap">
|
||||
<el-row v-show="isOption" :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button icon="el-icon-plus" size="mini" type="primary" @click="handleAdd"
|
||||
>新增</el-button
|
||||
>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="functionList" height="300px">
|
||||
<el-table-column align="center" label="序号" type="index" width="75" />
|
||||
<el-table-column align="left" label="参数名称" prop="name" />
|
||||
<el-table-column align="left" label="标识符" prop="id" />
|
||||
<el-table-column align="left" label="是否异步" prop="async" >
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.async ? '是' : '否'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="left" label="输入参数数量" prop="inputs" >
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.inputs ? scope.row.inputs.length : 0 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-if="isOption"
|
||||
align="center"
|
||||
class-name="small-padding fixed-width"
|
||||
label="操作"
|
||||
width="180px"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
type="text"
|
||||
@click="handleUpdate(scope.row, scope.$index)"
|
||||
>修改</el-button
|
||||
>
|
||||
|
||||
<el-button
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
type="text"
|
||||
@click="handleDelete(scope.row, scope.$index)"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:total="total"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<function-form-model
|
||||
ref="functionForm"
|
||||
:paramIdx="functionFormObj.paramIdx"
|
||||
:row="functionFormObj.functionForm"
|
||||
:tempType="functionFormObj.modelType"
|
||||
:title="functionFormObj.modelType == 'add'?'新增':'编辑'"
|
||||
:visible.sync="functionOpen"
|
||||
@ok="handleFormOk"
|
||||
></function-form-model>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import JsonEditor from "./jsonEditor.vue";
|
||||
import ParamsJsonWrap from "./paramsJson";
|
||||
import functionFormModel from "@/views/profile/attribute/functionFormModel";
|
||||
const funDataTypeOption = {
|
||||
INT32: "整数型",
|
||||
FLOAT: "浮点型",
|
||||
TEXT: "字符串",
|
||||
BOOL: "布尔型",
|
||||
};
|
||||
const funRwTypeOption = {
|
||||
READWRITE: "可上报可下发",
|
||||
READ: "只上报",
|
||||
WRITE: "只下发",
|
||||
};
|
||||
|
||||
const funValidTypeOption = {
|
||||
ENUM: "枚举",
|
||||
RANGE: "范围",
|
||||
LENGTH: "长度",
|
||||
NOT: "不校验",
|
||||
};
|
||||
|
||||
export default {
|
||||
name: "FunctionView",
|
||||
components: {
|
||||
JsonEditor,
|
||||
ParamsJsonWrap,
|
||||
functionFormModel,
|
||||
},
|
||||
props: {
|
||||
sourceId: {
|
||||
type: [Number, String],
|
||||
default: "",
|
||||
},
|
||||
isOption: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
funDataTypeOption,
|
||||
funRwTypeOption,
|
||||
funValidTypeOption,
|
||||
functionOpen: false,
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 功能定义表格数据
|
||||
functionList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
attributeopen: false,
|
||||
// 查询参数
|
||||
queryParams: {},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
funName: [{ required: true, message: "参数名称不能为空", trigger: "blur" }],
|
||||
funKey: [{ required: true, message: "标识符不能为空", trigger: "blur" }],
|
||||
funDataType: [{ required: true, message: "数据类型不能为空", trigger: "blur" }],
|
||||
funRwType: [{ required: true, message: "传输类型不能为空", trigger: "blur" }],
|
||||
funValidType: [{ required: true, message: "校验方式不能为空", trigger: "blur" }],
|
||||
},
|
||||
baseModelId: "",
|
||||
tempType: "",
|
||||
functionFormObj:{
|
||||
modelType:'add',
|
||||
paramIdx:0,
|
||||
functionForm:{
|
||||
id: '',
|
||||
name: '',
|
||||
expands: {},
|
||||
async: false,
|
||||
inputs: [],
|
||||
output: {},
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
//数据类型值变化出发方法
|
||||
funDataTypeChange(val) {
|
||||
this.form.funValAcc = null;
|
||||
this.form.funValidType = "";
|
||||
},
|
||||
addJsonObj() {
|
||||
this.$refs["jsonEditors"].addHandel();
|
||||
},
|
||||
jsonEvent(data) {
|
||||
this.form.funObj = data;
|
||||
},
|
||||
// 校验方式发生变化的方法
|
||||
funValidTypeChange(val) {
|
||||
this.form.funValMax = "";
|
||||
this.form.funValMin = "";
|
||||
this.form.funObj = "";
|
||||
if (val === "ENUM") {
|
||||
this.form.funObj = '{"0":""}';
|
||||
}
|
||||
},
|
||||
/** 查询功能定义列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
this.functionList = []
|
||||
setTimeout(() => {
|
||||
this.$store.dispatch("GetFunctionList").then((res) => {
|
||||
console.log('功能列表数据', res)
|
||||
this.functionList = res
|
||||
this.$forceUpdate()
|
||||
this.loading = false
|
||||
});
|
||||
}, 50)
|
||||
},
|
||||
setList(list) {
|
||||
this.loading = true
|
||||
this.functionList = []
|
||||
setTimeout(() => {
|
||||
this.functionList = list
|
||||
this.$forceUpdate()
|
||||
this.loading = false
|
||||
}, 50)
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.attributeopen = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
sourceId: this.sourceId,
|
||||
mainId: undefined,
|
||||
funName: undefined,
|
||||
funKey: undefined,
|
||||
funDataType: undefined,
|
||||
funValAcc: undefined,
|
||||
funRwType: undefined,
|
||||
funValidType: undefined,
|
||||
funValMin: undefined,
|
||||
funValMax: undefined,
|
||||
funObj: {},
|
||||
unitName: "",
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
handleParams() {
|
||||
this.$emit('handleClick', { type: 'param', idx: 0 })
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.functionFormObj = {
|
||||
modelType: 'add',
|
||||
paramIdx: -1,
|
||||
functionForm: {
|
||||
id: '',
|
||||
name: '',
|
||||
expands: {},
|
||||
async: false,
|
||||
inputs: [],
|
||||
output: {}
|
||||
}
|
||||
};
|
||||
this.functionOpen = true;
|
||||
},
|
||||
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row, idx) {
|
||||
this.functionFormObj = {
|
||||
modelType: 'update',
|
||||
paramIdx: idx,
|
||||
functionForm: JSON.parse(JSON.stringify(row))
|
||||
};
|
||||
this.functionOpen = true;
|
||||
},
|
||||
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row, idx) {
|
||||
this.$confirm(
|
||||
"是否确认删除该功能?",
|
||||
"警告",
|
||||
{
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}
|
||||
).then(() => {
|
||||
// 执行删除数据
|
||||
this.$store.dispatch('DeleteFunction', idx).then(() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '删除成功!'
|
||||
});
|
||||
this.getList();
|
||||
}).catch(err => {
|
||||
this.$message.error('删除失败：' + err);
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '已取消删除'
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/** 表单确认回调 */
|
||||
handleFormOk() {
|
||||
this.functionOpen = false;
|
||||
this.getList();
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.product-customparams-wrap {
|
||||
.nl-dialog .el-dialog:not(.is-fullscreen) {
|
||||
margin-top: 3vh !important;
|
||||
}
|
||||
.eldialog-wrap {
|
||||
.el-dialog__header {
|
||||
border-bottom: 1px solid #bdbdbd;
|
||||
}
|
||||
.el-dialog__body {
|
||||
padding: 0px;
|
||||
}
|
||||
.form-button-div {
|
||||
margin-top: 20px;
|
||||
height: 60px;
|
||||
border-top: 1px solid #bdbdbd;
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
padding-top: 15px;
|
||||
|
||||
.el-button + .el-button {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.el-button {
|
||||
padding-top: 8px;
|
||||
}
|
||||
}
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
.el-input-number {
|
||||
width: 100%;
|
||||
}
|
||||
.item-title-wrap {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
height: 30px;
|
||||
}
|
||||
.custom-wrap {
|
||||
border: 1px solid #d8d7d7;
|
||||
padding-top: 20px;
|
||||
background: #f0f0f0;
|
||||
padding-right: 10px;
|
||||
.el-form-item {
|
||||
border-bottom: 1px dashed #bdbdbd;
|
||||
padding-bottom: 12px;
|
||||
margin-bottom: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.el-form-item--medium .el-form-item__label {
|
||||
width: 90px !important;
|
||||
}
|
||||
.el-form-item--medium .el-form-item__content {
|
||||
margin-left: 90px !important;
|
||||
}
|
||||
.enumTypeDiv {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
max-height: 200px;
|
||||
overflow: auto;
|
||||
.enum-item {
|
||||
width: 90%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.max-min-row {
|
||||
width: 90%;
|
||||
padding: 0;
|
||||
margin-left: 5% !important;
|
||||
margin-right: 0 !important;
|
||||
.el-form-item {
|
||||
border: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
.el-form-item--medium .el-form-item__content {
|
||||
margin-left: 0px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.params-eldialog {
|
||||
.el-dialog__header {
|
||||
|
||||
}
|
||||
.el-dialog__body {
|
||||
height: 100%;
|
||||
max-height: calc(100vh - 200px);
|
||||
overflow: auto;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.enumTypeDiv .enumTypeDiv::-webkit-scrollbar {
|
||||
/*滚动条整体样式*/
|
||||
width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
|
||||
height: 3px;
|
||||
}
|
||||
.enumTypeDiv::-webkit-scrollbar-thumb {
|
||||
/*滚动条里面小方块*/
|
||||
border-radius: 10px;
|
||||
box-shadow: inset 0 0 5px #9e9d9d;
|
||||
background: #ffffff;
|
||||
}
|
||||
.enumTypeDiv::-webkit-scrollbar-track {
|
||||
/*滚动条里面轨道*/
|
||||
box-shadow: inset 0 0 5px #f6f6f6;
|
||||
border-radius: 10px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.product-customparams-wrap .params-eldialog .el-dialog__body::-webkit-scrollbar {
|
||||
/*滚动条整体样式*/
|
||||
width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
|
||||
height: 5px;
|
||||
}
|
||||
.product-customparams-wrap .params-eldialog .el-dialog__body::-webkit-scrollbar-thumb {
|
||||
/*滚动条里面小方块*/
|
||||
border-radius: 10px;
|
||||
box-shadow: inset 0 0 5px #c4c4c4;
|
||||
background: #dededea6;
|
||||
}
|
||||
.product-customparams-wrap .params-eldialog .el-dialog__body::-webkit-scrollbar-track {
|
||||
/*滚动条里面轨道*/
|
||||
box-shadow: inset 0 0 5px #f6f6f6;
|
||||
border-radius: 10px;
|
||||
background: #ffffff;
|
||||
}
|
||||
.product-customparams-wrap .nl-dialog .form-button-div {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -21,16 +21,27 @@
|
|||
/>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="功能" name="function">
|
||||
<div class="tabs-body">
|
||||
<function-view
|
||||
v-if="activeName === 'function'"
|
||||
ref="functionref"
|
||||
:sourceId="sourceId"
|
||||
/>
|
||||
<!-- @handleClick="functionEvent"-->
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import attributeView from "./attributeView";
|
||||
import groupView from "./groupView";
|
||||
import FunctionView from "./functionView";
|
||||
// this.$store.state.tagsView.visitedViews
|
||||
// this.$store.dispatch("Login", this.loginForm)
|
||||
export default {
|
||||
components: { attributeView, groupView },
|
||||
components: { FunctionView, attributeView, groupView },
|
||||
props: {
|
||||
groupList: {
|
||||
type: String,
|
||||
|
|
@ -118,11 +129,49 @@ export default {
|
|||
break;
|
||||
}
|
||||
},
|
||||
functionEvent(data) {
|
||||
switch (data.type) {
|
||||
case "add":
|
||||
// 执行add
|
||||
this.$emit("handleEvent", {
|
||||
type: data.type,
|
||||
title: "新增参数",
|
||||
component: "functionForm",
|
||||
paramIdx: null,
|
||||
});
|
||||
break;
|
||||
|
||||
case "update":
|
||||
this.$emit("handleEvent", {
|
||||
type: data.type,
|
||||
title: "修改参数",
|
||||
component: "functionForm",
|
||||
paramIdx: data.idx,
|
||||
row:data.row
|
||||
});
|
||||
break;
|
||||
|
||||
case "list":
|
||||
this.$refs.functionref.getList();
|
||||
break;
|
||||
|
||||
case "param":
|
||||
this.$emit("handleEvent", {
|
||||
type: data.type,
|
||||
title: "物模型参数",
|
||||
component: "paramsJson",
|
||||
paramIdx: null,
|
||||
});
|
||||
break;
|
||||
}
|
||||
},
|
||||
forceUpdate(component) {
|
||||
if (component === "groupForm") {
|
||||
this.$refs.groupref && this.$refs.groupref.getList();
|
||||
} else if (component === "attributeForm") {
|
||||
this.$refs.attributeref && this.$refs.attributeref.getList();
|
||||
} else if (component === "functionForm") {
|
||||
this.$refs.functionref && this.$refs.functionref.getList();
|
||||
}
|
||||
},
|
||||
forceUpdateList(component) {
|
||||
|
|
@ -146,14 +195,22 @@ export default {
|
|||
},
|
||||
handleInitData() {
|
||||
let arttributeList = [],
|
||||
groupList = [];
|
||||
groupList = [],
|
||||
functionList = [];
|
||||
|
||||
try {
|
||||
arttributeList = JSON.parse(this.arttributeList);
|
||||
groupList = JSON.parse(this.groupList);
|
||||
let json = JSON.parse(this.arttributeList);
|
||||
if(json.properties){
|
||||
arttributeList = json.properties;
|
||||
functionList = json.functions;
|
||||
}else{
|
||||
arttributeList = json;
|
||||
arttributeList = [];
|
||||
}
|
||||
} catch (error) {
|
||||
arttributeList = [],
|
||||
arttributeList = [];
|
||||
groupList = [];
|
||||
functionList = [];
|
||||
console.log(error);
|
||||
}
|
||||
|
||||
|
|
@ -162,6 +219,7 @@ export default {
|
|||
this.$store.dispatch("InitAttributeAndGroup", {
|
||||
attrList: arttributeList,
|
||||
groupList: groupList,
|
||||
functionList:functionList
|
||||
});
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
<template>
|
||||
<div class="prod-params-json">
|
||||
<div class="left-cmds">
|
||||
<el-form :model="form.data.params" v-if="paramsList && paramsList.length > 0" ref="loginForm" label-width="120px">
|
||||
<el-form v-if="paramsList.properties && paramsList.properties.length > 0" ref="loginForm" :model="form.data.params" label-width="120px">
|
||||
<!--" 不校验的判断 -->
|
||||
<el-form-item
|
||||
v-for="paramsItem in paramsList"
|
||||
v-for="paramsItem in paramsList.properties"
|
||||
:key="paramsItem.funId"
|
||||
:label="paramsItem.funName + '：'"
|
||||
:prop="paramsItem.funKey"
|
||||
>
|
||||
<!-- :rules="retrunRules(paramsItem)" 验证 -->
|
||||
<el-select
|
||||
style="width: 85%;"
|
||||
v-model="form.data.params[paramsItem.funKey]"
|
||||
v-if="paramsItem.funValidType === 'ENUM'"
|
||||
v-model="form.data.params[paramsItem.funKey]"
|
||||
clearable
|
||||
style="width: 85%;"
|
||||
>
|
||||
<el-option
|
||||
v-for="(keys, valus) in strtoJson(paramsItem.funObj)"
|
||||
|
|
@ -24,25 +24,25 @@
|
|||
></el-option>
|
||||
</el-select>
|
||||
<el-input-number
|
||||
style="width: 85%;"
|
||||
v-model="form.data.params[paramsItem.funKey]"
|
||||
v-else-if="paramsItem.funValidType === 'RANGE' && (paramsItem.funDataType === 'FLOAT' || paramsItem.funDataType === 'INT32')"
|
||||
v-model="form.data.params[paramsItem.funKey]"
|
||||
:max="Number(paramsItem.funValMax) || 0"
|
||||
:min="Number(paramsItem.funValMin) || 0"
|
||||
clearable
|
||||
style="width: 85%;"
|
||||
></el-input-number>
|
||||
|
||||
<el-input-number
|
||||
style="width: 85%;"
|
||||
clearable
|
||||
v-model="form.data.params[paramsItem.funKey]"
|
||||
v-else-if="paramsItem.funValidType === 'NOT' && (paramsItem.funDataType === 'FLOAT' || paramsItem.funDataType === 'INT32')"
|
||||
v-model="form.data.params[paramsItem.funKey]"
|
||||
clearable
|
||||
style="width: 85%;"
|
||||
></el-input-number>
|
||||
<el-input
|
||||
clearable
|
||||
style="width: 85%;"
|
||||
v-else-if="paramsItem.funDataType === 'TEXT'"
|
||||
v-model="form.data.params[paramsItem.funKey]"
|
||||
clearable
|
||||
style="width: 85%;"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
<div class="option-wrap">
|
||||
<el-button type="text" @click="copeText">复制</el-button>
|
||||
</div>
|
||||
<pre>{{form}}</pre>
|
||||
<pre>{{paramsList}}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -69,8 +69,11 @@ export default {
|
|||
}
|
||||
},
|
||||
paramsList: {
|
||||
type: Array,
|
||||
default: []
|
||||
type: Object,
|
||||
default: {
|
||||
properties:[],
|
||||
functions:[],
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
|
@ -97,14 +100,16 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
copeText() {
|
||||
this.copeFu(JSON.stringify(this.form), this);
|
||||
this.copeFu(JSON.stringify(this.paramsList), this);
|
||||
},
|
||||
strtoJson(str) {
|
||||
return str ? JSON.parse(str.replace(/\\\"/g, '"')) : {};
|
||||
},
|
||||
handelList() {
|
||||
|
||||
var result = {};
|
||||
this.paramsList.forEach(v => {
|
||||
console.log("this.paramsList.properties",this.paramsList)
|
||||
this.paramsList.properties.forEach(v => {
|
||||
if (!result[v.funKey]) {
|
||||
result[v.funKey] = "";
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue