dd_jsapi

调用

<script setup lang="ts">
import { departmentsPicker } from "@/utils/lib/dd";
import { ref } from "vue";
interface DdDepartment {
  id: number;
  name: string;
  number: number;
}
interface DdDepartmentsPicker {
  departments: DdDepartment[] | [];
  departmentsCount: number;
  userCount: number;
}
const selectedNames = ref("");
const { origin, pathname } = window.location;
const handleDeptSelect = async () => {
  const url = origin + pathname;
  const res = await departmentsPicker(url, false);
  console.log("[selected_res]: ", res);
  const { departments, departmentsCount, userCount } =
    res as DdDepartmentsPicker;
  selectedNames.value = departments.map((dep) => dep.name).join(",");
};
</script>
<template>
  <div @click="handleDeptSelect">
    <div class="px-4 py-2 rounded-lg bg-gray-100 text-sm">
      {{ selectedNames ? selectedNames : "点击选择部门" }}
    </div>
  </div>
</template>

"@/utils/lib/dd.ts"

import * as dd from "dingtalk-jsapi";
import { jsApiSign } from "@/api/user";
// 获取jsapi 签名


// 权限列表
// 必填，需要使用的jsapi列表，注意：不要带dd。
const jsApiList = [
  "runtime.info",
  "biz.contact.choose",
  "device.notification.confirm",
  "device.notification.alert",
  "device.notification.prompt",
  "biz.ding.post",
  "biz.util.openLink",
  "biz.contact.departmentsPicker",
];

//url 是调用页面的url 地址，调用上面列出的api 的时候需要先获取签名再调用

const jsApiSignFn = async (url: string) => {
  const res = await jsApiSign(url);
  console.log("jsapisign compleate");
  if ((res as any).code != 0) return;
  const { timeStamp, nonceStr, signature } = res.data as any;
  dd.config({
    agentId: "1821409866", // 必填，微应用ID
    corpId: "ding88cff6d07a158230", //必填，企业ID
    timeStamp: timeStamp, // 必填，生成签名的时间戳
    nonceStr: nonceStr, // 必填，自定义固定字符串。
    signature: signature, // 必填，签名
    type: 0, //选填。0表示微应用的jsapi,1表示服务窗的jsapi；不填默认为0。该参数从dingtalk.js的0.8.3版本开始支持
    jsApiList,
  });
  dd.error(function (err) {
    alert("dd error: " + JSON.stringify(err));
  });
  console.log("签名完成");
};

export const departmentsPicker = async (
  url: string,
  multiple: boolean = true,
  title: string = "选择部门"
) => {
  // 先去签名
  await jsApiSignFn(url);
  return new Promise((resolve, reject) => {
    console.log("departmentsPicker 调用");
    dd.biz.contact.departmentsPicker({
      title,
      corpId: "ding88cff6d07a158230",
      multiple,
      limitTips: "超出了",
      maxDepartments: 100,
      pickedDepartments: [],
      disabledDepartments: [],
      requiredDepartments: [],
      appId: "ding2zajegp3gjv0adpw",
      permissionType: "GLOBAL",
      onSuccess: function (res: any) {
        // 调用成功时回调
        resolve(res);
      },
      onFail: function (err: any) {
        // 调用失败时回调
        reject(err);
      },
    });
  });
};