mq、sdk设置

src/views/hard/hard-manager/face-form.vue

@@ -0,0 +1,114 @@
+<template>
+    <el-dialog title="人脸sdk设置" width="30%" v-model="visible" :close-on-click-modal="false" draggable>
+        <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="120px"
+            v-loading="loading">
+            <el-row :gutter="24">
+
+                <el-col :span="24" class="mb20">
+                    <el-form-item label="人脸appId" prop="faceAppId">
+                        <el-input v-model="form.faceAppId" placeholder="请输入人脸appId" />
+                    </el-form-item>
+                </el-col>
+
+                <el-col :span="24" class="mb20">
+                    <el-form-item label="人脸sdkKey" prop="faceSdkKey">
+                        <el-input v-model="form.faceSdkKey" placeholder="请输入人脸sdkKey" />
+                    </el-form-item>
+                </el-col>
+
+                <el-col :span="24" class="mb20">
+                    <el-form-item label="人脸activeKey" prop="faceActiveKey">
+                        <el-input v-model="form.faceActiveKey" placeholder="请输入人脸activeKey" />
+                    </el-form-item>
+                </el-col>
+
+            </el-row>
+        </el-form>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="visible = false">取消</el-button>
+                <el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+
+<script setup lang="ts" name="face-form">
+import { useDict } from '/@/hooks/dict';
+import { useMessage } from "/@/hooks/message";
+import { getObj, addObj, putObj } from '/@/api/hard/hard-manager'
+import { rule } from '/@/utils/validate';
+const emit = defineEmits(['refresh']);
+// 定义变量内容
+const dataFormRef = ref();
+const visible = ref(false)
+const loading = ref(false)
+
+// 提交表单数据
+const form = reactive<any>({
+    id: undefined,
+    faceAppId: undefined,
+    faceSdkKey: undefined,
+    faceActiveKey: undefined,
+});
+
+// 定义校验规则
+const dataRules = ref({
+    faceAppId: [{ required: true, message: '请输入人脸appId', trigger: 'blur' }],
+    faceSdkKey: [{ required: true, message: '请输入人脸sdkKey', trigger: 'blur' }],
+    faceActiveKey: [{ required: true, message: '请输入人脸activeKey', trigger: 'blur' }],
+})
+
+// 打开弹窗
+const openDialog = (id: string) => {
+    visible.value = true
+    form.id = ''
+
+    // 重置表单数据
+    nextTick(() => {
+        dataFormRef.value?.resetFields();
+    });
+
+    // 获取hardManager信息
+    if (id) {
+        form.id = id
+        gethardManagerData(id)
+    }
+};
+
+// 提交
+const onSubmit = async () => {
+    const valid = await dataFormRef.value.validate().catch(() => { });
+    if (!valid) return false;
+
+    try {
+        loading.value = true;
+        form.id ? await putObj(form) : await addObj(form);
+        useMessage().success(form.id ? '修改成功' : '添加成功');
+        visible.value = false;
+        emit('refresh');
+    } catch (err: any) {
+        useMessage().error(err.msg);
+    } finally {
+        loading.value = false;
+    }
+};
+
+
+// 初始化表单数据
+const gethardManagerData = (id: string) => {
+    // 获取数据
+    loading.value = true
+    getObj(id).then((res: any) => {
+        Object.assign(form, res.data)
+    }).finally(() => {
+        loading.value = false
+    })
+};
+
+// 暴露变量
+defineExpose({
+    openDialog
+});
+
+</script>

src/views/hard/hard-manager/index.vue

@@ -1,6 +1,30 @@
 <template>
   <div class="layout-padding">
     <div class="layout-padding-auto layout-padding-view">
+      <el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
+        <el-row :gutter="24">
+          <el-col :span="4">
+            <el-form-item class="w100" label="设备名" prop="name">
+              <el-input v-model="state.queryForm.name" placeholder="设备名" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="4">
+            <el-form-item class="w100" label="设备类型" prop="type">
+              <dict-select v-model="state.queryForm.type" dict-code="hard_type" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="4">
+            <el-form-item class="w100" label="商户" prop="merchantIds">
+              <select-mch v-model="state.queryForm.merchantIds" />
+            </el-form-item>
+          </el-col>
+          <el-form-item>
+            <el-button icon="Search" type="primary" @click="getDataList">{{ $t('common.queryBtn')
+              }}</el-button>
+            <el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
+          </el-form-item>
+        </el-row>
+      </el-form>
       <el-row>
         <div class="mb8" style="width: 100%">
           <el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()"
@@ -42,12 +66,10 @@
           <template #default="{ row }">
             <el-button icon="edit-pen" text type="primary" v-auth="'hard_hardManager_edit'"
               @click="formDialogRef.openDialog(row.id)">编辑</el-button>
-            <el-button link type="primary" @click="formDialogRef.openDialog(row.id)"
+            <el-button icon="TrendCharts" link type="primary" @click="mqformDialogRef.openDialog(row.id)">
-              v-hasPermi="['hardware:manager:update']">
               mq设置
             </el-button>
-            <el-button link type="primary" @click="formDialogRef.openDialog(row.id)"
+            <el-button icon="SetUp" link type="primary" @click="faceFormDialogRef.openDialog(row.id)">
-              v-hasPermi="['hardware:manager:update']">
               人脸sdk设置
             </el-button>
             <el-button icon="delete" text type="primary" v-auth="'hard_hardManager_del'"
@@ -60,7 +82,8 @@
 
     <!-- 编辑、新增  -->
     <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
-
+    <face-form-dialog ref="faceFormDialogRef" @refresh="getDataList(false)" />
+    <mq-form-dialog ref="mqformDialogRef" @refresh="getDataList(false)" />
   </div>
 </template>
 
@@ -72,10 +95,14 @@ import { useDict } from '/@/hooks/dict';
 
 // 引入组件
 const FormDialog = defineAsyncComponent(() => import('./form.vue'));
+const FaceFormDialog = defineAsyncComponent(() => import('./face-form.vue'));
+const MqFormDialog = defineAsyncComponent(() => import('./mq-form.vue'));
 // 定义查询字典
 const { hard_type } = useDict('hard_type')
 // 定义变量内容
 const formDialogRef = ref()
+const faceFormDialogRef = ref()
+const mqformDialogRef = ref()
 const switchTakeFoodLoading = ref(false)
 // 搜索变量
 const queryRef = ref()

src/views/hard/hard-manager/mq-form.vue

@@ -0,0 +1,144 @@
+<template>
+    <el-dialog title="mq设置" width="30%" v-model="visible" :close-on-click-modal="false" draggable>
+        <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px"
+            v-loading="loading">
+            <el-row :gutter="24">
+
+                <el-col :span="24" class="mb20">
+                    <el-form-item label="连接id" prop="mqClientId">
+                        <el-input disabled v-model="form.mqClientId" placeholder="待同步" />
+                    </el-form-item>
+                </el-col>
+
+                <el-col :span="24" class="mb20">
+                    <el-form-item label="mac地址" prop="macAddress">
+                        <el-input disabled v-model="form.macAddress" placeholder="待同步" />
+                    </el-form-item>
+                </el-col>
+
+                <el-col :span="24" class="mb20">
+                    <el-form-item label="topic" prop="mainTopic">
+                        <el-input disabled v-model="form.mainTopic" placeholder="待同步" />
+                    </el-form-item>
+                </el-col>
+
+                <el-col :span="24" class="mb20">
+                    <el-form-item label="mq地址" prop="mqSocketAddress">
+                        <el-input v-model="form.mqSocketAddress" placeholder="请输入mq地址" />
+                    </el-form-item>
+                </el-col>
+
+                <el-col :span="24" class="mb20">
+                    <el-form-item label="mq端口" prop="mqSocketPort">
+                        <el-input v-model="form.mqSocketPort" placeholder="请输入mq端口" />
+                    </el-form-item>
+                </el-col>
+
+                <el-col :span="24" class="mb20">
+                    <el-form-item label="mq用户名" prop="mqUsername">
+                        <el-input disabled v-model="form.mqUsername" placeholder="请输入mq用户名" />
+                    </el-form-item>
+                </el-col>
+
+                <el-col :span="24" class="mb20">
+                    <el-form-item label="mq密码" prop="mqPassword">
+                        <el-input v-model="form.mqPassword" placeholder="请输入mq密码" />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+        </el-form>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="visible = false">取消</el-button>
+                <el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+
+<script setup lang="ts" name="mq-form">
+import { useDict } from '/@/hooks/dict';
+import { useMessage } from "/@/hooks/message";
+import { getObj, addObj, putObj } from '/@/api/hard/hard-manager'
+import { rule } from '/@/utils/validate';
+const emit = defineEmits(['refresh']);
+// 定义变量内容
+const dataFormRef = ref();
+const visible = ref(false)
+const loading = ref(false)
+
+// 提交表单数据
+const form = reactive<any>({
+    id: undefined,
+    name: undefined,
+    type: undefined,
+    merchantId: undefined,
+    mqClientId: undefined,
+    macAddress: undefined,
+    mainTopic: undefined,
+    mqSocketAddress: undefined,
+    mqSocketPort: undefined,
+    mqUsername: undefined,
+    mqPassword: undefined,
+    mqSyncCount: undefined
+});
+
+// 定义校验规则
+const dataRules = ref({
+    mqSocketAddress: [{ required: true, message: 'mq地址', trigger: 'blur' }],
+    mqSocketPort: [{ required: true, message: 'mq端口', trigger: 'blur' }],
+})
+
+// 打开弹窗
+const openDialog = (id: string) => {
+    visible.value = true
+    form.id = ''
+
+    // 重置表单数据
+    nextTick(() => {
+        dataFormRef.value?.resetFields();
+    });
+
+    // 获取hardManager信息
+    if (id) {
+        form.id = id
+        gethardManagerData(id)
+    }
+};
+
+// 提交
+const onSubmit = async () => {
+    const valid = await dataFormRef.value.validate().catch(() => { });
+    if (!valid) return false;
+
+    try {
+        loading.value = true;
+        form.id ? await putObj(form) : await addObj(form);
+        useMessage().success(form.id ? '修改成功' : '添加成功');
+        visible.value = false;
+        emit('refresh');
+    } catch (err: any) {
+        useMessage().error(err.msg);
+    } finally {
+        loading.value = false;
+    }
+};
+
+
+// 初始化表单数据
+const gethardManagerData = (id: string) => {
+    // 获取数据
+    loading.value = true
+    getObj(id).then((res: any) => {
+        Object.assign(form, res.data)
+    }).finally(() => {
+        loading.value = false
+    })
+};
+
+// 暴露变量
+defineExpose({
+    openDialog
+});
+
+</script>