116 lines
2.6 KiB
Vue
116 lines
2.6 KiB
Vue
<template>
|
|
<a-modal
|
|
title="新增/更新用户"
|
|
:visible.sync="show"
|
|
:confirm-loading="confirmLoading"
|
|
:width="800"
|
|
@ok="handleOk"
|
|
@cancel="handleCancel"
|
|
okText="提交"
|
|
cancelText="取消"
|
|
:mask="true"
|
|
>
|
|
<div>
|
|
<a-form layout="vertical" :form="this.form">
|
|
<!--每一项元素-->
|
|
<a-form-item label="用户名">
|
|
<a-input
|
|
placeholder="username"
|
|
:allowClear="true"
|
|
:maxLength="100"
|
|
v-decorator="[
|
|
'username',
|
|
{
|
|
rules: [{ required: true, message: '请填写用户名!' }],
|
|
},
|
|
]"
|
|
/>
|
|
</a-form-item>
|
|
<a-form-item label="密码">
|
|
<a-input
|
|
placeholder="password"
|
|
:allowClear="true"
|
|
:maxLength="100"
|
|
v-decorator="[
|
|
'password',
|
|
{
|
|
rules: [{ required: true, message: '请填写密码!' }],
|
|
},
|
|
]"
|
|
/>
|
|
</a-form-item>
|
|
</a-form>
|
|
</div>
|
|
</a-modal>
|
|
</template>
|
|
|
|
<script>
|
|
import request from "@/utils/request";
|
|
import notification from "ant-design-vue/es/notification";
|
|
import { KafkaAclApi } from "@/utils/api";
|
|
|
|
export default {
|
|
name: "UpdateUser",
|
|
props: {
|
|
visible: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
beforeCreate() {
|
|
//创建表单
|
|
this.form = this.$form.createForm(this, { name: "addOrUpdateUserModal" });
|
|
},
|
|
data() {
|
|
return {
|
|
ModalText: "Content of the modal",
|
|
confirmLoading: false,
|
|
show: this.visible,
|
|
};
|
|
},
|
|
watch: {
|
|
visible(val) {
|
|
this.show = val;
|
|
},
|
|
},
|
|
methods: {
|
|
handleOk() {
|
|
const form = this.form;
|
|
form.validateFields((err, values) => {
|
|
if (err) {
|
|
return;
|
|
}
|
|
this.confirmLoading = true;
|
|
request({
|
|
url: KafkaAclApi.addKafkaUser.url,
|
|
method: KafkaAclApi.addKafkaUser.method,
|
|
data: { username: values.username, password: values.password },
|
|
}).then((res) => {
|
|
this.confirmLoading = false;
|
|
if (res.code == 0) {
|
|
notification.success({
|
|
message: res.msg,
|
|
});
|
|
form.resetFields();
|
|
this.$emit("updateUserDialogData", { ok: true, show: false });
|
|
} else {
|
|
notification.error({
|
|
message: res.msg,
|
|
});
|
|
}
|
|
});
|
|
});
|
|
},
|
|
handleCancel() {
|
|
this.$emit("updateUserDialogData", { ok: false, show: false });
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.input-c {
|
|
margin-bottom: 1%;
|
|
}
|
|
</style>
|