当前位置: 首页 > news >正文

工作记录2

1. 要实现y轴超出部分滚动的效果,可以这样写

<div style="max-height: 384px; overflow-y: auto;">
</div>

2. 当后端接口还没好的时候,可以自己模拟一下接口返回的数据

export const getCommodityDetail = (id) => Promise.resolve({id: '11111',name: 'xiongxinyu',age: 18})

3. 标签可能会只有父级标签,也有可能会有父级标签和子级标签(子级标签可能有一个或多个),因为存在父级标签和子级标签的区别,所以操作上就会有所不同,这一点可以通过接口返回的层级数据来判断,如果record.parentId==0,说明它是父级,那么就让这一行多一个“新增子项”的操作。

<template #action="{ record }"><TableAction :action="getActions(record)" />
</template>
function getActions(record) {let actions = [{label: '编辑',onClick: handleEdit.bind(null,record),}{label: '删除',popConfrim:{title:'是否确认删除',confirm: handleDelete.bind(null, record),}}]if(record.parentId == '0') {actions.unshift({label: '新增子项',onClick: handleAddSub.bind(null,record)})}return actions;
}

4. 展开或折叠树形表格

<a-button @click="expandAll">展开全部</a-button>

<a-button @click="collapseAll">折叠全部</a-button>

setup(){const expandedRowKeys = ref<string>([]);const [registerTable, { expandAll, collapseAll, reload}] = useTable({isTreeTable: true,expandedRowKeys: expandedRowKeys.value,onExpand: (expande, record) => {if(expande){if(!expandedRowKeys.value.includes(record.id)){expandedRowKeys.value.push(record.id);}}else{let index = expandedRowKeys.value.indexOf(record.id);expandedRowKeys.value.splice(index,1);}}})
}

5. 利用微信schema从app跳转到小程序

本来是可以前端自己去生成schemaUrl的,但是生成的链接有时效性,然后最新的那种明文码它好多设备不支持,所以最后决定让后端生成。前端把想要到时候在小程序页面拿到的参数在此时传递给后端,后端返回schemaUrl。

const res = await getwxScheme(channelId,projectId);
Linking.openURL(res)

因为生成这个链接的时候后端是拿了我们传的参数去生成的,所以返回的链接的信息里其实是携带了这些参数的,那么我们在用这个链接跳转到小程序的某个页面的时候,就可以在这个页面拿到这个参数了,就正常在onLoad里面的option拿就行。

onLoad(option){console.log(option.projectId,option.channelId);
}

5. 联系在线客服

首先通过调用接口获取机构在机构端对客服的一些配置,可以选择配置客服的方式(有h5和js客服),选择配置h5客服的话,就必须得填写客服链接,选择配置js客服的话,就必须得填写JS客服代码,如果获取到接口返回的信息表示机构配置的是h5客服,那就直接用window.opend打开当时填的客服链接即可,但如果是js客服的话,就可以调用螳螂客服的一些api来实现了。

const openChatModal = async () => {if(customerSet.customerType == 1){window.open(customerSet.customerLink, "_blank");return;}else{chartCode();}
}const chartCode = () => {if(window.mantis && window.mantis.requestChat) {window.mantis.requestChat();}else {const scriptDom = stringToDom(customerSet.customerCode);document.head.appendChild(scriptDom);// 设置轮询,避免查不到let num = 0;let timerId = setInterval(() => {num++;// 轮询10s没有初始化关闭if(num >20){clearInterval(timerId);}// 获取到requestChatif(window.mantis && window.mantis.requestChat) {window.mantis.requestChat();clearInterval(timerId);}},500);}
}
const stringToDOM = (str:string) => {if(str.includes("script")){var parser = new DOMParser();// 使用DOMParser的parseFromString方法来转换字符串到DOMvar doc = parser.parseFromString(str,"text/html");// 获取转换后的DOM对象var dom: any = doc.body.firstChild || doc.head.firstChild;const script1:any = document.createElement("script");script1.src = dom.src;return script1;}else {const script1:any = document.createElement("script");script1.src = str;return script1;}
}

相关文章:

工作记录2

1. 要实现y轴超出部分滚动的效果&#xff0c;可以这样写 <div style"max-height: 384px; overflow-y: auto;"> </div> 2. 当后端接口还没好的时候&#xff0c;可以自己模拟一下接口返回的数据 export const getCommodityDetail (id) > Promise.re…...

linux挂载硬盘(解决linux不显示硬盘问题)

目录 1.查看系统有几块硬盘2.查看挂载情况3.格式化硬盘4.创建挂载目录用于挂载硬盘5.将硬盘挂载到指定的挂载目录6.随系统自启动挂载查看配置文件&#xff0c;看是否已经把这条命令加入配置 帮同门解决挂载失败问题记录 参考视频&#xff1a;只要6步&#xff01;Linux系统下挂载…...

运输标签扫描仪可简化运输和接收任务

Dynamic Web TWAIN 是一个专为Web应用程序设计的TWAIN扫描识别控件。你只需在TWAIN接口写几行代码&#xff0c;就可以用兼容TWAIN的扫描仪扫描文档或从数码相机/采集卡中获取图像。然后用户可以编辑图像并将图像保存为多种格式&#xff0c;用户可保存图像到远程数据库或者Share…...

Stable Diffusion 3 大模型文生图实践

windows教程2024年最新Stable Diffusion本地化部署详细攻略&#xff0c;手把手教程&#xff08;建议收藏!!)_stable diffusion 本地部署-CSDN博客 linux本地安装教程 1.前期准备工作 1&#xff09;创建conda环境 conda create --name stable3 python3.10 2&#xff09;下…...

Linux grep技巧 删除含有指定关键词的行,创建新文件

一. 需求 ⏹有如下文件&#xff0c;现要求 删除含有xuecheng关键字的行删除含有192.168.1.1关键字的行也就是说&#xff0c;最终只会留下127.0.0.1 license.sublimehq.com 127.0.0.1 www.xuecheng.com 127.0.0.1 img.xuecheng.com 192.168.1.1 www.test.com 127.0.0.1 video…...

ChatMoney还能写剧本杀?

本文由 ChatMoney团队出品 近年来&#xff0c;剧本杀作为一种新兴社交游戏&#xff0c;收到了越来越多人的喜爱&#xff0c;它不仅需要玩家们发挥自身演技&#xff0c;还需运用逻辑思维推理&#xff0c;分析所获得的线索&#xff0c;找出案件真凶。然而你是否想过&#xff0c;你…...

优化系统小工具

一款利用VB6编写的系统优化小工具&#xff0c;系统优化、桌面优化、清理垃圾、查找文件等功能。 下载:https://download.csdn.net/download/ty5858/89432367...

调幅信号AM的原理与matlab实现

平台&#xff1a;matlab r2021b 本文知识内容摘自《软件无线电原理和应用》 调幅就是使载波的振幅随调制信号的变化规律而变化。用音频信号进行调幅时&#xff0c;其数学表达式可以写为: 式中&#xff0c;为调制音频信号&#xff0c;为调制指数&#xff0c;它的范围在(0&…...

[MySql]两阶段提交

文章目录 什么是binlog使用binlog进行恢复的流程 什么是redolog缓冲池redologredolog结构 两阶段提交 什么是binlog binlog是二进制格式的文件&#xff0c;用于记录用户对数据库的修改&#xff0c;可以作用于主从复制过程中数据同步以及基于时间点的恢复&#xff08;PITR&…...

掌握rpc、grpc并探究内在本质

文章目录 rpc是什么&#xff1f;又如何实现服务通信&#xff1f;理解rpcRPC的通信过程通信协议的选择小结RPC VS Restful net_rpc实践案例net/rpc包介绍创建服务端创建client 看看net_rpc的通信调度实现的内部原理明确目标基于自己实现的角度分析我会怎么做代码分析 grpc介绍与…...

构造,析构,垃圾回收

构造函数 基本概念 在实例化对象时 会调用的用于初始化的函数 如果不写&#xff0c;默认存在一个无参构造函数 构造函数的写法 1.没有返回值 2.函数名和类名必须相同 3.没有特殊需求时&#xff0c;一般都是public的 4.构造函数可以被重载 5.this代表当前调用该函数的对…...

杂记 | 搭建反向代理防止OpenAI API被封禁(对于此次收到邮件提示7月9日后将被屏蔽的解决参考)

文章目录 重要声明&#xff08;免责&#xff09;01 OpenAI封禁API的情况02 解决方案及原理2.1 原因分析2.2 解决方案2.3 步骤概述 03 操作步骤3.1 购买一个海外服务器3.2 申请一个域名3.3 将域名指向代理服务器3.4 在代理服务器上安装nginx3.5 配置反向代理 重要声明&#xff0…...

利用ref实现防抖

结合vue的customRef function debounceRef(value,time1000){ let t return customRef((track,trigger)>{ return { get(){ track() return value; } set(val){ clearTimeout(t) tsetTimeout(()>{ trigger() valueval },time) } } }) }...

SAP ABAP 之OOALV

文章目录 前言一、案例介绍/笔者需求二、SE24 查看类 a.基本属性 Properties b.接口 Interfaces c.友元 Friends d.属性 Attributes e.方法 Methods f.事件 Events g.局部类型 Types …...

构建实用的Flutter文件列表:从简到繁的完美演进

前言&#xff1a;为什么我们需要文件列表&#xff1f; 在现代科技发展迅速的时代&#xff0c;我们的电脑、手机、平板等设备里积累了大量的文件&#xff0c;这些文件可能是我们的照片、文档、音频、视频等等。然而&#xff0c;当文件数量增多时&#xff0c;我们如何快速地找到…...

spring使用@PostConstruct踩得坑

情况说明&#xff1a; 在一个抽象类中使用PostConstruct注解方法init用于初始化操作。然后每个实现类在初始化时都会调用PostConstruct注解的init方法执行初始化操作。如下代码&#xff1a; public abstract class AbstractClass {/*** 存放各实例.*/public static final Map&…...

【Mac】XnViewMP for Mac(图片浏览查看器)及同类型软件介绍

软件介绍 XnViewMP 是一款多功能、跨平台的图像查看和管理软件&#xff0c;适用于 macOS、Windows 和 Linux 系统。它是经典 XnView 软件的增强版本&#xff0c;更加现代化且功能更强大。XnViewMP 支持数百种图像格式&#xff0c;并提供多种图像处理工具&#xff0c;使其成为摄…...

win10修改远程桌面端口,Windows 10下修改远程桌面端口及服务器关闭445端口的操作指南

Windows 10下修改远程桌面端口及服务器关闭445端口的操作指南 一、修改Windows 10远程桌面端口 在Windows 10系统中&#xff0c;远程桌面连接默认使用3389端口。为了安全起见&#xff0c;建议修改此端口以减少潜在的安全风险。以下是修改远程桌面端口的步骤&#xff1a; 1. 打…...

口感探险之旅:勇闯红酒世界,揭秘复杂风味的无尽奥秘

在葡萄酒的浩瀚海洋中&#xff0c;红酒如同一座深邃而迷人的岛屿&#xff0c;等待着勇敢的探险家们去发掘其背后隐藏的奥秘。每一次品尝红酒&#xff0c;都是一次口感的大冒险&#xff0c;让我们在味蕾的舞动中感受那千变万化的风味。今天&#xff0c;就让我们一起踏上这场探索…...

吉时利 Keithley2440 数字源表

Keithley2440吉时利SMU数字源表 Keithley2440 - 40V、5A、50W源表 吉时利数字源表系列专用于要求紧密结合源和测量 的测试应用。全部数字源表型号都提供精密电压源和电 流源以及测量功能。每款数字源表既是高度稳定的直流 电源也是真仪器级的6位半万用表。此电源的特性包括 低…...

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

【笔记】WSL 中 Rust 安装与测试完整记录

#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统&#xff1a;Ubuntu 24.04 LTS (WSL2)架构&#xff1a;x86_64 (GNU/Linux)Rust 版本&#xff1a;rustc 1.87.0 (2025-05-09)Cargo 版本&#xff1a;cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...

Docker拉取MySQL后数据库连接失败的解决方案

在使用Docker部署MySQL时&#xff0c;拉取并启动容器后&#xff0c;有时可能会遇到数据库连接失败的问题。这种问题可能由多种原因导致&#xff0c;包括配置错误、网络设置问题、权限问题等。本文将分析可能的原因&#xff0c;并提供解决方案。 一、确认MySQL容器的运行状态 …...

Modbus RTU与Modbus TCP详解指南

目录 1. Modbus协议基础 1.1 什么是Modbus? 1.2 Modbus协议历史 1.3 Modbus协议族 1.4 Modbus通信模型 🎭 主从架构 🔄 请求响应模式 2. Modbus RTU详解 2.1 RTU是什么? 2.2 RTU物理层 🔌 连接方式 ⚡ 通信参数 2.3 RTU数据帧格式 📦 帧结构详解 🔍…...

6个月Python学习计划 Day 16 - 面向对象编程(OOP)基础

第三周 Day 3 &#x1f3af; 今日目标 理解类&#xff08;class&#xff09;和对象&#xff08;object&#xff09;的关系学会定义类的属性、方法和构造函数&#xff08;init&#xff09;掌握对象的创建与使用初识封装、继承和多态的基本概念&#xff08;预告&#xff09; &a…...

算术操作符与类型转换:从基础到精通

目录 前言&#xff1a;从基础到实践——探索运算符与类型转换的奥秘 算术操作符超级详解 算术操作符&#xff1a;、-、*、/、% 赋值操作符&#xff1a;和复合赋值 单⽬操作符&#xff1a;、--、、- 前言&#xff1a;从基础到实践——探索运算符与类型转换的奥秘 在先前的文…...

LUA+Reids实现库存秒杀预扣减 记录流水 以及自己的思考

目录 lua脚本 记录流水 记录流水的作用 流水什么时候删除 我们在做库存扣减的时候&#xff0c;显示基于Lua脚本和Redis实现的预扣减 这样可以在秒杀扣减的时候保证操作的原子性和高效性 lua脚本 // ... 已有代码 ...Overridepublic InventoryResponse decrease(Inventor…...

el-amap-bezier-curve运用及线弧度设置

文章目录 简介示例线弧度属性主要弧度相关属性其他相关样式属性完整示例链接简介 ‌el-amap-bezier-curve 是 Vue-Amap 组件库中的一个组件,用于在 高德地图 上绘制贝塞尔曲线。‌ 基本用法属性path定义曲线的路径,可以是多个弧线段的组合。stroke-weight线条的宽度。stroke…...