perf: dc代码提交

This commit is contained in:
chenjinsong
2020-07-16 17:33:20 +08:00
parent 44769006d0
commit 98aa99f66d
9 changed files with 270 additions and 395 deletions

View File

@@ -1,8 +1,8 @@
<template>
<div class="right-box right-box-dc" v-clickoutside="clickos">
<div class="right-box right-box-dc" v-clickoutside="clickOutside">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<button id="dc-del" type="button" v-if="currentDc.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light">
<button id="dc-del" type="button" v-if="editDc.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light">
<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>
@@ -10,49 +10,34 @@
<!-- end--顶部按钮-->
<!-- begin--标题-->
<div class="right-box-title">{{}}</div>
<div class="right-box-title">{{editDc.id ? ($t("asset.createAssetTab.editIdcTab.title") + " ID" + editDc.id) : $t("asset.createAssetTab.AddIdcTab.title")}}</div>
<!-- end--标题-->
<!-- begin--表单-->
<el-scrollbar class="right-box-form-box">
<el-form class="right-box-form right-box-form-left" label-width="120px" :model="currentDc" label-position="right" :rules="rules" ref="dcForm">
<el-form class="right-box-form right-box-form-left" label-width="120px" :model="editDc" label-position="right" :rules="rules" ref="dcForm">
<el-form-item :label='$t("overall.name")' prop="name">
<el-input v-if="rightBox.isEdit" placeholder="" maxlength="64" show-word-limit v-model="currentDc.name" size="small"></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{currentDc.name}}</div>
<el-input placeholder="" maxlength="64" show-word-limit v-model="editDc.name" size="small"></el-input>
</el-form-item>
<el-form-item :label='$t("asset.createAssetTab.location")' prop="location">
<el-input v-if="rightBox.isEdit" placeholder="" v-model="currentDc.location" size="small"></el-input>
<div v-if="!rightBox.isEdit && currentDc.location" class="right-box-form-content-txt">{{currentDc.location}}</div>
<div v-else-if="!rightBox.isEdit" class="right-box-form-content-txt">-</div>
<el-input placeholder="" v-model="editDc.location" size="small"></el-input>
</el-form-item>
<el-form-item :label='$t("asset.createAssetTab.tel")' prop="tel">
<el-input v-if="rightBox.isEdit" placeholder="" v-model="currentDc.tel" size="small"></el-input>
<div v-if="!rightBox.isEdit && currentDc.tel" class="right-box-form-content-txt">{{currentDc.tel}}</div>
<div v-else-if="!rightBox.isEdit" class="right-box-form-content-txt">-</div>
<el-input placeholder="" v-model="editDc.tel" size="small"></el-input>
</el-form-item>
<el-form-item :label='$t("asset.createAssetTab.principal")' prop="principal">
<el-select value-key="id" popper-class="config-dropdown"
v-model="currentDc.principal" placeholder="" v-if="rightBox.isEdit" size="small">
<el-option @click.native="" v-for="item in userData" :key="item.userId" :label="item.username"
:value="item.userId" :id="'dc-principal-op-'+item.userId">
<el-select value-key="id" popper-class="config-dropdown" v-model="editDc.principal" placeholder="" size="small">
<el-option @click.native="" v-for="item in userData" :key="item.userId" :label="item.username" :value="item.userId" :id="'dc-principal-op-'+item.userId">
<span>{{item.username}}</span>
</el-option>
</el-select>
<div v-if="!rightBox.isEdit && currentDc.principal" class="right-box-form-content-txt">
<template v-for="item in userData">
<template v-if="item.userId == currentDc.principal">{{item.username}}</template>
</template>
</div>
<div v-else-if="!rightBox.isEdit" class="right-box-form-content-txt">-</div>
</el-form-item>
<el-form-item :label='$t("config.dc.area")' prop="area">
<select-area ref="selectArea" :areaData="areaData" :placement="'bottom-start'" @selectArea="selectArea" :currentArea="currentDc.area.id">
<select-area ref="selectArea" :areaData="areaData" :placement="'bottom-start'" @selectArea="selectArea" :currentArea="editDc.area.id">
<template v-slot:trigger>
<el-input v-if="rightBox.isEdit" placeholder="" v-model="currentDc.area.name" size="small" readonly="readonly" @click.native="toSelectArea"></el-input>
<el-input placeholder="" v-model="editDc.area.name" size="small" readonly="readonly" @click.native="toSelectArea"></el-input>
</template>
</select-area>
<div v-if="!rightBox.isEdit && currentDc.area.name" class="right-box-form-content-txt">{{currentDc.area.name}}</div>
<div v-else-if="!rightBox.isEdit" class="right-box-form-content-txt">-</div>
</el-form-item>
</el-form>
</el-scrollbar>
@@ -62,7 +47,7 @@
<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">
<button @click="save" 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>
@@ -71,32 +56,19 @@
</template>
<script>
import selectArea from "../popBox/selectArea"; //dc弹框
export default {
name: "dcBox",
props: {
dc: Object,
userData: Array
},
components:{
'select-area': selectArea
},
data() {
return {
currentDc: {
id: '',
name: '',
location: '',
tel: '',
principal: '',
area: {
id: '',
name: ''
},
areaId: ''
},
rightBox: {
show: false,
firstShow: false,
title: '',
isEdit: false
},
editDc: {},
rules: {
name: [
{required: true, message: this.$t('validate.required'), trigger: 'blur'}
@@ -106,50 +78,42 @@
}
},
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;
esc(refresh) {
this.$emit("close", refresh);
},
clickOutside() {
this.esc(false);
},
/*弹出选择area弹框*/
toSelectArea() {
this.$refs.selectArea.openBox(this.currentDc.area);
this.$refs.selectArea.openBox(this.editDc.area);
},
/*保存*/
save() {
this.$refs.dcForm.validate((valid) => {
if (valid) {
if (this.currentDc.id) {
if (this.currentDc.area) {
this.currentDc.areaId = this.currentDc.area.id;
if (this.editDc.id) {
if (this.editDc.area) {
this.editDc.areaId = this.editDc.area.id;
}
this.$put('idc', this.currentDc).then(response => {
this.$put('idc', this.editDc).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.rightBox.show = false;
this.$emit('reload');
this.esc(true);
} else {
this.$message.error(response.msg);
}
});
} else {
if (this.currentDc.area) {
this.currentDc.areaId = this.currentDc.area.id;
if (this.editDc.area) {
this.editDc.areaId = this.editDc.area.id;
}
this.$post('idc', this.currentDc).then(response => {
this.$post('idc', this.editDc).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.rightBox.show = false;
this.$emit("reload");
this.esc(true);
} else {
this.$message.error(response.msg);
}
@@ -160,14 +124,6 @@
}
});
},
saveOrToEdit: function() {
if (!this.rightBox.isEdit) {
this.rightBox.isEdit = true;
this.rightBox.title = this.$t("asset.createAssetTab.editIdcTab.title") + " ID" + this.currentDc.id;
} else {
this.save();
}
},
/*删除*/
del() {
this.$confirm(this.$t("tip.confirmDelete"), {
@@ -175,11 +131,10 @@
cancelButtonText: this.$t("tip.no"),
type: 'warning'
}).then(() => {
this.$delete("idc?ids=" + this.currentDc.id).then(response => {
this.$delete("idc?ids=" + this.editDc.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");
this.esc(true);
} else {
this.$message.error(response.msg);
}
@@ -195,31 +150,21 @@
},
selectArea(area) {
this.currentDc.area.id = area.id;
this.currentDc.area.name = area.name;
this.editDc.area.id = area.id;
this.editDc.area.name = area.name;
}
},
mounted() {
this.getAreaData();
},
computed: {
},
watch: {
dc: {
immediate: true,
deep:true,
handler(n, o) {
this.currentDc = JSON.parse(JSON.stringify(n));
if (n && n.id) {
this.rightBox.title =this.rightBox.isEdit? this.$t("asset.createAssetTab.editIdcTab.title") + " ID" + n.id : this.$t("config.dc.dc") + " ID" + n.id ;
} else {
this.rightBox.title = this.$t("asset.createAssetTab.AddIdcTab.title");
}
this.editDc = JSON.parse(JSON.stringify(n));
}
},
}
}
</script>
<style scoped>
</style>