566 lines
15 KiB
Vue
566 lines
15 KiB
Vue
<template>
|
|
<div class="app-container product-customparams-wrap">
|
|
<el-row :gutter="10" class="mb8" v-show="isOption">
|
|
<el-col :span="1.5">
|
|
<el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd"
|
|
>新增</el-button
|
|
>
|
|
</el-col>
|
|
<el-col :span="1.5">
|
|
<el-button
|
|
type="primary"
|
|
icon="el-icon-s-platform"
|
|
size="mini"
|
|
@click="handleParams"
|
|
>物模型参数</el-button
|
|
>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-table v-loading="loading" :data="functionList" height="300px">
|
|
<el-table-column type="index" width="75" align="center" label="序号" />
|
|
<el-table-column label="参数名称" align="left" prop="funName" />
|
|
<el-table-column label="标识符" align="left" prop="funKey" />
|
|
<el-table-column label="数据类型" align="left" prop="funDataType" >
|
|
<template slot-scope="scope">
|
|
<span>{{ funDataTypeOption[scope.row.funDataType] }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="所属分组" align="left" prop="funDataType" >
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.cmdKey }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="传输类型" align="left" prop="funRwType" >
|
|
<template slot-scope="scope">
|
|
<span>{{ funRwTypeOption[scope.row.funRwType] }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<!-- <el-table-column label="属性" align="left" prop="funObj" /> -->
|
|
<el-table-column
|
|
v-if="isOption"
|
|
label="操作"
|
|
width="100px"
|
|
align="center"
|
|
class-name="small-padding fixed-width"
|
|
>
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
size="mini"
|
|
type="text"
|
|
icon="el-icon-edit"
|
|
@click="handleUpdate(scope.row, scope.$index, 'update')"
|
|
>修改</el-button
|
|
>
|
|
|
|
<el-button
|
|
size="mini"
|
|
type="text"
|
|
icon="el-icon-delete"
|
|
@click="handleDelete(scope.row, scope.$index)"
|
|
>删除</el-button
|
|
>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<pagination
|
|
v-show="total > 0"
|
|
:total="total"
|
|
:page.sync="queryParams.pageNum"
|
|
:limit.sync="queryParams.pageSize"
|
|
@pagination="getList"
|
|
/>
|
|
|
|
<!-- 添加或修改功能定义对话框 -->
|
|
<el-dialog class="eldialog-wrap" :title="title" :visible.sync="attributeopen" width="550px" :close-on-click-modal="false">
|
|
<el-form
|
|
ref="form"
|
|
style="padding: 20px 20px 0px 20px"
|
|
:model="form"
|
|
:rules="rules"
|
|
label-width="100px"
|
|
>
|
|
<el-form-item label="参数名称:" prop="funName">
|
|
<el-input v-model="form.funName" placeholder="请输入参数名称" />
|
|
</el-form-item>
|
|
<el-form-item label="标识符:" prop="funKey">
|
|
<el-input
|
|
v-model="form.funKey"
|
|
:disabled="tempType === 'update'"
|
|
placeholder="请输入标识符"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="数据类型:" prop="funDataType">
|
|
<el-select
|
|
v-model="form.funDataType"
|
|
@change="funDataTypeChange"
|
|
placeholder="请选择数据类型"
|
|
>
|
|
<el-option
|
|
v-for="(dice, value) in funDataTypeOption"
|
|
:value="value"
|
|
:key="value"
|
|
:label="dice"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="保留小数位:"
|
|
v-if="form.funDataType === 'FLOAT'"
|
|
prop="funValAcc"
|
|
>
|
|
<el-input
|
|
onkeyup="value=value.replace(/[^\d]/g,'')"
|
|
v-model="form.funValAcc"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="传输类型:" prop="funRwType">
|
|
<el-select v-model="form.funRwType" placeholder="请选择传输类型">
|
|
<el-option
|
|
v-for="(dice, value) in funRwTypeOption"
|
|
:value="value"
|
|
:key="value"
|
|
:label="dice"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="计量单位:" prop="unitName">
|
|
<el-input v-model="form.unitName" placeholder="请输入计量单位" />
|
|
</el-form-item>
|
|
|
|
<div class="item-title-wrap">数据校验</div>
|
|
<div class="custom-wrap">
|
|
<el-button
|
|
size="mini"
|
|
style="position: absolute; top: 460px; left: 40px"
|
|
v-if="form.funValidType === 'ENUM'"
|
|
@click="addJsonObj"
|
|
>添加数值</el-button
|
|
>
|
|
<el-form-item
|
|
label="校验方式:"
|
|
:style="form.funValidType === 'ENUM' ? 'height: 80px;' : ''"
|
|
prop="funValidType"
|
|
>
|
|
<el-select
|
|
v-model="form.funValidType"
|
|
@change="funValidTypeChange"
|
|
placeholder="请选择校验方式"
|
|
>
|
|
<el-option
|
|
v-for="(dice, value) in funValidTypeOption"
|
|
v-show="
|
|
!(
|
|
(form.funDataType === 'TEXT' && value === 'RANGE') ||
|
|
(form.funDataType !== 'TEXT' && value === 'LENGTH') ||
|
|
(form.funDataType === 'BOOL' && value === 'RANGE') ||
|
|
(form.funDataType === 'BOOL' && value === 'LENGTH')
|
|
)
|
|
"
|
|
:value="value"
|
|
:key="value"
|
|
:label="dice"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<div class="enumTypeDiv" v-if="form.funValidType === 'ENUM'">
|
|
<div class="enum-item">
|
|
<json-editor
|
|
ref="jsonEditors"
|
|
:jsonString="form.funObj"
|
|
@event="jsonEvent"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<el-row
|
|
:gutter="10"
|
|
class="max-min-row"
|
|
v-if="form.funValidType === 'RANGE' || form.funValidType === 'LENGTH'"
|
|
>
|
|
<el-col :span="12">
|
|
<el-form-item label prop="funValMin">
|
|
<el-input v-model="form.funValMin" placeholder="最小值" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-input disabled placeholder="最小值" />
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row
|
|
:gutter="10"
|
|
class="max-min-row"
|
|
v-if="form.funValidType === 'RANGE' || form.funValidType === 'LENGTH'"
|
|
>
|
|
<el-col :span="12">
|
|
<el-form-item label prop="funValMax">
|
|
<el-input v-model="form.funValMax" placeholder="最大值" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-input disabled placeholder="最大值" />
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</el-form>
|
|
|
|
<div class="form-button-div">
|
|
<el-button type="primary" size="mini" @click="submitForm">保存</el-button>
|
|
<el-button size="mini" @click="cancel">取消</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
|
|
<el-dialog
|
|
class="params-eldialog"
|
|
title="物模型参数"
|
|
top="5vh"
|
|
:visible.sync="paramsOpen"
|
|
width="800px"
|
|
>
|
|
<params-json-wrap
|
|
v-if="paramsOpen === true"
|
|
:other="{
|
|
action: '',
|
|
prodPK: sourceId,
|
|
cmdKey: '',
|
|
}"
|
|
:paramsList="functionList"
|
|
></params-json-wrap>
|
|
</el-dialog>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import JsonEditor from "./jsonEditor.vue";
|
|
import ParamsJsonWrap from "./paramsJson";
|
|
const funDataTypeOption = {
|
|
INT32: "整数型",
|
|
FLOAT: "浮点型",
|
|
TEXT: "字符串",
|
|
BOOL: "布尔型",
|
|
};
|
|
const funRwTypeOption = {
|
|
READWRITE: "可上报可下发",
|
|
READ: "只上报",
|
|
WRITE: "只下发",
|
|
};
|
|
|
|
const funValidTypeOption = {
|
|
ENUM: "枚举",
|
|
RANGE: "范围",
|
|
LENGTH: "长度",
|
|
NOT: "不校验",
|
|
};
|
|
|
|
export default {
|
|
name: "CustomParams",
|
|
components: {
|
|
JsonEditor,
|
|
ParamsJsonWrap,
|
|
},
|
|
props: {
|
|
sourceId: {
|
|
type: [Number, String],
|
|
default: "",
|
|
},
|
|
isOption: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
funDataTypeOption,
|
|
funRwTypeOption,
|
|
funValidTypeOption,
|
|
paramsOpen: 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: "",
|
|
};
|
|
},
|
|
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("GetAttributeList").then((res) => {
|
|
console.log('666', 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.$emit('handleClick', { type: 'add', idx: 0 })
|
|
},
|
|
handleCope(row) {
|
|
this.reset();
|
|
const funId = row.funId
|
|
this.tempType = "create";
|
|
this.title = "复制自定义参数";
|
|
this.form = row;
|
|
},
|
|
/** 修改按钮操作 */
|
|
handleUpdate(row, idx, type) {
|
|
this.$emit('handleClick', { 'type': type, 'idx': idx })
|
|
},
|
|
/** 提交按钮 */
|
|
submitForm: function () {
|
|
this.$refs["form"].validate((valid) => {
|
|
if (valid) {
|
|
// 新增和修改操作
|
|
}
|
|
});
|
|
},
|
|
/** 删除按钮操作 */
|
|
handleDelete(row, idx) {
|
|
var that = this
|
|
this.$confirm(
|
|
// '是否确认删除功能定义编号为"' + funIds + '"的数据项?',
|
|
"是否删除该选项",
|
|
"警告",
|
|
{
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
}
|
|
)
|
|
.then(() => {
|
|
// 执行删除数据
|
|
that.$store.dispatch('DeleteAttribute', idx)
|
|
that.$emit('handleClick', { 'type': 'list' })
|
|
})
|
|
},
|
|
},
|
|
};
|
|
</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 {
|
|
border-bottom: 1px solid #747373;
|
|
}
|
|
.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>
|