feat(iot): 添加设备功能控制接口、物模型添加事件配置
- 新增 setFunctionControl 函数用于设备功能控制 - 优化型号列表展示，增加型号名称的链接 - 物模型添加事件配置 - 优化数据加载和提交逻辑
This commit is contained in:
fhysy
parent
c1ab37bfc1
commit
e2ee83dae8
|
|
@ -265,3 +265,11 @@ export function deviceSendTimingConfig(data) {
|
|||
data: data
|
||||
});
|
||||
}
|
||||
// 功能下发
|
||||
export function setFunctionControl(data) {
|
||||
return request({
|
||||
url: "/iot/dev/opt/function",
|
||||
method: "post",
|
||||
data: data
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -333,7 +333,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { updateDevice, resetPssword, setSwitchControl } from "@/api/iot/device";
|
||||
import { updateDevice, resetPssword, setSwitchControl, setFunctionControl } from "@/api/iot/device";
|
||||
import DialogTemplate from "@/components/DialogTemplate";
|
||||
import DeviceAlarmConfig from "@/views/profile/DeviceAlarmConfig/DeviceAlarmConfig";
|
||||
import DeviceTimingConfig from "@/views/profile/DeviceTimingConfig/DeviceTimingConfig";
|
||||
|
|
@ -589,40 +589,75 @@ export default {
|
|||
processedData[key] = value;
|
||||
}
|
||||
}
|
||||
|
||||
// 模拟API调用
|
||||
setTimeout(() => {
|
||||
let params = {
|
||||
input: processedData,
|
||||
deviceKey: this.deviceInfo.deviceKey,
|
||||
funcId:item.id
|
||||
};
|
||||
setFunctionControl(params).then(response => {
|
||||
console.log("下发事件", response);
|
||||
this.loading = false;
|
||||
if (response?.code == 200) {
|
||||
this.msgSuccess("添加成功");
|
||||
// 添加执行结果
|
||||
const result = {
|
||||
time: new Date().toLocaleString(),
|
||||
functionName: item.name,
|
||||
success: Math.random() > 0.2, // 模拟成功/失败
|
||||
data: JSON.stringify(processedData, null, 2)
|
||||
};
|
||||
|
||||
// 添加执行结果
|
||||
const result = {
|
||||
time: new Date().toLocaleString(),
|
||||
functionName: item.name,
|
||||
success: Math.random() > 0.2, // 模拟成功/失败
|
||||
data: JSON.stringify(processedData, null, 2)
|
||||
};
|
||||
this.executionResults.unshift(result);
|
||||
|
||||
this.executionResults.unshift(result);
|
||||
|
||||
// 控制结果列表最大数量
|
||||
if (this.executionResults.length > 20) {
|
||||
this.executionResults.pop();
|
||||
}
|
||||
|
||||
// 显示执行结果提示
|
||||
if (result.success) {
|
||||
this.$message.success("功能执行成功");
|
||||
// 控制结果列表最大数量
|
||||
if (this.executionResults.length > 20) {
|
||||
this.executionResults.pop();
|
||||
}
|
||||
// 滚动到顶部
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.resultContent) {
|
||||
this.$refs.resultContent.scrollTop = 0;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.$message.error("功能执行失败");
|
||||
}
|
||||
|
||||
// 滚动到顶部
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.resultContent) {
|
||||
this.$refs.resultContent.scrollTop = 0;
|
||||
}
|
||||
});
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
// 模拟API调用
|
||||
// setTimeout(() => {
|
||||
// this.loading = false;
|
||||
//
|
||||
// // 添加执行结果
|
||||
// const result = {
|
||||
// time: new Date().toLocaleString(),
|
||||
// functionName: item.name,
|
||||
// success: Math.random() > 0.2, // 模拟成功/失败
|
||||
// data: JSON.stringify(processedData, null, 2)
|
||||
// };
|
||||
//
|
||||
// this.executionResults.unshift(result);
|
||||
//
|
||||
// // 控制结果列表最大数量
|
||||
// if (this.executionResults.length > 20) {
|
||||
// this.executionResults.pop();
|
||||
// }
|
||||
//
|
||||
// // 显示执行结果提示
|
||||
// if (result.success) {
|
||||
// this.$message.success("功能执行成功");
|
||||
// } else {
|
||||
// this.$message.error("功能执行失败");
|
||||
// }
|
||||
//
|
||||
// // 滚动到顶部
|
||||
// this.$nextTick(() => {
|
||||
// if (this.$refs.resultContent) {
|
||||
// this.$refs.resultContent.scrollTop = 0;
|
||||
// }
|
||||
// });
|
||||
// }, 1000);
|
||||
}
|
||||
});
|
||||
}else{
|
||||
|
|
@ -674,14 +709,14 @@ export default {
|
|||
if (this.currentFunction && this.formData[this.currentFunction.id]) {
|
||||
// 处理表单数据，确保对象类型正确解析
|
||||
const processedData = {};
|
||||
|
||||
|
||||
// 复制表单数据
|
||||
for (const key in this.formData[this.currentFunction.id]) {
|
||||
const value = this.formData[this.currentFunction.id][key];
|
||||
|
||||
|
||||
// 查找对应的输入定义
|
||||
const inputDef = this.currentFunction.inputs.find(input => input.id === key);
|
||||
|
||||
|
||||
// 如果是对象类型且值是字符串，尝试解析为对象
|
||||
if (inputDef && inputDef.valueType.type === 'object' && typeof value === 'string') {
|
||||
try {
|
||||
|
|
|
|||
|
|
@ -57,140 +57,146 @@
|
|||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="main-content-card">
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
v-hasPermi="['iot:model:add']"
|
||||
icon="el-icon-plus"
|
||||
plain
|
||||
size="mini"
|
||||
type="primary"
|
||||
@click="handleAdd"
|
||||
>新增</el-button
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
v-hasPermi="['iot:model:add']"
|
||||
icon="el-icon-plus"
|
||||
plain
|
||||
size="mini"
|
||||
type="primary"
|
||||
@click="handleAdd"
|
||||
>新增</el-button
|
||||
>
|
||||
</el-col>
|
||||
<right-toolbar
|
||||
:showSearch.sync="showSearch"
|
||||
@queryTable="getList"
|
||||
></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="modelList"
|
||||
:default-sort="{ prop: 'createTime', order: 'descending' }"
|
||||
@sort-change="sortChange"
|
||||
>
|
||||
<el-table-column
|
||||
:index="indexFormatter"
|
||||
align="center"
|
||||
label="序号"
|
||||
type="index"
|
||||
width="80px"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="型号名称"
|
||||
prop="modelName"
|
||||
width="200px"
|
||||
>
|
||||
</el-col>
|
||||
<right-toolbar
|
||||
:showSearch.sync="showSearch"
|
||||
@queryTable="getList"
|
||||
></right-toolbar>
|
||||
</el-row>
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click="handleUpdate(scope.row)">{{
|
||||
scope.row.modelName
|
||||
}}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="厂商名称"
|
||||
prop="vendorName"
|
||||
width="200px"
|
||||
/>
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="产品PK"
|
||||
prop="prodKey"
|
||||
width="200px"
|
||||
/>
|
||||
<el-table-column align="left" label="产品密钥" prop="prodSecret">
|
||||
<template slot-scope="scope">
|
||||
<span :title="scope.row.prodSecret" class="lay-table-textarea">
|
||||
{{ scope.row.prodSecret }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="modelList"
|
||||
:default-sort="{ prop: 'createTime', order: 'descending' }"
|
||||
@sort-change="sortChange"
|
||||
>
|
||||
<el-table-column
|
||||
:index="indexFormatter"
|
||||
align="center"
|
||||
label="序号"
|
||||
type="index"
|
||||
width="80px"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="型号名称"
|
||||
prop="modelName"
|
||||
width="200px"
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="设备类型"
|
||||
prop="deviceTypeName"
|
||||
width="120px"
|
||||
>
|
||||
<!-- <template slot-scope="scope">-->
|
||||
<!-- <span v-text="deviceTypeList[scope.row.deviceType]"></span>-->
|
||||
<!-- </template>-->
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="协议类型"
|
||||
prop="protocolType"
|
||||
width="120px"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-text="protocolTypeOpt[scope.row.protocolType]"></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="设备状态"
|
||||
prop="modelStatus"
|
||||
width="100px"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-if="scope.row.modelStatus === '0'" type="success"
|
||||
>启用</el-tag
|
||||
>
|
||||
<el-tag v-else type="danger">禁用</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
align="center"
|
||||
label=" 创建时间"
|
||||
prop="createTime"
|
||||
sortable="custom"
|
||||
width="150px"
|
||||
/>
|
||||
<el-table-column
|
||||
align="center"
|
||||
class-name="small-padding fixed-width"
|
||||
label="操作"
|
||||
width="160px"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
v-hasPermi="['iot:model:edit']"
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
type="text"
|
||||
@click="handleUpdate(scope.row)"
|
||||
>修改</el-button
|
||||
>
|
||||
<el-button
|
||||
v-hasPermi="['iot:model:remove']"
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
type="text"
|
||||
@click="handleDelete(scope.row)"
|
||||
>删除</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"
|
||||
/>
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="厂商名称"
|
||||
prop="vendorName"
|
||||
width="200px"
|
||||
/>
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="产品PK"
|
||||
prop="prodKey"
|
||||
width="200px"
|
||||
/>
|
||||
<el-table-column align="left" label="产品密钥" prop="prodSecret">
|
||||
<template slot-scope="scope">
|
||||
<span :title="scope.row.prodSecret" class="lay-table-textarea">
|
||||
{{ scope.row.prodSecret }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="设备类型"
|
||||
prop="deviceTypeName"
|
||||
width="120px"
|
||||
>
|
||||
<!-- <template slot-scope="scope">-->
|
||||
<!-- <span v-text="deviceTypeList[scope.row.deviceType]"></span>-->
|
||||
<!-- </template>-->
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="协议类型"
|
||||
prop="protocolType"
|
||||
width="120px"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-text="protocolTypeOpt[scope.row.protocolType]"></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="设备状态"
|
||||
prop="modelStatus"
|
||||
width="100px"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-if="scope.row.modelStatus === '0'" type="success"
|
||||
>启用</el-tag
|
||||
>
|
||||
<el-tag v-else type="danger">禁用</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
align="center"
|
||||
label=" 创建时间"
|
||||
prop="createTime"
|
||||
sortable="custom"
|
||||
width="150px"
|
||||
/>
|
||||
<el-table-column
|
||||
align="center"
|
||||
class-name="small-padding fixed-width"
|
||||
label="操作"
|
||||
width="160px"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
v-hasPermi="['iot:model:edit']"
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
type="text"
|
||||
@click="handleUpdate(scope.row)"
|
||||
>修改</el-button
|
||||
>
|
||||
<el-button
|
||||
v-hasPermi="['iot:model:remove']"
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
type="text"
|
||||
@click="handleDelete(scope.row)"
|
||||
>删除</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"
|
||||
/>
|
||||
</div>
|
||||
<!-- 添加或修改型号对话框 -->
|
||||
<dialog-template
|
||||
|
|
@ -199,7 +205,13 @@
|
|||
width="1000px"
|
||||
@close="open = false"
|
||||
>
|
||||
<el-form ref="form" slot="dialog-center" :model="form" :rules="rules" label-width="100px">
|
||||
<el-form
|
||||
ref="form"
|
||||
slot="dialog-center"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="厂商：" prop="vendorId">
|
||||
|
|
@ -232,7 +244,11 @@
|
|||
<el-input
|
||||
v-if="form.protocolType === 'OFFICIAL'"
|
||||
v-model="form.prodKey"
|
||||
:disabled="form.modelId !== undefined && form.modelId !== null && form.modelId !== ''"
|
||||
:disabled="
|
||||
form.modelId !== undefined &&
|
||||
form.modelId !== null &&
|
||||
form.modelId !== ''
|
||||
"
|
||||
placeholder="请填写产品PK"
|
||||
></el-input>
|
||||
<el-input
|
||||
|
|
@ -250,16 +266,30 @@
|
|||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" style="
|
||||
<el-col
|
||||
:span="24"
|
||||
style="
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
height: 0;
|
||||
z-index: 99;
|
||||
position: relative;
|
||||
top: -10px;"
|
||||
>
|
||||
<el-button
|
||||
icon="el-icon-s-platform"
|
||||
style="height: 40px;"
|
||||
type="primary"
|
||||
@click="openModelDialog"
|
||||
>物模型</el-button
|
||||
>
|
||||
<el-button
|
||||
icon="el-icon-menu"
|
||||
style="height: 40px;"
|
||||
type="primary"
|
||||
@click="openTableSelectScriesDialog"
|
||||
>选择型号系列</el-button
|
||||
>
|
||||
<el-button icon="el-icon-s-platform" style="height: 40px;" type="primary" @click="openModelDialog">物模型</el-button>
|
||||
<el-button icon="el-icon-menu" style="height: 40px;" type="primary" @click="openTableSelectScriesDialog">选择型号系列</el-button>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24">
|
||||
|
|
@ -372,7 +402,7 @@
|
|||
:other="{
|
||||
action: '',
|
||||
prodPK: form.prodKey,
|
||||
cmdKey: '',
|
||||
cmdKey: ''
|
||||
}"
|
||||
:paramIdx="childOpt.paramIdx"
|
||||
:paramsList="functionList"
|
||||
|
|
@ -408,7 +438,7 @@
|
|||
:other="{
|
||||
action: '',
|
||||
prodPK: this.form.prodKey,
|
||||
cmdKey: '',
|
||||
cmdKey: ''
|
||||
}"
|
||||
:paramsList="modelValue"
|
||||
></params-json-wrap>
|
||||
|
|
@ -425,7 +455,7 @@ import {
|
|||
updateModel,
|
||||
exportModel,
|
||||
listProductList,
|
||||
listModelType,
|
||||
listModelType
|
||||
} from "@/api/iot/model";
|
||||
import { listVendor } from "@/api/iot/vendor";
|
||||
import { listDeviceTypeList } from "@/api/iot/device";
|
||||
|
|
@ -443,7 +473,7 @@ import ParamsJsonWrap from "@/views/profile/attribute/paramsJson";
|
|||
|
||||
const deviceStartsOpt = {
|
||||
0: "禁用",
|
||||
1: "启用",
|
||||
1: "启用"
|
||||
};
|
||||
|
||||
export default {
|
||||
|
|
@ -465,7 +495,7 @@ export default {
|
|||
componectVal: "attributeForm",
|
||||
childOpt: {
|
||||
type: "add",
|
||||
paramIdx: 0,
|
||||
paramIdx: 0
|
||||
},
|
||||
protocolTypeOpt: {},
|
||||
AttributeViewShow: false,
|
||||
|
|
@ -503,28 +533,28 @@ export default {
|
|||
prodSecret: null,
|
||||
protocolType: null,
|
||||
orderByColumn: "createTime",
|
||||
isAsc: "desc",
|
||||
isAsc: "desc"
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
vendorId: [
|
||||
{ required: true, message: "厂商不能为空", trigger: "change" },
|
||||
{ required: true, message: "厂商不能为空", trigger: "change" }
|
||||
],
|
||||
prodKey: [
|
||||
{ required: true, message: "产品PK不能为空", trigger: "change" },
|
||||
{ required: true, message: "产品PK不能为空", trigger: "change" }
|
||||
],
|
||||
modelName: [
|
||||
{ required: true, message: "型号名称不能为空", trigger: "blur" },
|
||||
{ required: true, message: "型号名称不能为空", trigger: "blur" }
|
||||
],
|
||||
deviceType: [
|
||||
{ required: true, message: "设备类型不能为空", trigger: "blur" },
|
||||
],
|
||||
{ required: true, message: "设备类型不能为空", trigger: "blur" }
|
||||
]
|
||||
},
|
||||
functionList: [],
|
||||
deviceTypeList: {},
|
||||
componentTitle: "",
|
||||
componentTitle: ""
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
|
@ -541,8 +571,8 @@ export default {
|
|||
this.AttributeViewShow = true;
|
||||
this.functionList = JSON.parse(
|
||||
JSON.stringify({
|
||||
properties:this.$store.getters.attributeList,
|
||||
functions:this.$store.getters.groupList,
|
||||
properties: this.$store.getters.attributeList,
|
||||
functions: this.$store.getters.groupList
|
||||
})
|
||||
);
|
||||
this.componectVal = data.component;
|
||||
|
|
@ -563,14 +593,14 @@ export default {
|
|||
this.$refs.attributeref.forceUpdate(this.componectVal);
|
||||
},
|
||||
getModelTypeList() {
|
||||
listModelType().then((res) => {
|
||||
listModelType().then(res => {
|
||||
this.protocolTypeOpt = res.data;
|
||||
});
|
||||
},
|
||||
sortChange(column) {
|
||||
const sort = {
|
||||
isAsc: column.order === "descending" ? "desc" : "asc",
|
||||
orderByColumn: column.prop,
|
||||
orderByColumn: column.prop
|
||||
};
|
||||
this.queryParams = Object.assign(this.queryParams, sort);
|
||||
this.handleQuery();
|
||||
|
|
@ -582,7 +612,7 @@ export default {
|
|||
},
|
||||
// 查询设备类型列表
|
||||
getDeviceTypeList() {
|
||||
listDeviceTypeList().then((response) => {
|
||||
listDeviceTypeList().then(response => {
|
||||
this.deviceTypeList = response.data;
|
||||
});
|
||||
},
|
||||
|
|
@ -590,21 +620,21 @@ export default {
|
|||
this.selectResult = {};
|
||||
this.tableSelectOption = {
|
||||
otherOption: {
|
||||
tableType: "product",
|
||||
tableType: "product"
|
||||
},
|
||||
queryOpt: {
|
||||
disable: false,
|
||||
labelWidth: "68px",
|
||||
params: {
|
||||
protocolType: this.form.protocolType,
|
||||
protocolType: this.form.protocolType
|
||||
},
|
||||
page: {
|
||||
pageSize: 10,
|
||||
pageNum: 1,
|
||||
total: 0,
|
||||
total: 0
|
||||
},
|
||||
inline: true,
|
||||
queryChilds: [],
|
||||
queryChilds: []
|
||||
},
|
||||
tableOpt: {
|
||||
loading: false,
|
||||
|
|
@ -620,7 +650,7 @@ export default {
|
|||
align: "left",
|
||||
width: "",
|
||||
"show-overflow-tooltip": false,
|
||||
tempType: "span",
|
||||
tempType: "span"
|
||||
},
|
||||
{
|
||||
style: "",
|
||||
|
|
@ -630,23 +660,24 @@ export default {
|
|||
align: "left",
|
||||
width: "",
|
||||
"show-overflow-tooltip": false,
|
||||
tempType: "span",
|
||||
},
|
||||
tempType: "span"
|
||||
}
|
||||
],
|
||||
tableList: {
|
||||
type: Array,
|
||||
},
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
tableList: [],
|
||||
tableList: []
|
||||
};
|
||||
this.selectTableShow = true;
|
||||
},
|
||||
openModelDialog() {
|
||||
this.modelOpen=true;
|
||||
this.modelOpen = true;
|
||||
this.modelValue = JSON.parse(
|
||||
JSON.stringify({
|
||||
properties:this.$store.getters.attributeList,
|
||||
functions:this.$store.getters.functionList,
|
||||
properties: this.$store.getters.attributeList,
|
||||
functions: this.$store.getters.functionList,
|
||||
events: this.$store.getters.eventList
|
||||
})
|
||||
);
|
||||
},
|
||||
|
|
@ -654,19 +685,19 @@ export default {
|
|||
this.selectResult = {};
|
||||
this.tableSelectOption = {
|
||||
otherOption: {
|
||||
tableType: "scries",
|
||||
tableType: "scries"
|
||||
},
|
||||
queryOpt: {
|
||||
disable: false,
|
||||
labelWidth: "68px",
|
||||
params: {
|
||||
seriesName: "",
|
||||
prodKey: "",
|
||||
prodKey: ""
|
||||
},
|
||||
page: {
|
||||
pageSize: 10,
|
||||
pageNum: 1,
|
||||
total: 0,
|
||||
total: 0
|
||||
},
|
||||
inline: true,
|
||||
queryChilds: [
|
||||
|
|
@ -678,7 +709,7 @@ export default {
|
|||
type: "input",
|
||||
key: "seriesName",
|
||||
size: "small",
|
||||
value: "",
|
||||
value: ""
|
||||
},
|
||||
{
|
||||
style: "",
|
||||
|
|
@ -688,9 +719,9 @@ export default {
|
|||
type: "input",
|
||||
key: "prodKey",
|
||||
size: "small",
|
||||
value: "",
|
||||
},
|
||||
],
|
||||
value: ""
|
||||
}
|
||||
]
|
||||
},
|
||||
tableOpt: {
|
||||
loading: false,
|
||||
|
|
@ -706,7 +737,7 @@ export default {
|
|||
align: "left",
|
||||
width: "",
|
||||
"show-overflow-tooltip": false,
|
||||
tempType: "span",
|
||||
tempType: "span"
|
||||
},
|
||||
{
|
||||
style: "",
|
||||
|
|
@ -716,7 +747,7 @@ export default {
|
|||
align: "left",
|
||||
width: "",
|
||||
"show-overflow-tooltip": false,
|
||||
tempType: "span",
|
||||
tempType: "span"
|
||||
},
|
||||
{
|
||||
style: "",
|
||||
|
|
@ -726,14 +757,14 @@ export default {
|
|||
align: "left",
|
||||
width: "",
|
||||
"show-overflow-tooltip": false,
|
||||
tempType: "span",
|
||||
},
|
||||
tempType: "span"
|
||||
}
|
||||
],
|
||||
tableList: {
|
||||
type: Array,
|
||||
},
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
tableList: [],
|
||||
tableList: []
|
||||
};
|
||||
this.selectTableShow = true;
|
||||
},
|
||||
|
|
@ -742,7 +773,7 @@ export default {
|
|||
this.selectResult = {};
|
||||
this.tableSelectOption = {
|
||||
otherOption: {
|
||||
tableType: "vendor",
|
||||
tableType: "vendor"
|
||||
},
|
||||
queryOpt: {
|
||||
disable: false,
|
||||
|
|
@ -750,12 +781,12 @@ export default {
|
|||
params: {
|
||||
vendorName: "",
|
||||
vendorAddress: "",
|
||||
vendorContact: "",
|
||||
vendorContact: ""
|
||||
},
|
||||
page: {
|
||||
pageSize: 10,
|
||||
pageNum: 1,
|
||||
total: 0,
|
||||
total: 0
|
||||
},
|
||||
inline: true,
|
||||
queryChilds: [
|
||||
|
|
@ -767,7 +798,7 @@ export default {
|
|||
type: "input",
|
||||
key: "vendorName",
|
||||
size: "small",
|
||||
value: "",
|
||||
value: ""
|
||||
},
|
||||
{
|
||||
style: "",
|
||||
|
|
@ -777,7 +808,7 @@ export default {
|
|||
type: "input",
|
||||
key: "vendorAddress",
|
||||
size: "small",
|
||||
value: "",
|
||||
value: ""
|
||||
},
|
||||
{
|
||||
style: "",
|
||||
|
|
@ -787,9 +818,9 @@ export default {
|
|||
type: "input",
|
||||
key: "vendorContact",
|
||||
size: "small",
|
||||
value: "",
|
||||
},
|
||||
],
|
||||
value: ""
|
||||
}
|
||||
]
|
||||
},
|
||||
tableOpt: {
|
||||
loading: false,
|
||||
|
|
@ -805,7 +836,7 @@ export default {
|
|||
align: "left",
|
||||
width: "",
|
||||
"show-overflow-tooltip": false,
|
||||
tempType: "span",
|
||||
tempType: "span"
|
||||
},
|
||||
{
|
||||
style: "",
|
||||
|
|
@ -815,7 +846,7 @@ export default {
|
|||
align: "left",
|
||||
width: "",
|
||||
"show-overflow-tooltip": false,
|
||||
tempType: "span",
|
||||
tempType: "span"
|
||||
},
|
||||
{
|
||||
style: "",
|
||||
|
|
@ -825,29 +856,29 @@ export default {
|
|||
align: "left",
|
||||
width: "",
|
||||
"show-overflow-tooltip": false,
|
||||
tempType: "span",
|
||||
},
|
||||
tempType: "span"
|
||||
}
|
||||
],
|
||||
tableList: {
|
||||
type: Array,
|
||||
},
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
tableList: [],
|
||||
tableList: []
|
||||
};
|
||||
this.selectTableShow = true;
|
||||
},
|
||||
// 查询回调
|
||||
childGetList(data) {
|
||||
switch(data.otherOption.tableType) {
|
||||
case 'vendor':
|
||||
switch (data.otherOption.tableType) {
|
||||
case "vendor":
|
||||
this.vendorChildList(data);
|
||||
break;
|
||||
|
||||
case 'product':
|
||||
case "product":
|
||||
this.productChildList(data);
|
||||
break;
|
||||
|
||||
case 'scries':
|
||||
case "scries":
|
||||
this.scriesChildList(data);
|
||||
break;
|
||||
}
|
||||
|
|
@ -855,44 +886,42 @@ export default {
|
|||
productChildList(data) {
|
||||
listProductList(
|
||||
Object.assign(data.page, data.param, { selected: 1 })
|
||||
).then((response) => {
|
||||
).then(response => {
|
||||
this.tableSelectOption.tableList = response.data;
|
||||
// this.tableSelectOption.queryOpt.page.total = Number(response.total);
|
||||
});
|
||||
},
|
||||
vendorChildList(data) {
|
||||
listVendor(Object.assign(data.page, data.param, { selected: 1 })).then(
|
||||
(response) => {
|
||||
response => {
|
||||
this.tableSelectOption.tableList = response.rows;
|
||||
this.tableSelectOption.queryOpt.page.total = Number(response.total);
|
||||
}
|
||||
);
|
||||
},
|
||||
scriesChildList(data) {
|
||||
listModelSeries(Object.assign(data.page, data.param)).then(
|
||||
(response) => {
|
||||
this.tableSelectOption.tableList = response.rows;
|
||||
this.tableSelectOption.queryOpt.page.total = Number(response.total);
|
||||
}
|
||||
);
|
||||
listModelSeries(Object.assign(data.page, data.param)).then(response => {
|
||||
this.tableSelectOption.tableList = response.rows;
|
||||
this.tableSelectOption.queryOpt.page.total = Number(response.total);
|
||||
});
|
||||
},
|
||||
// 点击或者双击数据回调
|
||||
returnEvent(data) {
|
||||
console.log('弹窗回调',data)
|
||||
console.log("弹窗回调", data);
|
||||
this.selectResult = {};
|
||||
if (data.type === "dblclick") {
|
||||
switch(data.otherOption.tableType) {
|
||||
case 'vendor':
|
||||
switch (data.otherOption.tableType) {
|
||||
case "vendor":
|
||||
this.form.vendorId = data.value.vendorId;
|
||||
this.form.vendorName = data.value.vendorName;
|
||||
break;
|
||||
break;
|
||||
|
||||
case 'product':
|
||||
case "product":
|
||||
this.form.prodKey = data.value.prodId;
|
||||
this.form.prodSecret = data.value.prodSecret;
|
||||
break;
|
||||
break;
|
||||
|
||||
case 'scries':
|
||||
case "scries":
|
||||
this.form.prodJson = data.value.prodJson;
|
||||
this.form.remark = data.value.remark;
|
||||
this.form.deviceType = data.value.deviceType;
|
||||
|
|
@ -906,28 +935,26 @@ export default {
|
|||
setTimeout(() => {
|
||||
_this.$refs.paramWrap.setList(_this.form.paramList || []);
|
||||
_this.$refs.attributeref.handleInitData();
|
||||
_this.$refs.attributeref.forceUpdateList('groupForm');
|
||||
_this.$refs.attributeref.forceUpdateList('attributeForm');
|
||||
|
||||
_this.$refs.attributeref.forceUpdateList("groupForm");
|
||||
_this.$refs.attributeref.forceUpdateList("attributeForm");
|
||||
}, 100);
|
||||
|
||||
break;
|
||||
}
|
||||
this.selectTableShow = false;
|
||||
} else if (data.type === "click") {
|
||||
|
||||
switch(data.otherOption.tableType) {
|
||||
case 'vendor':
|
||||
switch (data.otherOption.tableType) {
|
||||
case "vendor":
|
||||
this.selectResult.vendorId = data.value.vendorId;
|
||||
this.selectResult.vendorName = data.value.vendorName;
|
||||
break;
|
||||
break;
|
||||
|
||||
case 'product':
|
||||
case "product":
|
||||
this.selectResult.prodKey = data.value.prodId;
|
||||
this.selectResult.prodSecret = data.value.prodSecret;
|
||||
break;
|
||||
break;
|
||||
|
||||
case 'scries':
|
||||
case "scries":
|
||||
this.selectResult.prodJson = data.value.prodJson;
|
||||
this.selectResult.remark = data.value.remark;
|
||||
this.selectResult.deviceType = data.value.deviceType;
|
||||
|
|
@ -937,8 +964,8 @@ export default {
|
|||
} catch (error) {
|
||||
this.selectResult.paramList = [];
|
||||
}
|
||||
console.log('row:', data.value)
|
||||
break;
|
||||
console.log("row:", data.value);
|
||||
break;
|
||||
}
|
||||
|
||||
this.selectResult.tableType = data.otherOption.tableType;
|
||||
|
|
@ -946,40 +973,40 @@ export default {
|
|||
},
|
||||
// 点击确定按钮
|
||||
resuleClick() {
|
||||
debugger
|
||||
switch(this.selectResult.tableType) {
|
||||
case 'vendor':
|
||||
debugger;
|
||||
switch (this.selectResult.tableType) {
|
||||
case "vendor":
|
||||
this.form.vendorId = this.selectResult.vendorId;
|
||||
this.form.vendorName = this.selectResult.vendorName;
|
||||
break;
|
||||
break;
|
||||
|
||||
case 'product':
|
||||
case "product":
|
||||
this.form.prodKey = this.selectResult.prodKey;
|
||||
this.form.prodSecret = this.selectResult.prodSecret;
|
||||
break;
|
||||
break;
|
||||
|
||||
case 'scries':
|
||||
case "scries":
|
||||
this.form.prodJson = this.selectResult.prodJson;
|
||||
this.form.remark = this.selectResult.remark;
|
||||
this.form.deviceType = this.selectResult.deviceType;
|
||||
this.form.paramList = this.selectResult.paramList
|
||||
this.form.paramList = this.selectResult.paramList;
|
||||
let _this = this;
|
||||
setTimeout(() => {
|
||||
_this.$refs.paramWrap.setList(_this.form.paramList || []);
|
||||
_this.$refs.attributeref.handleInitData();
|
||||
_this.$refs.attributeref.forceUpdateList('groupForm');
|
||||
_this.$refs.attributeref.forceUpdateList('attributeForm');
|
||||
_this.$refs.attributeref.forceUpdateList('functionForm');
|
||||
_this.$refs.attributeref.forceUpdateList("groupForm");
|
||||
_this.$refs.attributeref.forceUpdateList("attributeForm");
|
||||
_this.$refs.attributeref.forceUpdateList("functionForm");
|
||||
}, 100);
|
||||
|
||||
break;
|
||||
break;
|
||||
}
|
||||
this.selectTableShow = false;
|
||||
},
|
||||
/** 查询型号列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listModel(this.queryParams).then((response) => {
|
||||
listModel(this.queryParams).then(response => {
|
||||
this.modelList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
|
|
@ -1001,7 +1028,7 @@ export default {
|
|||
paramList: [],
|
||||
protocolType: "OFFICIAL",
|
||||
prodJson: "",
|
||||
seriesKey:""
|
||||
seriesKey: ""
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
|
|
@ -1017,7 +1044,7 @@ export default {
|
|||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map((item) => item.modelId);
|
||||
this.ids = selection.map(item => item.modelId);
|
||||
this.single = selection.length !== 1;
|
||||
this.multiple = !selection.length;
|
||||
},
|
||||
|
|
@ -1032,7 +1059,7 @@ export default {
|
|||
this.reset();
|
||||
const modelId = row.modelId || this.ids;
|
||||
const _this = this;
|
||||
getModel(modelId).then((response) => {
|
||||
getModel(modelId).then(response => {
|
||||
_this.form = response.data;
|
||||
_this.open = true;
|
||||
_this.title = "修改型号";
|
||||
|
|
@ -1043,7 +1070,7 @@ export default {
|
|||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.protocolType === "OFFICIAL") {
|
||||
let attrList = [];
|
||||
|
|
@ -1051,7 +1078,7 @@ export default {
|
|||
this.$store.getters.attributeList &&
|
||||
this.$store.getters.attributeList.length > 0
|
||||
) {
|
||||
attrList = this.$store.getters.attributeList.map((v) => {
|
||||
attrList = this.$store.getters.attributeList.map(v => {
|
||||
v["sourceId"] = this.form.prodKey;
|
||||
return v;
|
||||
});
|
||||
|
|
@ -1063,7 +1090,7 @@ export default {
|
|||
this.$store.getters.groupList &&
|
||||
this.$store.getters.groupList.length > 0
|
||||
) {
|
||||
groupList = this.$store.getters.groupList.map((v) => {
|
||||
groupList = this.$store.getters.groupList.map(v => {
|
||||
v["sourceId"] = this.form.prodKey;
|
||||
return v;
|
||||
});
|
||||
|
|
@ -1086,23 +1113,24 @@ export default {
|
|||
eventList = this.$store.getters.eventList;
|
||||
}
|
||||
|
||||
this.form.prodJson = JSON.stringify({
|
||||
properties:attrList,
|
||||
functions:functionList,
|
||||
events:eventList
|
||||
}) || null;
|
||||
this.form.prodJson =
|
||||
JSON.stringify({
|
||||
properties: attrList,
|
||||
functions: functionList,
|
||||
events: eventList
|
||||
}) || null;
|
||||
this.form.remark = JSON.stringify(groupList) || null;
|
||||
}
|
||||
|
||||
this.form.paramList = this.$refs.paramWrap.getResult();
|
||||
if (this.form.modelId != null ) {
|
||||
updateModel(this.form).then((response) => {
|
||||
if (this.form.modelId != null) {
|
||||
updateModel(this.form).then(response => {
|
||||
this.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addModel(this.form).then((response) => {
|
||||
addModel(this.form).then(response => {
|
||||
this.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
|
|
@ -1117,9 +1145,9 @@ export default {
|
|||
this.$confirm("是否删除该选项?", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
type: "warning"
|
||||
})
|
||||
.then(function () {
|
||||
.then(function() {
|
||||
return delModel(modelIds);
|
||||
})
|
||||
.then(() => {
|
||||
|
|
@ -1133,23 +1161,22 @@ export default {
|
|||
this.$confirm("是否确认导出所有型号数据项?", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
type: "warning"
|
||||
})
|
||||
.then(function () {
|
||||
.then(function() {
|
||||
return exportModel(queryParams);
|
||||
})
|
||||
.then((response) => {
|
||||
.then(response => {
|
||||
this.download(response.msg);
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.iot-model {
|
||||
.eldialog-wrap {
|
||||
.el-dialog__header {
|
||||
|
||||
}
|
||||
.el-dialog__body {
|
||||
padding: 0px;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,721 @@
|
|||
<template>
|
||||
<div class="attribute-form-view">
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
: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="level">
|
||||
<el-select v-model="form.expands.level" placeholder="请选择事件级别" style="width: 100%">
|
||||
<el-option
|
||||
v-for="(dice, value) in eventLevel"
|
||||
:key="value"
|
||||
:label="dice"
|
||||
:value="value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="输出参数:" prop="inputs">
|
||||
<el-table :data="form.valueType.properties" height="300px">
|
||||
<el-table-column align="left" label="标识" prop="id" />
|
||||
<el-table-column align="left" label="名称" prop="name" />
|
||||
<el-table-column align="left" label="数据类型" prop="type" >
|
||||
<template slot-scope="scope">
|
||||
<span>{{ dataTypeOption[scope.row.valueType.type] }}</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="addParam"
|
||||
>新增输出参数</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
|
||||
:close-on-click-modal="false"
|
||||
: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="type">
|
||||
<el-select v-model="inputFormObj.form.valueType.type" placeholder="请选择数据类型" style="width: 100%" @change="inputDataTypeChange">
|
||||
<el-option
|
||||
v-for="(dice, value) in dataTypeOption"
|
||||
:key="value"
|
||||
:label="dice"
|
||||
:value="value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="inputFormObj.form.valueType.type === '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.value }"
|
||||
placeholder="请输入值"
|
||||
></el-input>
|
||||
<div v-if="scope.row.value===''" 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.text }"
|
||||
placeholder="请输入描述"
|
||||
></el-input>
|
||||
<div v-if="scope.row.text===''" 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 dataTypeOption = {
|
||||
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 eventLevel = {
|
||||
ordinary:'普通',
|
||||
warn:'警告',
|
||||
urgent:'紧急',
|
||||
}
|
||||
|
||||
const defaultenumForm = {
|
||||
value: '',
|
||||
text: ''
|
||||
}
|
||||
|
||||
const defaultForm = {
|
||||
id: "",
|
||||
name: "",
|
||||
expands: {
|
||||
level: "ordinary"
|
||||
},
|
||||
async: false,
|
||||
valueType: {
|
||||
type: "object",
|
||||
properties: [
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const defaultInputForm = {
|
||||
id: "",
|
||||
name: "",
|
||||
expands: {
|
||||
required: false
|
||||
},
|
||||
valueType: {
|
||||
expands: {},
|
||||
type: "int",
|
||||
elements: []
|
||||
}
|
||||
};
|
||||
|
||||
export default {
|
||||
name: "EventFormModel",
|
||||
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 {
|
||||
dataTypeOption,
|
||||
eventLevel,
|
||||
inputParamOpen: false,
|
||||
form: {
|
||||
id: "",
|
||||
name: "",
|
||||
expands: {
|
||||
level: "ordinary"
|
||||
},
|
||||
async: false,
|
||||
valueType: {
|
||||
type: "object",
|
||||
properties: [
|
||||
]
|
||||
}
|
||||
},
|
||||
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" }
|
||||
]
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" },
|
||||
],
|
||||
id: [
|
||||
{ required: true, message: "标识不能为空", trigger: "blur" },
|
||||
{ pattern: /^[a-zA-Z0-9_\-]+$/,message: '标识只能由数字、字母、下划线、中划线组成',trigger: "blur"}
|
||||
],
|
||||
type: [
|
||||
{ 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 = JSON.parse(JSON.stringify(defaultForm));
|
||||
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible(val) {
|
||||
if (val) {
|
||||
// 当弹窗打开时
|
||||
if (this.tempType === "update" && this.paramIdx >= 0) {
|
||||
// 编辑模式，复制传入的数据
|
||||
this.form = JSON.parse(JSON.stringify(this.row));
|
||||
} else {
|
||||
// 新增模式，重置表单数据
|
||||
this.form = JSON.parse(JSON.stringify(defaultForm));
|
||||
}
|
||||
|
||||
// 确保输入参数表单也被重置
|
||||
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("AddEvent", this.form).then(() => {
|
||||
this.$message.success("添加成功");
|
||||
this.$emit("ok");
|
||||
}).catch(err => {
|
||||
this.$message.error("添加失败：" + err);
|
||||
});
|
||||
} else if (this.tempType === "update") {
|
||||
this.$store.dispatch("EditEvent", {
|
||||
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.value = '';
|
||||
newEnumItem.text = '';
|
||||
this.inputFormObj.form.valueType.elements.push(newEnumItem);
|
||||
},
|
||||
|
||||
// 修改提交方法，增加枚举项验证
|
||||
submitInputForm() {
|
||||
// 验证表单
|
||||
this.$refs.inputForm.validate(valid => {
|
||||
if (valid) {
|
||||
// 如果是枚举类型，确保至少有一个枚举项
|
||||
if (this.inputFormObj.form.valueType.type === 'enum' &&
|
||||
(!this.inputFormObj.form.valueType.elements ||
|
||||
this.inputFormObj.form.valueType.elements.length === 0)) {
|
||||
this.$message.warning('枚举类型至少需要一个枚举项');
|
||||
return;
|
||||
}
|
||||
|
||||
// 验证枚举项的值和描述不能为空
|
||||
if (this.inputFormObj.form.valueType.type === 'enum') {
|
||||
let hasError = false;
|
||||
for (let i = 0; i < this.inputFormObj.form.valueType.elements.length; i++) {
|
||||
const item = this.inputFormObj.form.valueType.elements[i];
|
||||
let value = !item.value;
|
||||
let text = !item.text;
|
||||
if (value || text) {
|
||||
hasError = true;
|
||||
}
|
||||
}
|
||||
if (hasError) {
|
||||
this.$message.warning('请完善枚举项的值和描述');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// 如果是编辑模式
|
||||
if (this.inputFormObj.isEdit) {
|
||||
// 更新现有输入参数
|
||||
this.$set(this.form.valueType.properties, this.inputFormObj.index, this.inputFormObj.form);
|
||||
} else {
|
||||
// 添加新的输入参数
|
||||
this.form.valueType.properties.push(JSON.parse(JSON.stringify(this.inputFormObj.form)));
|
||||
}
|
||||
|
||||
// 关闭弹窗
|
||||
this.inputParamOpen = false;
|
||||
|
||||
// 提示成功
|
||||
this.$message.success(this.inputFormObj.isEdit ? '修改成功' : '添加成功');
|
||||
}
|
||||
});
|
||||
},
|
||||
addParam(){
|
||||
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.valueType.properties.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("AddEvent", this.form).then(() => {
|
||||
// this.$message.success("添加成功");
|
||||
// this.$emit("ok");
|
||||
// }).catch(err => {
|
||||
// this.$message.error("添加失败：" + err);
|
||||
// });
|
||||
// } else if (this.tempType === "update") {
|
||||
// this.$store.dispatch("EditEvent", {
|
||||
// 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,440 @@
|
|||
<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="eventList" 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="center" label="事件级别" prop="expands">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ eventLevel[scope.row.expands.level] }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="输出参数数量" prop="inputs">
|
||||
<template slot-scope="scope">
|
||||
<span>{{
|
||||
scope.row.valueType ? scope.row.valueType.properties.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"
|
||||
/>
|
||||
|
||||
<event-form-model
|
||||
ref="eventForm"
|
||||
:paramIdx="eventFormObj.paramIdx"
|
||||
:row="eventFormObj.eventForm"
|
||||
:tempType="eventFormObj.modelType"
|
||||
:title="eventFormObj.modelType == 'add' ? '新增' : '编辑'"
|
||||
:visible.sync="eventOpen"
|
||||
@ok="handleFormOk"
|
||||
></event-form-model>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JsonEditor from "./jsonEditor.vue";
|
||||
import ParamsJsonWrap from "./paramsJson";
|
||||
import eventFormModel from "@/views/profile/attribute/eventFormModel";
|
||||
|
||||
const eventLevel = {
|
||||
ordinary: "普通",
|
||||
warn: "警告",
|
||||
urgent: "紧急"
|
||||
};
|
||||
|
||||
export default {
|
||||
name: "EventView",
|
||||
components: {
|
||||
JsonEditor,
|
||||
ParamsJsonWrap,
|
||||
eventFormModel
|
||||
},
|
||||
props: {
|
||||
sourceId: {
|
||||
type: [Number, String],
|
||||
default: ""
|
||||
},
|
||||
isOption: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
eventLevel,
|
||||
eventOpen: false,
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 功能定义表格数据
|
||||
eventList: [],
|
||||
// 弹出层标题
|
||||
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: "",
|
||||
eventFormObj: {
|
||||
id: "",
|
||||
name: "",
|
||||
expands: {
|
||||
level: "ordinary"
|
||||
},
|
||||
async: false,
|
||||
valueType: {
|
||||
type: "object",
|
||||
properties: []
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
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.eventList = [];
|
||||
setTimeout(() => {
|
||||
this.$store.dispatch("GetEventList").then(res => {
|
||||
console.log("功能列表数据", res);
|
||||
this.eventList = res;
|
||||
this.$forceUpdate();
|
||||
this.loading = false;
|
||||
});
|
||||
}, 50);
|
||||
},
|
||||
setList(list) {
|
||||
this.loading = true;
|
||||
this.eventList = [];
|
||||
setTimeout(() => {
|
||||
this.eventList = 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.eventFormObj = {
|
||||
modelType: "add",
|
||||
paramIdx: -1,
|
||||
eventForm: {
|
||||
id: "",
|
||||
name: "",
|
||||
expands: {
|
||||
level: "ordinary"
|
||||
},
|
||||
async: false,
|
||||
valueType: {
|
||||
type: "object",
|
||||
properties: []
|
||||
}
|
||||
}
|
||||
};
|
||||
this.eventOpen = true;
|
||||
},
|
||||
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row, idx) {
|
||||
this.eventFormObj = {
|
||||
modelType: "update",
|
||||
paramIdx: idx,
|
||||
eventForm: JSON.parse(JSON.stringify(row))
|
||||
};
|
||||
this.eventOpen = true;
|
||||
},
|
||||
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row, idx) {
|
||||
this.$confirm("是否确认删除该功能?", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
// 执行删除数据
|
||||
this.$store
|
||||
.dispatch("DeleteEvent", idx)
|
||||
.then(() => {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "删除成功!"
|
||||
});
|
||||
this.getList();
|
||||
})
|
||||
.catch(err => {
|
||||
this.$message.error("删除失败：" + err);
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: "info",
|
||||
message: "已取消删除"
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/** 表单确认回调 */
|
||||
handleFormOk() {
|
||||
this.eventOpen = 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>
|
||||
|
|
@ -35,9 +35,9 @@
|
|||
<span>{{ scope.row.expands.required ? '是' : '否'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="left" label="数据类型" prop="funDataType" >
|
||||
<el-table-column align="left" label="数据类型" prop="type" >
|
||||
<template slot-scope="scope">
|
||||
<span>{{ funDataTypeOption[scope.row.funDataType] }}</span>
|
||||
<span>{{ dataTypeOption[scope.row.valueType.type] }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
|
|
@ -105,17 +105,17 @@
|
|||
<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-form-item label="数据类型:" prop="type">
|
||||
<el-select v-model="inputFormObj.form.valueType.type" placeholder="请选择数据类型" style="width: 100%" @change="inputDataTypeChange">
|
||||
<el-option
|
||||
v-for="(dice, value) in funDataTypeOption"
|
||||
v-for="(dice, value) in dataTypeOption"
|
||||
:key="value"
|
||||
:label="dice"
|
||||
:value="value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="inputFormObj.form.funDataType === 'enum'" label="枚举值:">
|
||||
<el-form-item v-if="inputFormObj.form.valueType.type === 'enum'" label="枚举值:">
|
||||
<div class="enum-box">
|
||||
<div class="enum-header">
|
||||
<el-button size="mini" type="primary" @click="addEnumItem">添加枚举项</el-button>
|
||||
|
|
@ -170,7 +170,7 @@
|
|||
<script>
|
||||
import { mapGetters, mapState } from "vuex";
|
||||
import JsonEditor from "./jsonEditor";
|
||||
const funDataTypeOption = {
|
||||
const dataTypeOption = {
|
||||
int: 'int(整数型)',
|
||||
long: 'long(长整数型)',
|
||||
float: 'float(单精度浮点型)',
|
||||
|
|
@ -214,7 +214,6 @@ const defaultInputForm = {
|
|||
expands: {
|
||||
required:false
|
||||
},
|
||||
funDataType: 'int',
|
||||
valueType: {
|
||||
expands: {},
|
||||
type: 'int',
|
||||
|
|
@ -252,7 +251,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
funDataTypeOption,
|
||||
dataTypeOption,
|
||||
funRwTypeOption,
|
||||
funValidTypeOption,
|
||||
dataFormatTypeOption,
|
||||
|
|
@ -278,9 +277,6 @@ export default {
|
|||
name: [
|
||||
{ required: true, message: "参数名称不能为空", trigger: "blur" }
|
||||
],
|
||||
funDataType: [
|
||||
{ required: true, message: "数据类型不能为空", trigger: "blur" }
|
||||
]
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
|
|
@ -292,18 +288,9 @@ export default {
|
|||
{ required: true, message: "标识不能为空", trigger: "blur" },
|
||||
{ pattern: /^[a-zA-Z0-9_\-]+$/,message: '标识只能由数字、字母、下划线、中划线组成',trigger: "blur"}
|
||||
],
|
||||
funDataType: [
|
||||
type: [
|
||||
{ required: true, message: "数据类型不能为空", trigger: "blur" },
|
||||
],
|
||||
funRwType: [
|
||||
{ required: true, message: "传输类型不能为空", trigger: "blur" },
|
||||
],
|
||||
funValidType: [
|
||||
{ required: true, message: "校验方式不能为空", trigger: "blur" },
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
|
@ -444,7 +431,7 @@ export default {
|
|||
this.$refs.inputForm.validate(valid => {
|
||||
if (valid) {
|
||||
// 如果是枚举类型，确保至少有一个枚举项
|
||||
if (this.inputFormObj.form.funDataType === 'enum' &&
|
||||
if (this.inputFormObj.form.valueType.type === 'enum' &&
|
||||
(!this.inputFormObj.form.valueType.elements ||
|
||||
this.inputFormObj.form.valueType.elements.length === 0)) {
|
||||
this.$message.warning('枚举类型至少需要一个枚举项');
|
||||
|
|
@ -452,7 +439,7 @@ export default {
|
|||
}
|
||||
|
||||
// 验证枚举项的值和描述不能为空
|
||||
if (this.inputFormObj.form.funDataType === 'enum') {
|
||||
if (this.inputFormObj.form.valueType.type === 'enum') {
|
||||
let hasError = false;
|
||||
for (let i = 0; i < this.inputFormObj.form.valueType.elements.length; i++) {
|
||||
const item = this.inputFormObj.form.valueType.elements[i];
|
||||
|
|
|
|||
|
|
@ -2,7 +2,11 @@
|
|||
<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
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
type="primary"
|
||||
@click="handleAdd"
|
||||
>新增</el-button
|
||||
>
|
||||
</el-col>
|
||||
|
|
@ -12,15 +16,15 @@
|
|||
<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 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 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"
|
||||
|
|
@ -62,16 +66,14 @@
|
|||
:paramIdx="functionFormObj.paramIdx"
|
||||
:row="functionFormObj.functionForm"
|
||||
:tempType="functionFormObj.modelType"
|
||||
:title="functionFormObj.modelType == 'add'?'新增':'编辑'"
|
||||
: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";
|
||||
|
|
@ -79,19 +81,19 @@ const funDataTypeOption = {
|
|||
INT32: "整数型",
|
||||
FLOAT: "浮点型",
|
||||
TEXT: "字符串",
|
||||
BOOL: "布尔型",
|
||||
BOOL: "布尔型"
|
||||
};
|
||||
const funRwTypeOption = {
|
||||
READWRITE: "可上报可下发",
|
||||
READ: "只上报",
|
||||
WRITE: "只下发",
|
||||
WRITE: "只下发"
|
||||
};
|
||||
|
||||
const funValidTypeOption = {
|
||||
ENUM: "枚举",
|
||||
RANGE: "范围",
|
||||
LENGTH: "长度",
|
||||
NOT: "不校验",
|
||||
NOT: "不校验"
|
||||
};
|
||||
|
||||
export default {
|
||||
|
|
@ -99,17 +101,17 @@ export default {
|
|||
components: {
|
||||
JsonEditor,
|
||||
ParamsJsonWrap,
|
||||
functionFormModel,
|
||||
functionFormModel
|
||||
},
|
||||
props: {
|
||||
sourceId: {
|
||||
type: [Number, String],
|
||||
default: "",
|
||||
default: ""
|
||||
},
|
||||
isOption: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -139,27 +141,36 @@ export default {
|
|||
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" }],
|
||||
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: '',
|
||||
functionFormObj: {
|
||||
modelType: "add",
|
||||
paramIdx: 0,
|
||||
functionForm: {
|
||||
id: "",
|
||||
name: "",
|
||||
expands: {},
|
||||
async: false,
|
||||
inputs: [],
|
||||
output: {},
|
||||
output: {}
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
|
@ -188,25 +199,25 @@ export default {
|
|||
},
|
||||
/** 查询功能定义列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
this.functionList = []
|
||||
this.loading = true;
|
||||
this.functionList = [];
|
||||
setTimeout(() => {
|
||||
this.$store.dispatch("GetFunctionList").then((res) => {
|
||||
console.log('功能列表数据', res)
|
||||
this.functionList = res
|
||||
this.$forceUpdate()
|
||||
this.loading = false
|
||||
this.$store.dispatch("GetFunctionList").then(res => {
|
||||
console.log("功能列表数据", res);
|
||||
this.functionList = res;
|
||||
this.$forceUpdate();
|
||||
this.loading = false;
|
||||
});
|
||||
}, 50)
|
||||
}, 50);
|
||||
},
|
||||
setList(list) {
|
||||
this.loading = true
|
||||
this.functionList = []
|
||||
this.loading = true;
|
||||
this.functionList = [];
|
||||
setTimeout(() => {
|
||||
this.functionList = list
|
||||
this.$forceUpdate()
|
||||
this.loading = false
|
||||
}, 50)
|
||||
this.functionList = list;
|
||||
this.$forceUpdate();
|
||||
this.loading = false;
|
||||
}, 50);
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
|
|
@ -227,21 +238,21 @@ export default {
|
|||
funValMin: undefined,
|
||||
funValMax: undefined,
|
||||
funObj: {},
|
||||
unitName: "",
|
||||
unitName: ""
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
handleParams() {
|
||||
this.$emit('handleClick', { type: 'param', idx: 0 })
|
||||
this.$emit("handleClick", { type: "param", idx: 0 });
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.functionFormObj = {
|
||||
modelType: 'add',
|
||||
modelType: "add",
|
||||
paramIdx: -1,
|
||||
functionForm: {
|
||||
id: '',
|
||||
name: '',
|
||||
id: "",
|
||||
name: "",
|
||||
expands: {},
|
||||
async: false,
|
||||
inputs: [],
|
||||
|
|
@ -250,52 +261,53 @@ export default {
|
|||
};
|
||||
this.functionOpen = true;
|
||||
},
|
||||
|
||||
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row, idx) {
|
||||
this.functionFormObj = {
|
||||
modelType: 'update',
|
||||
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.$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: 'success',
|
||||
message: '删除成功!'
|
||||
type: "info",
|
||||
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">
|
||||
|
|
@ -382,7 +394,6 @@ export default {
|
|||
}
|
||||
.params-eldialog {
|
||||
.el-dialog__header {
|
||||
|
||||
}
|
||||
.el-dialog__body {
|
||||
height: 100%;
|
||||
|
|
@ -410,18 +421,24 @@ export default {
|
|||
background: #ffffff;
|
||||
}
|
||||
|
||||
.product-customparams-wrap .params-eldialog .el-dialog__body::-webkit-scrollbar {
|
||||
.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 {
|
||||
.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 {
|
||||
.product-customparams-wrap
|
||||
.params-eldialog
|
||||
.el-dialog__body::-webkit-scrollbar-track {
|
||||
/*滚动条里面轨道*/
|
||||
box-shadow: inset 0 0 5px #f6f6f6;
|
||||
border-radius: 10px;
|
||||
|
|
|
|||
|
|
@ -28,7 +28,15 @@
|
|||
ref="functionref"
|
||||
:sourceId="sourceId"
|
||||
/>
|
||||
<!-- @handleClick="functionEvent"-->
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="事件" name="event">
|
||||
<div class="tabs-body">
|
||||
<event-view
|
||||
v-if="activeName === 'event'"
|
||||
ref="eventref"
|
||||
:sourceId="sourceId"
|
||||
/>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
|
@ -38,23 +46,24 @@
|
|||
import attributeView from "./attributeView";
|
||||
import groupView from "./groupView";
|
||||
import FunctionView from "./functionView";
|
||||
import EventView from "./eventView";
|
||||
// this.$store.state.tagsView.visitedViews
|
||||
// this.$store.dispatch("Login", this.loginForm)
|
||||
export default {
|
||||
components: { FunctionView, attributeView, groupView },
|
||||
components: { FunctionView, attributeView, groupView, EventView },
|
||||
props: {
|
||||
groupList: {
|
||||
type: String,
|
||||
default: "[]",
|
||||
default: "[]"
|
||||
},
|
||||
arttributeList: {
|
||||
type: String,
|
||||
default: "[]",
|
||||
default: "[]"
|
||||
},
|
||||
sourceId: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
name: "attribute",
|
||||
created() {
|
||||
|
|
@ -63,7 +72,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: "attribute",
|
||||
activeName: "attribute"
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -75,7 +84,7 @@ export default {
|
|||
type: data.type,
|
||||
title: "新增参数",
|
||||
component: "attributeForm",
|
||||
paramIdx: null,
|
||||
paramIdx: null
|
||||
});
|
||||
break;
|
||||
|
||||
|
|
@ -85,7 +94,7 @@ export default {
|
|||
title: "修改参数",
|
||||
component: "attributeForm",
|
||||
paramIdx: data.idx,
|
||||
row:data.row
|
||||
row: data.row
|
||||
});
|
||||
break;
|
||||
|
||||
|
|
@ -98,7 +107,7 @@ export default {
|
|||
type: data.type,
|
||||
title: "物模型",
|
||||
component: "paramsJson",
|
||||
paramIdx: null,
|
||||
paramIdx: null
|
||||
});
|
||||
break;
|
||||
}
|
||||
|
|
@ -111,7 +120,7 @@ export default {
|
|||
type: data.type,
|
||||
title: "新增分组",
|
||||
component: "groupForm",
|
||||
paramIdx: null,
|
||||
paramIdx: null
|
||||
});
|
||||
break;
|
||||
|
||||
|
|
@ -120,7 +129,7 @@ export default {
|
|||
type: data.type,
|
||||
title: "修改分组",
|
||||
component: "groupForm",
|
||||
paramIdx: data.idx,
|
||||
paramIdx: data.idx
|
||||
});
|
||||
break;
|
||||
|
||||
|
|
@ -137,7 +146,7 @@ export default {
|
|||
type: data.type,
|
||||
title: "新增参数",
|
||||
component: "functionForm",
|
||||
paramIdx: null,
|
||||
paramIdx: null
|
||||
});
|
||||
break;
|
||||
|
||||
|
|
@ -147,7 +156,7 @@ export default {
|
|||
title: "修改参数",
|
||||
component: "functionForm",
|
||||
paramIdx: data.idx,
|
||||
row:data.row
|
||||
row: data.row
|
||||
});
|
||||
break;
|
||||
|
||||
|
|
@ -160,7 +169,7 @@ export default {
|
|||
type: data.type,
|
||||
title: "物模型",
|
||||
component: "paramsJson",
|
||||
paramIdx: null,
|
||||
paramIdx: null
|
||||
});
|
||||
break;
|
||||
}
|
||||
|
|
@ -176,39 +185,43 @@ export default {
|
|||
},
|
||||
forceUpdateList(component) {
|
||||
let arttributeList = [],
|
||||
groupList = [];
|
||||
groupList = [];
|
||||
|
||||
try {
|
||||
arttributeList = JSON.parse(this.arttributeList);
|
||||
groupList = JSON.parse(this.groupList);
|
||||
} catch (error) {
|
||||
arttributeList = [],
|
||||
groupList = [];
|
||||
(arttributeList = []), (groupList = []);
|
||||
console.log(error);
|
||||
}
|
||||
|
||||
if (component === "groupForm") {
|
||||
this.$refs.groupref && this.$refs.groupref.setList(groupList);
|
||||
} else if (component === "attributeForm") {
|
||||
this.$refs.attributeref && this.$refs.attributeref.setList(arttributeList.properties);
|
||||
this.$refs.attributeref &&
|
||||
this.$refs.attributeref.setList(arttributeList.properties);
|
||||
} else if (component === "functionForm") {
|
||||
this.$refs.functionref && this.$refs.functionref.setList(arttributeList.functions);
|
||||
this.$refs.functionref &&
|
||||
this.$refs.functionref.setList(arttributeList.functions);
|
||||
} else if (component === "eventForm") {
|
||||
this.$refs.eventref &&
|
||||
this.$refs.eventref.setList(arttributeList.events);
|
||||
}
|
||||
},
|
||||
handleInitData() {
|
||||
let arttributeList = [],
|
||||
groupList = [],
|
||||
functionList = [],
|
||||
eventList = [];
|
||||
groupList = [],
|
||||
functionList = [],
|
||||
eventList = [];
|
||||
|
||||
try {
|
||||
let json = JSON.parse(this.arttributeList);
|
||||
if(json.properties){
|
||||
if (json.properties) {
|
||||
arttributeList = json.properties;
|
||||
groupList = JSON.parse(this.groupList);
|
||||
functionList = json.functions;
|
||||
eventList = json.events;
|
||||
}else{
|
||||
} else {
|
||||
arttributeList = json;
|
||||
groupList = JSON.parse(this.groupList);
|
||||
functionList = json.functions;
|
||||
|
|
@ -222,15 +235,15 @@ export default {
|
|||
console.log(error);
|
||||
}
|
||||
|
||||
console.log(arttributeList, groupList)
|
||||
console.log(arttributeList, groupList);
|
||||
|
||||
this.$store.dispatch("InitAttributeAndGroup", {
|
||||
attrList: arttributeList,
|
||||
groupList: groupList,
|
||||
functionList:functionList,
|
||||
eventList:eventList
|
||||
functionList: functionList,
|
||||
eventList: eventList
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,85 +1,88 @@
|
|||
<template>
|
||||
<div class="prod-params-json">
|
||||
<!-- <div class="left-cmds">-->
|
||||
<!-- <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.properties"-->
|
||||
<!-- :key="paramsItem.funId"-->
|
||||
<!-- :label="paramsItem.funName + '：'"-->
|
||||
<!-- :prop="paramsItem.funKey"-->
|
||||
<!-- >-->
|
||||
<!-- <!– :rules="retrunRules(paramsItem)" 验证 –>-->
|
||||
<!-- <el-select-->
|
||||
<!-- 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)"-->
|
||||
<!-- :key="valus"-->
|
||||
<!-- :label="keys"-->
|
||||
<!-- :value="valus"-->
|
||||
<!-- ></el-option>-->
|
||||
<!-- </el-select>-->
|
||||
<!-- <el-input-number-->
|
||||
<!-- 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>-->
|
||||
<!-- <div class="left-cmds">-->
|
||||
<!-- <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.properties"-->
|
||||
<!-- :key="paramsItem.funId"-->
|
||||
<!-- :label="paramsItem.funName + '：'"-->
|
||||
<!-- :prop="paramsItem.funKey"-->
|
||||
<!-- >-->
|
||||
<!-- <!– :rules="retrunRules(paramsItem)" 验证 –>-->
|
||||
<!-- <el-select-->
|
||||
<!-- 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)"-->
|
||||
<!-- :key="valus"-->
|
||||
<!-- :label="keys"-->
|
||||
<!-- :value="valus"-->
|
||||
<!-- ></el-option>-->
|
||||
<!-- </el-select>-->
|
||||
<!-- <el-input-number-->
|
||||
<!-- 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-->
|
||||
<!-- 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-->
|
||||
<!-- v-else-if="paramsItem.funDataType === 'TEXT'"-->
|
||||
<!-- v-model="form.data.params[paramsItem.funKey]"-->
|
||||
<!-- clearable-->
|
||||
<!-- style="width: 85%;"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-form>-->
|
||||
<!-- <span v-else>暂无数据</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- <el-input-number-->
|
||||
<!-- 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-->
|
||||
<!-- v-else-if="paramsItem.funDataType === 'TEXT'"-->
|
||||
<!-- v-model="form.data.params[paramsItem.funKey]"-->
|
||||
<!-- clearable-->
|
||||
<!-- style="width: 85%;"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-form>-->
|
||||
<!-- <span v-else>暂无数据</span>-->
|
||||
<!-- </div>-->
|
||||
<div class="right-json">
|
||||
<div style="border: 1px solid #ccc; margin-top: -15px;width: 100%; height: 600px; overflow: scroll">
|
||||
<div
|
||||
style="border: 1px solid #ccc; margin-top: -15px;width: 100%; height: 600px; overflow: scroll"
|
||||
>
|
||||
<json-viewer :expand-depth="10" :value="paramsList" copyable>
|
||||
<template v-slot:copy>复制</template>
|
||||
</json-viewer>
|
||||
</div>
|
||||
<!-- <div class="option-wrap">-->
|
||||
<!-- <el-button type="text" @click="copeText">复制</el-button>-->
|
||||
<!-- </div>-->
|
||||
<!-- <pre>{{paramsList}}</pre>-->
|
||||
<!-- <div class="option-wrap">-->
|
||||
<!-- <el-button type="text" @click="copeText">复制</el-button>-->
|
||||
<!-- </div>-->
|
||||
<!-- <pre>{{paramsList}}</pre>-->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import JsonViewer from 'vue-json-viewer';
|
||||
import 'vue-json-viewer/style.css';
|
||||
import JsonViewer from "vue-json-viewer";
|
||||
import "vue-json-viewer/style.css";
|
||||
export default {
|
||||
name: "ParamsJson",
|
||||
props: {
|
||||
other: {
|
||||
type: Object,
|
||||
default: {
|
||||
action: '',
|
||||
prodPK: '',
|
||||
cmdKey: ''
|
||||
action: "",
|
||||
prodPK: "",
|
||||
cmdKey: ""
|
||||
}
|
||||
},
|
||||
paramsList: {
|
||||
type: Object,
|
||||
default: {
|
||||
properties:[],
|
||||
functions:[],
|
||||
properties: [],
|
||||
functions: [],
|
||||
events: []
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -97,7 +100,7 @@ export default {
|
|||
}
|
||||
};
|
||||
},
|
||||
components:{ JsonViewer },
|
||||
components: { JsonViewer },
|
||||
created() {
|
||||
if (this.paramsList) {
|
||||
this.form.action = this.other.action;
|
||||
|
|
@ -115,7 +118,7 @@ export default {
|
|||
},
|
||||
handelList() {
|
||||
var result = {};
|
||||
console.log("this.paramsList.properties",this.paramsList)
|
||||
console.log("this.paramsList.properties", this.paramsList);
|
||||
this.paramsList.properties.forEach(v => {
|
||||
if (!result[v.funKey]) {
|
||||
result[v.funKey] = "";
|
||||
|
|
|
|||
Loading…
Reference in New Issue