From ec9b89559ce54af59405eb6e187638bc94f2afe0 Mon Sep 17 00:00:00 2001 From: donghao Date: Wed, 14 Aug 2024 17:17:42 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=88=A0=E9=99=A4?= =?UTF-8?q?=E5=B8=83=E7=82=B9=E8=81=94=E8=B0=83=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/workshops.ts | 33 ++++++- src/components/Action/index.ts | 3 + src/components/Action/src/isDelete.tsx | 77 +++++++++++++++ src/components/TableActionCard/index.ts | 3 + src/components/TableActionCard/isDelete.tsx | 0 .../TableActionCard/src/isDelete.tsx | 69 ++++++++++++++ src/utils/forApi.ts | 19 ++++ src/utils/http/index.ts | 9 ++ src/views/deviceSetting/components/add.vue | 74 ++++++++++----- src/views/deviceSetting/index.vue | 95 +++++++++++++++---- 10 files changed, 340 insertions(+), 42 deletions(-) create mode 100644 src/components/Action/index.ts create mode 100644 src/components/Action/src/isDelete.tsx create mode 100644 src/components/TableActionCard/index.ts delete mode 100644 src/components/TableActionCard/isDelete.tsx create mode 100644 src/components/TableActionCard/src/isDelete.tsx create mode 100644 src/utils/forApi.ts diff --git a/src/api/workshops.ts b/src/api/workshops.ts index 2d28137..642716d 100644 --- a/src/api/workshops.ts +++ b/src/api/workshops.ts @@ -2,7 +2,7 @@ * @Author: donghao donghao@supervision.ltd * @Date: 2024-08-02 10:40:49 * @LastEditors: donghao donghao@supervision.ltd - * @LastEditTime: 2024-08-14 11:10:51 + * @LastEditTime: 2024-08-14 17:09:46 * @FilePath: \General-AI-Platform-Web-Client\src\api\workshops.ts * @Description: 布点 */ @@ -30,7 +30,36 @@ export const getWorkshopsApi = (params?: object) => { /** 新增布点 */ export const addWorkshopsApi = (data?: object) => { - return http.request("post", baseUrlApi("workshops/"), { data }); + return http.request( + "post", + baseUrlApi("workshops/"), + { data }, + { + headers: { "Content-Type": "multipart/form-data" } + } + ); +}; +/** 编辑布点 data有id */ +export const editWorkshopsApi = (data?: object) => { + return http.request( + "post", + baseUrlApi("workshops/"), + { data }, + { + headers: { "Content-Type": "multipart/form-data" } + } + ); +}; +/** 删除布点 status: 1 */ +export const deleteWorkshopsApi = (data?: object) => { + return http.request( + "post", + baseUrlApi("workshops/"), + { data: { ...data, status: 1 } }, + { + headers: { "Content-Type": "multipart/form-data" } + } + ); }; /** 获取布点设备 */ diff --git a/src/components/Action/index.ts b/src/components/Action/index.ts new file mode 100644 index 0000000..b697c9c --- /dev/null +++ b/src/components/Action/index.ts @@ -0,0 +1,3 @@ +import isDelete from "./src/isDelete"; + +export const IsDelete = isDelete; diff --git a/src/components/Action/src/isDelete.tsx b/src/components/Action/src/isDelete.tsx new file mode 100644 index 0000000..d1055cd --- /dev/null +++ b/src/components/Action/src/isDelete.tsx @@ -0,0 +1,77 @@ +/* + * @Author: donghao donghao@supervision.ltd + * @Date: 2024-02-22 13:38:04 + * @LastEditors: donghao donghao@supervision.ltd + * @LastEditTime: 2024-08-14 17:03:45 + * @FilePath: \General-AI-Platform-Web-Client\src\components\TableActionCard\isDelete.tsx + * @Description: 是否删除 + */ +import { defineComponent, ref, PropType } from "vue"; +import { ElDialog, ElButton } from "element-plus"; + +export default defineComponent({ + name: "IsDelete", + props: { + title: { + type: String as PropType, + default: "提示" + }, + message: { + type: String as PropType, + default: "确定要删除吗？" + }, + visible: { + type: Boolean as PropType, + 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 = (done: () => void) => { + // visible.value = false; + emit("update:visible", false); + // done(); + }; + + watch( + () => props.visible, + val => { + visible.value = val; + } + ); + + return () => ( + ( + <> + 取消 + + 删除 + + + ) + }} + > + {props.message} + + ); + } +}); diff --git a/src/components/TableActionCard/index.ts b/src/components/TableActionCard/index.ts new file mode 100644 index 0000000..b697c9c --- /dev/null +++ b/src/components/TableActionCard/index.ts @@ -0,0 +1,3 @@ +import isDelete from "./src/isDelete"; + +export const IsDelete = isDelete; diff --git a/src/components/TableActionCard/isDelete.tsx b/src/components/TableActionCard/isDelete.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/TableActionCard/src/isDelete.tsx b/src/components/TableActionCard/src/isDelete.tsx new file mode 100644 index 0000000..18016ae --- /dev/null +++ b/src/components/TableActionCard/src/isDelete.tsx @@ -0,0 +1,69 @@ +/* + * @Author: donghao donghao@supervision.ltd + * @Date: 2024-02-22 13:38:04 + * @LastEditors: donghao donghao@supervision.ltd + * @LastEditTime: 2024-08-14 15:56:12 + * @FilePath: \General-AI-Platform-Web-Client\src\components\TableActionCard\isDelete.tsx + * @Description: 是否删除 + */ +import { defineComponent, ref, PropType } from "vue"; +import { ElDialog, ElButton } from "element-plus"; + +export default defineComponent({ + name: "IsDelete", + props: { + title: { + type: String as PropType, + default: "提示" + }, + message: { + type: String as PropType, + default: "确定要删除吗？" + }, + modelValue: { + type: Boolean as PropType, + required: true + } + }, + emits: ["update:modelValue", "confirm"], + setup(props, { emit }) { + const visible = ref(props.modelValue); + + const handleConfirm = () => { + emit("confirm"); + visible.value = false; + emit("update:modelValue", false); + }; + + const handleCancel = () => { + visible.value = false; + emit("update:modelValue", false); + }; + + const handleClose = (done: () => void) => { + visible.value = false; + done(); + }; + + return () => ( + ( + <> + 取消 + + 删除 + + + ) + }} + > + {props.message} + + ); + } +}); diff --git a/src/utils/forApi.ts b/src/utils/forApi.ts new file mode 100644 index 0000000..5c4a0d6 --- /dev/null +++ b/src/utils/forApi.ts @@ -0,0 +1,19 @@ +/* + * @Author: donghao donghao@supervision.ltd + * @Date: 2024-08-14 14:42:09 + * @LastEditors: donghao donghao@supervision.ltd + * @LastEditTime: 2024-08-14 14:43:30 + * @FilePath: \General-AI-Platform-Web-Client\src\utils\forApi.ts + * @Description: 这是接口层和业务层的转换工具方法集 + */ +/** + * @判断接口数据是否成功返回 + * @param result 接口返回数据 + * @returns boolean + */ +export function isSuccessApi(result): boolean { + if ([200].includes(result.status)) { + return true; + } + return false; +} diff --git a/src/utils/http/index.ts b/src/utils/http/index.ts index 11ea2c6..908d3c2 100644 --- a/src/utils/http/index.ts +++ b/src/utils/http/index.ts @@ -189,6 +189,15 @@ class PureHttp { ): Promise

{ return this.request

("get", url, params, config); } + + /** 单独抽离的上传工具函数 */ + // public uploadFile( + // url: string, + // params?: AxiosRequestConfig, + // config?: PureHttpRequestConfig + // ): Promise

{ + // return this.request

("post", url, params, config); + // } } export const http = new PureHttp(); diff --git a/src/views/deviceSetting/components/add.vue b/src/views/deviceSetting/components/add.vue index c157fac..b2f8d7d 100644 --- a/src/views/deviceSetting/components/add.vue +++ b/src/views/deviceSetting/components/add.vue @@ -2,7 +2,7 @@ * @Author: donghao donghao@supervision.ltd * @Date: 2024-08-07 14:47:44 * @LastEditors: donghao donghao@supervision.ltd - * @LastEditTime: 2024-08-12 15:34:22 + * @LastEditTime: 2024-08-14 16:12:34 * @FilePath: \General-AI-Platform-Web-Client\src\views\deviceSetting\components\add.vue * @Description: 新建位置 --> @@ -11,56 +11,85 @@ import historyAlarm from "@/assets/history_alarm.png"; import { UploadFilled } from "@element-plus/icons-vue"; import { message } from "@/utils/message"; +import { addWorkshopsApi } from "@/api/workshops"; +import { isSuccessApi } from "@/utils/forApi"; defineOptions({ name: "DeviceSettingAdd" }); +const emit = defineEmits(["finishAdd"]); const formData = ref({ name: "", - file: null as File | null + picture: null }); const formRef = ref(null); - +const uploadRef = ref(null); +const imagePreview = ref(null); // 预览图像的 URL const dialogVisible = ref(false); const fileList = ref([]); const rules = { name: [{ required: true, message: "请输入位置名称", trigger: "blur" }], - file: [{ required: true, message: "请上传图片文件", trigger: "change" }] + picture: [{ required: true, message: "请上传图片文件", trigger: "change" }] }; - -const uploadAction = ""; // 可以设置为实际的上传地址 - const openDialog = () => { dialogVisible.value = true; }; const handleFileChange = (file: any) => { + // 使用 FileReader 读取文件内容并生成预览 + const reader = new FileReader(); + reader.onload = e => { + imagePreview.value = e.target?.result as string; + }; + reader.readAsDataURL(file.raw); console.log(file, "handleFileChange"); - formData.value = { ...formData.value, - file: "https://img.cgmodel.com/image/2020/1010/big/1537169-1390622992.jpg" + picture: file.raw + }; +}; +// 手动触发上传 +const removeFile = () => { + imagePreview.value = null; + formData.value = { + ...formData.value, + picture: null }; }; const beforeUpload = (file: File) => { + console.log("beforeUpload_file", file); const isJPG = file.type === "image/jpeg" || file.type === "image/png"; - const isLt500K = file.size / 1024 / 1024 < 0.5; + const isLt500K = file.size / 1024 / 1024 < 20; if (!isJPG) { ElMessage.error("上传图片只能是 JPG/PNG 格式!"); } if (!isLt500K) { - ElMessage.error("上传图片大小不能超过 500KB!"); + ElMessage.error("上传图片大小不能超过 20MB!"); } return isJPG && isLt500K; }; +async function fetchAddPoint() { + const formParams = new FormData(); + formParams.append("name", formData.value.name); + formParams.append("picture", formData.value.picture); + const resp = await addWorkshopsApi(formParams); + console.log(resp, "fetchAddPoint_resp"); + if (isSuccessApi(resp)) { + message(resp.msg || "添加成功", { type: "success" }); + emit("finishAdd", resp.data); + dialogVisible.value = false; + } else { + message(resp.msg || "添加失败", { type: "error" }); + } +} + const submitForm = () => { - formRef.validate((valid: boolean) => { + formRef.value.validate((valid: boolean) => { if (valid) { - message("提交成功", { type: "success" }); - dialogVisible.value = false; + fetchAddPoint(); } else { message("验证失败", { type: "error" }); return false; @@ -68,11 +97,6 @@ const submitForm = () => { }); }; -// const resetForm = (formEl: FormInstance | undefined) => { -// if (!formEl) return; -// formEl.resetFields(); -// }; - defineExpose({ openDialog }); @@ -113,28 +137,30 @@ defineExpose({

-
+
拖拽图片到这里，或点此添加 点此添加
diff --git a/src/views/deviceSetting/index.vue b/src/views/deviceSetting/index.vue index 9ba7ca0..5eacb40 100644 --- a/src/views/deviceSetting/index.vue +++ b/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-14 11:22:32 + * @LastEditTime: 2024-08-14 17:10:19 * @FilePath: \General-AI-Platform-Web-Client\src\views\deviceSetting\index.vue * @Description: 设备点位管理设置 @ 交互说明 @@ -12,14 +12,17 @@ 4. 设备关联属性设置 5. 效果预览 --> -