add kakfa acl user

ui/src/views/acl/Acl.vue

@@ -45,8 +45,22 @@
           </a-row>
         </a-form>
       </div>
+      <div class="operation-row-button">
+        <a-button type="primary" @click="updateUser">新增/更新用户</a-button>
+        <UpdateUser
+          :visible="showUpdateUser"
+          @updateDialogData="closeUpdateUserDialog"
+        ></UpdateUser>
+      </div>
       <a-table :columns="columns" :data-source="data" bordered>
-        <a slot="operation" slot-scope="{}">删除</a>
+        <a slot="operation" slot-scope="{}">
+          <a-button class="operation-btn">删除</a-button>
+          <a-button class="operation-btn">授予生产权限</a-button>
+          <a-button class="operation-btn">收回生产权限</a-button>
+          <a-button class="operation-btn">授予消费权限</a-button>
+          <a-button class="operation-btn">收回消费权限</a-button>
+          <a-button class="operation-btn">增加权限</a-button>
+        </a>
         <!--        <a-table-->
         <!--          slot="expandedRowRender"-->
         <!--          slot-scope="{}"-->
@@ -79,9 +93,11 @@
 <script>
 import request from "@/utils/request";
 import notification from "ant-design-vue/es/notification";
+import UpdateUser from "@/views/acl/UpdateUser";
 
 export default {
   name: "Acl",
+  components: { UpdateUser },
   data() {
     return {
       queryParam: {},
@@ -90,6 +106,7 @@ export default {
       innerColumns,
       innerData,
       form: this.$form.createForm(this, { name: "advanced_search" }),
+      showUpdateUser: false,
     };
   },
   methods: {
@@ -107,6 +124,7 @@ export default {
           queryParam.resourceType = "GROUP";
           queryParam.resourceName = values.groupId;
         }
+        Object.assign(this.queryParam, queryParam);
         getAclList(this.data, queryParam);
       });
     },
@@ -114,6 +132,16 @@ export default {
     handleReset() {
       this.form.resetFields();
     },
+
+    updateUser() {
+      this.showUpdateUser = true;
+    },
+    closeUpdateUserDialog(data) {
+      this.showUpdateUser = data.show;
+      if (data.ok) {
+        getAclList(this.data, this.queryParam);
+      }
+    },
   },
   created() {
     getAclList(this.data, this.queryParam);
@@ -232,4 +260,12 @@ for (let i = 0; i < 3; ++i) {
 .input-w {
   width: 400px;
 }
+
+.operation-row-button {
+  height: 4%;
+  text-align: left;
+}
+.operation-btn {
+  margin-right: 1%;
+}
 </style>

ui/src/views/acl/UpdateUser.vue

@@ -0,0 +1,120 @@
+<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="50"
+            v-decorator="[
+              'username',
+              {
+                rules: [{ required: true, message: '请填写用户名!' }],
+              },
+            ]"
+          />
+        </a-form-item>
+        <a-form-item label="密码">
+          <a-input
+            placeholder="password"
+            :allowClear="true"
+            :maxLength="50"
+            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";
+export default {
+  name: "UpdateUser",
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  beforeCreate() {
+    //创建表单
+    this.form = this.$form.createForm(this, { name: "form_in_modal" });
+  },
+  data() {
+    return {
+      ModalText: "Content of the modal",
+      confirmLoading: false,
+      show: this.visible,
+      userForm: {},
+    };
+  },
+  watch: {
+    visible(val) {
+      this.show = val;
+    },
+  },
+  methods: {
+    handleOk() {
+      const form = this.form;
+      form.validateFields((err, values) => {
+        if (err) {
+          return;
+        }
+        request({
+          url: api.addKafkaUser.url,
+          method: api.addKafkaUser.method,
+          data: { username: values.username, password: values.password },
+        }).then((res) => {
+          console.log(res);
+          if (res.code == 0) {
+            notification.success({
+              message: res.msg,
+            });
+            form.resetFields();
+            this.$emit("updateDialogData", { ok: true, show: false });
+          } else {
+            notification.error({
+              message: res.msg,
+            });
+          }
+        });
+      });
+    },
+    handleCancel() {
+      this.$emit("updateDialogData", { ok: false, show: false });
+    },
+  },
+};
+
+const api = {
+  addKafkaUser: {
+    url: "/user",
+    method: "post",
+  },
+};
+</script>
+
+<style scoped>
+.input-c {
+  margin-bottom: 1%;
+}
+</style>