add manager producer authorization

ui/src/utils/api.js

@@ -11,4 +11,12 @@ export const KafkaAclApi = {
     url: "/acl/list",
     method: "post",
   },
+  addProducerAuth: {
+    url: "/acl/producer",
+    method: "post",
+  },
+  deleteProducerAuth: {
+    url: "/acl/producer",
+    method: "delete",
+  },
 };

ui/src/views/acl/Acl.vue

@@ -65,18 +65,16 @@
           <a
             href="javascript:;"
             class="operation-btn"
-            @click="onAddProducerAuth(record)"
-            >授予生产权限
-            <AddProducerAuth
-              :visible="openAddProducerAuthDialog"
+            @click="onManageProducerAuth(record)"
+            >管理生产权限
+            <ManageProducerAuth
+              :visible="openManageProducerAuthDialog"
               :record="selectRow"
-              @addProducerAuthDialog="closeAddProducerAuthDialog"
-            ></AddProducerAuth>
+              @manageProducerAuthDialog="closeManageProducerAuthDialog"
+            ></ManageProducerAuth>
           </a>
 
-          <a href="javascript:;" class="operation-btn">收回生产权限</a>
-          <a href="javascript:;" class="operation-btn">授予消费权限</a>
-          <a href="javascript:;" class="operation-btn">收回消费权限</a>
+          <a href="javascript:;" class="operation-btn">管理消费权限</a>
           <a href="javascript:;" class="operation-btn">增加权限</a>
         </a>
         <!--        <a-table-->
@@ -113,11 +111,11 @@ import request from "@/utils/request";
 import notification from "ant-design-vue/es/notification";
 import UpdateUser from "@/views/acl/UpdateUser";
 import { KafkaAclApi } from "@/utils/api";
-import AddProducerAuth from "@/views/acl/AddProducerAuth";
+import ManageProducerAuth from "@/views/acl/ManageProducerAuth";
 
 export default {
   name: "Acl",
-  components: { UpdateUser, AddProducerAuth },
+  components: { UpdateUser, ManageProducerAuth },
   data() {
     return {
       queryParam: {},
@@ -129,7 +127,7 @@ export default {
       form: this.$form.createForm(this, { name: "advanced_search" }),
       showUpdateUser: false,
       deleteUserConfirm: false,
-      openAddProducerAuthDialog: false,
+      openManageProducerAuthDialog: false,
     };
   },
   methods: {
@@ -179,19 +177,19 @@ export default {
         }
       });
     },
-    onAddProducerAuth(row) {
-      this.openAddProducerAuthDialog = true;
+    onManageProducerAuth(row) {
+      this.openManageProducerAuthDialog = true;
       const rowData = {};
       Object.assign(rowData, row);
       this.selectRow = rowData;
-      console.log("onAddProducerAuth user:", rowData);
     },
     cancel(e) {
       console.log(e);
       this.$message.error("Click on No");
     },
-    closeAddProducerAuthDialog() {
-      this.openAddProducerAuthDialog = false;
+    closeManageProducerAuthDialog() {
+      this.openManageProducerAuthDialog = false;
+      getAclList(this.data, this.queryParam);
     },
   },
   created() {

ui/src/views/acl/AddProducerAuth.vue

@@ -1,83 +0,0 @@
-<template>
-  <a-modal
-    title="授予生产权限"
-    :visible="show"
-    :confirm-loading="confirmLoading"
-    :width="800"
-    @ok="handleOk"
-    @cancel="handleCancel"
-    okText="提交"
-    cancelText="取消"
-    :mask="false"
-  >
-    <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
-      <a-form-item label="用户名">
-        <a-input
-          v-decorator="['username', { initialValue: record.username }]"
-          disabled="disabled"
-        />
-      </a-form-item>
-      <a-form-item label="topic">
-        <a-input
-          v-decorator="[
-            'topic',
-            { rules: [{ required: true, message: '请输入topic!' }] },
-          ]"
-        />
-      </a-form-item>
-    </a-form>
-  </a-modal>
-</template>
-
-<script>
-export default {
-  name: "AddProducerAuth",
-  props: {
-    visible: {
-      type: Boolean,
-      default: false,
-    },
-    record: {
-      default: {},
-    },
-  },
-  data() {
-    return {
-      formLayout: "horizontal",
-      form: this.$form.createForm(this, { name: "AddProducerAuthForm" }),
-      confirmLoading: false,
-      show: this.visible,
-    };
-  },
-  watch: {
-    visible(v) {
-      this.show = v;
-    },
-  },
-  methods: {
-    handleSubmit(e) {
-      e.preventDefault();
-      this.form.validateFields((err, values) => {
-        if (!err) {
-          console.log("Received values of form: ", values);
-        }
-      });
-    },
-    handleSelectChange(value) {
-      console.log(value);
-      this.form.setFieldsValue({
-        note: `Hi, ${value === "male" ? "man" : "lady"}!`,
-      });
-    },
-    handleOk() {
-      console.log(this.record);
-      this.$emit("addProducerAuthDialog", {});
-    },
-    handleCancel() {
-      this.$emit("addProducerAuthDialog", {});
-    },
-  },
-};
-</script>
-
-<style scoped></style>

ui/src/views/acl/ManageProducerAuth.vue

@@ -0,0 +1,114 @@
+<template>
+  <a-modal
+      title="管理生产权限"
+      :visible="show"
+      :confirm-loading="confirmLoading"
+      :width="800"
+      @ok="handleOk"
+      @cancel="handleCancel"
+      okText="提交"
+      cancelText="取消"
+      :mask="false"
+      :destroyOnClose="true"
+  >
+    <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
+      <a-form-item label="用户名">
+        <a-input
+            v-decorator="['username', { initialValue: record.username }]"
+            disabled="disabled"
+        />
+      </a-form-item>
+      <a-form-item label="topic">
+        <a-input
+            v-decorator="[
+            'topic',
+            { rules: [{ required: true, message: '请输入topic!' }] },
+          ]"
+        />
+      </a-form-item>
+      <a-form-item label="类型">
+        <a-radio-group v-decorator="['type', {initialValue: 'grant'}]">
+          <a-radio value="grant">
+            授予
+          </a-radio>
+          <a-radio value="revoke">
+            收回
+          </a-radio>
+        </a-radio-group>
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<script>
+import {KafkaAclApi} from "@/utils/api";
+import request from "@/utils/request";
+export default {
+  name: "AddProducerAuth",
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    record: {
+      default: {}
+    }
+  },
+  data() {
+    return {
+      formLayout: "horizontal",
+      form: this.$form.createForm(this, { name: "AddProducerAuthForm" }),
+      confirmLoading: false,
+      show: this.visible
+    };
+  },
+  watch: {
+    visible(v) {
+      this.show = v;
+    }
+  },
+  methods: {
+    handleOk() {
+      const form = this.form;
+      form.validateFields((e, v) => {
+        if (e) {
+          return;
+        }
+        const param = {username: v.username, topic: v.topic};
+        const api = {}
+        switch (v.type) {
+          case "grant":
+            Object.assign(api, KafkaAclApi.addProducerAuth)
+            break;
+          case "revoke":
+            Object.assign(api, KafkaAclApi.deleteProducerAuth)
+            break;
+            default:
+              this.$message.error("unknown error");
+              return;
+        }
+
+        this.confirmLoading = true;
+        request({
+          url: api.url,
+          method: api.method,
+          data: param,
+        }).then(res => {
+          this.confirmLoading = false;
+          if (res.code == 0) {
+            this.$message.success(res.msg)
+            this.$emit("manageProducerAuthDialog", v);
+          } else {
+            this.$message.error(res.msg)
+          }
+        })
+      });
+    },
+    handleCancel() {
+      this.$emit("manageProducerAuthDialog", {});
+    }
+  }
+};
+</script>
+
+<style scoped></style>