工作记录2 - 技术栈

要实现y轴超出部分滚动的效果，可以这样写
当后端接口还没好的时候，可以自己模拟一下接口返回的数据

export const getCommodityDetail = (id) =>
Promise.resolve({
id: '11111',
name: 'xiongxinyu',
age: 18
})
标签可能会只有父级标签，也有可能会有父级标签和子级标签（子级标签可能有一个或多个），因为存在父级标签和子级标签的区别，所以操作上就会有所不同，这一点可以通过接口返回的层级数据来判断，如果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;
}
展开或折叠树形表格

<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);
      }
    }
  })
}

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

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

复制代码

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

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

复制代码

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

联系在线客服

首先通过调用接口获取机构在机构端对客服的一些配置，可以选择配置客服的方式（有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);
      }
      // 获取到requestChat
      if(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方法来转换字符串到DOM
    var 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;
  }
}