feat: 统一新增和编辑的回调

src/components/Action/index.ts

@@ -1,3 +1,10 @@
-import isDelete from "./src/isDelete";
-
-export const IsDelete = isDelete;
+/*
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2024-08-14 17:19:37
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2024-08-20 15:32:48
+ * @FilePath: \General-AI-Platform-Web-Client\src\components\Action\index.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import isAction from "./src/isAction";
+export const IsAction = isAction;

src/components/Action/src/isAction.scss

@@ -0,0 +1,16 @@
+.action_model_wrap {
+  .el-dialog__header {
+    display: none;
+  }
+  .el-dialog__body {
+    padding: 40px 24px 14px;
+  }
+  .model_content_box {
+    .icon_box {
+      img {
+        width: 24px;
+        height: 24px;
+      }
+    }
+  }
+}

src/components/Action/src/isAction.tsx

@@ -0,0 +1,88 @@
+/*
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2024-08-20 15:31:30
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2024-08-20 16:00:47
+ * @FilePath: \General-AI-Platform-Web-Client\src\components\TableActionCard\isAction.tsx
+ * @Description: 是否操作行为
+ */
+import { defineComponent, PropType } from "vue";
+import { ElDialog, ElButton } from "element-plus";
+import warnIcon from "@/assets/modelSetting/warn_icon.png";
+import "./isAction.scss";
+// TODO 完善操作交互
+export default defineComponent({
+  name: "IsDelete",
+  props: {
+    title: {
+      type: String as PropType<string>,
+      default: "提示"
+    },
+    message: {
+      type: String as PropType<string>,
+      default: "确定要操作吗？"
+    },
+    visible: {
+      type: Boolean as PropType<boolean>,
+      required: true
+    }
+  },
+  emits: ["update:visible", "confirm"],
+  setup(props, { emit }) {
+    // const visible = ref(props.visible);
+
+    const handleConfirm = () => {
+      emit("confirm");
+      // visible.value = false;
+      // emit("update:visible", false);
+    };
+
+    const handleCancel = () => {
+      // visible.value = false;
+      emit("update:visible", false);
+    };
+
+    const handleClose = () => {
+      // visible.value = false;
+      emit("update:visible", false);
+      // done();
+    };
+
+    watch(
+      () => props.visible,
+      val => {
+        visible.value = val;
+      }
+    );
+
+    return () => (
+      <ElDialog
+        className="action_model_wrap el-dialog"
+        visible={props.visible}
+        width="560px"
+        before-close={handleClose}
+        show-close={false}
+        v-slots={{
+          footer: () => (
+            <>
+              <ElButton onClick={handleCancel}>取消</ElButton>
+              <ElButton type="primary" onClick={handleConfirm}>
+                确认
+              </ElButton>
+            </>
+          )
+        }}
+      >
+        <div className="model_content_box">
+          <div className="flex items-center pr-[12px] icon_box">
+            <img src={warnIcon} />
+            <span className="hf-1 pl-[12px]">{props.title}</span>
+          </div>
+          <div className="pl-[36px] pt-[14px]">
+            <span className="pf-1">{props.message}</span>
+          </div>
+        </div>
+      </ElDialog>
+    );
+  }
+});

src/components/Action/src/isDelete.tsx

@@ -2,13 +2,13 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2024-02-22 13:38:04
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2024-08-14 17:03:45
+ * @LastEditTime: 2024-08-20 15:28:31
  * @FilePath: \General-AI-Platform-Web-Client\src\components\TableActionCard\isDelete.tsx
  * @Description: 是否删除
  */
 import { defineComponent, ref, PropType } from "vue";
 import { ElDialog, ElButton } from "element-plus";
-
+// TODO 完善删除交互
 export default defineComponent({
   name: "IsDelete",
   props: {
@@ -55,10 +55,14 @@ export default defineComponent({
 
     return () => (
       <ElDialog
-        title={props.title}
         visible={props.visible}
         width="30%"
         before-close={handleClose}
+        show-close={false}
+        header={false}
+        v-slots={{
+          header: () => <>123</>
+        }}
         v-slots={{
           footer: () => (
             <>

src/views/deviceSetting/components/deviceAttr.vue

@@ -17,6 +17,7 @@ const props = defineProps({
     type: Object as Record<string, any>
   }
 });
+const emit = defineEmits(["afterDelete", "editDevice"]);
 
 const event = inject("event");
 const update = getCurrentInstance();
@@ -207,26 +208,31 @@ async function deleteDeviceObject(deleteObject) {
   });
   if (isSuccessApi(resp)) {
     deleteObject.deleteCallback();
+    emit("afterDelete", currDeviceInfo);
   }
 }
 
 // 编辑当前集合
-async function editDeviceObject(callback) {
-  const activeObject = canvasEditor.canvas.getActiveObject();
-  const currDeviceInfo = activeObject.get("deviceInfo");
-  console.log(activeObject, "editDeviceObject_activeObject", currDeviceInfo);
-  const resp = await editWorkshopDevicesApi({
-    id: currDeviceInfo.id,
-    device_id: currDeviceInfo.device_id,
-    workshop_id: currDeviceInfo.workshop_id,
-    x_ordinate: activeObject.get("left"),
-    y_ordinate: activeObject.get("top"),
-    icon: formData.value.icon
-  });
-  if (isSuccessApi(resp)) {
-    console.log("编辑完成");
-    callback && callback(resp);
-  }
+// async function editDeviceObject(callback) {
+//   const activeObject = canvasEditor.canvas.getActiveObject();
+//   const currDeviceInfo = activeObject.get("deviceInfo");
+//   console.log(activeObject, "editDeviceObject_activeObject", currDeviceInfo);
+//   const resp = await editWorkshopDevicesApi({
+//     id: currDeviceInfo.id,
+//     device_id: currDeviceInfo.device_id,
+//     workshop_id: currDeviceInfo.workshop_id,
+//     x_ordinate: activeObject.get("left"),
+//     y_ordinate: activeObject.get("top"),
+//     icon: formData.value.icon
+//   });
+//   if (isSuccessApi(resp)) {
+//     console.log("编辑完成");
+//     callback && callback(resp);
+//   }
+// }
+
+function startEditDevice(callback) {
+  emit("editDevice", { formData: toRaw(formData.value), callback });
 }
 const selectCancel = e => {
   baseAttr.fill = "";
@@ -240,7 +246,7 @@ const init = () => {
   canvasEditor.canvas.on("object:deleteObject", deleteDeviceObject);
   canvasEditor.canvas.on("mouse:up", () => {
     const activeObject = canvasEditor.canvas.getActiveObject();
-    activeObject && activeObject.get("deviceInfo") && editDeviceObject();
+    activeObject && activeObject.get("deviceInfo") && startEditDevice();
   });
   canvasEditor.canvas.on("object:modified", getObjectAttr);
   // 监听 object:moving 事件以限制移动范围
@@ -300,7 +306,7 @@ const changeCommon = (key, value) => {
 
       if (targetIcon) {
         // 修改图片路径
-        editDeviceObject(() => {
+        startEditDevice(() => {
           imageObject.setSrc(
             targetIcon.url,
             () => {

src/views/deviceSetting/components/deviceSelect.vue

@@ -15,6 +15,9 @@ import { useDeviceObject } from "../hooks/useDeviceObject";
 const props = defineProps({
   deviceList: {
     type: Array as Record<string, any>[]
+  },
+  currDeviceList: {
+    type: Array as Record<string, any>[]
   }
 });
 
@@ -57,6 +60,17 @@ const state = reactive({
   materialist: [] // 列表内容
 });
 const detailInfo = ref({});
+const currDetailInfo = ref({
+  name: "设备",
+  workshop_name: "点位"
+});
+
+const isUpdateVisible = ref<boolean>(false);
+const isAllowUpdate = ref<boolean>(false);
+
+const updateMessage = computed(() => {
+  return `“${currDetailInfo.value.name}”已绑定至“${currDetailInfo.value.workshop_name}”，确定解除绑定并重新配置吗？`;
+});
 // 获取素材分类
 canvasEditor.getMaterialType("svg").then((list: materialTypeI[]) => {
   state.materialTypelist = [...list];
@@ -73,26 +87,30 @@ canvasEditor.getMaterialType("svg").then((list: materialTypeI[]) => {
   state.materialist = list;
 });
 
-function fetchDetail(record) {
+function fetchDetail(record, callback) {
   detailInfo.value = record;
   console.log(detailInfo.value, "fetchDetail");
-  emit("addDevice", record);
+  emit("addDevice", { record, callback });
 }
 
 /**
  * 校验是否允许添加设备
  * @param record 选中的素材
  */
-function isValidAdd(record) {
-  console.log("isValidAdd_record", record);
-  return false;
+function isValidAdd(event, record) {
+  console.log(props.currDeviceList, "isValidAdd_record", event, record);
+  // 同一点位重复新增禁用
+  if (record.is_binding) {
+    return false;
+  }
+  return true;
 }
 
 const dragItem = (event, deviceItem) => {
-  if (isValidAdd(deviceItem)) {
+  console.log(event, deviceItem, "dragItem");
+  if (!isValidAdd(event, deviceItem)) {
     return;
   }
-  console.log(event, deviceItem, "dragItem");
   fabric.util.enlivenObjects(
     [
       {
@@ -106,62 +124,52 @@ const dragItem = (event, deviceItem) => {
 
     function (objects) {
       // objects 包含从JSON还原的对象，这里我们期望是一个Group对象
-      // 判断是否在边界内
+      // TODO 判断是否在边界内
       const item = objects[0];
-      canvasEditor.dragAddItem(event, item);
       console.log(event, item, "dragItem");
-      fetchDetail({
-        ...deviceItem,
-        x_ordinate: item.left,
-        y_ordinate: item.top
-      });
+
+      fetchDetail(
+        {
+          ...deviceItem,
+          x_ordinate: item.left,
+          y_ordinate: item.top
+        },
+        () => {
+          // 新增完成处理
+          canvasEditor.dragAddItem(event, item);
+        }
+      );
     }
   );
 };
 
-// 按照类型渲染
-const addItem = deviceItem => {
-  if (isValidAdd(deviceItem)) {
-    return;
-  }
-  console.log(deviceItem, "addItem_deviceItem");
-  fabric.util.enlivenObjects(
-    [
-      {
-        ...defaultPosition,
-        // name: "svg元素",
-        ...initDeviceGroupObjects(deviceItem)
-      }
-    ],
-    function (objects) {
-      // objects 包含从JSON还原的对象，这里我们期望是一个Group对象
-      const item = objects[0];
-      // if (!option) {
-      //   groupText.center();
-      // }
-
-      // 添加Group对象到Canvas中
-      // var canvas = new fabric.Canvas('canvas-id');
-      // canvas.add(group);
-      canvasEditor.canvas.add(item);
-      canvasEditor.canvas.setActiveObject(item);
-      canvasEditor.canvas.requestRenderAll();
-      fetchDetail(deviceItem);
-      // 更新Canvas以确保更改生效
-      // canvas.renderAll();
-    }
-  );
-  // console.log(e, "addItem_e");
-  // const url = watchOnlineSelected;
-  // fabric.loadSVGFromURL(url, (objects, options) => {
-  //   const item = fabric.util.groupSVGElements(objects, {
-  //     ...options,
-  //     ...defaultPosition,
-  //     name: "svg元素"
-  //   });
+function updateConfirm() {
+  isAllowUpdate.value = true;
+}
 
-  // });
-};
+// 按照类型渲染
+// const addItem = deviceItem => {
+//   if (isValidAdd(deviceItem)) {
+//     return;
+//   }
+//   console.log(deviceItem, "addItem_deviceItem");
+//   fabric.util.enlivenObjects(
+//     [
+//       {
+//         ...defaultPosition,
+//         // name: "svg元素",
+//         ...initDeviceGroupObjects(deviceItem)
+//       }
+//     ],
+//     function (objects) {
+//       const item = objects[0];
+//       canvasEditor.canvas.add(item);
+//       canvasEditor.canvas.setActiveObject(item);
+//       canvasEditor.canvas.requestRenderAll();
+//       fetchDetail(deviceItem);
+//     }
+//   );
+// };
 
 // 渲染设备到点位图上
 function renderDeviceToCanvas(record) {
@@ -296,7 +304,6 @@ defineExpose({ renderDeviceToCanvas });
             v-for="(info, i) in props.deviceList"
             :key="`${i}-logo1-button`"
             :draggable="true"
-            @click="addItem(info)"
             @dragend="event => dragItem(event, info)"
           >
             <span>
@@ -307,6 +314,13 @@ defineExpose({ renderDeviceToCanvas });
       </div>
     </div>
   </div>
+  <IsAction
+    v-model="isUpdateVisible"
+    @update:visible="val => (isUpdateVisible = val)"
+    title="确定重新绑定吗？"
+    :message="updateMessage"
+    @confirm="updateConfirm"
+  />
 </template>
 
 <style scoped lang="scss">

src/views/deviceSetting/index.vue

@@ -2,7 +2,7 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2024-08-02 10:52:32
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2024-08-16 15:40:58
+ * @LastEditTime: 2024-08-20 16:44:13
  * @FilePath: \General-AI-Platform-Web-Client\src\views\deviceSetting\index.vue
  * @Description: 设备点位管理设置
  @ 交互说明
@@ -19,13 +19,14 @@ import DeviceSettingAdd from "./components/add.vue";
 import DeviceSettingEdit from "./components/edit.vue";
 
 import DeviceSelect from "./components/deviceSelect.vue";
-import { IsDelete } from "@/components/Action";
+import { IsAction } from "@/components/Action";
 import { usePointObject } from "./hooks/usePointObject";
 
 import {
   getWorkshopsApi,
   deleteWorkshopsApi,
   addWorkshopDevicesApi,
+  editWorkshopDevicesApi,
   getWorkshopDevicesApi
 } from "@/api/workshops";
 import { getLinkDevicesApi } from "@/api/device";
@@ -88,7 +89,12 @@ const activePoint = ref({
 });
 const deviceList = ref([]); // 所有设备列表
 const currDeviceList = ref([]); // 当前点位下设备列表
-const isDeleteVisible = ref(false);
+const isDeleteVisible = ref<boolean>(false);
+
+const deleteMessage = computed(() => {
+  return `确定删除“${activePoint.value.name}”吗？删除后设备所处区域的实拍图或平面图及设备点位将一 并被删除，请谨慎操作。`;
+});
+
 // 插入文件绘制图
 const refreshCanvas = (isLoadDevice = true) => {
   const currWorkSpace = document.getElementById("workspace");
@@ -278,20 +284,67 @@ async function fetchDeviceByPoint() {
 }
 
 // 新增设备
-async function addDevice(record) {
+async function addDevice({ record, callback }) {
   const resp = await addWorkshopDevicesApi({
     workshop_id: activePointId.value,
     device_id: record.id,
     x_ordinate: record?.x_ordinate || 0,
     y_ordinate: record?.y_ordinate || 0,
-    icon: record?.type || 1
+    icon: record?.type || 1,
+    wd_id: record?.wd_id
   });
   if (isSuccessApi(resp)) {
-    // isAddDeviceVisible.value = false;
-    // afterFinishAddDevice();
+    callback && callback(resp.data);
+    const finalData = {
+      ...resp.data,
+      wd_id: resp.data?.id
+    };
+    currDeviceList.value = [...currDeviceList.value, finalData];
+    deviceList.value = toRaw(deviceList.value).filter(item => {
+      if (item.id === finalData?.id) {
+        item.wd_id = finalData?.wd_id;
+        item.is_binding = true;
+      }
+      return item;
+    });
   }
 }
 
+function afterEditDevice(record) {
+  console.log("编辑完成", record);
+}
+
+// 编辑当前设备
+async function editDevice({ formData, callback }) {
+  const activeObject = canvasEditor.canvas.getActiveObject();
+  const currDeviceInfo = activeObject.get("deviceInfo");
+  const currParams = {
+    id: currDeviceInfo.id,
+    device_id: currDeviceInfo.device_id,
+    workshop_id: currDeviceInfo.workshop_id,
+    x_ordinate: activeObject.get("left"),
+    y_ordinate: activeObject.get("top"),
+    icon: formData.icon
+  };
+  console.log(
+    activeObject,
+    "editDeviceObject_activeObject",
+    currDeviceInfo,
+    currParams
+  );
+  const resp = await editWorkshopDevicesApi(currParams);
+  if (isSuccessApi(resp)) {
+    afterEditDevice(resp.data);
+    callback && callback(resp.data);
+  }
+}
+
+// 完成删除设备
+function afterDeleteDevice(record) {
+  const startArr = toRaw(currDeviceList.value);
+  currDeviceList.value = startArr.filter(item => item.id !== record.id);
+}
+
 onMounted(() => {
   initFabric();
   fetchPointList();
@@ -356,10 +409,14 @@ provide("canvasEditor", canvasEditor);
             <DeviceSelect
               ref="deviceSelectRef"
               :deviceList="deviceList"
+              :currDeviceList="currDeviceList"
               @addDevice="addDevice"
               :pointInfo="activePoint"
             />
-            <DeviceAttr />
+            <DeviceAttr
+              @afterDelete="afterDeleteDevice"
+              @editDevice="editDevice"
+            />
           </div>
         </div>
         <div class="footer_btns">
@@ -373,12 +430,11 @@ provide("canvasEditor", canvasEditor);
             v-if="pointList.length"
             >删除位置</el-button
           >
-          <!-- //TODO 完善删除交互效果 -->
-          <IsDelete
+          <IsAction
             v-model="isDeleteVisible"
             @update:visible="val => (isDeleteVisible = val)"
-            title="删除确认"
-            message="您确定要删除该项目吗？"
+            title="确定删除吗？"
+            :message="deleteMessage"
             @confirm="deletePoint"
           />
         </div>