水表页面优化

src/views/iot/tq/water/components/ConfigDrawer.vue

@@ -0,0 +1,91 @@
+<template>
+  <BasicDrawer
+    v-bind="$attrs"
+    @register="registerDrawer"
+    :title="getTitle"
+    :width="adaptiveWidth"
+    @ok="handleSubmit"
+    :showFooter="showFooter"
+    destroyOnClose
+  >
+    <BasicForm @register="registerForm" >
+    </BasicForm>
+  </BasicDrawer>
+</template>
+
+<script lang="ts" setup>
+import {defineComponent, ref, computed, unref, useAttrs, createVNode, h} from 'vue';
+import { BasicForm, useForm } from '/@/components/Form/index';
+import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+import { useDrawerAdaptiveWidth } from '/@/hooks/jeecg/useAdaptiveWidth';
+import {Modal} from "ant-design-vue";
+import {ExclamationCircleOutlined} from "@ant-design/icons-vue";
+import { configFormSchema } from "../water.data";
+import { addConfig,editConfig } from '../water.api';
+
+// 声明Emits
+const emit = defineEmits(['success', 'register']);
+const attrs = useAttrs();
+const isUpdate = ref(true);
+const rowId = ref('');
+const departOptions = ref([]);
+let isFormDepartUser = false;
+//表单配置
+const [registerForm, { setProps, resetFields, setFieldsValue, validate, updateSchema }] = useForm({
+  labelWidth: 90,
+  schemas: configFormSchema,
+  showActionButtonGroup: false,
+});
+const showFooter = ref(true);
+//表单赋值
+const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+  await resetFields();
+  showFooter.value = data?.showFooter ?? true;
+  setDrawerProps({ confirmLoading: false, showFooter: showFooter.value });
+  isUpdate.value = !!data?.isUpdate;
+  // 无论新增还是编辑，都可以设置表单值
+  if (typeof data.record === 'object') {
+    setFieldsValue({
+      ...data.record,
+    });
+  }
+  // 隐藏底部时禁用整个表单
+  setProps({ disabled: !showFooter.value });
+});
+//获取标题
+const getTitle = computed(() => {
+  if (!unref(isUpdate)) {
+    return '新增配置';
+  } else {
+    return unref(showFooter) ? '编辑配置' : '配置详情';
+  }
+});
+const adaptiveWidth  = 800;
+
+/**
+ * 提交事件
+ */
+async function handleSubmit() {
+  try {
+    let values = await validate();
+    setDrawerProps({ confirmLoading: true });
+    let params = values;
+    if (!unref(isUpdate)) {
+      await addConfig(params);
+    }else {
+      await editConfig(params);
+    }
+    //关闭弹窗
+    closeDrawer();
+    //刷新列表
+    emit('success');
+  } finally {
+    setDrawerProps({ confirmLoading: false });
+  }
+}
+
+</script>
+
+<style scoped>
+
+</style>

src/views/iot/tq/water/components/ConfigInfoList.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="p-2">
+    <!--引用表格-->
+    <BasicTable @register="registerTable" style="padding: 0 !important;">
+      <!--插槽:table标题-->
+      <template #tableTitle>
+        <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleAdd"> 新增</a-button>
+      </template>
+      <!--操作栏-->
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)"/>
+      </template>
+      <template v-slot:bodyCell="{ column, record, index, text }">
+      </template>
+    </BasicTable>
+  </div>
+  <!-- 表单区域 -->
+  <ConfigDrawer @register="registerDrawer" @success="handleSuccess" />
+</template>
+
+<script lang="ts" name="iot-nuIotCameraInfo" setup>
+import {ref, reactive, createVNode, h, onMounted, watch, unref, defineExpose} from 'vue';
+import { BasicTable, useTable, TableAction } from '/@/components/Table';
+import { useListPage } from '/@/hooks/system/useListPage';
+import { configColumns } from '../water.data';
+import { configList } from '../water.api';
+import { useUserStore } from '/@/store/modules/user';
+import { useDrawer } from "@/components/Drawer";
+import { useRouter } from 'vue-router';
+import ConfigDrawer from './ConfigDrawer.vue';
+
+//注册drawer
+const [registerDrawer, { openDrawer }] = useDrawer();
+let router = useRouter();
+const formRef = ref();
+const serverType = ref('电水表');
+const queryParam = reactive<any>({});
+const userStore = useUserStore();
+//注册table数据
+const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
+  tableProps: {
+    title: '配置信息',
+    api: configList,
+    columns: configColumns,
+    canResize: false,
+    showIndexColumn: true,
+    actionColumn: {
+      width: 100,
+      fixed: 'right',
+    },
+    beforeFetch: async (params) => {
+      params.column = 'id'
+      params.order = 'asc'
+      return Object.assign(params, queryParam);
+    },
+  },
+});
+const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;
+const labelCol = reactive({
+  xs:24,
+  sm:4,
+  xl:6,
+  xxl:4
+});
+const wrapperCol = reactive({
+  xs: 24,
+  sm: 20,
+});
+
+/**
+ * 新增
+ */
+function handleAdd(record: Recordable) {
+  openDrawer(true, {
+    record,
+    isUpdate: false,
+    showFooter: true,
+    tenantSaas: false,
+  });
+}
+
+/**
+ * 编辑
+ */
+function handleEdit(record: Recordable) {
+  openDrawer(true, {
+    record,
+    isUpdate: true,
+    showFooter: true,
+    tenantSaas: false,
+  });
+}
+
+/**
+ * 成功回调
+ */
+function handleSuccess() {
+  reload();
+}
+
+/**
+ * 操作栏
+ */
+function getTableAction(record) {
+  return [
+    {
+      label: '编辑',
+      onClick: handleEdit.bind(null, record),
+    },
+  ];
+}
+
+function show() {
+  reload();
+}
+
+defineExpose({
+  show,
+});
+
+</script>
+
+<style lang="less" scoped>
+
+.jeecg-basic-table-form-container {
+  padding: 0;
+  .table-page-search-submitButtons {
+    display: block;
+    margin-bottom: 24px;
+    white-space: nowrap;
+  }
+  .query-group-cust{
+    min-width: 100px !important;
+  }
+  .query-group-split-cust{
+    width: 30px;
+    display: inline-block;
+    text-align: center
+  }
+  .ant-form-item:not(.ant-form-item-with-help){
+    margin-bottom: 16px;
+    height: 32px;
+  }
+  :deep(.ant-picker),:deep(.ant-input-number){
+    width: 100%;
+  }
+}
+
+.p-2{
+  height: calc(100vh - 120px);
+}
+
+.tabs-container {
+  width: 100%;
+  background-color: white;
+  padding: 14px;
+  border-radius: 8px !important;
+}
+
+
+</style>

src/views/iot/tq/water/components/ConfigModal.vue

@@ -0,0 +1,71 @@
+<template>
+  <a-drawer :title="title" :width="width" :visible="visible" :closable="true"
+    :footer-style="{ textAlign: 'right' }" :bodyStyle="{ padding: '14px' }" @close="handleCancel">
+    <ConfigInfoList ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false">
+    </ConfigInfoList>
+    <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 ConfigInfoList from './ConfigInfoList.vue'
+import JModal from '/@/components/Modal/src/JModal/JModal.vue';
+
+const title = ref<string>('');
+const width = ref<string>('80%');
+const visible = ref<boolean>(false);
+const disableSubmit = ref<boolean>(false);
+const registerForm = ref();
+const emit = defineEmits(['register', 'success']);
+
+/**
+ * 日志
+ * @param record
+ */
+async function edit() {
+  visible.value = true;
+  title.value = '配置管理';
+  nextTick(() => {
+    registerForm.value.show();
+  });
+}
+
+/**
+ * 确定按钮点击事件
+ */
+function handleOk() {
+  registerForm.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/tq/water/index.vue

@@ -1,4 +1,5 @@
 <template>
+  <a-spin :spinning="confirmLoading">
   <div>
     <!--引用表格-->
     <BasicTable @register="registerTable">
@@ -73,6 +74,7 @@
       </template>
     </a-modal>
   </div>
+  </a-spin>
 </template>
 
 <script lang="ts" name="iot-nuIotRegionInfo" setup>
@@ -88,12 +90,15 @@
   import HldyUtilsModal from "@/views/utils/nuUtils/HldyUtilsModal.vue";
   import ApiLogModal from "@/views/iot/tq/electricity/apilog/WaterApiLogModal.vue";
   import SyncLogListModal from "/@/views/iot/SyncLog/WaterSyncLogListModal.vue";
+  import {syncDevicesStatus} from "@/views/iot/yiweilian/humid/humid.api";
+  import ConfigModal from './components/ConfigModal.vue'
 
   const queryParam = reactive<any>({});
   const apiLogModal = ref();
   const syncLogModal = ref();
   const hldyUtilsModal = ref();
   const configModal = ref();
+  const confirmLoading = ref<boolean>(false);
   const tipVisible = ref(false);
   const tipTitle = ref('提示');
   const tipContent = ref('');
@@ -106,7 +111,7 @@
       api: list,
       columns,
       canResize:false,
-      showIndexColumn: true,
+      // showIndexColumn: true,
       formConfig: {
         //labelWidth: 120,
         schemas: searchFormSchema,
@@ -247,15 +252,20 @@
 
   // 获取设备信息
   async function handleSyncDevice() {
-    await getAllMeter({});
+    confirmLoading.value = true;
+    await getAllMeter({}).then((res) => {
+      confirmLoading.value = false;
       reload();
-
+    });
   }
 
   // 采集器信息
   async function handleSyncCollector() {
-    await getAllCollector({});
+    confirmLoading.value = true;
+    await getAllCollector({}).then((res) => {
+      confirmLoading.value = false;
       reload();
+    });
   }
 
   /**
@@ -290,7 +300,7 @@
   }
 
   function handleConfig(){
-    configModal.value.disableSubmit = false;
+    configModal.value.disableSubmit = true;
     configModal.value.edit();
   }
 

src/views/iot/tq/water/water.api.ts

@@ -7,6 +7,10 @@ enum Api {
   waterRead = '/iot/tq/waterMeter/waterRead',
   getAllMeter = '/iot/tq/common/device/getAllMeter',
   getAllCollector = '/iot/tq/common/device/getAllCollector',
+
+  configList = '/iot/tq/config/list',
+  addConfig = '/iot/tq/config/add',
+  editConfig = '/iot/tq/config/edit',
 }
 
 /**
@@ -44,3 +48,23 @@ export const getAllMeter = (params?) => defHttp.get({ url: Api.getAllMeter, para
  * @param params
  */
 export const getAllCollector = (params?) => defHttp.get({ url: Api.getAllCollector, params });
+
+/**
+ * 列表接口
+ * @param params
+ */
+export const configList = (params) => defHttp.get({ url: Api.configList, params });
+/**
+ * 更新
+ * @param params
+ */
+export const addConfig = (params) => {
+  return defHttp.post({ url: Api.addConfig, params });
+}
+/**
+ * 更新
+ * @param params
+ */
+export const editConfig = (params) => {
+  return defHttp.post({ url: Api.editConfig, params });
+}

src/views/iot/tq/water/water.data.ts

@@ -201,3 +201,113 @@ export const searchFormSchema: FormSchema[] = [
     //colProps: { span: 4 },
   }
 ];
+
+
+//列表数据
+export const configColumns: BasicColumn[] = [
+  {
+    title: '平台标识',
+    align: "center",
+    dataIndex: 'sysFlag',
+    width: 80,
+    customRender:({record}) =>{
+      return record.sysFlag?(record.sysFlag=='0'?'运维平台':'业务平台'):'';
+    }
+  },
+  {
+    title: '机构编码',
+    align: "center",
+    dataIndex: 'orgCode',
+    width: 80,
+  },
+  {
+    title: '机构名称',
+    align: "center",
+    dataIndex: 'orgCode_dictText',
+    width: 240,
+  },
+  {
+    title: '厂家云地址',
+    align: "center",
+    dataIndex: 'requestUrl',
+  },
+  {
+    title: '授权码',
+    align: "center",
+    dataIndex: 'authCode',
+    width: 260,
+  },
+  {
+    title: '随机字符串',
+    align: "center",
+    dataIndex: 'randomCode',
+    width: 260,
+  },
+  {
+    title: '通知地址',
+    align: "center",
+    dataIndex: 'notifyUrl'
+  },
+  {
+    title: '更新时间',
+    align: "center",
+    dataIndex: 'updateDate',
+    width: 160,
+  },
+];
+
+export const configFormSchema: FormSchema[] = [
+  {
+    label: '',
+    field: 'id',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '平台标识',
+    field: 'sysFlag',
+    component: 'Select',
+    componentProps: {
+      options: [
+        {label:'运维平台',value:'0'},
+        {label:'业务平台',value:'1'},
+      ]
+    },
+    defaultValue: '1',
+    required: true
+  },
+  {
+    label: '机构',
+    field: 'orgCode',
+    component: 'JSelectDept',
+    componentProps: {
+      rowKey: 'orgCode',
+      labelKey: 'departName',
+      selectType: true,
+    },
+  },
+  {
+    label: '厂家云地址',
+    field: 'requestUrl',
+    component: 'Input',
+    required: true
+  },
+  {
+    label: '授权码',
+    field: 'authCode',
+    component: 'Input',
+    required: true
+  },
+  {
+    label: '随机字符串',
+    field: 'randomCode',
+    component: 'Input',
+    required: true
+  },
+  {
+    label: '通知地址',
+    field: 'notifyUrl',
+    component: 'Input',
+  },
+
+];

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

@@ -78,7 +78,7 @@
       api: list,
       columns,
       canResize:false,
-      showIndexColumn: true,
+      // showIndexColumn: true,
       formConfig: {
         //labelWidth: 120,
         schemas: searchFormSchema,