提交物模型可视化操作
This commit is contained in:
23688nl
parent
36c9abf200
commit
c2e0752929
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="app-container dialog-bit">
|
||||
<el-dialog class="eldialog-wrap-t" :title="title" :visible.sync="visible" :width="width">
|
||||
<el-dialog class="eldialog-wrap-t" @close="close" :title="title" :close-on-click-modal="false" :visible.sync="visible" :width="width">
|
||||
<slot name="dialog-center"></slot>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<slot name="dialog-footer"></slot>
|
||||
|
|
@ -16,7 +16,8 @@ export default {
|
|||
type: String
|
||||
},
|
||||
visible: {
|
||||
type: Boolean
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
|
|
@ -24,7 +25,12 @@ export default {
|
|||
return '450px'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.$emit('close')
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" >
|
||||
|
|
|
|||
|
|
@ -14,6 +14,8 @@ const getters = {
|
|||
permissions: state => state.user.permissions,
|
||||
permission_routes: state => state.permission.routes,
|
||||
sidebarRouters:state => state.permission.sidebarRouters,
|
||||
userId: state => state.user.userId
|
||||
userId: state => state.user.userId,
|
||||
attributeList: state => state.attribute.attributeList,
|
||||
groupList: state => state.attribute.groupList
|
||||
}
|
||||
export default getters
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import tagsView from './modules/tagsView'
|
|||
import permission from './modules/permission'
|
||||
import settings from './modules/settings'
|
||||
import getters from './getters'
|
||||
import attribute from './modules/attribute'
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
|
|
@ -13,6 +14,7 @@ const store = new Vuex.Store({
|
|||
modules: {
|
||||
app,
|
||||
user,
|
||||
attribute,
|
||||
tagsView,
|
||||
permission,
|
||||
settings
|
||||
|
|
|
|||
|
|
@ -0,0 +1,100 @@
|
|||
|
||||
import { Notification, MessageBox, Message } from 'element-ui'
|
||||
|
||||
const attribute = {
|
||||
state: {
|
||||
attributeList: [],
|
||||
groupList: []
|
||||
},
|
||||
|
||||
mutations: {
|
||||
SET_ATTRIBUTE_LIST: (state, list) => {
|
||||
state.attributeList = list
|
||||
},
|
||||
SET_GROUP_LIST: (state, list) => {
|
||||
state.groupList = list
|
||||
},
|
||||
PUSH_ATTRIBUTE: (state, item) => {
|
||||
state.attributeList.push(item)
|
||||
},
|
||||
PUSH_GROUP: (state, item) => {
|
||||
state.groupList.push(item)
|
||||
},
|
||||
UPDATE_ATTRIBUTE: (state, {item, idx}) => {
|
||||
state.attributeList[idx] = item
|
||||
},
|
||||
UPDATE_GROUP: (state, {item, idx}) => {
|
||||
state.groupList[idx] = item
|
||||
},
|
||||
DELETE_ATTRIBUTE: (state, idx) => {
|
||||
state.attributeList.splice(idx,1);
|
||||
},
|
||||
DELETE_GROUP: (state, idx) => {
|
||||
state.groupList.splice(idx,1);
|
||||
},
|
||||
GET_ATTRIBUTE_ITEM: (state, idx) => {
|
||||
return state.attributeList[idx]
|
||||
},
|
||||
GET_GROUP_ITEM: (state, idx) => {
|
||||
return state.groupList[idx]
|
||||
}
|
||||
},
|
||||
|
||||
actions: {
|
||||
// 初始化 属性和分组数据
|
||||
InitAttributeAndGroup({ commit, state }, data) {
|
||||
commit('SET_ATTRIBUTE_LIST', data.attrList)
|
||||
commit('SET_GROUP_LIST', data.groupList)
|
||||
console.log('res:', state)
|
||||
},
|
||||
// 新增 属性
|
||||
AddAttribute({ commit, state }, attr) {
|
||||
commit('PUSH_ATTRIBUTE', attr)
|
||||
},
|
||||
// 新增 分组
|
||||
AddGroup({ commit, state }, data) {
|
||||
commit('PUSH_GROUP', data)
|
||||
},
|
||||
// 获取 属性 单个信息
|
||||
GetAttributeItem({ commit, state }, idx) {
|
||||
return new Promise((resolve, reject) => {
|
||||
resolve(state.attributeList[idx])
|
||||
})
|
||||
},
|
||||
// 获取 分组 单个信息
|
||||
GetGroupItem({ commit, state }, idx) {
|
||||
return new Promise((resolve, reject) => {
|
||||
resolve(state.groupList[idx])
|
||||
})
|
||||
},
|
||||
// 修改 属性
|
||||
EditAttribute({ commit, state }, param) {
|
||||
commit('UPDATE_ATTRIBUTE', param)
|
||||
},
|
||||
// 修改 属性
|
||||
EditGroup({ commit, state }, param) {
|
||||
commit('UPDATE_GROUP', param)
|
||||
},
|
||||
// 删除分组 删除分组 判断分组是否有属性，有属性就不能删除
|
||||
DeleteGroup({ commit, state }, idx) {
|
||||
let groupItem = state.groupList[idx];
|
||||
let result = state.attributeList.filter(v => {
|
||||
if (v['cmdKey'] === groupItem['cmdKey']) {
|
||||
return true
|
||||
}
|
||||
})
|
||||
if (!result) {
|
||||
commit('DELETE_GROUP', idx)
|
||||
} else {
|
||||
Message.error('当前分组已关联参数，无法删除！');
|
||||
}
|
||||
},
|
||||
// 删除属性
|
||||
DeleteAttribute({ commit, state }, idx) {
|
||||
commit('DELETE_ATTRIBUTE', idx)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
export default attribute
|
||||
|
|
@ -15,6 +15,16 @@ export function validUsername(str) {
|
|||
return valid_map.indexOf(str.trim()) >= 0
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* @param {string} strAndNumber 50字符
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
export function strAndNumber(str) {
|
||||
const reg = /^[A-Za-z0-9]{1,50}$/
|
||||
return reg.test(str)
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} url
|
||||
* @returns {Boolean}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,13 @@
|
|||
</el-form-item>
|
||||
|
||||
<el-form-item label="协议类型" prop="protocolType">
|
||||
<el-select v-model="queryParams.protocolType" @change="handleQuery" placeholder="请选择协议类型" clearable size="small">
|
||||
<el-select
|
||||
v-model="queryParams.protocolType"
|
||||
@change="handleQuery"
|
||||
placeholder="请选择协议类型"
|
||||
clearable
|
||||
size="small"
|
||||
>
|
||||
<el-option
|
||||
:label="keys"
|
||||
:value="vals"
|
||||
|
|
@ -37,8 +43,16 @@
|
|||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
size="mini"
|
||||
@click="handleQuery"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
|
||||
>重置</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
|
|
@ -51,38 +65,80 @@
|
|||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['iot:model:add']"
|
||||
>新增</el-button>
|
||||
>新增</el-button
|
||||
>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
<right-toolbar
|
||||
:showSearch.sync="showSearch"
|
||||
@queryTable="getList"
|
||||
></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="modelList"
|
||||
:default-sort="{prop: 'createTime', order: 'descending'}"
|
||||
:default-sort="{ prop: 'createTime', order: 'descending' }"
|
||||
@sort-change="sortChange"
|
||||
>
|
||||
<el-table-column type="index" label="序号" align="center" :index="indexFormatter" width="80px"></el-table-column>
|
||||
<el-table-column label="型号名称" align="left" width="200px" prop="modelName" />
|
||||
<el-table-column label="厂商名称" align="left" width="200px" prop="vendorName" />
|
||||
<el-table-column label="产品PK" align="left" width="200px" prop="prodKey" />
|
||||
<el-table-column
|
||||
type="index"
|
||||
label="序号"
|
||||
align="center"
|
||||
:index="indexFormatter"
|
||||
width="80px"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
label="型号名称"
|
||||
align="left"
|
||||
width="200px"
|
||||
prop="modelName"
|
||||
/>
|
||||
<el-table-column
|
||||
label="厂商名称"
|
||||
align="left"
|
||||
width="200px"
|
||||
prop="vendorName"
|
||||
/>
|
||||
<el-table-column
|
||||
label="产品PK"
|
||||
align="left"
|
||||
width="200px"
|
||||
prop="prodKey"
|
||||
/>
|
||||
<el-table-column label="产品密钥" align="left" prop="prodSecret" />
|
||||
|
||||
<el-table-column label="设备类型" align="center" prop="deviceType" width="120px">
|
||||
<el-table-column
|
||||
label="设备类型"
|
||||
align="center"
|
||||
prop="deviceType"
|
||||
width="120px"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-text="deviceTypeList[scope.row.deviceType]"></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="协议类型" align="center" prop="protocolType" width="120px">
|
||||
<el-table-column
|
||||
label="协议类型"
|
||||
align="center"
|
||||
prop="protocolType"
|
||||
width="120px"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-text="protocolTypeOpt[scope.row.protocolType]"></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="设备状态" align="center" prop="modelStatus" width="100px">
|
||||
<el-table-column
|
||||
label="设备状态"
|
||||
align="center"
|
||||
prop="modelStatus"
|
||||
width="100px"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="success" v-if="scope.row.modelStatus === '0'">启用</el-tag>
|
||||
<el-tag type="success" v-if="scope.row.modelStatus === '0'"
|
||||
>启用</el-tag
|
||||
>
|
||||
<el-tag type="danger" v-else>禁用</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
|
@ -107,14 +163,16 @@
|
|||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['iot:model:edit']"
|
||||
>修改</el-button>
|
||||
>修改</el-button
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['iot:model:remove']"
|
||||
>删除</el-button>
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
|
@ -128,81 +186,115 @@
|
|||
/>
|
||||
|
||||
<!-- 添加或修改型号对话框 -->
|
||||
<el-dialog class="eldialog-wrap" :close-on-click-modal="false" :title="title" :visible.sync="open" width="500px">
|
||||
<el-dialog
|
||||
class="eldialog-wrap"
|
||||
:close-on-click-modal="false"
|
||||
:title="title"
|
||||
:visible.sync="open"
|
||||
width="1000px"
|
||||
>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
||||
<el-form-item label="厂商：" prop="vendorId">
|
||||
<el-input
|
||||
v-model="form.vendorName"
|
||||
placeholder="点击选择厂商"
|
||||
@focus="openTableSelectDialog()"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="厂商：" prop="vendorId">
|
||||
<el-input
|
||||
v-model="form.vendorName"
|
||||
placeholder="点击选择厂商"
|
||||
@focus="openTableSelectDialog()"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="协议类型：" prop="protocolType">
|
||||
<el-select
|
||||
v-model="form.protocolType"
|
||||
style="width: 100%"
|
||||
placeholder="请选择协议类型"
|
||||
size="small"
|
||||
>
|
||||
<el-option
|
||||
:label="keys"
|
||||
:value="vals"
|
||||
v-for="(keys, vals) in protocolTypeOpt"
|
||||
:key="vals"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="产品PK：" prop="prodKey">
|
||||
<el-input
|
||||
v-if="form.protocolType === 'OFFICIAL'"
|
||||
placeholder="请填写产品PK"
|
||||
v-model="form.prodKey"
|
||||
></el-input>
|
||||
<el-input
|
||||
v-else
|
||||
v-model="form.prodKey"
|
||||
placeholder="点击选择产品"
|
||||
@focus="openProductTableSelectDialog()"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="型号名称：" prop="modelName">
|
||||
<el-input v-model="form.modelName" placeholder="请输入型号名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="产品json："
|
||||
prop="prodJson"
|
||||
v-if="form.protocolType === 'OFFICIAL'"
|
||||
>
|
||||
<attribute-view
|
||||
v-if="open"
|
||||
:arttributeList="form.prodJson"
|
||||
:groupList="form.remark"
|
||||
@handleEvent="handleViewEvent"
|
||||
ref="attributeref"
|
||||
></attribute-view>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-form-item label="协议类型：" prop="protocolType">
|
||||
<el-select
|
||||
v-model="form.protocolType"
|
||||
style="width: 100%;"
|
||||
placeholder="请选择协议类型"
|
||||
size="small"
|
||||
>
|
||||
<el-option
|
||||
:label="keys"
|
||||
:value="vals"
|
||||
v-for="(keys, vals) in protocolTypeOpt"
|
||||
:key="vals"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="设备类型：" prop="deviceType">
|
||||
<el-select
|
||||
v-model="form.deviceType"
|
||||
style="width: 100%"
|
||||
placeholder="请选择设备类型"
|
||||
clearable
|
||||
size="small"
|
||||
>
|
||||
<el-option
|
||||
:label="keys"
|
||||
:value="vals"
|
||||
v-for="(keys, vals) in deviceTypeList"
|
||||
:key="vals"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-form-item label="产品PK：" prop="prodKey">
|
||||
<el-input v-if="form.protocolType === 'OFFICIAL'" placeholder="请填写产品PK" v-model="form.prodKey" ></el-input>
|
||||
<el-input
|
||||
v-else
|
||||
v-model="form.prodKey"
|
||||
placeholder="点击选择产品"
|
||||
@focus="openProductTableSelectDialog()"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="型号名称：" prop="modelName">
|
||||
<el-input v-model="form.modelName" placeholder="请输入型号名称" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="产品json：" prop="prodJson" v-if="form.protocolType === 'OFFICIAL'">
|
||||
<el-input v-model="form.prodJson" type="textarea" :rows="5" placeholder="请输入产品json" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="分组json：" prop="remark" v-if="form.protocolType === 'OFFICIAL'">
|
||||
<el-input v-model="form.remark" type="textarea" :rows="5" placeholder="请输入分组json" />
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item label="设备类型：" prop="deviceType">
|
||||
<el-select
|
||||
v-model="form.deviceType"
|
||||
style="width: 100%;"
|
||||
placeholder="请选择设备类型"
|
||||
clearable
|
||||
size="small"
|
||||
>
|
||||
<el-option
|
||||
:label="keys"
|
||||
:value="vals"
|
||||
v-for="(keys, vals) in deviceTypeList"
|
||||
:key="vals"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="参数设置：" v-show="form.deviceType">
|
||||
<span style="color: red; font-size: 12px;">*注意：锁定即参数不可修改；未锁则可以修改。</span>
|
||||
<div class="form-params-wrap">
|
||||
<param-wrap ref="paramWrap" :typeKeys="form.deviceType"></param-wrap>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="参数设置：" v-show="form.deviceType">
|
||||
<span style="color: red; font-size: 12px"
|
||||
>*注意：锁定即参数不可修改；未锁则可以修改。</span
|
||||
>
|
||||
<div class="form-params-wrap">
|
||||
<param-wrap
|
||||
ref="paramWrap"
|
||||
:typeKeys="form.deviceType"
|
||||
></param-wrap>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" size="mini" @click="submitForm">确 定</el-button>
|
||||
<el-button type="primary" size="mini" @click="submitForm"
|
||||
>确 定</el-button
|
||||
>
|
||||
<el-button @click="cancel" size="mini">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
|
@ -226,10 +318,46 @@
|
|||
/>
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" type="primary" @click="resuleClick">确 定</el-button>
|
||||
<el-button size="mini" @click="() =>{selectTableShow = false}">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="resuleClick"
|
||||
>确 定</el-button
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
@click="
|
||||
() => {
|
||||
selectTableShow = false;
|
||||
}
|
||||
"
|
||||
>取 消</el-button
|
||||
>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<dialog-template :title="componentTitle" @close="() => {AttributeViewShow = false}" :visible="AttributeViewShow" width="750px">
|
||||
|
||||
<component
|
||||
v-if="AttributeViewShow"
|
||||
:is="componectVal"
|
||||
:tempType="childOpt.type"
|
||||
:paramIdx="childOpt.paramIdx"
|
||||
:other="{
|
||||
action: '',
|
||||
prodPK: form.prodKey,
|
||||
cmdKey: '',
|
||||
}"
|
||||
:paramsList="functionList"
|
||||
ref="componentref"
|
||||
@ok="compEventOk"
|
||||
slot="dialog-center"
|
||||
></component>
|
||||
|
||||
<div slot="dialog-footer">
|
||||
<el-button type="primary" size="mini" @click="submitAttribute"
|
||||
>确 定</el-button
|
||||
>
|
||||
<el-button size="mini" @click="() => {AttributeViewShow = false}">取 消</el-button>
|
||||
</div>
|
||||
</dialog-template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -242,16 +370,23 @@ import {
|
|||
updateModel,
|
||||
exportModel,
|
||||
listProductList,
|
||||
listModelType
|
||||
listModelType,
|
||||
} from "@/api/iot/model";
|
||||
import { listVendor } from "@/api/iot/vendor";
|
||||
import { listDeviceTypeList } from "@/api/iot/device";
|
||||
import SelectTableWrap from "@/components/SelectTable/index";
|
||||
import ParamWrap from "@/components/ParamWrap/deviceParam";
|
||||
import AttributeView from "@/views/profile/attribute/index";
|
||||
|
||||
import DialogTemplate from "@/components/DialogTemplate";
|
||||
|
||||
import attributeForm from "@/views/profile/attribute/attributeForm";
|
||||
import groupForm from "@/views/profile/attribute/groupForm";
|
||||
import paramsJson from "@/views/profile/attribute/paramsJson"
|
||||
|
||||
const deviceStartsOpt = {
|
||||
0: "禁用",
|
||||
1: "启用"
|
||||
1: "启用",
|
||||
};
|
||||
|
||||
// const protocolTypeOpt = {
|
||||
|
|
@ -262,11 +397,23 @@ export default {
|
|||
name: "Model",
|
||||
components: {
|
||||
SelectTableWrap,
|
||||
ParamWrap
|
||||
ParamWrap,
|
||||
AttributeView,
|
||||
DialogTemplate,
|
||||
attributeForm,
|
||||
groupForm,
|
||||
paramsJson
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
componectVal: 'attributeForm',
|
||||
childOpt: {
|
||||
type: 'add',
|
||||
paramIdx: 0
|
||||
},
|
||||
protocolTypeOpt: [],
|
||||
AttributeViewShow: false,
|
||||
AttributeFormViewShow: false,
|
||||
selectTableShow: false,
|
||||
tableSelectOption: {},
|
||||
selectResult: {},
|
||||
|
|
@ -300,26 +447,27 @@ export default {
|
|||
prodSecret: null,
|
||||
protocolType: null,
|
||||
orderByColumn: "createTime",
|
||||
isAsc: "desc"
|
||||
isAsc: "desc",
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
vendorId: [
|
||||
{ required: true, message: "厂商不能为空", trigger: "blur" }
|
||||
{ required: true, message: "厂商不能为空", trigger: "blur" },
|
||||
],
|
||||
prodKey: [
|
||||
{ required: true, message: "产品PK不能为空", trigger: "blur" }
|
||||
{ required: true, message: "产品PK不能为空", trigger: "blur" },
|
||||
],
|
||||
modelName: [
|
||||
{ required: true, message: "型号名称不能为空", trigger: "blur" }
|
||||
{ required: true, message: "型号名称不能为空", trigger: "blur" },
|
||||
],
|
||||
deviceType: [
|
||||
{ required: true, message: "设备类型不能为空", trigger: "blur" }
|
||||
]
|
||||
{ required: true, message: "设备类型不能为空", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
deviceTypeList: {}
|
||||
functionList: [],
|
||||
deviceTypeList: {},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
|
@ -328,15 +476,39 @@ export default {
|
|||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
handleViewEvent(data) {
|
||||
console.log(data)
|
||||
this.componentTitle = data.title
|
||||
this.childOpt.type = data.type,
|
||||
this.childOpt.paramIdx = data.paramIdx
|
||||
this.AttributeViewShow = true
|
||||
this.functionList = JSON.parse(JSON.stringify(this.$store.getters.attributeList))
|
||||
this.componectVal = data.component;
|
||||
},
|
||||
submitAttribute() {
|
||||
if (this.childOpt.type === 'param') {
|
||||
this.AttributeViewShow = false
|
||||
return
|
||||
}
|
||||
if (this.$refs.componentref) {
|
||||
this.$refs.componentref.submitForm()
|
||||
}
|
||||
},
|
||||
compEventOk() {
|
||||
//执行
|
||||
this.AttributeViewShow = false
|
||||
this.$forceUpdate()
|
||||
this.$refs.attributeref.forceUpdate(this.componectVal)
|
||||
},
|
||||
getModelTypeList() {
|
||||
listModelType().then(res => {
|
||||
this.protocolTypeOpt = res.data
|
||||
})
|
||||
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();
|
||||
|
|
@ -348,7 +520,7 @@ export default {
|
|||
},
|
||||
// 查询设备类型列表
|
||||
getDeviceTypeList() {
|
||||
listDeviceTypeList().then(response => {
|
||||
listDeviceTypeList().then((response) => {
|
||||
this.deviceTypeList = response.data;
|
||||
});
|
||||
},
|
||||
|
|
@ -356,32 +528,22 @@ 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: [
|
||||
// {
|
||||
// style: "",
|
||||
// placeholder: "产品名称",
|
||||
// clearable: true,
|
||||
// label: "产品名称",
|
||||
// type: "input",
|
||||
// key: "prodName",
|
||||
// size: "small",
|
||||
// value: ""
|
||||
// }
|
||||
]
|
||||
],
|
||||
},
|
||||
tableOpt: {
|
||||
loading: false,
|
||||
|
|
@ -397,7 +559,7 @@ export default {
|
|||
align: "left",
|
||||
width: "",
|
||||
"show-overflow-tooltip": false,
|
||||
tempType: "span"
|
||||
tempType: "span",
|
||||
},
|
||||
{
|
||||
style: "",
|
||||
|
|
@ -407,34 +569,14 @@ export default {
|
|||
align: "left",
|
||||
width: "",
|
||||
"show-overflow-tooltip": false,
|
||||
tempType: "span"
|
||||
tempType: "span",
|
||||
},
|
||||
// {
|
||||
// style: "",
|
||||
// label: "ProdSecret",
|
||||
// type: "",
|
||||
// prop: "prodSecret",
|
||||
// align: "left",
|
||||
// width: "",
|
||||
// "show-overflow-tooltip": false,
|
||||
// tempType: "span"
|
||||
// },
|
||||
// {
|
||||
// style: "",
|
||||
// label: "节点类型",
|
||||
// type: "",
|
||||
// prop: "prodNodeTypeName",
|
||||
// align: "left",
|
||||
// width: "",
|
||||
// "show-overflow-tooltip": false,
|
||||
// tempType: "span"
|
||||
// }
|
||||
],
|
||||
tableList: {
|
||||
type: Array
|
||||
}
|
||||
type: Array,
|
||||
},
|
||||
},
|
||||
tableList: []
|
||||
tableList: [],
|
||||
};
|
||||
this.selectTableShow = true;
|
||||
},
|
||||
|
|
@ -443,7 +585,7 @@ export default {
|
|||
this.selectResult = {};
|
||||
this.tableSelectOption = {
|
||||
otherOption: {
|
||||
tableType: "vendor"
|
||||
tableType: "vendor",
|
||||
},
|
||||
queryOpt: {
|
||||
disable: false,
|
||||
|
|
@ -451,12 +593,12 @@ export default {
|
|||
params: {
|
||||
vendorName: "",
|
||||
vendorAddress: "",
|
||||
vendorContact: ""
|
||||
vendorContact: "",
|
||||
},
|
||||
page: {
|
||||
pageSize: 10,
|
||||
pageNum: 1,
|
||||
total: 0
|
||||
total: 0,
|
||||
},
|
||||
inline: true,
|
||||
queryChilds: [
|
||||
|
|
@ -468,7 +610,7 @@ export default {
|
|||
type: "input",
|
||||
key: "vendorName",
|
||||
size: "small",
|
||||
value: ""
|
||||
value: "",
|
||||
},
|
||||
{
|
||||
style: "",
|
||||
|
|
@ -478,7 +620,7 @@ export default {
|
|||
type: "input",
|
||||
key: "vendorAddress",
|
||||
size: "small",
|
||||
value: ""
|
||||
value: "",
|
||||
},
|
||||
{
|
||||
style: "",
|
||||
|
|
@ -488,9 +630,9 @@ export default {
|
|||
type: "input",
|
||||
key: "vendorContact",
|
||||
size: "small",
|
||||
value: ""
|
||||
}
|
||||
]
|
||||
value: "",
|
||||
},
|
||||
],
|
||||
},
|
||||
tableOpt: {
|
||||
loading: false,
|
||||
|
|
@ -506,7 +648,7 @@ export default {
|
|||
align: "left",
|
||||
width: "",
|
||||
"show-overflow-tooltip": false,
|
||||
tempType: "span"
|
||||
tempType: "span",
|
||||
},
|
||||
{
|
||||
style: "",
|
||||
|
|
@ -516,7 +658,7 @@ export default {
|
|||
align: "left",
|
||||
width: "",
|
||||
"show-overflow-tooltip": false,
|
||||
tempType: "span"
|
||||
tempType: "span",
|
||||
},
|
||||
{
|
||||
style: "",
|
||||
|
|
@ -526,14 +668,14 @@ export default {
|
|||
align: "left",
|
||||
width: "",
|
||||
"show-overflow-tooltip": false,
|
||||
tempType: "span"
|
||||
}
|
||||
tempType: "span",
|
||||
},
|
||||
],
|
||||
tableList: {
|
||||
type: Array
|
||||
}
|
||||
type: Array,
|
||||
},
|
||||
},
|
||||
tableList: []
|
||||
tableList: [],
|
||||
};
|
||||
this.selectTableShow = true;
|
||||
},
|
||||
|
|
@ -548,14 +690,14 @@ 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);
|
||||
}
|
||||
|
|
@ -598,7 +740,7 @@ export default {
|
|||
/** 查询型号列表 */
|
||||
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;
|
||||
|
|
@ -618,8 +760,8 @@ export default {
|
|||
prodKey: "",
|
||||
deviceType: "",
|
||||
paramList: [],
|
||||
protocolType: 'IOTOS',
|
||||
prodJson: ''
|
||||
protocolType: "IOTOS",
|
||||
prodJson: "",
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
|
|
@ -635,7 +777,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;
|
||||
},
|
||||
|
|
@ -650,7 +792,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 = "修改型号";
|
||||
|
|
@ -661,17 +803,32 @@ export default {
|
|||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
if(this.form.protocolType === 'OFFICIAL') {
|
||||
let attrList = this.$store.getters.attributeList.map(v => {
|
||||
v['sourceId'] = this.form.prodKey
|
||||
return v
|
||||
});
|
||||
|
||||
let groupList = this.$store.getters.groupList.map(v => {
|
||||
v['sourceId'] = this.form.prodKey
|
||||
return v
|
||||
});
|
||||
console.log(groupList, attrList)
|
||||
this.form.prodJson = JSON.stringify(attrList) || 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 => {
|
||||
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();
|
||||
|
|
@ -686,9 +843,9 @@ export default {
|
|||
this.$confirm("是否删除该选项?", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
type: "warning",
|
||||
})
|
||||
.then(function() {
|
||||
.then(function () {
|
||||
return delModel(modelIds);
|
||||
})
|
||||
.then(() => {
|
||||
|
|
@ -702,16 +859,16 @@ 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">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,365 @@
|
|||
<template>
|
||||
<div class="attribute-form-view">
|
||||
<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"
|
||||
@input="inputChange"
|
||||
: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="分组:" prop="cmdKey">
|
||||
<el-select v-model="form.cmdKey" placeholder="请选分组">
|
||||
<el-option
|
||||
v-for="(item, idx) in groupList"
|
||||
:value="item.cmdKey"
|
||||
:key="idx"
|
||||
:label="item.cmdName"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="保留小数位:"
|
||||
v-if="form.funDataType === 'FLOAT'"
|
||||
prop="funValAcc"
|
||||
>
|
||||
<el-input
|
||||
onkeyup="value=value.replace(/[^\d]/g,'')"
|
||||
@input="inputChange"
|
||||
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" @input="inputChange" placeholder="请输入计量单位" />
|
||||
</el-form-item>
|
||||
|
||||
<div class="item-title-wrap">数据校验</div>
|
||||
<div class="custom-wrap">
|
||||
<el-button
|
||||
size="mini"
|
||||
:style="`position: absolute; top: ${ form.funDataType === 'FLOAT' ? '585px ' : '530px' }; 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" @input="inputChange" 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" @input="inputChange" placeholder="最大值" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-input disabled placeholder="最大值" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters, mapState } from "vuex";
|
||||
import JsonEditor from "./jsonEditor";
|
||||
const funDataTypeOption = {
|
||||
INT32: "整数型",
|
||||
FLOAT: "浮点型",
|
||||
TEXT: "字符串",
|
||||
BOOL: "布尔型",
|
||||
};
|
||||
const funRwTypeOption = {
|
||||
READWRITE: "可上报可下发",
|
||||
READ: "只上报",
|
||||
WRITE: "只下发",
|
||||
};
|
||||
|
||||
const funValidTypeOption = {
|
||||
ENUM: "枚举",
|
||||
RANGE: "范围",
|
||||
LENGTH: "长度",
|
||||
NOT: "不校验",
|
||||
};
|
||||
|
||||
export default {
|
||||
name: "AttributeForm",
|
||||
components: { JsonEditor },
|
||||
props: {
|
||||
paramIdx: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
tempType: {
|
||||
type: String,
|
||||
default: "add",
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["groupList"]),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
funDataTypeOption,
|
||||
funRwTypeOption,
|
||||
funValidTypeOption,
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
funName: [
|
||||
{ required: true, message: "参数名称不能为空", trigger: "blur" },
|
||||
],
|
||||
cmdKey: [{ 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" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
if (this.tempType !== "add" && this.paramIdx >= 0) {
|
||||
this.getParamIten(this.paramIdx);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
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(res);
|
||||
this.form = JSON.parse(JSON.stringify(res));
|
||||
});
|
||||
},
|
||||
/** 提交验证 */
|
||||
submitForm: function () {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
// 新增和修改操作
|
||||
if (this.tempType === "add") {
|
||||
this.$store.dispatch("AddAttribute", this.form);
|
||||
} else if (this.tempType === "update") {
|
||||
this.$store.dispatch("EditAttribute", {
|
||||
item: this.form,
|
||||
idx: this.paramIdx,
|
||||
});
|
||||
}
|
||||
this.$emit("ok");
|
||||
}
|
||||
});
|
||||
},
|
||||
// 回调 ok
|
||||
//数据类型值变化出发方法
|
||||
funDataTypeChange(val) {
|
||||
this.form.funValAcc = null;
|
||||
this.form.funValidType = "";
|
||||
},
|
||||
addJsonObj() {
|
||||
this.$refs["jsonEditors"].addHandel();
|
||||
},
|
||||
jsonEvent(data) {
|
||||
this.form.funObj = 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()
|
||||
},
|
||||
},
|
||||
};
|
||||
</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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.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>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,553 @@
|
|||
<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">
|
||||
<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.functionList = this.$store.getters.attributeList
|
||||
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>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
||||
<el-form-item label="分组名称:" prop="cmdName">
|
||||
<el-input v-model="form.cmdName" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标识符:" prop="cmdKey">
|
||||
<el-input
|
||||
v-model="form.cmdKey"
|
||||
:disabled="form.cmdId"
|
||||
placeholder="请输入标识符"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
const cmdTypeOption = {
|
||||
UP: "上报",
|
||||
DOWN: "下发"
|
||||
};
|
||||
export default {
|
||||
name: "GroupForm",
|
||||
props: {
|
||||
paramIdx: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
tempType: {
|
||||
type: String,
|
||||
default: 'add'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
cmdTypeOption,
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
cmdName: [
|
||||
{ required: true, message: "分组名称不能为空", trigger: "blur" },
|
||||
],
|
||||
cmdKey: [
|
||||
{ required: true, message: "标识符不能为空", trigger: "blur" },
|
||||
],
|
||||
cmdType: [
|
||||
{ required: true, message: "分组类型不能为空", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
if (this.tempType !== 'add' && this.paramIdx >= 0) {
|
||||
this.getParamIten(this.paramIdx)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getParamIten(idx) {
|
||||
var that = this
|
||||
this.$store.dispatch("GetGroupItem", idx).then(res => {
|
||||
console.log(res)
|
||||
that.form = JSON.parse(JSON.stringify(res));
|
||||
})
|
||||
},
|
||||
/** 提交验证 */
|
||||
submitForm: function () {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
// 新增和修改操作
|
||||
if (this.tempType === 'add') {
|
||||
this.$store.dispatch("AddGroup", this.form)
|
||||
} else if (this.tempType === 'update') {
|
||||
this.$store.dispatch('EditGroup', { 'item': this.form, 'idx': this.paramIdx })
|
||||
}
|
||||
this.$emit('ok')
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,335 @@
|
|||
<template>
|
||||
<div class="app-container prodcut-cmd-wrap">
|
||||
<el-row :gutter="10" class="mb8" v-if="isOption">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">创建分组</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="cmdList" height="300px">
|
||||
<el-table-column type="index" width="55" align="center" label="序号" />
|
||||
<el-table-column label="名称" align="center" prop="cmdName" />
|
||||
<el-table-column label="标识符" align="center" prop="cmdKey" />
|
||||
<!-- <el-table-column label="类型" align="center" width prop="cmdType">
|
||||
<template slot-scope="scope">
|
||||
<span v-text="cmdTypeOption[scope.row.cmdType]"></span>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<!-- <el-table-column label="示例" v-if="isOption" align="center" width>
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click="getCmdById(scope.row)">查看</el-button>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column label="操作" align="center" width="200" v-if="isOption" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="text" @click="handleUpdate(scope.row, scope.$index , 'update')">修改</el-button>
|
||||
<!-- <el-button size="mini" type="text" @click="handleUpdate(scope.row, scope.$index , 'cope')">复制</el-button> -->
|
||||
<el-button size="mini" type="text" @click="handleDelete(scope.row, scope.$index)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 添加或修改分组集对话框 -->
|
||||
<div class="eldialog-wrap">
|
||||
<el-dialog :title="title" :visible.sync="open" width="650px">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
||||
<el-form-item label="分组名称:" prop="cmdName">
|
||||
<el-input v-model="form.cmdName" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标识符:" prop="cmdKey">
|
||||
<el-input v-model="form.cmdKey" :disabled="form.cmdId" placeholder="请输入标识符" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分组类型:" prop="cmdType">
|
||||
<el-select
|
||||
style="width: 100%;"
|
||||
v-model="form.cmdType"
|
||||
@change="cmdTypeChange"
|
||||
placeholder="请选择分组类型"
|
||||
>
|
||||
<el-option
|
||||
:label="doce"
|
||||
v-for="(doce, value) in cmdTypeOption"
|
||||
:key="value"
|
||||
:value="value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<div class="st" style="display: flex; justify-content: flex-end;">
|
||||
<el-transfer
|
||||
style="text-align: left; display: inline-block"
|
||||
v-model="value"
|
||||
filterable
|
||||
:props="{
|
||||
key: 'funId',
|
||||
label: 'funName'
|
||||
}"
|
||||
:titles="['全选', '全选']"
|
||||
:format="{
|
||||
noChecked: '${total}',
|
||||
hasChecked: '${checked}/${total}'
|
||||
}"
|
||||
:data="transferData"
|
||||
></el-transfer>
|
||||
</div>
|
||||
</el-form>
|
||||
<div slot="footer" class="form-button-div">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<el-dialog
|
||||
class="params-eldialog"
|
||||
:title="cmdParamTitle"
|
||||
:visible.sync="paramsOpen"
|
||||
width="800px"
|
||||
>
|
||||
<params-json-wrap
|
||||
v-if="paramsOpen === true"
|
||||
:other="{
|
||||
action: '',
|
||||
prodPK: sourceId,
|
||||
cmdKey: selectCmdInfo.cmdKey
|
||||
}"
|
||||
:paramsList="paramsList"
|
||||
></params-json-wrap>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ParamsJsonWrap from "./paramsJson";
|
||||
import { mapGetters, mapState } from "vuex";
|
||||
|
||||
const cmdTypeOption = {
|
||||
UP: "上报",
|
||||
DOWN: "下发"
|
||||
};
|
||||
|
||||
export default {
|
||||
name: "Cmd",
|
||||
props: {
|
||||
sourceId: {
|
||||
type: [Number, String],
|
||||
default: ""
|
||||
},
|
||||
isOption: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
components: {
|
||||
ParamsJsonWrap
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["groupList"]),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
transferData: [],
|
||||
value: [],
|
||||
renderFunc(h, option) {
|
||||
return (
|
||||
<span>
|
||||
{option.funId} - {option.funName}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
paramsOpen: false,
|
||||
cmdTypeOption,
|
||||
// 遮罩层
|
||||
loading: false,
|
||||
cmdParamTitle: "",
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 分组集表格数据
|
||||
cmdList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
// queryParams: {
|
||||
// cmdName: undefined,
|
||||
// cmdKey: undefined,
|
||||
// sourceId: undefined
|
||||
// },
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
cmdName: [
|
||||
{ required: true, message: "分组名称不能为空", trigger: "blur" }
|
||||
],
|
||||
cmdKey: [
|
||||
{ required: true, message: "标识符不能为空", trigger: "blur" }
|
||||
],
|
||||
cmdType: [
|
||||
{ required: true, message: "分组类型不能为空", trigger: "blur" }
|
||||
]
|
||||
},
|
||||
paramsList: [],
|
||||
selectCmdInfo: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
// 查询分组参数列表
|
||||
getCmdById(row) {
|
||||
// getCmdFun({
|
||||
// cmdId: row.cmdId,
|
||||
// sourceId: this.sourceId
|
||||
// }).then(res => {
|
||||
// this.selectCmdInfo = row;
|
||||
// this.paramsList = res.data;
|
||||
// this.cmdParamTitle = `${row.cmdName}--示例`;
|
||||
// this.paramsOpen = true;
|
||||
// });
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.getList();
|
||||
},
|
||||
cmdTypeChange(val) {
|
||||
this.transferData = [];
|
||||
this.value = [];
|
||||
// 做属性 数据赛选
|
||||
},
|
||||
/** 查询分组集列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
this.cmdList = []
|
||||
setTimeout(() => {
|
||||
this.cmdList = this.$store.getters.groupList
|
||||
this.$forceUpdate()
|
||||
this.loading = false
|
||||
}, 50)
|
||||
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
cmdId: undefined,
|
||||
cmdName: undefined,
|
||||
cmdKey: undefined,
|
||||
cmdType: undefined,
|
||||
sourceId: this.sourceId,
|
||||
mainId: undefined
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.$emit('handleClick', { type: 'add', idx: 0 })
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row, idx, type) {
|
||||
this.$emit('handleClick', { 'type': type, 'idx': idx })
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm: function() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
this.form.sdFunIds = this.value;
|
||||
// 新增或者修改都将数据添加到现有list 中
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row, idx) {
|
||||
var that = this
|
||||
this.$confirm(
|
||||
// '是否确认删除分组集编号为"' + cmdIds + '"的数据项?',
|
||||
"是否删除该选项",
|
||||
"警告",
|
||||
{
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}
|
||||
)
|
||||
.then(function() {
|
||||
// 执行删除数据
|
||||
that.$store.dispatch('DeleteGroup', idx)
|
||||
that.$emit('handleClick', { 'type': 'list' })
|
||||
})
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.prodcut-cmd-wrap {
|
||||
.eldialog-wrap {
|
||||
.el-dialog__header {
|
||||
border-bottom: 1px solid #747373;
|
||||
}
|
||||
.el-dialog__body {
|
||||
padding: 0;
|
||||
}
|
||||
.el-form {
|
||||
padding: 20px;
|
||||
}
|
||||
.el-dialog__footer {
|
||||
padding: 0;
|
||||
}
|
||||
.form-button-div {
|
||||
// margin-top: 20px;
|
||||
height: 60px;
|
||||
border-top: 1px solid #747373;
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
padding-top: 15px;
|
||||
|
||||
.el-button + .el-button {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.el-button {
|
||||
padding-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.prodcut-cmd-wrap .params-eldialog .el-dialog__body::-webkit-scrollbar {
|
||||
/*滚动条整体样式*/
|
||||
width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
|
||||
height: 5px;
|
||||
}
|
||||
.prodcut-cmd-wrap .params-eldialog .el-dialog__body::-webkit-scrollbar-thumb {
|
||||
/*滚动条里面小方块*/
|
||||
border-radius: 10px;
|
||||
box-shadow: inset 0 0 5px #c4c4c4;
|
||||
background: #dededea6;
|
||||
}
|
||||
.prodcut-cmd-wrap .params-eldialog .el-dialog__body::-webkit-scrollbar-track {
|
||||
/*滚动条里面轨道*/
|
||||
box-shadow: inset 0 0 5px #f6f6f6;
|
||||
border-radius: 10px;
|
||||
background: #ffffff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane label="自定义参数" name="attribute">
|
||||
<div class="tabs-body">
|
||||
<attribute-view
|
||||
v-if="activeName === 'attribute'"
|
||||
ref="attributeref"
|
||||
@handleClick="attributeEvent"
|
||||
:sourceId="sourceId"
|
||||
/>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="分组" name="group">
|
||||
<div class="tabs-body">
|
||||
<group-view
|
||||
v-if="activeName === 'group'"
|
||||
ref="groupref"
|
||||
@handleClick="groupEvent"
|
||||
:sourceId="sourceId"
|
||||
/>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import attributeView from "./attributeView";
|
||||
import groupView from "./groupView";
|
||||
// this.$store.state.tagsView.visitedViews
|
||||
// this.$store.dispatch("Login", this.loginForm)
|
||||
export default {
|
||||
components: { attributeView, groupView },
|
||||
props: {
|
||||
groupList: {
|
||||
type: String,
|
||||
default: "[]",
|
||||
},
|
||||
arttributeList: {
|
||||
type: String,
|
||||
default: "[]",
|
||||
},
|
||||
sourceId: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
name: "attribute",
|
||||
created() {
|
||||
// 处理数据
|
||||
this.handleInitData();
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: "attribute",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
attributeEvent(data) {
|
||||
switch (data.type) {
|
||||
case "add":
|
||||
// 执行add
|
||||
this.$emit("handleEvent", {
|
||||
type: data.type,
|
||||
title: "新增参数",
|
||||
component: "attributeForm",
|
||||
paramIdx: null,
|
||||
});
|
||||
break;
|
||||
|
||||
case "update":
|
||||
this.$emit("handleEvent", {
|
||||
type: data.type,
|
||||
title: "修改参数",
|
||||
component: "attributeForm",
|
||||
paramIdx: data.idx,
|
||||
});
|
||||
break;
|
||||
|
||||
case "list":
|
||||
this.$refs.attributeref.getList();
|
||||
break;
|
||||
|
||||
case "param":
|
||||
this.$emit("handleEvent", {
|
||||
type: data.type,
|
||||
title: "物模型参数",
|
||||
component: "paramsJson",
|
||||
paramIdx: null,
|
||||
});
|
||||
break;
|
||||
}
|
||||
},
|
||||
groupEvent(data) {
|
||||
switch (data.type) {
|
||||
case "add":
|
||||
// 执行add
|
||||
this.$emit("handleEvent", {
|
||||
type: data.type,
|
||||
title: "新增分组",
|
||||
component: "groupForm",
|
||||
paramIdx: null,
|
||||
});
|
||||
break;
|
||||
|
||||
case "update":
|
||||
this.$emit("handleEvent", {
|
||||
type: data.type,
|
||||
title: "修改分组",
|
||||
component: "groupForm",
|
||||
paramIdx: data.idx,
|
||||
});
|
||||
break;
|
||||
|
||||
case "list":
|
||||
this.$refs.groupref.getList();
|
||||
break;
|
||||
}
|
||||
},
|
||||
forceUpdate(component) {
|
||||
if (component === "groupForm") {
|
||||
this.$refs.groupref.getList();
|
||||
} else if (component === "attributeForm") {
|
||||
this.$refs.attributeref.getList();
|
||||
}
|
||||
},
|
||||
handleInitData() {
|
||||
try {
|
||||
this.$store.dispatch("InitAttributeAndGroup", {
|
||||
attrList: JSON.parse(this.arttributeList),
|
||||
groupList: JSON.parse(this.groupList),
|
||||
});
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,161 @@
|
|||
<!-- 聂黎：
|
||||
json 键值对编辑工具
|
||||
传入一个字符串，input 框编辑key 和value两个字段，实现返回一个json对象字符串。
|
||||
-->
|
||||
<template>
|
||||
<div style="width: 100%;">
|
||||
<!-- <div class="title-block">
|
||||
<span>
|
||||
参数值:
|
||||
<el-tooltip placement="top-start" effect="light">
|
||||
<div slot="content">
|
||||
支持整型，取值范围：
|
||||
<br />-2147483648 ~ 2147483647
|
||||
</div>
|
||||
<el-button type="text" class="question-button" icon="el-icon-question"></el-button>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<span>
|
||||
参数描述:
|
||||
<el-tooltip placement="top-start" effect="light">
|
||||
<div slot="content">
|
||||
支持中文、英文大小写、数字下划线和短划线，必
|
||||
<br />须以中文、英文或数字开头，不超过20个字符
|
||||
</div>
|
||||
<el-button type="text" class="question-button" icon="el-icon-question"></el-button>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</div> -->
|
||||
<div v-for="(item, index) in josnList" :key="item.key" class="item-info-block">
|
||||
<el-input
|
||||
:disabled="disabled"
|
||||
v-model="item.keys"
|
||||
:maxlength="option.leftMaxlength"
|
||||
:size="option.size"
|
||||
placeholder="编号如'0'"
|
||||
@change="inputChangeKeys"
|
||||
></el-input>
|
||||
<span>~</span>
|
||||
<el-input
|
||||
:disabled="disabled"
|
||||
v-model="item.value"
|
||||
:maxlength="option.rightMaxlength"
|
||||
:size="option.size"
|
||||
placeholder="对该枚举选项的描述"
|
||||
@change="inputChange"
|
||||
></el-input>
|
||||
<el-button
|
||||
type="text"
|
||||
style="font-size: 20px; margin-left: 5px;padding-top: 2px; color: #f56c6c;"
|
||||
icon="el-icon-delete"
|
||||
:disabled="disabled"
|
||||
@click="delHandel(item.key, index)"
|
||||
></el-button>
|
||||
</div>
|
||||
<!-- <el-button type="text" @click="addHandel" icon="el-icon-plus" :disabled="disabled">添加枚举项</el-button> -->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { strAndNumber } from "@/utils/validate";
|
||||
export default {
|
||||
name: "JsonEditor",
|
||||
props: {
|
||||
jsonString: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
option: {
|
||||
placeholder: "请输入...",
|
||||
leftMaxlength: "20",
|
||||
rightMaxlength: "30",
|
||||
size: "mini"
|
||||
},
|
||||
funKey: "",
|
||||
json: {},
|
||||
josnList: []
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.paramsToList(this.jsonString);
|
||||
},
|
||||
methods: {
|
||||
inputChangeKeys(val) {
|
||||
if (strAndNumber(val)) {
|
||||
this.listToParams(this.josnList);
|
||||
} else {
|
||||
this.$message.error("参数值不能为空，只能输入英文大小写和数字组合。");
|
||||
}
|
||||
},
|
||||
inputChange() {
|
||||
this.listToParams(this.josnList);
|
||||
},
|
||||
addHandel() {
|
||||
this.josnList.push({
|
||||
keys: this.josnList.length,
|
||||
value: ""
|
||||
});
|
||||
},
|
||||
delHandel(keys, index) {
|
||||
this.josnList.splice(index, 1);
|
||||
},
|
||||
paramsToList(val) {
|
||||
if (!val) {
|
||||
return;
|
||||
}
|
||||
var json = JSON.parse(val.replace(/\\\"/g, '"'));
|
||||
this.josnList = [];
|
||||
for (let keys in json) {
|
||||
const obj = {
|
||||
keys: keys,
|
||||
value: json[keys]
|
||||
};
|
||||
this.josnList.push(obj);
|
||||
}
|
||||
},
|
||||
listToParams(list) {
|
||||
const json = {};
|
||||
list.forEach(v => {
|
||||
if (v.keys) {
|
||||
json[v.keys] = v.value;
|
||||
}
|
||||
});
|
||||
this.$emit("event", JSON.stringify(json).replace(/\"/g, '\\"'));
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
josnList(val) {
|
||||
this.listToParams(this.josnList);
|
||||
},
|
||||
jsonString(val, old) {
|
||||
this.paramsToList(val);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.title-block {
|
||||
display: flex;
|
||||
span {
|
||||
display: block;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
.item-info-block {
|
||||
display: flex;
|
||||
.el-input {
|
||||
width: calc((100% - 45px) / 2);
|
||||
}
|
||||
span {
|
||||
display: block;
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,144 @@
|
|||
<template>
|
||||
<div class="prod-params-json">
|
||||
<div class="left-cmds">
|
||||
<el-form :model="form.data.params" v-if="paramsList && paramsList.length > 0" ref="loginForm" label-width="120px">
|
||||
<!--" 不校验的判断 -->
|
||||
<el-form-item
|
||||
v-for="paramsItem in paramsList"
|
||||
:key="paramsItem.funId"
|
||||
:label="paramsItem.funName + '：'"
|
||||
:prop="paramsItem.funKey"
|
||||
>
|
||||
<!-- :rules="retrunRules(paramsItem)" 验证 -->
|
||||
<el-select
|
||||
style="width: 85%;"
|
||||
v-model="form.data.params[paramsItem.funKey]"
|
||||
v-if="paramsItem.funValidType === 'ENUM'"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="(keys, valus) in strtoJson(paramsItem.funObj)"
|
||||
:key="valus"
|
||||
:label="keys"
|
||||
:value="valus"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-input-number
|
||||
style="width: 85%;"
|
||||
v-model="form.data.params[paramsItem.funKey]"
|
||||
v-else-if="paramsItem.funValidType === 'RANGE' && (paramsItem.funDataType === 'FLOAT' || paramsItem.funDataType === 'INT32')"
|
||||
:max="Number(paramsItem.funValMax) || 0"
|
||||
:min="Number(paramsItem.funValMin) || 0"
|
||||
clearable
|
||||
></el-input-number>
|
||||
|
||||
<el-input-number
|
||||
style="width: 85%;"
|
||||
clearable
|
||||
v-model="form.data.params[paramsItem.funKey]"
|
||||
v-else-if="paramsItem.funValidType === 'NOT' && (paramsItem.funDataType === 'FLOAT' || paramsItem.funDataType === 'INT32')"
|
||||
></el-input-number>
|
||||
<el-input
|
||||
clearable
|
||||
style="width: 85%;"
|
||||
v-else-if="paramsItem.funDataType === 'TEXT'"
|
||||
v-model="form.data.params[paramsItem.funKey]"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span v-else>暂无数据</span>
|
||||
</div>
|
||||
<div class="right-json">
|
||||
<div class="option-wrap">
|
||||
<el-button type="text" @click="copeText">复制</el-button>
|
||||
</div>
|
||||
<pre>{{form}}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "ParamsJson",
|
||||
props: {
|
||||
other: {
|
||||
type: Object,
|
||||
default: {
|
||||
action: '',
|
||||
prodPK: '',
|
||||
cmdKey: ''
|
||||
}
|
||||
},
|
||||
paramsList: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
action: "",
|
||||
msgId: "1",
|
||||
pk: "",
|
||||
devId: "devId",
|
||||
data: {
|
||||
cmd: "cmd1",
|
||||
params: {}
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
if (this.paramsList) {
|
||||
this.form.action = this.other.action;
|
||||
this.form.pk = this.other.prodPK;
|
||||
this.form.data.cmd = this.other.cmdKey;
|
||||
this.handelList();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
copeText() {
|
||||
this.copeFu(JSON.stringify(this.form), this);
|
||||
},
|
||||
strtoJson(str) {
|
||||
return str ? JSON.parse(str.replace(/\\\"/g, '"')) : {};
|
||||
},
|
||||
handelList() {
|
||||
var result = {};
|
||||
this.paramsList.forEach(v => {
|
||||
if (!result[v.funKey]) {
|
||||
result[v.funKey] = "";
|
||||
}
|
||||
});
|
||||
this.form.data.params = result;
|
||||
this.$forceUpdate();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.prod-params-json {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.left-cmds {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.right-json {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.option-wrap {
|
||||
width: 100%;
|
||||
height: 25px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-right: 50px;
|
||||
}
|
||||
> pre {
|
||||
height: calc(100% - 30px);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue