146 lines
3.5 KiB
Vue
146 lines
3.5 KiB
Vue
<template>
|
|
<!-- 新建分组模板 -->
|
|
<el-dialog
|
|
:title="title"
|
|
append-to-body
|
|
:visible.sync="box"
|
|
:close-on-click-modal="false"
|
|
:close-on-press-escape="false"
|
|
@closed="closed"
|
|
width="555px"
|
|
>
|
|
<el-form
|
|
:model="form"
|
|
@submit.native.prevent
|
|
:rules="rules"
|
|
ref="groups"
|
|
label-position="right"
|
|
label-width="100px"
|
|
>
|
|
<el-form-item label="分组名称" prop="groupName">
|
|
<el-input v-model="form.groupName" placeholder="请输入 分组名称" size="small" :disabled="loading" maxlength="40" show-word-limit></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" style="text-align:right">
|
|
<el-button
|
|
type="primary"
|
|
size="mini"
|
|
icon="el-icon-check"
|
|
@click="handleSubmit"
|
|
:loading="loading"
|
|
>提交</el-button>
|
|
<el-button size="mini" icon="el-icon-circle-close" @click=" box = false" :loading="loading">取消</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import { addDept, updateDept } from "@/api/tenant/serve";
|
|
export default {
|
|
data() {
|
|
return {
|
|
type: "",
|
|
title: "",
|
|
groupId: "",
|
|
loading: false,
|
|
box: false,
|
|
form: {
|
|
groupName: "",
|
|
},
|
|
rules: {
|
|
groupName: [
|
|
{
|
|
required: true,
|
|
whitespace: true,
|
|
message: "请填写分组名称",
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
},
|
|
};
|
|
},
|
|
watch: {},
|
|
computed: {},
|
|
methods: {
|
|
closed() {
|
|
this.form = {
|
|
groupName: "",
|
|
};
|
|
if (this.$refs.groups) {
|
|
this.$refs.groups.resetFields();
|
|
}
|
|
this.loading = false;
|
|
},
|
|
openDialog(type, data) {
|
|
this.type = type;
|
|
if (this.type === "add") {
|
|
this.title = "新建分组";
|
|
this.box = true;
|
|
} else if (this.type === "edit") {
|
|
this.title = "编辑分组";
|
|
this.groupId = data.id;
|
|
this.form.groupName = data.groupName;
|
|
this.box = true;
|
|
}
|
|
},
|
|
handleSubmit() {
|
|
if(this.form.groupName){
|
|
this.$refs.groups.validate(valid=>{
|
|
if(valid){
|
|
if (this.type === "add") {
|
|
//提交新建分组接口
|
|
this.loading = true;
|
|
addDept({
|
|
groupName: this.form.groupName,
|
|
}).then(
|
|
() => {
|
|
this.$message({
|
|
type: "success",
|
|
message: "操作成功!",
|
|
});
|
|
this.box = false;
|
|
this.$emit("refresh");
|
|
this.loading = false;
|
|
},
|
|
(error) => {
|
|
window.console.log(error);
|
|
this.loading = false;
|
|
}
|
|
);
|
|
} else if (this.type == "edit") {
|
|
//提交编辑分组接口
|
|
this.loading = true;
|
|
updateDept({
|
|
id: this.groupId,
|
|
groupName: this.form.groupName,
|
|
}).then(
|
|
() => {
|
|
this.$message({
|
|
type: "success",
|
|
message: "操作成功!",
|
|
});
|
|
this.box = false;
|
|
this.$emit("refresh");
|
|
this.loading = false;
|
|
},
|
|
(error) => {
|
|
window.console.log(error);
|
|
this.loading = false;
|
|
}
|
|
);
|
|
}
|
|
}
|
|
else{
|
|
this.$message.error('请输入分组名称');
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
</style> |