设备管理-机场-机场编辑功能

src/api/demo/device.ts

@@ -1,6 +1,7 @@
 import { defHttp } from '@/utils/http/axios';
 enum Api {
   GetDataList = '/api/Manage/GetDataList',
+  EditDronePort = '/api/Manage/EditDronePort',
 }
 
 export function GetDataList(params) {
@@ -8,4 +9,10 @@ export function GetDataList(params) {
     url: Api.GetDataList,
     params
   });
+}
+export function EditDronePort(params) {
+  return defHttp.post({
+    url: Api.EditDronePort,
+    data:params
+  });
 }

src/views/demo/workmanagement/device/Airport/DeviceEdit/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <div style="padding: 20px;">
+    <div style="margin-bottom: 8px;">设备名称({{ props.editDeviceDate.typeId }})</div>
+    <a-input v-model:value="props.editDeviceDate.name" style="margin-bottom: 10px;" placeholder="请输入设备名称" />
+    <div v-for="item in props.editDeviceDate.uavList">
+      <div style="margin-bottom: 8px;">设备名称({{ item.typeId }})</div>
+      <a-input v-model:value="item.name" style="margin-bottom: 10px;" placeholder="请输入设备名称" />
+    </div>
+    <div style="margin-bottom: 8px;">所属项目</div>
+    <a-select
+      v-model:value="props.editDeviceDate.workSpaceId"
+      style="width:100%;margin-bottom: 20px;"
+      :options="props.projectList"
+    ></a-select>
+    <div style="display: flex;justify-content: end;">
+      <a-button style="margin-right: 10px;" @click="emits('changeEditDeviceModal',false)">取消</a-button>
+      <a-button type="primary" @click="submit">确定</a-button>
+
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, defineEmits } from "vue"
+import { EditDronePort } from '@/api/demo/device'
+import { message } from "ant-design-vue"
+const props = defineProps(['editDeviceDate', 'projectList'])
+const emits = defineEmits(['changeEditDeviceModal','reload'])
+
+const submit = () => {
+  console.log('123',props.editDeviceDate)
+  let params = {}
+  let useId = ['id','name','typeId','serialNumber','firmwareVersion','bindStatus','updateTime','createTime',
+    'orgId','sn','devicePicUrl','did','isDelete','workSpaceId','uavList']
+  Object.keys(props.editDeviceDate).forEach(id => {
+    if(useId.includes(id)){
+      params[id] = props.editDeviceDate[id]
+    }
+  })
+  EditDronePort(params).then(res => {
+    message.success('编辑成功')
+    emits('reload')
+    emits('changeEditDeviceModal',false)
+  })
+}
+</script>
+
+<style lang="scss" scoped></style>

src/views/demo/workmanagement/device/Airport/index.vue

@@ -19,6 +19,7 @@
       </template>
       <template v-if="column.key === 'action'">
         <TableAction
+        v-if="!record.pId"
           :actions="[
             {
               icon: 'ant-design:file-search-outlined',
@@ -32,6 +33,18 @@
                 openDeviceControl(record)
               },
             },
+            {
+              icon: 'jam:write',
+              onClick: () => {
+                editDevice(record)
+              },
+            },
+            {
+              icon: 'material-symbols:delete-outline',
+              onClick: () => {
+                openDeviceControl(record)
+              },
+            },
           ]"
         />
       </template>
@@ -46,6 +59,9 @@
   <a-modal v-model:open="deviceBindingModal" title="设备绑定码" @ok="handleOk">
     <DeviceBindModal />
   </a-modal>
+  <a-modal v-model:open="editDeviceModal" title="机场编辑" :footer="null">
+    <DeviceEdit :editDeviceDate="editDeviceDate" :projectList="projectList" @changeEditDeviceModal="changeEditDeviceModal" @reload="reload"/>
+  </a-modal>
 </template>
 
 <script setup lang="ts">
@@ -55,10 +71,12 @@ import { columns, searchFormSchema, servicesReplyMessage } from './utils'
 import FeedbackDrawer from './FeedbackDrawer/index.vue'
 import DeviceBindModal from './DeviceBindModal/index.vue'
 import DeviceControl from './DeviceControl/index.vue'
+import DeviceEdit from './DeviceEdit/index.vue'
 import { GetDataList } from '@/api/demo/device'
 import { getClient, clientSubscribe } from '@/utils/mqtt'
 import dayjs from "dayjs";
 import { message } from "ant-design-vue";
+import { cloneDeep } from 'lodash-es';
 
 const props = defineProps(['projectList','connected'])
 watch(() => props.projectList, () => {
@@ -105,6 +123,8 @@ const afterFetch = ref(false)
 const deviceControl = ref(false)
 const deviceInfoList = ref({})
 const controlSN = ref()
+const editDeviceModal = ref(false)
+const editDeviceDate = ref({})
 watch(() => [afterFetch.value, props.connected], ([newAfterFetch, newConnected], [oldAfterFetch, oldConnected]) => {
   console.log(newAfterFetch,newConnected)
   console.log(getDataSource())
@@ -147,7 +167,7 @@ const [registerTable, { reload, expandAll, getForm,getDataSource,setTableData }]
     })
   },
   actionColumn: {
-    width: 100,
+    width: 160,
     title: '操作',
     dataIndex: 'action',
   },
@@ -189,6 +209,13 @@ const openDeviceControl = (record) => {
   controlSN.value = record.sn
   deviceControl.value = true
 }
+const editDevice = (record) => {
+  editDeviceDate.value = cloneDeep(record)
+  editDeviceModal.value = true
+}
+const changeEditDeviceModal = (value: boolean) => {
+  editDeviceModal.value = value
+}
 </script>
 
 <style lang="scss" scoped>