feat(型号、系列、设备): 型号、系列物模型新增功能参数配置,运行状态调整参数显示
This commit is contained in:
parent
9556c21440
commit
868fd9b46f
|
@ -17,6 +17,7 @@ const getters = {
|
||||||
userId: state => state.user.userId,
|
userId: state => state.user.userId,
|
||||||
attributeList: state => state.attribute.attributeList,
|
attributeList: state => state.attribute.attributeList,
|
||||||
groupList: state => state.attribute.groupList,
|
groupList: state => state.attribute.groupList,
|
||||||
|
functionList: state => state.attribute.functionList,
|
||||||
attributeInfo: state => state.permission.attribute
|
attributeInfo: state => state.permission.attribute
|
||||||
}
|
}
|
||||||
export default getters
|
export default getters
|
||||||
|
|
|
@ -4,7 +4,8 @@ import { Notification, MessageBox, Message } from 'element-ui'
|
||||||
const attribute = {
|
const attribute = {
|
||||||
state: {
|
state: {
|
||||||
attributeList: [],
|
attributeList: [],
|
||||||
groupList: []
|
groupList: [],
|
||||||
|
functionList: [],
|
||||||
},
|
},
|
||||||
|
|
||||||
mutations: {
|
mutations: {
|
||||||
|
@ -12,39 +13,59 @@ const attribute = {
|
||||||
// debugger
|
// debugger
|
||||||
state.attributeList = list
|
state.attributeList = list
|
||||||
},
|
},
|
||||||
SET_GROUP_LIST: (state, list) => {
|
|
||||||
state.groupList = list
|
|
||||||
},
|
|
||||||
PUSH_ATTRIBUTE: (state, item) => {
|
PUSH_ATTRIBUTE: (state, item) => {
|
||||||
state.attributeList.push(item)
|
state.attributeList.push(item)
|
||||||
},
|
},
|
||||||
PUSH_GROUP: (state, item) => {
|
|
||||||
state.groupList.push(item)
|
|
||||||
},
|
|
||||||
UPDATE_ATTRIBUTE: (state, {item, idx}) => {
|
UPDATE_ATTRIBUTE: (state, {item, idx}) => {
|
||||||
state.attributeList[idx] = item
|
state.attributeList[idx] = item
|
||||||
},
|
},
|
||||||
UPDATE_GROUP: (state, {item, idx}) => {
|
|
||||||
state.groupList[idx] = item
|
|
||||||
},
|
|
||||||
DELETE_ATTRIBUTE: (state, idx) => {
|
DELETE_ATTRIBUTE: (state, idx) => {
|
||||||
state.attributeList.splice(idx,1);
|
state.attributeList.splice(idx,1);
|
||||||
},
|
},
|
||||||
DELETE_GROUP: (state, idx) => {
|
|
||||||
state.groupList.splice(idx,1);
|
|
||||||
},
|
|
||||||
GET_ATTRIBUTE_ITEM: (state, idx) => {
|
GET_ATTRIBUTE_ITEM: (state, idx) => {
|
||||||
return state.attributeList[idx]
|
return state.attributeList[idx]
|
||||||
},
|
},
|
||||||
GET_GROUP_ITEM: (state, idx) => {
|
|
||||||
return state.groupList[idx]
|
|
||||||
},
|
|
||||||
GET_ATTRIBUTE_LIST: (state) => {
|
GET_ATTRIBUTE_LIST: (state) => {
|
||||||
return state.attributeList
|
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) => {
|
GET_GROUP_LIST: (state) => {
|
||||||
return state.groupList
|
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: {
|
actions: {
|
||||||
|
@ -59,6 +80,11 @@ const attribute = {
|
||||||
resolve(state.groupList)
|
resolve(state.groupList)
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
GetFunctionList({state}) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
resolve(state.functionList)
|
||||||
|
})
|
||||||
|
},
|
||||||
setAttribute({ commit, state }, data){
|
setAttribute({ commit, state }, data){
|
||||||
commit('SET_ATTRIBUTE_LIST', data)
|
commit('SET_ATTRIBUTE_LIST', data)
|
||||||
},
|
},
|
||||||
|
@ -66,6 +92,7 @@ const attribute = {
|
||||||
InitAttributeAndGroup({ commit, state }, data) {
|
InitAttributeAndGroup({ commit, state }, data) {
|
||||||
commit('SET_ATTRIBUTE_LIST', data.attrList)
|
commit('SET_ATTRIBUTE_LIST', data.attrList)
|
||||||
commit('SET_GROUP_LIST', data.groupList)
|
commit('SET_GROUP_LIST', data.groupList)
|
||||||
|
commit('SET_FUNCTIon_LIST', data.functionList)
|
||||||
console.log('res:', state, data)
|
console.log('res:', state, data)
|
||||||
},
|
},
|
||||||
// 新增 属性
|
// 新增 属性
|
||||||
|
@ -76,6 +103,10 @@ const attribute = {
|
||||||
AddGroup({ commit, state }, data) {
|
AddGroup({ commit, state }, data) {
|
||||||
commit('PUSH_GROUP', data)
|
commit('PUSH_GROUP', data)
|
||||||
},
|
},
|
||||||
|
// 新增 功能
|
||||||
|
AddFunction({ commit, state }, data) {
|
||||||
|
commit('PUSH_FUNCTION', data)
|
||||||
|
},
|
||||||
// 获取 属性 单个信息
|
// 获取 属性 单个信息
|
||||||
GetAttributeItem({ commit, state }, idx) {
|
GetAttributeItem({ commit, state }, idx) {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
|
@ -96,6 +127,10 @@ const attribute = {
|
||||||
EditGroup({ commit, state }, param) {
|
EditGroup({ commit, state }, param) {
|
||||||
commit('UPDATE_GROUP', param)
|
commit('UPDATE_GROUP', param)
|
||||||
},
|
},
|
||||||
|
// 修改 列表
|
||||||
|
EditFunction({ commit, state }, param) {
|
||||||
|
commit('UPDATE_FUNCTION', param)
|
||||||
|
},
|
||||||
// 删除分组 删除分组 判断分组是否有属性,有属性就不能删除
|
// 删除分组 删除分组 判断分组是否有属性,有属性就不能删除
|
||||||
DeleteGroup({ commit, state }, idx) {
|
DeleteGroup({ commit, state }, idx) {
|
||||||
let groupItem = state.groupList[idx];
|
let groupItem = state.groupList[idx];
|
||||||
|
@ -113,7 +148,12 @@ const attribute = {
|
||||||
// 删除属性
|
// 删除属性
|
||||||
DeleteAttribute({ commit, state }, idx) {
|
DeleteAttribute({ commit, state }, idx) {
|
||||||
commit('DELETE_ATTRIBUTE', 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.childOpt.paramIdx = data.paramIdx);
|
||||||
this.AttributeViewShow = true;
|
this.AttributeViewShow = true;
|
||||||
this.functionList = JSON.parse(
|
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;
|
this.componectVal = data.component;
|
||||||
},
|
},
|
||||||
|
@ -1032,8 +1035,19 @@ export default {
|
||||||
});
|
});
|
||||||
groupList.sort((a, b) => a.sort - b.sort);
|
groupList.sort((a, b) => a.sort - b.sort);
|
||||||
}
|
}
|
||||||
console.log(groupList, attrList);
|
let functionList = [];
|
||||||
this.form.prodJson = JSON.stringify(attrList) || null;
|
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;
|
this.form.remark = JSON.stringify(groupList) || null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -522,7 +522,20 @@ export default {
|
||||||
});
|
});
|
||||||
groupList.sort((a, b) => a.sort - b.sort);
|
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;
|
this.form.remark = JSON.stringify(groupList) || null;
|
||||||
// }
|
// }
|
||||||
|
|
||||||
|
|
|
@ -1,53 +1,53 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="device-run-starts-wrap">
|
<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">
|
<div class="cmd-title-wrap">
|
||||||
<svg-icon
|
<svg-icon
|
||||||
icon-class="A_product1"
|
icon-class="A_product1"
|
||||||
style="margin-right: 2px; height: 20px; width: 20px"
|
style="margin-right: 2px; height: 20px; width: 20px"
|
||||||
/>分组名称:
|
/>分组名称:
|
||||||
<span class="cmd-title">{{ doct.cmdName }}</span>
|
<span class="cmd-title">全部</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-for="(doctItem, indexs) in doct.children"
|
v-for="(item, indexs) in prodObj.properties"
|
||||||
:key="indexs"
|
:key="indexs"
|
||||||
class="param-item2"
|
class="param-item2"
|
||||||
>
|
>
|
||||||
<div class="title-top">
|
<div class="title-top">
|
||||||
<span class="name-wr">{{ doctItem.funName }}</span>
|
<span class="name-wr">{{ item.funName }}</span>
|
||||||
<span class="type-wr" @click="handleShowData(doctItem)">查看</span>
|
<span class="type-wr" @click="handleShowData(item)">查看</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="value-info">
|
<div class="value-info">
|
||||||
<div class="value-wrap">
|
<div class="value-wrap">
|
||||||
<span
|
<span
|
||||||
v-if="doctItem.dataFormatType =='ENUM'"
|
v-if="item.dataFormatType =='ENUM'"
|
||||||
class="val-span"
|
class="val-span"
|
||||||
v-text="doctItem.dataFormatObj[doctItem.lastValue]||doctItem.lastValue"
|
v-text="item.dataFormatObj[item.lastValue]||item.lastValue"
|
||||||
>
|
>
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
v-else-if="doctItem.dataFormatType =='TIME'"
|
v-else-if="item.dataFormatType =='TIME'"
|
||||||
class="val-span"
|
class="val-span"
|
||||||
v-text="formatTime(doctItem.lastValue)"
|
v-text="formatTime(item.lastValue)"
|
||||||
>
|
>
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
v-else
|
v-else
|
||||||
class="val-span"
|
class="val-span"
|
||||||
v-text="
|
v-text="
|
||||||
doctItem.lastValue === null || doctItem.lastValue === undefined
|
item.lastValue === null || item.lastValue === undefined
|
||||||
? '--'
|
? '--'
|
||||||
: doctItem.lastValue
|
: item.lastValue
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="time-w">
|
<div class="time-w">
|
||||||
<span class="time-warp">{{ doctItem.unitName }}</span>
|
<span class="time-warp">{{ item.unitName }}</span>
|
||||||
<span
|
<span
|
||||||
class="time"
|
class="time"
|
||||||
v-text="doctItem.lastTime ? parseTime(doctItem.lastTime) : '--'"
|
v-text="item.lastTime ? parseTime(item.lastTime) : '--'"
|
||||||
></span>
|
></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -98,14 +98,55 @@ export default {
|
||||||
socket_flag: true,
|
socket_flag: true,
|
||||||
dialogData: {},
|
dialogData: {},
|
||||||
dialogShow: false,
|
dialogShow: false,
|
||||||
firstWsMassage: true
|
firstWsMassage: true,
|
||||||
|
prodObj:{
|
||||||
|
properties:[],
|
||||||
|
events:[],
|
||||||
|
}
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
this.getProdObj();
|
||||||
this.getCmdList();
|
this.getCmdList();
|
||||||
|
|
||||||
// this.connection();
|
// this.connection();
|
||||||
},
|
},
|
||||||
methods: {
|
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){
|
formatTime(date){
|
||||||
// 检查时间戳长度
|
// 检查时间戳长度
|
||||||
if (date && date.toString().length === 10) {
|
if (date && date.toString().length === 10) {
|
||||||
|
@ -151,47 +192,61 @@ export default {
|
||||||
this.stompClient.onclose = this.socket_onclose;
|
this.stompClient.onclose = this.socket_onclose;
|
||||||
},
|
},
|
||||||
socket_onmsg(evt) {
|
socket_onmsg(evt) {
|
||||||
|
console.log("evt.data",evt.data)
|
||||||
this.setListData(evt.data);
|
this.setListData(evt.data);
|
||||||
},
|
},
|
||||||
setListData(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.firstWsMassage = false;
|
||||||
this.$forceUpdate();
|
this.$forceUpdate();
|
||||||
},
|
},
|
||||||
recursionSet(list, result) {
|
recursionSet(list, result) {
|
||||||
for (var i = 0; i < list.length; i++) {
|
if(result.type === "properties"){
|
||||||
// if (this.firstWsMassage) {
|
if(result.tags.device_key === this.deviceInfo.deviceKey){
|
||||||
// // result["cmd"] && list[i]['cmdKey'] === result["cmd"]
|
this.prodObj.properties = this.prodObj.properties.map(item => ({
|
||||||
// // if (result["cmd"] && list[i]['cmdKey'] === result["cmd"]) {
|
...item,
|
||||||
// for (var v = 0; v < list[i].children.length; v++) {
|
...(item.funKey in result.properties && {
|
||||||
// if (
|
lastValue: result.properties[item.funKey],
|
||||||
// result.params[list[i].children[v]["funKey"]] !== null &&
|
lastTime: result.properties.timestamp
|
||||||
// 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;
|
|
||||||
}
|
}
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 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) {
|
socket_onclose(e) {
|
||||||
this.stompClient = null;
|
this.stompClient = null;
|
||||||
|
@ -252,7 +307,6 @@ export default {
|
||||||
cmdType: "1"
|
cmdType: "1"
|
||||||
};
|
};
|
||||||
getDeviceCmdList(params).then(response => {
|
getDeviceCmdList(params).then(response => {
|
||||||
// debugger
|
|
||||||
this.cmdList = response.data;
|
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>
|
</div>
|
||||||
</el-tab-pane>
|
</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>
|
</el-tabs>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import attributeView from "./attributeView";
|
import attributeView from "./attributeView";
|
||||||
import groupView from "./groupView";
|
import groupView from "./groupView";
|
||||||
|
import FunctionView from "./functionView";
|
||||||
// this.$store.state.tagsView.visitedViews
|
// this.$store.state.tagsView.visitedViews
|
||||||
// this.$store.dispatch("Login", this.loginForm)
|
// this.$store.dispatch("Login", this.loginForm)
|
||||||
export default {
|
export default {
|
||||||
components: { attributeView, groupView },
|
components: { FunctionView, attributeView, groupView },
|
||||||
props: {
|
props: {
|
||||||
groupList: {
|
groupList: {
|
||||||
type: String,
|
type: String,
|
||||||
|
@ -118,11 +129,49 @@ export default {
|
||||||
break;
|
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) {
|
forceUpdate(component) {
|
||||||
if (component === "groupForm") {
|
if (component === "groupForm") {
|
||||||
this.$refs.groupref && this.$refs.groupref.getList();
|
this.$refs.groupref && this.$refs.groupref.getList();
|
||||||
} else if (component === "attributeForm") {
|
} else if (component === "attributeForm") {
|
||||||
this.$refs.attributeref && this.$refs.attributeref.getList();
|
this.$refs.attributeref && this.$refs.attributeref.getList();
|
||||||
|
} else if (component === "functionForm") {
|
||||||
|
this.$refs.functionref && this.$refs.functionref.getList();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
forceUpdateList(component) {
|
forceUpdateList(component) {
|
||||||
|
@ -146,14 +195,22 @@ export default {
|
||||||
},
|
},
|
||||||
handleInitData() {
|
handleInitData() {
|
||||||
let arttributeList = [],
|
let arttributeList = [],
|
||||||
groupList = [];
|
groupList = [],
|
||||||
|
functionList = [];
|
||||||
|
|
||||||
try {
|
try {
|
||||||
arttributeList = JSON.parse(this.arttributeList);
|
let json = JSON.parse(this.arttributeList);
|
||||||
groupList = JSON.parse(this.groupList);
|
if(json.properties){
|
||||||
|
arttributeList = json.properties;
|
||||||
|
functionList = json.functions;
|
||||||
|
}else{
|
||||||
|
arttributeList = json;
|
||||||
|
arttributeList = [];
|
||||||
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
arttributeList = [],
|
arttributeList = [];
|
||||||
groupList = [];
|
groupList = [];
|
||||||
|
functionList = [];
|
||||||
console.log(error);
|
console.log(error);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -162,6 +219,7 @@ export default {
|
||||||
this.$store.dispatch("InitAttributeAndGroup", {
|
this.$store.dispatch("InitAttributeAndGroup", {
|
||||||
attrList: arttributeList,
|
attrList: arttributeList,
|
||||||
groupList: groupList,
|
groupList: groupList,
|
||||||
|
functionList:functionList
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
@ -1,20 +1,20 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="prod-params-json">
|
<div class="prod-params-json">
|
||||||
<div class="left-cmds">
|
<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
|
<el-form-item
|
||||||
v-for="paramsItem in paramsList"
|
v-for="paramsItem in paramsList.properties"
|
||||||
:key="paramsItem.funId"
|
:key="paramsItem.funId"
|
||||||
:label="paramsItem.funName + ':'"
|
:label="paramsItem.funName + ':'"
|
||||||
:prop="paramsItem.funKey"
|
:prop="paramsItem.funKey"
|
||||||
>
|
>
|
||||||
<!-- :rules="retrunRules(paramsItem)" 验证 -->
|
<!-- :rules="retrunRules(paramsItem)" 验证 -->
|
||||||
<el-select
|
<el-select
|
||||||
style="width: 85%;"
|
|
||||||
v-model="form.data.params[paramsItem.funKey]"
|
|
||||||
v-if="paramsItem.funValidType === 'ENUM'"
|
v-if="paramsItem.funValidType === 'ENUM'"
|
||||||
|
v-model="form.data.params[paramsItem.funKey]"
|
||||||
clearable
|
clearable
|
||||||
|
style="width: 85%;"
|
||||||
>
|
>
|
||||||
<el-option
|
<el-option
|
||||||
v-for="(keys, valus) in strtoJson(paramsItem.funObj)"
|
v-for="(keys, valus) in strtoJson(paramsItem.funObj)"
|
||||||
|
@ -24,25 +24,25 @@
|
||||||
></el-option>
|
></el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
<el-input-number
|
<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-else-if="paramsItem.funValidType === 'RANGE' && (paramsItem.funDataType === 'FLOAT' || paramsItem.funDataType === 'INT32')"
|
||||||
|
v-model="form.data.params[paramsItem.funKey]"
|
||||||
:max="Number(paramsItem.funValMax) || 0"
|
:max="Number(paramsItem.funValMax) || 0"
|
||||||
:min="Number(paramsItem.funValMin) || 0"
|
:min="Number(paramsItem.funValMin) || 0"
|
||||||
clearable
|
clearable
|
||||||
|
style="width: 85%;"
|
||||||
></el-input-number>
|
></el-input-number>
|
||||||
|
|
||||||
<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-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-number>
|
||||||
<el-input
|
<el-input
|
||||||
clearable
|
|
||||||
style="width: 85%;"
|
|
||||||
v-else-if="paramsItem.funDataType === 'TEXT'"
|
v-else-if="paramsItem.funDataType === 'TEXT'"
|
||||||
v-model="form.data.params[paramsItem.funKey]"
|
v-model="form.data.params[paramsItem.funKey]"
|
||||||
|
clearable
|
||||||
|
style="width: 85%;"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
|
@ -52,7 +52,7 @@
|
||||||
<div class="option-wrap">
|
<div class="option-wrap">
|
||||||
<el-button type="text" @click="copeText">复制</el-button>
|
<el-button type="text" @click="copeText">复制</el-button>
|
||||||
</div>
|
</div>
|
||||||
<pre>{{form}}</pre>
|
<pre>{{paramsList}}</pre>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -69,8 +69,11 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
paramsList: {
|
paramsList: {
|
||||||
type: Array,
|
type: Object,
|
||||||
default: []
|
default: {
|
||||||
|
properties:[],
|
||||||
|
functions:[],
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
|
@ -97,14 +100,16 @@ export default {
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
copeText() {
|
copeText() {
|
||||||
this.copeFu(JSON.stringify(this.form), this);
|
this.copeFu(JSON.stringify(this.paramsList), this);
|
||||||
},
|
},
|
||||||
strtoJson(str) {
|
strtoJson(str) {
|
||||||
return str ? JSON.parse(str.replace(/\\\"/g, '"')) : {};
|
return str ? JSON.parse(str.replace(/\\\"/g, '"')) : {};
|
||||||
},
|
},
|
||||||
handelList() {
|
handelList() {
|
||||||
|
|
||||||
var result = {};
|
var result = {};
|
||||||
this.paramsList.forEach(v => {
|
console.log("this.paramsList.properties",this.paramsList)
|
||||||
|
this.paramsList.properties.forEach(v => {
|
||||||
if (!result[v.funKey]) {
|
if (!result[v.funKey]) {
|
||||||
result[v.funKey] = "";
|
result[v.funKey] = "";
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue