温湿度计页面调整

src/views/iot/tplink/camera/components/DrawerModal.vue

@@ -65,7 +65,6 @@ function edit(record) {
  */
 async function configEdit() {
   await getConfig({}).then((res) => {
-    console.log(res);
     configVisible.value = true;
     if(res!=null){
       title.value = '编辑配置';
@@ -79,8 +78,6 @@ async function configEdit() {
       });
     }
   })
-
-
 }
 
 /**

src/views/iot/yiweilian/humid/components/ConfigInfoForm.vue

@@ -0,0 +1,162 @@
+<template>
+  <a-spin :spinning="confirmLoading">
+    <JFormContainer :disabled="disabled">
+      <template #detail>
+        <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-row >
+            <a-col :span="24">
+              <a-form-item label="云平台地址">
+                <a-input v-model:value="formData.requestUrl"></a-input>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row>
+            <a-col :span="24">
+              <a-form-item label="用户标识">
+                <a-input v-model:value="formData.clientId"></a-input>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row>
+            <a-col :span="24">
+              <a-form-item label="更新时间">
+                <a-input v-model:value="formData.updateDate" :disabled="true"></a-input>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-form>
+      </template>
+    </JFormContainer>
+  </a-spin>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
+import { defHttp } from '/@/utils/http/axios';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { getValueType } from '/@/utils';
+import { saveOrUpdateConfig } from '../humid.api';
+import { Form } from 'ant-design-vue';
+import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
+
+const props = defineProps({
+  formDisabled: { type: Boolean, default: false },
+  formData: { type: Object, default: ()=>{} },
+  formBpm: { type: Boolean, default: true }
+});
+const formRef = ref();
+const useForm = Form.useForm;
+const emit = defineEmits(['register', 'ok']);
+const formData = reactive<Record<string, any>>({
+  id: '',
+  requestUrl: '',
+  clientId: '',
+  updateDate: ''
+});
+const { createMessage } = useMessage();
+const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
+const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
+const confirmLoading = ref<boolean>(false);
+//表单验证
+const validatorRules = {
+  requestUrl: [{ required: true, message: '请输入云平台地址!'},],
+  clientId: [{ required: true, message: '请输入用户标识!'},]
+};
+const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: true });
+
+// 表单禁用
+const disabled = computed(()=>{
+  if(props.formBpm === true){
+    if(props.formData.disabled === false){
+      return false;
+    }else{
+      return true;
+    }
+  }
+  return props.formDisabled;
+});
+
+
+/**
+ * 新增
+ */
+function add() {
+  let record = {};
+  edit(record);
+}
+
+/**
+ * 编辑
+ */
+function edit(record) {
+  nextTick(() => {
+    resetFields();
+    //赋值
+    const tmpData = {};
+    Object.keys(formData).forEach((key) => {
+      if(record.hasOwnProperty(key)){
+        tmpData[key] = record[key]
+      }
+    })
+    //赋值
+    Object.assign(formData, tmpData);
+  });
+}
+
+/**
+ * 提交数据
+ */
+async function submitForm() {
+  try {
+    // 触发表单验证
+    await validate();
+  } catch ({ errorFields }) {
+    if (errorFields) {
+      const firstField = errorFields[0];
+      if (firstField) {
+        formRef.value.scrollToField(firstField.name, { behavior: 'smooth', block: 'center' });
+      }
+    }
+    return Promise.reject(errorFields);
+  }
+  confirmLoading.value = true;
+  const isUpdate = ref<boolean>(false);
+  //时间格式化
+  let model = formData;
+  if (model.id) {
+    isUpdate.value = true;
+  }
+  //循环数据
+  for (let data in model) {
+    //如果该数据是数组并且是字符串类型
+    if (model[data] instanceof Array) {
+      let valueType = getValueType(formRef.value.getProps, data);
+      //如果是字符串类型的需要变成以逗号分割的字符串
+      if (valueType === 'string') {
+        model[data] = model[data].join(',');
+      }
+    }
+  }
+  await saveOrUpdateConfig(model, isUpdate.value)
+    .then((res) => {
+      if (res.success) {
+        createMessage.success(res.message);
+        emit('ok');
+      } else {
+        createMessage.warning(res.message);
+      }
+    })
+    .finally(() => {
+      confirmLoading.value = false;
+    });
+}
+
+defineExpose({
+  add,
+  edit,
+  submitForm,
+});
+</script>
+
+<style lang="less" scoped>
+</style>

src/views/iot/yiweilian/humid/components/ConfigModal.vue

@@ -0,0 +1,82 @@
+<template>
+  <a-drawer :title="title" :width="width" :visible="visible" :closable="true"
+    :footer-style="{ textAlign: 'right' }" :bodyStyle="{ padding: '14px' }" @close="handleCancel">
+    <ConfigInfoForm ref="formRef" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false">
+    </ConfigInfoForm>
+    <template #footer>
+      <a-button type="primary" style="margin-right: 8px" @click="handleCancel">关闭</a-button>
+      <a-button type="primary" @click="handleOk" v-if="!disableSubmit">确认</a-button>
+    </template>
+  </a-drawer>
+</template>
+
+<script lang="ts" setup>
+import { ref, nextTick, defineExpose } from 'vue';
+import ConfigInfoForm from './ConfigInfoForm.vue'
+import JModal from '/@/components/Modal/src/JModal/JModal.vue';
+import {getConfig} from '../humid.api';
+
+const title = ref<string>('');
+const width = ref<string>('80%');
+const visible = ref<boolean>(false);
+const disableSubmit = ref<boolean>(false);
+const formRef = ref();
+const emit = defineEmits(['register', 'success']);
+
+
+/**
+ * 日志
+ * @param record
+ */
+async function edit() {
+  await getConfig({}).then((res) => {
+    visible.value = true;
+    if(res!=null){
+      title.value = '编辑配置';
+      nextTick(() => {
+        formRef.value.edit(res);
+      });
+    }else{
+      title.value = '新增配置';
+      nextTick(() => {
+        formRef.value.add();
+      });
+    }
+  })
+}
+
+/**
+ * 确定按钮点击事件
+ */
+function handleOk() {
+  formRef.value.submitForm();
+}
+
+/**
+ * form保存回调事件
+ */
+function submitCallback(params) {
+  handleCancel();
+  emit('success', params);
+}
+
+/**
+ * 取消按钮回调事件
+ */
+function handleCancel() {
+  visible.value = false;
+}
+
+defineExpose({
+  edit,
+  disableSubmit,
+});
+</script>
+
+<style lang="less">
+/**隐藏样式-modal确定按钮 */
+.jee-hidden {
+  display: none !important;
+}
+</style>
+<style lang="less" scoped></style>

src/views/iot/yiweilian/humid/humid.api.ts

@@ -9,6 +9,11 @@ enum Api {
   updateDeviceRealTime = '/iot/yiweilian/humidDevice/updateDeviceRealTime',
   logList = '/iot/yiweilian/humidDevice/logList',
   alarmList = '/iot/yiweilian/humidAlarm/list',
+
+  getConfig = '/iot/yiweilian/config/getConfig',
+  addConfig = '/iot/yiweilian/config/add',
+  editConfig = '/iot/yiweilian/config/edit',
+
 }
 
 /**
@@ -58,3 +63,19 @@ export const logList = (params?) => defHttp.get({ url: Api.logList, params });
  * @param params
  */
 export const alarmList = (params?) => defHttp.get({ url: Api.alarmList, params });
+
+/**
+ * 获取配置数据
+ * @param params
+ */
+export const getConfig = (params) => defHttp.get({ url: Api.getConfig, params });
+
+/**
+ * 保存或者更新配置
+ * @param params
+ * @param isUpdate
+ */
+export const saveOrUpdateConfig = (params, isUpdate) => {
+  let url = isUpdate ? Api.editConfig : Api.addConfig;
+  return defHttp.post({ url: url, params }, { isTransformResponse: false });
+};

src/views/iot/yiweilian/humid/index.vue

@@ -5,6 +5,7 @@
       <!--插槽:table标题-->
       <template #tableTitle>
         <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleInsert"> 添加设备</a-button>
+        <a-button type="primary" preIcon="ant-design:setting-outlined" @click="handleConfig"> 配置管理</a-button>
       </template>
       <template #bodyCell="{ column, record, index, text }">
         <template v-if="column.dataIndex === 'nuName'">
@@ -35,8 +36,9 @@
     </BasicTable>
     <DeviceInfoDrawer @register="registerDrawer" @success="handleSuccess" />
     <ApiLogAlarmModal ref="apiLogAlarmModal"></ApiLogAlarmModal>
-    <HldyUtilsModal ref="hldyUtilsModal" @success="handleHldyParams" ></HldyUtilsModal>
+    <ConfigModal ref="configModal"></ConfigModal>
-    <DeviceSyncLogListModal ref="syncLogModal"></DeviceSyncLogListModal>
+<!--    <HldyUtilsModal ref="hldyUtilsModal" @success="handleHldyParams" ></HldyUtilsModal>-->
+<!--    <DeviceSyncLogListModal ref="syncLogModal"></DeviceSyncLogListModal>-->
   </div>
 </template>
 
@@ -51,13 +53,15 @@
   import {useModal} from "@/components/Modal";
   import {useDrawer} from "@/components/Drawer";
   import ApiLogAlarmModal from './components/ApiLogAlarmModal.vue'
-  import HldyUtilsModal from "@/views/utils/nuUtils/HldyUtilsModal.vue";
+  import ConfigModal from './components/ConfigModal.vue'
-  import DeviceSyncLogListModal from "/@/views/iot/SyncLog/DeviceSyncLogListModal.vue";
+  // import HldyUtilsModal from "@/views/utils/nuUtils/HldyUtilsModal.vue";
+  // import DeviceSyncLogListModal from "/@/views/iot/SyncLog/DeviceSyncLogListModal.vue";
   import DeviceInfoDrawer from "./components/DeviceInfoDrawer.vue";
   import { defHttp } from '/@/utils/http/axios';
   const apiLogAlarmModal = ref();
-  const hldyUtilsModal = ref();
+  // const hldyUtilsModal = ref();
-  const syncLogModal = ref();
+  // const syncLogModal = ref();
+  const configModal = ref();
   //注册drawer
   const [registerDrawer, { openDrawer }] = useDrawer();
   const queryParam = reactive<any>({});
@@ -205,13 +209,19 @@
   /**
    * 配置区域
    */
-  function handlePzhldy(record){
+  // function handlePzhldy(record){
-    hldyUtilsModal.value.disableSubmit = true;
+  //   hldyUtilsModal.value.disableSubmit = true;
-    hldyUtilsModal.value.edit(record);
+  //   hldyUtilsModal.value.edit(record);
-  }
+  // }
   //同步
-  function handleSync(record: Recordable){
+  // function handleSync(record: Recordable){
-    syncLogModal.value.disableSubmit = true;
+  //   syncLogModal.value.disableSubmit = true;
-    syncLogModal.value.init(record);
+  //   syncLogModal.value.init(record);
+  // }
+
+  function handleConfig(){
+    configModal.value.disableSubmit = false;
+    configModal.value.edit();
   }
+
 </script>