refactor(dashboard): update some logic for adaptation for vue3

emqx · Nov 15, 2021 · abc7b57 · abc7b57
1 parent ce164f5
commit abc7b57
Show file tree

Hide file tree

Showing 14 changed files with 223 additions and 120 deletions.
diff --git a/src/components/commonPagination.vue b/src/components/commonPagination.vue
@@ -6,8 +6,8 @@
     v-model:page-size="meta.limit"
     v-model:current-page="meta.page"
     :total="meta.count"
-    @size-change="reload"
-    @current-change="reload"
+    @size-change="reloadPage"
+    @current-change="reloadPage"
   >
   </el-pagination>
 </template>
@@ -16,7 +16,7 @@ import { computed, defineComponent, watch } from "vue";
 
 export default defineComponent({
   props: {
-    reloadFunc: Function,
+    // reloadFunc: Function,
     metaData: {
       type: Object,
       required: true,

diff --git a/src/style/normalize.scss b/src/style/normalize.scss
@@ -4,7 +4,9 @@
     'background-color':#282e38ff,
     'hover-background-color':#00b29915,
   ),
-
+  $card:(
+    'border-radius':2px,
+  ),
   $table:(
       'header-font-color':var(--el-text-color-regular)
   )
@@ -121,7 +123,7 @@
         //   --el-button-active-font-color:#e34242ff;
         //   --el-button-active-background-color:#ffffffff;
         //   --el-button-active-border-color:#e34242ff;
-          &:hover ,&:active{
+          &:hover ,&:active,&:focus{
             color: #ff7c7cff;
             border-color: #ff7c7cff;
             background-color: #ffffffff;
@@ -267,4 +269,25 @@
         }
       }
     }
+  }
+
+  .el-popover{
+    width: 50%;
+    max-height: 50%;
+    overflow-y: scroll;
+  }
+
+  .el-tag {
+    border-radius: 0;
+    font-weight: normal;
+    &.el-tag--danger {
+      background-color: #e34242ff;
+      color: #fff;
+      border: none;
+    }
+    &.el-tag--info {
+      background-color: #eff3fe;
+      color: #8d96a2ff;
+      border: none;
+    }
   }
diff --git a/src/views/Advanced/components/subscribe.vue b/src/views/Advanced/components/subscribe.vue
@@ -52,16 +52,43 @@
             ></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item>
-          <el-checkbox-group v-model="subsInput.op">
-            <el-checkbox
-              v-for="item in subsOptions.op"
-              border
-              :label="item"
-              :key="item"
-            ></el-checkbox>
-          </el-checkbox-group>
-        </el-form-item>
+      </el-form>
+      <el-form>
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="nl">
+              <el-select v-model="subsInput.nl">
+                <el-option
+                  v-for="item in subsOptions.nl"
+                  :key="item"
+                  :value="item"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="rap">
+              <el-select v-model="subsInput.rap">
+                <el-option
+                  v-for="item in subsOptions.rap"
+                  :key="item"
+                  :value="item"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="rh">
+              <el-select v-model="subsInput.rh">
+                <el-option
+                  v-for="item in subsOptions.rh"
+                  :key="item"
+                  :value="item"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
       <template #footer>
         <el-button
@@ -92,13 +119,18 @@ export default defineComponent({
     let opSubs = ref(false);
     let subTbData = ref([]);
     let subsOptions = reactive({
-      op: ["nl", "rap", "rh"],
+      // op: ["nl", "rap", "rh"],
       qos: [0, 1, 2],
+      nl: [0, 1],
+      rap: [0, 1],
+      rh: [0, 1, 2],
     });
     let subsInput = reactive({
       topic: "",
       qos: 0,
-      op: [],
+      nl: 0,
+      rap: 0,
+      rh: 0,
     });
     let editPos = ref(undefined);
     let submitLoading = ref(false);
@@ -118,19 +150,22 @@ export default defineComponent({
       opSubs.value = true;
       isEdit.value = !!edit;
       subsForm.value?.resetFields();
-      subsInput.topic = edit && origin.topic ? origin.topic : "";
-      subsInput.qos = edit && origin.qos ? origin.qos : 0;
-
-      subsInput.op =
-        (edit &&
-          (() => {
-            let opArr = [];
-            origin.nl === 1 && opArr.push("nl");
-            origin.rap === 1 && opArr.push("rap");
-            origin.rh === 1 && opArr.push("rh");
-            return opArr;
-          })()) ||
-        [];
+
+      // subsInput.topic = edit && origin.topic ? origin.topic : subsInput.topic;
+      // subsInput.qos = edit && origin.qos ? origin.qos : subsInput.qos;
+      // subsInput.nl=edit&&origin.nl?origin.nl:subsInput
+      subsInput = (edit && { ...subsInput, ...origin }) || subsInput;
+
+      // subsInput.op =
+      //   (edit &&
+      //     (() => {
+      //       let opArr = [];
+      //       origin.nl === 1 && opArr.push("nl");
+      //       origin.rap === 1 && opArr.push("rap");
+      //       origin.rh === 1 && opArr.push("rh");
+      //       return opArr;
+      //     })()) ||
+      //   [];
 
       edit && (editPos.value = subTbData.value.findIndex((e) => e === origin));
     };
@@ -139,25 +174,25 @@ export default defineComponent({
       let valid = await subsForm.value?.validate().catch(() => {});
       if (!valid) return;
 
-      let tempOpStore = {};
+      // let tempOpStore = {};
       let pendingTbData = Object.assign([], subTbData.value);
 
-      Array.prototype.forEach.call(subsOptions.op, (v) => {
-        tempOpStore[v] = subsInput.op.indexOf(v) >= 0 ? 1 : 0;
-      });
-      let subjectSubData = {
-        topic: subsInput.topic,
-        qos: subsInput.qos,
-        ...tempOpStore,
-      };
+      // Array.prototype.forEach.call(subsOptions.op, (v) => {
+      //   tempOpStore[v] = subsInput.op.indexOf(v) >= 0 ? 1 : 0;
+      // });
+      // let subjectSubData = {
+      //   topic: subsInput.topic,
+      //   qos: subsInput.qos,
+      //   ...tempOpStore,
+      // };
 
       if (!edit) {
-        pendingTbData.push(subjectSubData);
+        pendingTbData.push(subsInput);
       } else {
         if (editPos.value === undefined) {
           return;
         }
-        pendingTbData.splice(editPos.value, 1, subjectSubData);
+        pendingTbData.splice(editPos.value, 1, subsInput);
       }
       submitLoading.value = true;
 
@@ -170,16 +205,15 @@ export default defineComponent({
             : this.$t("Base.createSuccess"),
         });
         subTbData.value = pendingTbData;
+        opSubs.value = false;
+        editPos.value = undefined;
       } else {
         this.$message({
           type: "error",
           message: this.$t("Base.opErr"),
         });
       }
-
       submitLoading.value = false;
-      opSubs.value = false;
-      editPos.value = undefined;
     };
 
     const deleteSubs = async function (origin) {
@@ -242,4 +276,8 @@ export default defineComponent({
   },
 });
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.el-form:not(:first-child) {
+  margin-top: 50px;
+}
+</style>
diff --git a/src/views/Auth/AuthnCreate.vue b/src/views/Auth/AuthnCreate.vue
@@ -191,7 +191,9 @@ import JwtConfig from "./components/JwtConfig.vue";
 import useGuide from "@/hooks/useGuide";
 import { createAuthn } from "@/api/auth";
 import useAuthnCreate from "@/hooks/Auth/useAuthnCreate";
-import router from "@/router";
+import { useRouter } from "vue-router";
+import { ElMessage as M } from "element-plus";
+import { useI18n } from "vue-i18n";
 
 export default defineComponent({
   name: "AuthnCreate",
@@ -223,6 +225,8 @@ export default defineComponent({
     },
   },
   setup(props) {
+    const { t } = useI18n();
+    const router = useRouter();
     const mechanism = ref("password-based");
     const backend = ref("");
     const databases = ref([]);
@@ -296,9 +300,11 @@ export default defineComponent({
         });
       } else {
         const data = create(configData.value, backend.value, mechanism.value);
-        await createAuthn(data).catch(() => {});
-        this.$message.success(this.$t("Base.createSuccess"));
-        this.$router.push({ name: "authentication" });
+        let res = await createAuthn(data).catch(() => {});
+        if (res) {
+          M.success(t("Base.createSuccess"));
+          router.push({ name: "authentication" });
+        }
       }
     };
 

diff --git a/src/views/Auth/AuthnDetails.vue b/src/views/Auth/AuthnDetails.vue
@@ -9,12 +9,12 @@
           <img
             v-if="configData.mechanism !== 'jwt'"
             :src="currImg"
-            width="56px"
+            width="90"
           />
         </div>
         <div>
           <div class="section-header__title">
-            {{ titleMap[currBackend] || "JWT" }}
+            {{ titleMap[currBackend] }}
           </div>
           <el-tag type="info" size="mini">
             {{ configData.mechanism }}
@@ -68,13 +68,13 @@
             </template>
             <jwt-config v-else v-model="configData"></jwt-config>
           </template>
-          <el-button type="primary" @click="handleUpdate">
+          <el-button type="primary" @click="handleUpdate" size="small">
             {{ $t("Base.update") }}
           </el-button>
           <!-- <el-button @click="handleTest">
           {{ $t('Base.test') }}
         </el-button> -->
-          <el-button @click="$router.push('/authentication')">
+          <el-button @click="$router.push('/authentication')" size="small">
             {{ $t("Base.cancel") }}
           </el-button>
         </el-card>
@@ -152,7 +152,7 @@ export default defineComponent({
       authnDetailLock.value = false;
 
       if (res) {
-        currBackend.value = res.backend;
+        currBackend.value = res.backend || res.mechanism;
         configData.value = res;
       }
     };
@@ -161,6 +161,7 @@ export default defineComponent({
       postgresql: "PostgreSQL",
       http: "HTTP Server",
       "built-in-database": "Built in Database",
+      jwt: "JWT",
     };
     loadData();
     const handleUpdate = async function ({ enable }) {

diff --git a/src/views/Auth/AuthzDetails.vue b/src/views/Auth/AuthzDetails.vue
@@ -6,7 +6,7 @@
     <div class="section-header" v-loading.lock="authzDetailLock">
       <div class="section-header__block">
         <div>
-          <img :src="currImg" width="56px" />
+          <img :src="currImg" width="90" />
         </div>
         <div class="section-header__title">
           {{ titleMap[type] }}

diff --git a/src/views/Auth/components/BuiltInConfig.vue b/src/views/Auth/components/BuiltInConfig.vue
@@ -2,7 +2,7 @@
   <div class="built-in-config config">
     <div class="create-form-title">Build-in-Database</div>
     <el-row :gutter="20">
-      <el-form class="create-form">
+      <el-form class="create-form" size="small">
         <template v-if="type !== 'scram'">
           <el-col :span="12">
             <el-form-item :label="$t('Auth.userIdType')">