gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

换电脑，临时提交

Browse Source
This commit is contained in:
陈劲松
2020-03-11 12:27:00 +08:00
parent 40db6afd46
commit 802c191060
12 changed files with 515 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
nezha-fronted/src/components/common/rightBox/modelBox.vue Normal file
View File

@@ -0,0 +1,186 @@
<template>
<transition name="right-box">
<div class="right-box right-box-model" v-if="rightBox.show" v-clickoutside="clickos">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<button id="dc-del" type="button" v-if="currentModel.id != '' && rightBox.isEdit" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
<span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
</button>
<button v-if="!rightBox.isEdit" id="dc-save" type="button" @click="saveOrToEdit" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-edit"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.edit')}}</span>
</button>
</div>
<!-- end--顶部按钮-->
<!-- begin--标题-->
<div class="right-box-title">{{rightBox.title}}</div>
<!-- end--标题-->
<!-- begin--表单-->
<el-scrollbar class="right-box-form-box">
<el-form class="right-box-form" :model="currentModel" label-position="top" :rules="rules" ref="modelForm">
<el-form-item :label='$t("overall.name")' prop="name">
<el-input v-if="rightBox.isEdit" placeholder="" maxlength="64" show-word-limit v-model="currentModel.name" size="small"></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{currentModel.name}}</div>
</el-form-item>
</el-form>
<el-form-item prop="height">
<el-autocomplete
v-model="currentModel.height"
:fetch-suggestions="querySearch"
placeholder=""
size="mini"
popper-class="no-style-class"
@select="handleSelect">
<template slot-scope="{ item }">
<div class="name">{{ item }}</div>
</template>
</el-autocomplete>
</el-form-item>
<el-form-item :label="$t('config.model.remark')" prop="remark">
<el-input maxlength="512" rows="4" show-word-limit v-if="rightBox.isEdit" type="textarea" placeholder="" v-model="currentModel.remark" size="small"></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{currentModel.remark}}</div>
</el-form-item>
</el-scrollbar>
<!--底部按钮-->
<div class="right-box-bottom-btns">
<button @click="esc" id="dc-box-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
<span>{{$t('overall.cancel')}}</span>
</button>
<button v-if="rightBox.isEdit" @click="saveOrToEdit" id="dc-box-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
<span>{{$t('overall.save')}}</span>
</button>
</div>
</div>
</transition>
</template>
<script>
import {noSpecialChar} from "../js/validate";
export default {
name: "modelBox",
props: {
model: Object
},
data() {
return {
currentModel: {
id: '',
name: '',
vendor: {id: '', value: '', code: '', type: ''},
type: {id: '', value: '', code: '', type: ''},
assetStat: {total: '', inStock: '', outStock: ''},
remark: ''
},
rightBox: {
show: false,
firstShow: false,
title: '',
isEdit: false
},
rules: {
name: [
{required: true, message: this.$t('validate.required'), trigger: 'blur'}
],
},
}
},
methods: {
show(show, isEdit) {
this.rightBox.show = show;
this.rightBox.isEdit = isEdit;
},
clickos() {
this.rightBox.show = false;
},
/*关闭弹框*/
esc() {
this.rightBox.show = false;
this.rightBox.firstShow = false;
},
/*保存*/
save() {
this.$refs.modelForm.validate((valid) => {
if (valid) {
if (this.currentModel.id) {
this.$put('model', this.currentModel).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.rightBox.show = false;
this.$emit('reload');
} else {
this.$message.error(response.msg);
}
});
} else {
this.$post('model', this.currentModel).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.rightBox.show = false;
this.$emit("reload");
} else {
this.$message.error(response.msg);
}
});
}
} else {
return false;
}
});
},
saveOrToEdit: function() {
if (!this.rightBox.isEdit) {
this.rightBox.isEdit = true;
this.rightBox.title = this.$t("config.model.editModel") + " ID：" + this.currentModel.id;
} else {
this.save();
}
},
/*删除*/
del() {
this.$confirm(this.$t("tip.confirmDelete"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
type: 'warning'
}).then(() => {
this.$delete("model?ids=" + this.currentModel.id).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
this.rightBox.show = false;
this.$emit("reload");
} else {
this.$message.error(response.msg);
}
});
});
},
},
mounted() {
},
computed: {
},
watch: {
model: {
immediate: true,
deep:true,
handler(n, o) {
this.currentModel = JSON.parse(JSON.stringify(n));
if (n && n.id) {
this.rightBox.title =this.rightBox.isEdit? this.$t("config.model.editModel") + " ID：" + n.id : this.$t("config.model.model") + " ID：" + n.id ;
} else {
this.rightBox.title = this.$t("config.model.createModel");
}
}
},
}
}
</script>
<style scoped>
</style>