121 lines
2.8 KiB
Vue
121 lines
2.8 KiB
Vue
<!--
|
|
* @Descripttion: 编辑
|
|
-->
|
|
<template>
|
|
<x-dialog :title="(config.name || titleMap[mode]) || '编辑'" v-model="visible" :size="960" destroy-on-close @closed="$emit('closed')">
|
|
<el-skeleton v-if="loading" :rows="4" />
|
|
<x-form ref="formref" :config="config" v-model="data" v-if="!loading" :loading="loading"> </x-form>
|
|
<template #footer>
|
|
<el-button type="primary" :loading="isSaveing" @click="submit">{{ config.submitname || '保存' }}</el-button>
|
|
<el-button @click="visible=false">取消</el-button>
|
|
</template>
|
|
</x-dialog>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
emits: ['success', 'closed'],
|
|
props: {
|
|
column: { type: Array, default: () => [] },
|
|
name: { type: String, default: "id" },
|
|
},
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
mode: "plus",
|
|
token: '',
|
|
key: this.name,
|
|
titleMap: {
|
|
plus: '新增',
|
|
edit: '编辑'
|
|
},
|
|
data: {},
|
|
config: {
|
|
column : this.column,
|
|
labelPosition : "right",
|
|
labelWidth : "120px",
|
|
size : "medium",
|
|
url:'',
|
|
submitname:'保存'
|
|
},
|
|
visible: false,
|
|
isSaveing: false,
|
|
}
|
|
},
|
|
watch: {
|
|
column(){
|
|
this.config.column = this.column;
|
|
}
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
methods: {
|
|
// 显示
|
|
open(mode='add'){
|
|
this.mode = mode;
|
|
this.visible = true;
|
|
return this;
|
|
},
|
|
// 表单提交方法
|
|
submit(){
|
|
this.$refs.formref.validate(async (valid) => {
|
|
if (valid) {
|
|
this.isSaveing = true;
|
|
|
|
if (!this.config.url) {
|
|
console.log(this.data, this.token)
|
|
this.$alert('没有编辑相关配置', "提示", {type: 'error'});
|
|
return;
|
|
}
|
|
|
|
this.$http.post(this.config.url, {token:this.token, info:this.data}).then((res) => {
|
|
if (res.code == 200 ) {
|
|
this.isSaveing = false;
|
|
this.visible = false;
|
|
this.$emit('success', res.data, this.mode, res.message || "操作成功");
|
|
return;
|
|
}
|
|
this.$alert(res.message, "提示", {type: 'error'});
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 配置
|
|
setConfig(o){
|
|
Object.assign(this.config, o);
|
|
// 远程读取数据
|
|
if (this.config.remoteurl) {
|
|
|
|
this.loading = true;
|
|
setTimeout(async ()=>{
|
|
var res = await this.$http.get(this.config.remoteurl, {[this.key]: this.data[this.key]})
|
|
if (res.code == 200 ) {
|
|
|
|
this.loading = false;
|
|
|
|
if (res.data.config) {
|
|
Object.assign(this.config, res.data.config);
|
|
}
|
|
|
|
if (res.data.data) {
|
|
this.setData(res.data.data);
|
|
}
|
|
|
|
if (res.data.token) {
|
|
this.token = res.data.token
|
|
}
|
|
return;
|
|
}
|
|
this.$alert(res.message, "提示", {type: 'error'});
|
|
}, 100)
|
|
return false;
|
|
}
|
|
},
|
|
// 表单注入数据
|
|
setData(data){
|
|
this.data = data;
|
|
return this;
|
|
},
|
|
}
|
|
}
|
|
</script> |