修改停用按钮逻辑

src/views/biz/nuBaseInfo/QyxxList.vue

@@ -107,14 +107,16 @@
     <NuBaseInfoAddModal ref="registerAddModal" @success="handleSuccess"></NuBaseInfoAddModal>
     <BaseWlsbListModal ref="wlsbModal" ></BaseWlsbListModal>
     <CameraPreviewModal ref="previewModal"></CameraPreviewModal>
+    <!-- 设备预览 -->
     <IotDevicesModall ref="iotDevicesModal"></IotDevicesModall>
     <!--角色菜单授权抽屉-->
     <RolePermissionDrawer @register="rolePermissionDrawer" />
-    
     <!-- 表单区域 -->
     <CkfzrModal ref="registerCkfzrModal" @success="handleSuccess" />
     <!-- 出入库详情 -->
     <BlWarehouseMaterialInfoListModal ref="registerCrkModal" @success="handleSuccess" />
+    <!-- 停用时停用设备 -->
+    <IotDevicesTyModall ref="iotDevicesTyModal" @success="handleTingyong"></IotDevicesTyModall>
   </div>
 </template>
 
@@ -126,6 +128,7 @@
   import BaseWlsbListModal from './components/BaseWlsbListModal.vue'
   import CameraPreviewModal from '/@/views/iot/tplink/camera/components/CameraPreviewModal.vue'
   import IotDevicesModall from '/@/views/biz/nuBaseInfo/iotDevices/IotDevicesModal.vue'
+  import IotDevicesTyModall from '/@/views/biz/nuBaseInfo/iotDevices/IotDevicesTyModal.vue'
   import { useUserStore } from '/@/store/modules/user';
   import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
   import { useMessage } from '/@/hooks/web/useMessage';
@@ -144,8 +147,8 @@ const logoUrl = 'https://www.focusnu.com/devops/resource/img/logo.png'; // 替
 const { createMessage } = useMessage();
 
   const formRef = ref();
-  const previewModal = ref();
   const iotDevicesModal = ref();
+  const iotDevicesTyModal = ref();
   const wlsbModal = ref();
   const registerCkfzrModal = ref();
   const registerCrkModal = ref();
@@ -194,7 +197,9 @@ function handleChangeValidateStatus(record,checked) {
     if (checked) {
       handleQiyong(record);
     } else {
-      handleTingyong(record);
+      iotDevicesTyModal.value.disableSubmit = false;
+      iotDevicesTyModal.value.init(record);
+      // handleTingyong(record);
     }
   }
   
@@ -251,6 +256,7 @@ function handleChangeValidateStatus(record,checked) {
     * 停用
     */
   async function handleTingyong(record) {
+    console.log("🚀 ~ handleTingyong ~ record:", record)
     record.status = 5;
     await hldyQyty(record, true).then((res) => {
       if (res.success) {
@@ -261,13 +267,6 @@ function handleChangeValidateStatus(record,checked) {
       reload();
     });
   }
-  /**
-   * 预览
-   */
-  function handlePreview(record: Recordable) {
-    previewModal.value.disableSubmit = true;
-    previewModal.value.edit(record);
-  }
 
   /**
    * 查询
@@ -295,7 +294,6 @@ function handleChangeValidateStatus(record,checked) {
 
   function reload() {
     defHttp.get({url: '/nuBaseInfo/nuBaseInfo/qyList',params:queryParam}).then(res => {
-      console.log("🌊 ~ reload ~ res1111111:", res)
       tableData.value = res.records;
     });
   }

src/views/biz/nuBaseInfo/iotDevices/IotDevices.data.ts

@@ -41,7 +41,33 @@ export const columns: BasicColumn[] = [
     dataIndex: 'deviceStatus_dictText'
   },
 ];
-
+export const columnsTy: BasicColumn[] = [
+  {
+    title: '设备标识',
+    align: "center",
+    dataIndex: 'deviceIndex'
+  },
+  {
+    title: '设备型号',
+    align: "center",
+    dataIndex: 'deviceModel'
+  },
+  {
+    title: '设备维度',
+    align: "center",
+    dataIndex: 'dimension'
+  },
+  {
+    title: '设备类型',
+    align: "center",
+    dataIndex: 'deviceType_dictText'
+  },
+  {
+    title: '在线状态',
+    align: "center",
+    dataIndex: 'deviceStatus_dictText'
+  },
+];
 // 高级查询数据
 export const superQuerySchema = {
   deviceType: {title: '设备类型',order: 0,view: 'text', type: 'string',},

src/views/biz/nuBaseInfo/iotDevices/IotDevicesList.vue

@@ -83,6 +83,7 @@ import CameraPreviewModal from '/@/views/iot/tplink/camera/components/CameraPrev
       canResize:false,
       useSearchForm: false,
       showIndexColumn: true,
+      immediate: false,
       actionColumn: {
         width: 120,
         fixed: 'right',
@@ -213,6 +214,7 @@ function handlePreview(record: Recordable) {
   
   function init() {
     //初始化
+    reload();
   }
 
   defineExpose({

src/views/biz/nuBaseInfo/iotDevices/IotDevicesTyList.vue

@@ -0,0 +1,211 @@
+<template>
+  <div class="p-2">
+    <!--查询区域-->
+    <div class="jeecg-basic-table-form-container">
+      <a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
+        <a-row :gutter="24">
+          <a-col :lg="6">
+            <a-form-item name="nuId">
+              <template #label><span title="区域编码">区域编码</span></template>
+              <a-input placeholder="请输入区域编码" v-model:value="queryParam.nuId" disabled></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6">
+            <a-form-item name="nuName">
+              <template #label><span title="区域名称">区域名称</span></template>
+              <a-input placeholder="请输入区域名称" v-model:value="queryParam.nuName" disabled></a-input>
+            </a-form-item>
+          </a-col>
+          <!-- <a-col :lg="6">
+            <a-form-item name="dimension">
+              <template #label><span title="设备维度">设备维度</span></template>
+              <j-dict-select-tag v-model:value="queryParam.dimension" :showLabel="false" dictCode="dimension" placeholder="请选择设备纬度"  />
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6">
+            <a-form-item name="deviceType">
+              <template #label><span title="设备类型">设备类型</span></template>
+              <j-dict-select-tag v-model:value="queryParam.deviceType" :showLabel="false" dictCode="tplink_device_type" placeholder="请选择设备类型"  />
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6">
+            <a-form-item name="deviceStatus">
+              <template #label><span title="在线状态">在线状态</span></template>
+              <j-dict-select-tag v-model:value="queryParam.deviceStatus" :showLabel="false" dictCode="tplink_status" placeholder="请选择在线状态"  />
+            </a-form-item>
+          </a-col> -->
+          <!-- <a-col  :lg="9" :md="9" :sm="24">
+          <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
+              <a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
+              <a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button>
+          </span>
+          </a-col> -->
+        </a-row>
+      </a-form>
+    </div>
+    <!--引用表格-->
+    <BasicTable @register="registerTable">
+      <!--插槽:table标题-->
+      <template #tableTitle>
+      </template>
+      <!--操作栏-->
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" />
+      </template>
+      <template v-slot:bodyCell="{ column, record, index, text }">
+      </template>
+    </BasicTable>
+
+    <div style="margin-top: 10px;padding: 14px;background-color: white;">
+      <span style="font-size: 16px;color:red;font-weight: 700;">提示：您停用区域【{{queryParam.nuName}}】，将释放所有设备，请慎重操作！</span>
+    </div>
+    <!-- 表单区域 -->
+    <IotDevicesModal ref="registerModal" @success="handleSuccess"></IotDevicesModal>
+    
+    <CameraPreviewModal ref="previewModal"></CameraPreviewModal>
+  </div>
+</template>
+
+<script lang="ts" name="iotDevices-iotDevices" setup>
+  import { ref, reactive } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { columnsTy, superQuerySchema } from './IotDevices.data';
+  import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from './IotDevices.api';
+  import { downloadFile } from '/@/utils/common/renderUtils';
+  import IotDevicesModal from './components/IotDevicesModal.vue'
+  import { useUserStore } from '/@/store/modules/user';
+  import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
+import CameraPreviewModal from '/@/views/iot/tplink/camera/components/CameraPreviewModal.vue'
+const emit = defineEmits(['register', 'ok']);
+
+  const formRef = ref();
+  const queryParam = reactive<any>({});
+  const nuInfo = ref<any>({});
+  const toggleSearchStatus = ref<boolean>(false);
+  const registerModal = ref();
+  const previewModal = ref();
+  const userStore = useUserStore();
+  //注册table数据
+  const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
+    tableProps: {
+      title: '物联设备预览',
+      api: list,
+      columns:columnsTy,
+      canResize:false,
+      useSearchForm: false,
+      showIndexColumn: true,
+      immediate:false,
+      showActionColumn: false,
+      actionColumn: {
+        width: 120,
+        fixed: 'right',
+      },
+      beforeFetch: async (params) => {
+        return Object.assign(params, queryParam);
+      },
+    },
+    exportConfig: {
+      name: "物联设备预览",
+      url: getExportUrl,
+      params: queryParam,
+    },
+	  importConfig: {
+	    url: getImportUrl,
+	    success: handleSuccess
+	  },
+  });
+  const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;
+  const labelCol = reactive({
+    xs:24,
+    sm:8,
+    xl:8,
+    xxl:8
+  });
+  const wrapperCol = reactive({
+    xs: 24,
+    sm: 16,
+  });
+   
+  /**
+   * 成功回调
+   */
+  function handleSuccess() {
+    (selectedRowKeys.value = []) && reload();
+  }
+   
+/**
+ * 摄像头预览
+ */
+function handlePreview(record: Recordable) {
+  previewModal.value.disableSubmit = true;
+  previewModal.value.edit(record);
+}
+  /**
+   * 操作栏
+   */
+  function getTableAction(record) {
+    return [
+      {
+        label: '预览',
+        onClick: handlePreview.bind(null, record),
+        ifShow: () => {
+          return record.deviceType == 'SURVEILLANCECAMERA';
+        },
+      },
+    ];
+  }
+   
+
+  /**
+   * 查询
+   */
+  function searchQuery() {
+    reload();
+  }
+  
+  function init(record) {
+    console.log("🚀 ~ init ~ record:", record)
+    nuInfo.value = record;
+    queryParam.nuId = record.nuId;
+    queryParam.nuName = record.nuName;
+    reload();
+  }
+
+  function tyFun() {
+    emit('ok', nuInfo.value);
+  }
+
+  defineExpose({
+    init,
+    tyFun
+  });
+
+
+</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%;
+    }
+  }
+</style>

src/views/biz/nuBaseInfo/iotDevices/IotDevicesTyModal.vue

@@ -0,0 +1,69 @@
+<template>
+  <a-drawer :title="title" :width="width"  v-model:visible="visible" :closable="true" bodyStyle="padding:14px;"
+    :footer-style="{ textAlign: 'right' }" @close="handleCancel">
+  <IotDevicesList ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></IotDevicesList>
+    <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 IotDevicesList from './IotDevicesTyList.vue'
+  import JModal from '/@/components/Modal/src/JModal/JModal.vue';
+  
+  const title = ref<string>('');
+  const width = ref<number>(1200);
+  const visible = ref<boolean>(false);
+  const disableSubmit = ref<boolean>(false);
+  const registerForm = ref();
+  const emit = defineEmits(['register', 'success']);
+  
+  /**
+   * 编辑
+   * @param record
+   */
+  function init(record) {
+    title.value = '区域停用';
+    visible.value = true;
+    nextTick(() => {
+      registerForm.value.init(record);
+    });
+  }
+
+  /**
+   * 确定按钮点击事件
+   */
+   function handleOk() {
+    registerForm.value.tyFun();
+  }
+  /**
+   * form保存回调事件
+   */
+  function submitCallback(record) {
+    handleCancel();
+    emit('success',record);
+  }
+
+  /**
+   * 取消按钮回调事件
+   */
+  function handleCancel() {
+    visible.value = false;
+  }
+
+  defineExpose({
+    init,
+    disableSubmit,
+  });
+</script>
+
+<style lang="less">
+  /**隐藏样式-modal确定按钮 */
+  .jee-hidden {
+    display: none !important;
+  }
+</style>
+<style lang="less" scoped></style>