|
|
@@ -0,0 +1,173 @@
|
|
|
+<template>
|
|
|
+ <n-modal v-model:show="modalVisible" preset="card" :title="title" class="w-700px">
|
|
|
+ <n-form ref="formRef" label-placement="left" :label-width="80" :model="formModel" :rules="rules">
|
|
|
+ <n-grid :cols="48" :x-gap="18">
|
|
|
+ <n-form-item-grid-item :span="25" label="挂载点" path="mount_point">
|
|
|
+ <n-input v-model:value="formModel.mount_point" />
|
|
|
+ </n-form-item-grid-item>
|
|
|
+ <n-form-item-grid-item :span="25" label="客户端ID" path="client_id">
|
|
|
+ <n-input v-model:value="formModel.client_id" />
|
|
|
+ </n-form-item-grid-item>
|
|
|
+ <n-form-item-grid-item :span="25" label="用户名称" path="user_name">
|
|
|
+ <n-input v-model:value="formModel.user_name" />
|
|
|
+ </n-form-item-grid-item>
|
|
|
+ <n-form-item-grid-item :span="25" label="发布topic" path="publish_acl">
|
|
|
+ <n-input v-model:value="formModel.publish_acl" />
|
|
|
+ </n-form-item-grid-item>
|
|
|
+ <n-form-item-grid-item :span="25" label="订阅topic" path="subscribe_acl">
|
|
|
+ <n-input v-model:value="formModel.subscribe_acl" />
|
|
|
+ </n-form-item-grid-item>
|
|
|
+ <n-form-item-grid-item :span="25" label="是否显示" path="is_show">
|
|
|
+ <n-select v-model:value="formModel.is_show" :options="EventIsShowOptions" />
|
|
|
+ </n-form-item-grid-item>
|
|
|
+ <n-form-item-grid-item :span="25" label="描述" path="remarks">
|
|
|
+ <n-input v-model:value="formModel.remark" type="textarea" placeholder="请输入描述" />
|
|
|
+ </n-form-item-grid-item>
|
|
|
+ </n-grid>
|
|
|
+ <n-space class="w-full pt-16px" :size="24" justify="end">
|
|
|
+ <n-button class="w-72px" @click="closeModal">取消</n-button>
|
|
|
+ <n-button class="w-72px" type="primary" @click="handleSubmit">确定</n-button>
|
|
|
+ </n-space>
|
|
|
+ </n-form>
|
|
|
+ </n-modal>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { computed, ref, reactive, watch } from 'vue';
|
|
|
+import type { FormInst, FormItemRule } from 'naive-ui';
|
|
|
+import { EventIsShowOptions } from '@/constants';
|
|
|
+import { createRequiredFormRule } from '@/utils';
|
|
|
+import { mqttAuthAdd, mqttAuthEdit } from '@/service/api/mqtt';
|
|
|
+export interface Props {
|
|
|
+ /** 弹窗可见性 */
|
|
|
+ visible: boolean;
|
|
|
+ /**
|
|
|
+ * 弹窗类型
|
|
|
+ * add: 新增
|
|
|
+ * edit: 编辑
|
|
|
+ */
|
|
|
+ type?: 'add' | 'edit';
|
|
|
+ /** 编辑的表格行数据 */
|
|
|
+ editData?: BackgroundMqttAuth.Auth | null;
|
|
|
+}
|
|
|
+
|
|
|
+export type ModalType = NonNullable<Props['type']>;
|
|
|
+
|
|
|
+defineOptions({ name: 'TableActionModal' });
|
|
|
+
|
|
|
+const props = withDefaults(defineProps<Props>(), {
|
|
|
+ type: 'add',
|
|
|
+ editData: null
|
|
|
+});
|
|
|
+
|
|
|
+interface Emits {
|
|
|
+ (e: 'update:visible', visible: boolean): void;
|
|
|
+}
|
|
|
+
|
|
|
+const emit = defineEmits<Emits>();
|
|
|
+
|
|
|
+const modalVisible = computed({
|
|
|
+ get() {
|
|
|
+ return props.visible;
|
|
|
+ },
|
|
|
+ set(visible) {
|
|
|
+ emit('update:visible', visible);
|
|
|
+ }
|
|
|
+});
|
|
|
+const closeModal = () => {
|
|
|
+ modalVisible.value = false;
|
|
|
+};
|
|
|
+const titles: Record<ModalType, string> = {
|
|
|
+ add: '添加鉴权',
|
|
|
+ edit: '编辑鉴权'
|
|
|
+};
|
|
|
+
|
|
|
+const title = computed(() => {
|
|
|
+ return titles[props.type];
|
|
|
+});
|
|
|
+
|
|
|
+const formRef = ref<HTMLElement & FormInst>();
|
|
|
+
|
|
|
+type FormModel = Pick<
|
|
|
+ ApiBackground.MqttAuth,
|
|
|
+ 'id' | 'client_id' | 'mount_point' | 'user_name' | 'publish_acl' | 'subscribe_acl' | 'remark' | 'is_show'
|
|
|
+>;
|
|
|
+
|
|
|
+const formModel = reactive<FormModel>(createDefaultFormModel());
|
|
|
+
|
|
|
+const rules: Record<keyof FormModel, FormItemRule | FormItemRule[]> = {
|
|
|
+ client_id: createRequiredFormRule('请输入客户端id名称'),
|
|
|
+ is_show: createRequiredFormRule(),
|
|
|
+ publish_acl: createRequiredFormRule('请输入发布主题topic'),
|
|
|
+ subscribe_acl: createRequiredFormRule('请输入订阅主题topic'),
|
|
|
+ remark: createRequiredFormRule('请输入描述'),
|
|
|
+ mount_point: createRequiredFormRule('请输入挂载点'),
|
|
|
+ user_name: createRequiredFormRule('请输入用户名称'),
|
|
|
+ id: createRequiredFormRule()
|
|
|
+};
|
|
|
+
|
|
|
+function createDefaultFormModel(): FormModel {
|
|
|
+ return {
|
|
|
+ id: 0,
|
|
|
+ client_id: '',
|
|
|
+ user_name: '',
|
|
|
+ mount_point: '',
|
|
|
+ publish_acl: '',
|
|
|
+ subscribe_acl: '',
|
|
|
+ remark: '',
|
|
|
+ is_show: 1
|
|
|
+ };
|
|
|
+}
|
|
|
+
|
|
|
+function handleUpdateFormModel(model: Partial<FormModel>) {
|
|
|
+ Object.assign(formModel, model);
|
|
|
+}
|
|
|
+
|
|
|
+function handleUpdateFormModelByModalType() {
|
|
|
+ const handlers: Record<ModalType, () => void> = {
|
|
|
+ add: () => {
|
|
|
+ const defaultFormModel = createDefaultFormModel();
|
|
|
+ handleUpdateFormModel(defaultFormModel);
|
|
|
+ },
|
|
|
+ edit: () => {
|
|
|
+ if (props.editData) {
|
|
|
+ handleUpdateFormModel(props.editData);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ handlers[props.type]();
|
|
|
+}
|
|
|
+
|
|
|
+async function handleSubmit() {
|
|
|
+ await formRef.value?.validate();
|
|
|
+ if (props.type === 'add') {
|
|
|
+ const data = mqttAuthAdd(formModel);
|
|
|
+ data.then(res => {
|
|
|
+ if (res.data?.success) {
|
|
|
+ window.$message?.success(`${titles[props.type]}成功！`);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ if (props.type === 'edit') {
|
|
|
+ const data = mqttAuthEdit(formModel);
|
|
|
+ data.then(res => {
|
|
|
+ if (res.data?.success) {
|
|
|
+ window.$message?.success(`${titles[props.type]}成功！`);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ closeModal();
|
|
|
+}
|
|
|
+
|
|
|
+watch(
|
|
|
+ () => props.visible,
|
|
|
+ newValue => {
|
|
|
+ if (newValue) {
|
|
|
+ handleUpdateFormModelByModalType();
|
|
|
+ }
|
|
|
+ }
|
|
|
+);
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped></style>
|
Yi