工作记录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. 展开或折叠树形表格

展开全部

折叠全部

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);
      }
      // 获取到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;
  }
}