QM303176530
5 years ago
1 changed files with 179 additions and 0 deletions
@ -0,0 +1,179 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<el-form :model="dialogMiddle" :inline="true" > |
||||
|
<el-form-item label="组件名称" label-width="80" :span="8"> |
||||
|
<el-input v-model="dialogMiddle.componentName" autocomplete="off"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="数据类型" label-width="80" :span="8"> |
||||
|
<el-select v-model="dialogMiddle.componentType" placeholder="请选择活动区域"> |
||||
|
<el-option |
||||
|
v-for="item in typeOptions" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="展示类型" label-width="80" :span="8"> |
||||
|
<el-select v-model="dialogMiddle.componentShowType" placeholder="请选择活动区域"> |
||||
|
<el-option |
||||
|
v-for="item in showTypeOptions" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="字典Key" label-width="80" :span="8"> |
||||
|
<el-input v-model="dialogMiddle.dictionaryName" autocomplete="off"></el-input> |
||||
|
</el-form-item> |
||||
|
<div> |
||||
|
<el-form-item label="是否多选" label-width="80"> |
||||
|
<el-switch |
||||
|
v-model="dialogMiddle.isMultiple" |
||||
|
active-text="多选" |
||||
|
inactive-text="单选"> |
||||
|
</el-switch> |
||||
|
</el-form-item> |
||||
|
</div> |
||||
|
<div> |
||||
|
<el-form-item label="是否使用字典" label-width="80"> |
||||
|
<el-switch |
||||
|
v-model="dialogMiddle.nideDictionary" |
||||
|
active-text="使用" |
||||
|
inactive-text="不使用"> |
||||
|
</el-switch> |
||||
|
</el-form-item> |
||||
|
</div> |
||||
|
</el-form> |
||||
|
<div class="button-box clearflex"> |
||||
|
<el-button @click="addDictionary" type="primary">新增组件</el-button> |
||||
|
</div> |
||||
|
<el-table |
||||
|
:data="dialogMiddle.componentDictionary" |
||||
|
stripe |
||||
|
style="width: 100%"> |
||||
|
<el-table-column |
||||
|
label="展示值" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-input v-model="scope.row.label"></el-input> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
label="交互值" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-input v-model="scope.row.value"></el-input> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
label="操作" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-popover |
||||
|
placement="top" |
||||
|
width="160" |
||||
|
v-model="scope.row.visible"> |
||||
|
<p>这是一段内容这是一段内容确定删除吗？</p> |
||||
|
<div style="text-align: right; margin: 0"> |
||||
|
<el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button> |
||||
|
<el-button type="primary" size="mini" @click="deleteRow(scope)">确定</el-button> |
||||
|
</div> |
||||
|
<el-button type="text" slot="reference">删除</el-button> |
||||
|
</el-popover> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
const dictionaryTemplate = { |
||||
|
label:"", |
||||
|
value:"", |
||||
|
visible:false |
||||
|
} |
||||
|
export default { |
||||
|
name:"ComponentDialog", |
||||
|
props:{ |
||||
|
dialogMiddle:{ |
||||
|
type:Object, |
||||
|
default:function(){ |
||||
|
return {} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data(){ |
||||
|
return{ |
||||
|
visible:false, |
||||
|
typeOptions:[ |
||||
|
{ |
||||
|
label:"字符串", |
||||
|
value:"string" |
||||
|
}, |
||||
|
{ |
||||
|
label:"整型", |
||||
|
value:"int" |
||||
|
}, |
||||
|
{ |
||||
|
label:"布尔值", |
||||
|
value:"bool" |
||||
|
}, |
||||
|
{ |
||||
|
label:"浮点型", |
||||
|
value:"float64" |
||||
|
}, |
||||
|
{ |
||||
|
label:"时间", |
||||
|
value:"time.Time" |
||||
|
}, |
||||
|
], |
||||
|
showTypeOptions:[ |
||||
|
{ |
||||
|
label:"单选框", |
||||
|
value:"radio" |
||||
|
}, |
||||
|
{ |
||||
|
label:"多选框", |
||||
|
value:"checkBox" |
||||
|
}, |
||||
|
{ |
||||
|
label:"输入框", |
||||
|
value:"input" |
||||
|
}, |
||||
|
{ |
||||
|
label:"计数器", |
||||
|
value:"inputNumber" |
||||
|
}, |
||||
|
{ |
||||
|
label:"选择器", |
||||
|
value:"select" |
||||
|
}, |
||||
|
{ |
||||
|
label:"级联选择器", |
||||
|
value:"cascader" |
||||
|
}, |
||||
|
{ |
||||
|
label:"开关", |
||||
|
value:"switch" |
||||
|
}, |
||||
|
{ |
||||
|
label:"时间日期选择器", |
||||
|
value:"datePicker" |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
addDictionary(){ |
||||
|
this.dialogMiddle.componentDictionary.push({...dictionaryTemplate}) |
||||
|
}, |
||||
|
deleteRow(row){ |
||||
|
this.dialogMiddle.componentDictionary.splice(row.$index,1) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss"> |
||||
|
|
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue