|
@@ -3,14 +3,14 @@
|
|
<el-dialog :title="(ruleForm.id !== 0 ? '修改' : '添加') + '属性定义'" v-model="isShowDialog" width="769px">
|
|
<el-dialog :title="(ruleForm.id !== 0 ? '修改' : '添加') + '属性定义'" v-model="isShowDialog" width="769px">
|
|
<el-form :model="ruleForm" ref="formRef" :rules="rules" size="default" label-width="120px">
|
|
<el-form :model="ruleForm" ref="formRef" :rules="rules" size="default" label-width="120px">
|
|
<el-form-item label="属性定义标识" prop="key">
|
|
<el-form-item label="属性定义标识" prop="key">
|
|
- <el-input v-model="ruleForm.key" placeholder="请输入属性定义标识" :disabled="ruleForm.id!== 0 ?true : false" />
|
|
|
|
|
|
+ <el-input v-model="ruleForm.key" placeholder="请输入属性定义标识" :disabled="ruleForm.id !== 0 ? true : false" />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item label="属性定义名称" prop="name">
|
|
<el-form-item label="属性定义名称" prop="name">
|
|
<el-input v-model="ruleForm.name" placeholder="请输入属性定义名称" />
|
|
<el-input v-model="ruleForm.name" placeholder="请输入属性定义名称" />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
|
|
|
- <el-form-item label="数据类型" prop="type" >
|
|
|
|
- <el-select v-model="valueType.type" placeholder="请选择数据类型" @change="seletChange" :disabled="ruleForm.id!== 0 ?true : false">
|
|
|
|
|
|
+ <el-form-item label="数据类型" prop="type">
|
|
|
|
+ <el-select v-model="valueType.type" placeholder="请选择数据类型" @change="seletChange" :disabled="ruleForm.id !== 0 ? true : false">
|
|
<el-option-group v-for="group in typeData" :key="group.label" :label="group.label">
|
|
<el-option-group v-for="group in typeData" :key="group.label" :label="group.label">
|
|
<el-option v-for="item in group.options" :key="item.type" :label="item.title" :value="item.type" />
|
|
<el-option v-for="item in group.options" :key="item.type" :label="item.title" :value="item.type" />
|
|
</el-option-group>
|
|
</el-option-group>
|
|
@@ -49,13 +49,17 @@
|
|
|
|
|
|
<el-form-item label="枚举项" prop="maxLength" v-if="type == 'enum'">
|
|
<el-form-item label="枚举项" prop="maxLength" v-if="type == 'enum'">
|
|
<div class="input-box" v-for="(item, index) in enumdata" :key="index">
|
|
<div class="input-box" v-for="(item, index) in enumdata" :key="index">
|
|
- <el-input v-model="item.text" placeholder="请输入枚举值" /><span style="margin: 0px 10px"
|
|
|
|
- ><el-icon><Right /></el-icon
|
|
|
|
- ></span>
|
|
|
|
|
|
+ <el-input v-model="item.text" placeholder="请输入枚举值" /><span style="margin: 0px 10px"><el-icon>
|
|
|
|
+ <Right />
|
|
|
|
+ </el-icon></span>
|
|
<el-input v-model="item.value" placeholder="请输入枚举文本" />
|
|
<el-input v-model="item.value" placeholder="请输入枚举文本" />
|
|
<div class="input-option">
|
|
<div class="input-option">
|
|
- <el-icon @click="addEnum" v-if="index == 0"><Plus /></el-icon>
|
|
|
|
- <el-icon @click="delEnum(index)" v-if="index != 0"><Minus /></el-icon>
|
|
|
|
|
|
+ <el-icon @click="addEnum" v-if="index == 0">
|
|
|
|
+ <Plus />
|
|
|
|
+ </el-icon>
|
|
|
|
+ <el-icon @click="delEnum(index)" v-if="index != 0">
|
|
|
|
+ <Minus />
|
|
|
|
+ </el-icon>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
@@ -74,7 +78,9 @@
|
|
|
|
|
|
<div style="display: block; width: 100%">
|
|
<div style="display: block; width: 100%">
|
|
<div class="input-options" @click="addJson">
|
|
<div class="input-options" @click="addJson">
|
|
- <el-icon><Plus /></el-icon>
|
|
|
|
|
|
+ <el-icon>
|
|
|
|
+ <Plus />
|
|
|
|
+ </el-icon>
|
|
<div>添加参数</div>
|
|
<div>添加参数</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -119,19 +125,23 @@
|
|
|
|
|
|
<el-form-item label="枚举项" prop="maxLength" v-if="types == 'enum'">
|
|
<el-form-item label="枚举项" prop="maxLength" v-if="types == 'enum'">
|
|
<div class="input-box" v-for="(item, index) in enumdata" :key="index">
|
|
<div class="input-box" v-for="(item, index) in enumdata" :key="index">
|
|
- <el-input v-model="item.text" placeholder="请输入枚举值" /><span style="margin: 0px 10px"
|
|
|
|
- ><el-icon><Right /></el-icon
|
|
|
|
- ></span>
|
|
|
|
|
|
+ <el-input v-model="item.text" placeholder="请输入枚举值" /><span style="margin: 0px 10px"><el-icon>
|
|
|
|
+ <Right />
|
|
|
|
+ </el-icon></span>
|
|
<el-input v-model="item.value" placeholder="请输入枚举文本" />
|
|
<el-input v-model="item.value" placeholder="请输入枚举文本" />
|
|
<div class="input-option">
|
|
<div class="input-option">
|
|
- <el-icon @click="addEnum" v-if="index == 0"><Plus /></el-icon>
|
|
|
|
- <el-icon @click="delEnum(index)" v-if="index != 0"><Minus /></el-icon>
|
|
|
|
|
|
+ <el-icon @click="addEnum" v-if="index == 0">
|
|
|
|
+ <Plus />
|
|
|
|
+ </el-icon>
|
|
|
|
+ <el-icon @click="delEnum(index)" v-if="index != 0">
|
|
|
|
+ <Minus />
|
|
|
|
+ </el-icon>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
-
|
|
|
|
|
|
+
|
|
<el-form-item label="JSON对象" prop="maxLength" v-if="types == 'object'">
|
|
<el-form-item label="JSON对象" prop="maxLength" v-if="types == 'object'">
|
|
<div v-for="(item, index) in jsondata" :key="index" class="jslist">
|
|
<div v-for="(item, index) in jsondata" :key="index" class="jslist">
|
|
<div class="jsonlist">
|
|
<div class="jsonlist">
|
|
@@ -146,7 +156,9 @@
|
|
|
|
|
|
<div style="display: block; width: 100%">
|
|
<div style="display: block; width: 100%">
|
|
<div class="input-options" @click="addJson">
|
|
<div class="input-options" @click="addJson">
|
|
- <el-icon><Plus /></el-icon>
|
|
|
|
|
|
+ <el-icon>
|
|
|
|
+ <Plus />
|
|
|
|
+ </el-icon>
|
|
<div>添加参数</div>
|
|
<div>添加参数</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -155,7 +167,7 @@
|
|
<!--根据数据类型输出不同表单-->
|
|
<!--根据数据类型输出不同表单-->
|
|
|
|
|
|
<el-form-item label="是否只读" prop="accessMode">
|
|
<el-form-item label="是否只读" prop="accessMode">
|
|
- <el-radio-group v-model="ruleForm.accessMode" >
|
|
|
|
|
|
+ <el-radio-group v-model="ruleForm.accessMode">
|
|
<el-radio :label="0">读写</el-radio>
|
|
<el-radio :label="0">读写</el-radio>
|
|
<el-radio :label="1">只读</el-radio>
|
|
<el-radio :label="1">只读</el-radio>
|
|
</el-radio-group>
|
|
</el-radio-group>
|
|
@@ -211,14 +223,14 @@ export default defineComponent({
|
|
typeData: [], //
|
|
typeData: [], //
|
|
type: '',
|
|
type: '',
|
|
types: '',
|
|
types: '',
|
|
- productId:0,
|
|
|
|
|
|
+ productId: 0,
|
|
valueType: {
|
|
valueType: {
|
|
type: '',
|
|
type: '',
|
|
maxLength: '',
|
|
maxLength: '',
|
|
- trueText:'是',
|
|
|
|
- trueValue:'true',
|
|
|
|
- falseText:'否',
|
|
|
|
- falseValue:'false',
|
|
|
|
|
|
+ trueText: '是',
|
|
|
|
+ trueValue: 'true',
|
|
|
|
+ falseText: '否',
|
|
|
|
+ falseValue: 'false',
|
|
},
|
|
},
|
|
elementType: {
|
|
elementType: {
|
|
type: '',
|
|
type: '',
|
|
@@ -234,8 +246,8 @@ export default defineComponent({
|
|
jsondata: [],
|
|
jsondata: [],
|
|
|
|
|
|
ruleForm: {
|
|
ruleForm: {
|
|
- id:0,
|
|
|
|
- productId:0,
|
|
|
|
|
|
+ id: 0,
|
|
|
|
+ productId: 0,
|
|
name: '',
|
|
name: '',
|
|
key: '',
|
|
key: '',
|
|
transportProtocol: '',
|
|
transportProtocol: '',
|
|
@@ -253,12 +265,12 @@ export default defineComponent({
|
|
key: [{ required: true, message: '属性定义标识不能为空', trigger: 'blur' }],
|
|
key: [{ required: true, message: '属性定义标识不能为空', trigger: 'blur' }],
|
|
accessMode: [{ required: true, message: '请选择是否只读', trigger: 'blur' }],
|
|
accessMode: [{ required: true, message: '请选择是否只读', trigger: 'blur' }],
|
|
type: [{ required: true, message: '请选择数据类型', trigger: 'blur' }],
|
|
type: [{ required: true, message: '请选择数据类型', trigger: 'blur' }],
|
|
-
|
|
|
|
|
|
+
|
|
},
|
|
},
|
|
});
|
|
});
|
|
|
|
|
|
// 打开弹窗
|
|
// 打开弹窗
|
|
- const openDialog = (row: RuleFormState | null,productId:number | null) => {
|
|
|
|
|
|
+ const openDialog = (row: RuleFormState | null, productId: number | null) => {
|
|
resetForm();
|
|
resetForm();
|
|
|
|
|
|
api.product.getDataType({ status: -1 }).then((res: any) => {
|
|
api.product.getDataType({ status: -1 }).then((res: any) => {
|
|
@@ -277,14 +289,14 @@ export default defineComponent({
|
|
state.typeData = datat || [];
|
|
state.typeData = datat || [];
|
|
});
|
|
});
|
|
state.ruleForm = row;
|
|
state.ruleForm = row;
|
|
- if (row.valueType) {
|
|
|
|
|
|
+ if (row.valueType) {
|
|
state.ruleForm = row;
|
|
state.ruleForm = row;
|
|
|
|
|
|
- state.productId=productId;
|
|
|
|
|
|
+ state.productId = productId;
|
|
state.valueType = row.valueType;
|
|
state.valueType = row.valueType;
|
|
state.ruleForm.valueType.type = row.valueType.type;
|
|
state.ruleForm.valueType.type = row.valueType.type;
|
|
state.ruleForm.type = row.valueType.type;
|
|
state.ruleForm.type = row.valueType.type;
|
|
- state.type = row.valueType.type ;
|
|
|
|
|
|
+ state.type = row.valueType.type;
|
|
state.ruleForm.accessMode = row.accessMode;
|
|
state.ruleForm.accessMode = row.accessMode;
|
|
if (row.valueType.elementType) {
|
|
if (row.valueType.elementType) {
|
|
state.elementType = row.valueType.elementType;
|
|
state.elementType = row.valueType.elementType;
|
|
@@ -299,15 +311,15 @@ export default defineComponent({
|
|
state.jsondata = row.valueType.properties;
|
|
state.jsondata = row.valueType.properties;
|
|
}
|
|
}
|
|
|
|
|
|
- if(row.type == 'array' && state.types=='enum'){
|
|
|
|
- state.enumdata=row.valueType.elementType.elements
|
|
|
|
|
|
+ if (row.type == 'array' && state.types == 'enum') {
|
|
|
|
+ state.enumdata = row.valueType.elementType.elements
|
|
}
|
|
}
|
|
- if(row.type == 'array' && state.types=='object'){
|
|
|
|
- state.jsondata=row.valueType.elementType.properties
|
|
|
|
|
|
+ if (row.type == 'array' && state.types == 'object') {
|
|
|
|
+ state.jsondata = row.valueType.elementType.properties
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
-
|
|
|
|
|
|
+
|
|
state.isShowDialog = true;
|
|
state.isShowDialog = true;
|
|
};
|
|
};
|
|
const resetForm = () => {
|
|
const resetForm = () => {
|
|
@@ -323,7 +335,7 @@ export default defineComponent({
|
|
},
|
|
},
|
|
|
|
|
|
desc: '',
|
|
desc: '',
|
|
-
|
|
|
|
|
|
+
|
|
};
|
|
};
|
|
state.type = '';
|
|
state.type = '';
|
|
state.types = '';
|
|
state.types = '';
|
|
@@ -331,16 +343,16 @@ export default defineComponent({
|
|
state.elementType = {};
|
|
state.elementType = {};
|
|
state.jsondata = [];
|
|
state.jsondata = [];
|
|
state.enumdata = [{
|
|
state.enumdata = [{
|
|
- text: '',
|
|
|
|
- value: '',
|
|
|
|
- },];
|
|
|
|
|
|
+ text: '',
|
|
|
|
+ value: '',
|
|
|
|
+ },];
|
|
};
|
|
};
|
|
|
|
|
|
const seletChange = (val) => {
|
|
const seletChange = (val) => {
|
|
state.type = val;
|
|
state.type = val;
|
|
state.ruleForm.type = val;
|
|
state.ruleForm.type = val;
|
|
-
|
|
|
|
-
|
|
|
|
|
|
+
|
|
|
|
+
|
|
console.log(val);
|
|
console.log(val);
|
|
};
|
|
};
|
|
const seletChanges = (val) => {
|
|
const seletChanges = (val) => {
|
|
@@ -398,14 +410,14 @@ export default defineComponent({
|
|
if (state.type == 'array') {
|
|
if (state.type == 'array') {
|
|
state.valueType.elementType = state.elementType;
|
|
state.valueType.elementType = state.elementType;
|
|
//如果是选中数组,并选择了枚举
|
|
//如果是选中数组,并选择了枚举
|
|
- if(state.types=='enum'){
|
|
|
|
|
|
+ if (state.types == 'enum') {
|
|
state.valueType.elementType = {
|
|
state.valueType.elementType = {
|
|
elements: state.enumdata,
|
|
elements: state.enumdata,
|
|
type: 'enum'
|
|
type: 'enum'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
//如果是选中数组,并选择了object
|
|
//如果是选中数组,并选择了object
|
|
- if(state.types=='object'){
|
|
|
|
|
|
+ if (state.types == 'object') {
|
|
state.valueType.elementType = {
|
|
state.valueType.elementType = {
|
|
properties: state.jsondata,
|
|
properties: state.jsondata,
|
|
type: 'object'
|
|
type: 'object'
|
|
@@ -433,14 +445,14 @@ export default defineComponent({
|
|
if (state.type == 'array') {
|
|
if (state.type == 'array') {
|
|
state.valueType.elementType = state.elementType;
|
|
state.valueType.elementType = state.elementType;
|
|
//如果是选中数组,并选择了枚举
|
|
//如果是选中数组,并选择了枚举
|
|
- if(state.types=='enum'){
|
|
|
|
|
|
+ if (state.types == 'enum') {
|
|
state.valueType.elementType = {
|
|
state.valueType.elementType = {
|
|
elements: state.enumdata,
|
|
elements: state.enumdata,
|
|
type: 'enum'
|
|
type: 'enum'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
//如果是选中数组,并选择了object
|
|
//如果是选中数组,并选择了object
|
|
- if(state.types=='object'){
|
|
|
|
|
|
+ if (state.types == 'object') {
|
|
state.valueType.elementType = {
|
|
state.valueType.elementType = {
|
|
properties: state.jsondata,
|
|
properties: state.jsondata,
|
|
type: 'object'
|
|
type: 'object'
|
|
@@ -485,35 +497,41 @@ export default defineComponent({
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
margin-top: 10px;
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
+
|
|
.input-option {
|
|
.input-option {
|
|
line-height: 30px;
|
|
line-height: 30px;
|
|
padding-top: 5px;
|
|
padding-top: 5px;
|
|
width: 140px;
|
|
width: 140px;
|
|
}
|
|
}
|
|
|
|
+
|
|
.input-option i {
|
|
.input-option i {
|
|
margin: 0px 5px;
|
|
margin: 0px 5px;
|
|
border: 1px solid #c3c3c3;
|
|
border: 1px solid #c3c3c3;
|
|
font-size: 16px;
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
+
|
|
.input-options {
|
|
.input-options {
|
|
display: flex;
|
|
display: flex;
|
|
align-items: center;
|
|
align-items: center;
|
|
color: #409eff;
|
|
color: #409eff;
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
+
|
|
.jslist {
|
|
.jslist {
|
|
width: 100%;
|
|
width: 100%;
|
|
border: 1px solid #e8e8e8;
|
|
border: 1px solid #e8e8e8;
|
|
padding: 10px;
|
|
padding: 10px;
|
|
margin-bottom: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
+
|
|
.jsonlist {
|
|
.jsonlist {
|
|
display: flex;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
-.jsonoption {
|
|
|
|
-}
|
|
|
|
|
|
+
|
|
|
|
+.jsonoption {}
|
|
|
|
+
|
|
.jsonoption a {
|
|
.jsonoption a {
|
|
margin: 0px 10px;
|
|
margin: 0px 10px;
|
|
}
|
|
}
|