add:照明系统 抽屉功能tab2分页功能完善

hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs2.vue

@@ -40,8 +40,8 @@
           </button>
         </td>
         <td>
-          <button class="tabReboot" @click="handleRefClick1">重启</button>
-          <button class="tabDelete">删除</button>
+          <div class="tabReboot" @click="restartPlan(row.id)">重启</div>
+          <div class="tabDelete" @click="deletePlan(row.id)">删除</div>
         </td>
       </tr>
     </tbody>
@@ -54,7 +54,7 @@
     <div style="margin-top: 20px">
       <a-transfer
         v-model:target-keys="targetKeys"
-        :data-source="mockData"
+        :data-source="transferData"
         show-search
         :filter-option="filterOption"
         :render="(item) => item.title"
@@ -66,7 +66,7 @@
     <div style="width: 100%; height: 60px;"></div>
     <div class="button-box">
       <button class="cancel" @click="addVisible = false">取消</button>
-      <button class="execute">确定</button>
+      <button class="execute" @click="sendPlan">确定</button>
     </div>
   </div>
 </template>
@@ -76,11 +76,14 @@ import { ref, onMounted } from 'vue';
 // 请求
 import { http } from '/nerv-lib/util/http';
 import { lightingManage } from '/@/api/IlluminationInfo';
+import { message } from 'ant-design-vue';
 
 // 初始化 ===========================================================
 
 onMounted(() => {
+  // 计划表格
   getTable()
+  // 穿梭框原始数据
   getLeftPlan()
 })
 
@@ -94,6 +97,20 @@ const getTable = () => {
     dataSource.value = res.data
   })
 }
+// 删除表格中的计划
+const deletePlan = (id: String) => {
+  http.delete(lightingManage.deletePlan, [id]).then(res => {
+    message.success('操作成功')
+    getTable()
+  })
+}
+// 重启表格中的计划
+const restartPlan = (id: String) => {
+  http.post(lightingManage.restartPlan, { planId: id }).then(res => {
+    message.success('操作成功')
+    getTable()
+  })
+}
 
 // tab页弹窗部分 ====================================================
 
@@ -107,49 +124,43 @@ const addModal = () => {
 // 穿梭框部分 =======================================================
 
 // 穿梭框数据
-const transferData = ref([])
+const transferData = ref([]) as any;
 // 获得穿梭框原始数据
 const getLeftPlan = () => {
   http.get(lightingManage.getLeftPlan, {}).then(res => {
-    console.log(res)
+    let arr = []
+    res.data.forEach(item => {
+      arr.push({
+        key: item.id,
+        title: item.planName
+      })
+    })
+    transferData.value = arr
   })
 }
 
-// 操作日志
-const handleRefClick1 = () => {
-  alert(111)
-};
-
 const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {
   console.log(keys, direction, moveKeys);
 };
 const handleSearch = (dir: string, value: string) => {
   console.log('search:', dir, value);
 };
-
-// 穿梭框 相关业务
-interface MockData {
-  key: string;
-  title: string;
-  description: string;
-  chosen: boolean;
-}
-const mockData = ref([
-  {
-    key: '1',
-    title: '计划再开',
-  },
-  {
-    key: '2',
-    title: '检修模式',
-  },
-  {
-    key: '3',
-    title: '设备变更',
-  },
-]);
+// 穿梭框选中数据
 const targetKeys = ref<string[]>([]);
-const filterOption = (inputValue: string, option: MockData) => {
+// 将穿梭框选中的计划提交
+const sendPlan = () => {
+  if (targetKeys.value.length < 1) {
+    return message.info('没有选择任何计划');
+  }
+  http.post(lightingManage.submitLeftPlan, targetKeys.value).then(res => {
+    message.success('添加成功')
+    // 如果发送成功，则刷新表格
+    getTable()
+    getLeftPlan()
+  })
+}
+
+const filterOption = (inputValue: string, option: any) => {
   return option.description.indexOf(inputValue) > -1;
 };
 
@@ -178,6 +189,7 @@ const filterOption = (inputValue: string, option: MockData) => {
     font-size: 14px;
     font-weight: 400;
     color: rgba(255, 255, 255, 1);
+    cursor: pointer;
   }
 }
 // 表格
@@ -204,6 +216,7 @@ const filterOption = (inputValue: string, option: MockData) => {
   .tabReboot,
   .tabDelete {
     border: none;
+    display: inline-block;
     background-color: rgba(0, 0, 0, 0);
     font-size: 14px;
     font-weight: 400;
@@ -215,6 +228,12 @@ const filterOption = (inputValue: string, option: MockData) => {
   .tabReboot {
     margin-right: 8px;
   }
+  .tabReboot::active {
+    color: white !important;
+  }
+  .tabDelete::active {
+    color: white;
+  }
 }
 ::v-deep(.ant-transfer) {
   // 屏蔽自带的hover效果