feat: 设备删除、设备解绑/绑定客户

src/App.vue

@@ -47,4 +47,7 @@ const fontColor = computed(() => {
 .el-card__footer {
   padding: calc(10px - 2px) 10px !important;
 }
+.is-horizontal {
+  display: none !important;
+}
 </style>

src/api/resources-equipment/index.ts

@@ -55,9 +55,23 @@ export function privateProfile(
   });
 }
 
-export function bindingCustomAPI(devId: number, customId: number) {
+export function bindingCustomAPI(devId?: number, customId?: number) {
   return request({
     url: `/api/equipment/v1/binding-custom/${devId}/${customId}`,
     method: "PUT",
   });
 }
+
+export function deleteDevice(ids: number[]) {
+  return request({
+    url: "/api/equipment/v1/delete-dev",
+    method: "POST",
+    data: ids,
+  });
+}
+export function unbindingCustomAPI(devId?: number) {
+  return request({
+    url: `/api/equipment/v1/unbinding-custom/${devId}`,
+    method: "PUT",
+  });
+}

src/router/index.ts

@@ -160,6 +160,17 @@ export const constantRoutes: RouteRecordRaw[] = [
           title: "新增设备",
         },
       },
+      {
+        path: "/resources/equipment-binding-custom/:devId",
+        name: "BindingCustom",
+        component: () =>
+          import("@/views/resources/equipment/components/BindingCustom.vue"),
+        meta: {
+          hidden: true,
+          keepAlive: true,
+          title: "设备绑定客户",
+        },
+      },
     ],
   },
 ];

src/views/resources/equipment/components/AddEquipment.vue

@@ -583,7 +583,7 @@ const queryCustomer = () => {
       loading.value = false;
     });
 };
-const currentCustomerId = ref<number>(0);
+const currentCustomerId = ref<number|undefined>(0);
 const handleCustomerChange = (val: CustomerVO) => {
   currentCustomerId.value = val.customId;
 };

src/views/resources/equipment/components/BindingCustom.vue

@@ -0,0 +1,149 @@
+<template>
+  <div class="app-container">
+    <div class="search-container">
+      <el-form :model="queryForm" :inline="true">
+        <el-row>
+          <el-col :span="6">
+            <el-form-item label="查询条件">
+              <el-select
+                v-model="queryForm.selectName"
+                placeholder="请选择"
+                style="width: 240px"
+                clearable
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6" v-if="queryForm.selectName != undefined">
+            <el-input
+              v-model="queryForm.selectValue"
+              placeholder="请输入"
+              style="width: 300px"
+            />
+          </el-col>
+          <el-col :span="buttonColSpan">
+            <el-form-item>
+              <el-button type="primary" :icon="Search" @click="queryCustomer"
+                >搜索</el-button
+              >
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+    <el-card shadow="never">
+      <template #header>
+        <div style="display: flex; justify-content: flex-end">
+          <el-button type="primary" :icon="Position" @click="bindingCustom"
+            >绑定</el-button
+          >
+        </div>
+      </template>
+      <div class="any-table">
+        <el-table
+          :data="customData"
+          v-loading="loading"
+          max-height="350"
+          highlight-current-row
+          @current-change="handleCustomerChange"
+        >
+          <el-table-column prop="customType" label="客户类型" align="center" />
+          <el-table-column
+            prop="regionAreaName"
+            label="客户系统管理域"
+            align="center"
+          />
+          <el-table-column
+            prop="customStatus"
+            label="客户状态"
+            align="center"
+          />
+        </el-table>
+        <pagination
+          v-if="customTotal > 0"
+          v-model:total="customTotal"
+          v-model:page="queryForm.pageNum"
+          v-model:limit="queryForm.pageSize"
+          @pagination="queryCustomer"
+        />
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Position, Search } from "@element-plus/icons-vue";
+import { ElTable } from "element-plus";
+import { CustomerVO } from "@/api/customer/types";
+import { customerPage } from "@/api/customer";
+import { bindingCustomAPI } from "@/api/resources-equipment";
+const queryForm = ref<SelectForm>({
+  pageNum: 1,
+  pageSize: 10,
+});
+const route = useRoute();
+let devId: number = parseInt(<string>route.params.devId);
+const loading = ref<boolean>(false);
+const customData = ref<CustomerVO[]>([]);
+const customTotal = ref<number>(0);
+const options = ref<OptionType[]>([{ label: "客户名称", value: "customName" }]);
+const buttonColSpan = computed(() => {
+  return queryForm.value.selectName === undefined ? 18 : 12;
+});
+const queryCustomer = () => {
+  if (
+    queryForm.value.selectName === undefined ||
+    queryForm.value.selectValue === undefined
+  ) {
+    ElMessage({
+      message: "查询条件不能为空",
+      type: "error",
+      duration: 1000,
+    });
+    return;
+  }
+  loading.value = true;
+  customerPage(queryForm.value)
+    .then(({ data }) => {
+      customData.value = data.list;
+      customTotal.value = data.total;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+};
+const currentCustomerId = ref<number | undefined>(0);
+const handleCustomerChange = (val: CustomerVO) => {
+  currentCustomerId.value = val.customId;
+};
+const bindingCustom = () => {
+  if (currentCustomerId.value === 0) {
+    ElMessage({
+      message: "请选择一个客户绑定",
+      duration: 1000,
+      type: "error",
+    });
+    return;
+  }
+  loading.value = true;
+  bindingCustomAPI(devId, currentCustomerId.value)
+    .then(() => {
+      ElMessage({
+        message: "操作成功",
+        duration: 1000,
+        type: "success",
+      });
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+};
+</script>
+
+<style scoped></style>

src/views/resources/equipment/components/EquipmentEdit.vue

@@ -3,6 +3,9 @@
     <el-card shadow="never" v-loading="loading">
       <template #header>
         <div style="display: flex; justify-content: flex-end">
+          <el-button @click="loadEquipmentData" :icon="Refresh" type="primary"
+            >刷新
+          </el-button>
           <el-button
             @click="submitForm(editFormRef)"
             :icon="Position"
@@ -91,9 +94,7 @@
               label-class-name="my-label"
               class-name="my-content"
               width="150px"
-            >
-              {{ detail.corpAreaId }}
-            </el-descriptions-item>
+            />
             <el-descriptions-item
               label="设备在线状态"
               label-align="left"
@@ -299,6 +300,28 @@
           :column="2"
           border
         >
+          <template #extra>
+            <div v-if="customer.custId != undefined">
+              <el-popconfirm
+                width="240"
+                confirm-button-text="确认"
+                cancel-button-text="取消"
+                :icon="InfoFilled"
+                icon-color="#626AEF"
+                @confirm="unbinding"
+                title="确认解除设备与客户的绑定?"
+              >
+                <template #reference>
+                  <el-button type="primary">解除绑定 </el-button>
+                </template>
+              </el-popconfirm>
+            </div>
+            <div v-else>
+              <el-button @click="skipBindingCustom" type="primary"
+                >绑定客户</el-button
+              >
+            </div>
+          </template>
           <el-descriptions-item
             label="客户账号"
             label-align="left"
@@ -404,10 +427,11 @@
 </template>
 
 <script setup lang="ts">
-import { Position } from "@element-plus/icons-vue";
+import { InfoFilled, Position, Refresh } from "@element-plus/icons-vue";
 import {
   editResourceEquipment,
   getResourceDeviceDetail,
+  unbindingCustomAPI,
 } from "@/api/resources-equipment";
 import {
   EquipmentCustomerVO,
@@ -418,6 +442,7 @@ import {
 import { FormInstance, FormRules } from "element-plus";
 
 const route = useRoute();
+const router = useRouter();
 let devId: number = parseInt(<string>route.params.devId);
 const detail = ref<EquipmentDetailVO>({});
 const type = ref<EquipmentTypeVO>({});
@@ -456,6 +481,24 @@ const submitForm = async (formEl: FormInstance | undefined) => {
     }
   });
 };
+const unbinding = () => {
+  loading.value = true;
+  unbindingCustomAPI(editForm.value.devId).then(() => {
+    ElMessage({
+      message: "操作成功",
+      type: "success",
+      duration: 1000,
+      onClose: () => {
+        loadEquipmentData();
+      },
+    });
+  });
+};
+const skipBindingCustom = () => {
+  router.push({
+    path: `/resources/equipment-binding-custom/${devId}`,
+  });
+};
 onMounted(() => {
   loadEquipmentData();
 });

src/views/resources/equipment/index.vue

@@ -44,13 +44,34 @@
             <el-button type="primary" plain @click="skipAdd" :icon="Plus"
               >新增</el-button
             >
-            <el-button type="danger" plain :icon="Delete">删除</el-button>
+            <el-popconfirm
+              icon-color="#626AEF"
+              :icon="InfoFilled"
+              width="200"
+              title="确认删除选中的数据吗?"
+              @confirm="handleDelete"
+            >
+              <template #reference>
+                <el-button
+                  type="danger"
+                  :disabled="multiples.length === 0"
+                  plain
+                  :icon="Delete"
+                  >删除</el-button
+                >
+              </template>
+            </el-popconfirm>
           </div>
           <table-bar :columns="columns" @change-columns="changeColumns" />
         </div>
       </template>
       <div class="any-table">
-        <el-table :data="tableData" v-loading="loading">
+        <el-table
+          :data="tableData"
+          v-loading="loading"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="55" />
           <el-table-column
             label="设备标识"
             align="center"
@@ -164,9 +185,9 @@
 </template>
 
 <script setup lang="ts">
-import { Delete, Plus, Search } from "@element-plus/icons-vue";
+import { Delete, InfoFilled, Plus, Search } from "@element-plus/icons-vue";
 import { EquipmentTableVO } from "@/api/resources-equipment/types";
-import { getEquipmentPage } from "@/api/resources-equipment";
+import { deleteDevice, getEquipmentPage } from "@/api/resources-equipment";
 
 defineOptions({
   name: "Equipment",
@@ -181,6 +202,7 @@ const options = ref<OptionType[]>([{ label: "AD编号", value: "devAdNo" }]);
 const buttonColSpan = computed(() => {
   return queryForm.value.selectName === undefined ? 18 : 12;
 });
+const multiples = ref<EquipmentTableVO[]>([]);
 const total = ref<number>(0);
 const tableData = ref<EquipmentTableVO[]>([]);
 const columns = ref<TableColumns[]>([
@@ -237,6 +259,31 @@ const skipAdd = () => {
     path: `/resources/equipment-add`,
   });
 };
+
+const handleSelectionChange = (val: EquipmentTableVO[]) => {
+  multiples.value = val;
+};
+const handleDelete = () => {
+  let ids: number[] = [];
+  multiples.value.forEach((obj) => {
+    ids.push(<number>obj.devId);
+  });
+  loading.value = true;
+  deleteDevice(ids)
+    .then(() => {
+      ElMessage({
+        message: "操作成功",
+        duration: 1000,
+        type: "success",
+        onClose: () => {
+          getData();
+        },
+      });
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+};
 </script>
 
 <style scoped></style>