feat(components): mqtt 优化升级v1.0.2

Dockerfile

@@ -1,7 +1,14 @@
+FROM node:alpine as build
+WORKDIR /app/kpt-system-web
+COPY . .
+RUN pnpm install
+RUN pnpm build 
+
+
 FROM nginx:alpine as prod
 
 WORKDIR /app/kpt-system-web
 
-COPY ./dist/ /usr/share/nginx/html/
-COPY ./nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=build ./dist/ /usr/share/nginx/html/
+COPY --from=build ./nginx.conf /etc/nginx/conf.d/default.conf
 EXPOSE 80

src/service/api/mqtt.ts

@@ -144,3 +144,10 @@ export const groupPastureEnumList = async (group_id: string) => {
   );
   return adapter(adapterOfMqttTopicEnumList, groupPastureList);
 };
+
+export const groupTopicEnumList = async (pastureId: number, access: number) => {
+  const data = await backgroundRequest.get<Common.OptionWithKey<any>[] | null>(
+    `/mqtt/topic/enum/list?pasture_id=${pastureId}&access=${access}`
+  );
+  return adapter(adapterOfMqttCategoryEnumList, data);
+};

src/views/mqtt/authentication/components/table-action-modal.vue

@@ -3,12 +3,7 @@
     <n-form ref="formRef" label-placement="left" :label-width="90" :model="formModel" :rules="rules">
       <n-grid :cols="50" :x-gap="18">
         <n-form-item-grid-item :span="18" label="牧场名称" size="large" path="pasture_id">
-          <n-select
-            v-model:value="formModel.pasture_id"
-            :options="groupEnumListData"
-            clearable
-            @update:value="handleUpdateValue"
-          />
+          <n-select v-model:value="formModel.pasture_id" :options="groupEnumListData" clearable />
         </n-form-item-grid-item>
         <n-form-item-grid-item :span="18" label="用户名称" size="large" path="user_name">
           <n-input v-model:value="formModel.user_name" />
@@ -41,7 +36,7 @@
 import { computed, ref, reactive, watch } from 'vue';
 import type { FormInst, SelectOption, FormItemRule } from 'naive-ui';
 import { createRequiredFormRule } from '@/utils';
-import { mqttAuthAdd, mqttAuthEdit, topicEnumList } from '@/service/api/mqtt';
+import { mqttAuthAdd, mqttAuthEdit, groupTopicEnumList } from '@/service/api/mqtt';
 import { MD5 } from '@/utils/crypto';
 export interface Props {
   /** 弹窗可见性 */
@@ -58,6 +53,7 @@ export interface Props {
 }
 
 export type ModalType = NonNullable<Props['type']>;
+defineOptions({ name: 'TableActionModal' });
 
 const subscribeTopicEnumListData = ref<SelectOption[]>([]);
 const publishTopicEnumListData = ref<SelectOption[]>([]);
@@ -72,8 +68,6 @@ function setPubTopicEnumList(data: SelectOption[]) {
   publishTopicEnumListData.value = data;
 }
 
-defineOptions({ name: 'TableActionModal' });
-
 const props = withDefaults(defineProps<Props>(), {
   type: 'add',
   editData: null
@@ -193,26 +187,6 @@ function handleUpdateFormModelByModalType() {
   handlers[props.type]();
 }
 
-async function handleUpdateValue() {
-  {
-    const { data } = await topicEnumList(sub, formModel.pasture_id);
-    if (data) {
-      setTimeout(() => {
-        setSubTopicEnumList(data);
-      }, 100);
-    }
-  }
-
-  {
-    const { data } = await topicEnumList(pub, formModel.pasture_id);
-    if (data) {
-      setTimeout(() => {
-        setPubTopicEnumList(data);
-      }, 100);
-    }
-  }
-}
-
 async function handleSubmit() {
   await formRef.value?.validate();
   if (props.type === 'add') {
@@ -237,6 +211,24 @@ async function handleSubmit() {
   closeModal();
 }
 
+async function subTopicOptions(newPastureId: number) {
+  const { data } = await groupTopicEnumList(newPastureId, sub);
+  if (data) {
+    setTimeout(() => {
+      setSubTopicEnumList(data);
+    }, 100);
+  }
+}
+
+async function pubTopicOptions(newPastureId: number) {
+  const { data } = await groupTopicEnumList(newPastureId, pub);
+  if (data) {
+    setTimeout(() => {
+      setPubTopicEnumList(data);
+    }, 100);
+  }
+}
+
 watch(
   () => props.visible,
   newValue => {
@@ -245,6 +237,16 @@ watch(
     }
   }
 );
+
+watch(
+  () => formModel.pasture_id,
+  newPastureId => {
+    if (newPastureId && newPastureId > 0) {
+      subTopicOptions(newPastureId);
+      pubTopicOptions(newPastureId);
+    }
+  }
+);
 </script>
 
 <style scoped></style>