131 lines
4.4 KiB
Vue
131 lines
4.4 KiB
Vue
<template>
|
||
<div class="right-box right-box-project" v-clickoutside="{obj:editProject,func:clickOutside}">
|
||
<div class="right-box__header">
|
||
<!-- begin--标题-->
|
||
<div class="right-box-title">{{editProject.id ? $t("project.project.editProject") + " ID：" + editProject.id : $t("overall.createProject")}}</div>
|
||
<!-- end--标题-->
|
||
|
||
<div class="header__operation">
|
||
<span v-cancel="{obj: editProject, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="right-box-form-box right-box__container">
|
||
<el-form class="right-box-form right-box-form-left" :model="editProject" label-position = "top" label-width="120px" :rules="rules" ref="projectForm">
|
||
<el-form-item :label='$t("project.project.projectName")' prop="name">
|
||
<el-input size="mini" maxlength="64" show-word-limit v-model="editProject.name" id="project-box-input-name"></el-input>
|
||
</el-form-item>
|
||
<el-form-item :label='$t("project.project.description")'>
|
||
<el-input size="mini" type="textarea" maxlength="1024" show-word-limit v-model="editProject.remark" id="project-box-input-remark"></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
|
||
<!--底部按钮-->
|
||
<div class="right-box-bottom-btns right-box__footer">
|
||
<button v-cancel="{obj:editProject,func:esc}" id="project-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
|
||
<span>{{$t('overall.cancel')}}</span>
|
||
</button>
|
||
<button :class="{'nz-btn-disabled':prevent_opt.save}" v-has="'project_add'" :disabled="prevent_opt.save" @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="project-save">
|
||
<span>{{$t('overall.save')}}</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { noSpecialChar } from '../../common/js/validate'
|
||
export default {
|
||
name: 'projectBox',
|
||
props: {
|
||
project: Object
|
||
},
|
||
data () {
|
||
return {
|
||
editProject: {},
|
||
rules: {
|
||
name: [
|
||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' },
|
||
{ validator: noSpecialChar, trigger: 'change' }
|
||
]
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
clickOutside () {
|
||
this.esc(false)
|
||
},
|
||
|
||
/* 关闭弹框 */
|
||
esc (refresh) {
|
||
this.$emit('close', refresh)
|
||
},
|
||
|
||
/* 保存 */
|
||
save () {
|
||
this.$refs.projectForm.validate((valid) => {
|
||
if (valid) {
|
||
this.prevent_opt.save = true
|
||
if (this.editProject.id) {
|
||
this.$put('monitor/project', this.editProject).then(response => {
|
||
if (response.code === 200) {
|
||
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
|
||
this.$store.commit('projectListChange')
|
||
this.$store.commit('setProject', this.project)
|
||
this.esc(true)
|
||
} else {
|
||
this.$message.error(response.msg)
|
||
}
|
||
this.prevent_opt.save = false
|
||
})
|
||
} else {
|
||
this.$post('monitor/project', this.editProject).then(response => {
|
||
if (response.code === 200) {
|
||
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
|
||
this.$store.commit('projectListChange')
|
||
this.esc(true)
|
||
} else {
|
||
this.$message.error(response.msg)
|
||
}
|
||
this.prevent_opt.save = false
|
||
})
|
||
}
|
||
} else {
|
||
console.log('error submit!!')
|
||
return false
|
||
}
|
||
})
|
||
},
|
||
/* 删除 */
|
||
del () {
|
||
this.$confirm(this.$t('tip.confirmDelete'), {
|
||
confirmButtonText: this.$t('tip.yes'),
|
||
cancelButtonText: this.$t('tip.no'),
|
||
type: 'warning'
|
||
}).then(() => {
|
||
this.$delete('monitor/project?ids=' + this.editProject.id).then(response => {
|
||
if (response.code === 200) {
|
||
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
|
||
this.$store.commit('projectListChange')
|
||
this.esc(true)
|
||
} else {
|
||
this.$message.error(response.msg)
|
||
}
|
||
})
|
||
})
|
||
}
|
||
},
|
||
watch: {
|
||
project: {
|
||
immediate: true,
|
||
handler (n, o) {
|
||
this.editProject = JSON.parse(JSON.stringify(n))
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
|
||
</style>
|