67 lines
1.7 KiB
Vue
67 lines
1.7 KiB
Vue
|
<template>
|
||
|
|
<el-dialog v-model="dialog.show" :title="dialog.title"
|
||
|
|
:close-on-press-escape="false"
|
||
|
|
:close-on-click-modal="false" align-center append-to-body width="600px"
|
||
|
|
>
|
||
|
|
<div class="scroll " style="max-height: 400px;overflow-y: auto;overflow-x: hidden;">
|
||
|
|
<el-row v-for="(it,idx) in dialog.attrs" :key="idx" style="margin-bottom:4px;" gutter="2">
|
||
|
|
|
||
|
|
<el-col :span="8">
|
||
|
|
<el-input v-model="it.key" @input="inputKey"/>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="16">
|
||
|
|
<el-input v-model="it.value"/>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</div>
|
||
|
|
<template #footer>
|
||
|
|
<div style="text-align: center">
|
||
|
|
<el-button type="primary" @click="doOk">确定</el-button>
|
||
|
|
<el-button @click="doCancel">取消</el-button>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-dialog>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
const emit=defineEmits("success");
|
||
|
|
const dialog = reactive({
|
||
|
|
show: false,
|
||
|
|
title: '',
|
||
|
|
editObj: null,
|
||
|
|
attrs: []
|
||
|
|
})
|
||
|
|
const doOk = () => {
|
||
|
|
let obj={};
|
||
|
|
dialog.attrs.forEach(d=>{
|
||
|
|
if(d.key && d.value){
|
||
|
|
obj[d.key]=d.value;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
emit("success",obj);
|
||
|
|
dialog.show=false;
|
||
|
|
}
|
||
|
|
const doCancel=()=>{
|
||
|
|
dialog.show=false;
|
||
|
|
}
|
||
|
|
const showDialog = (opt) => {
|
||
|
|
dialog.show = true;
|
||
|
|
dialog.editObj = opt.obj;
|
||
|
|
dialog.title = opt.title;
|
||
|
|
dialog.attrs = [];
|
||
|
|
for (let k in opt.obj) {
|
||
|
|
dialog.attrs.push({ key: k, value: opt.obj[k] });
|
||
|
|
}
|
||
|
|
dialog.attrs.push({key:'',value:''});
|
||
|
|
}
|
||
|
|
const inputKey=(a,b)=>{
|
||
|
|
if(dialog.attrs[dialog.attrs.length-1].key){
|
||
|
|
dialog.attrs.push({key:'',value:''});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
defineExpose({
|
||
|
|
showDialog
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
<style scoped lang='less'></style>
|