文档动态配置项组件-IkTemplateOfficeConfig

props

名称	类型	说明	默认值
title	String	作为详情页面的标题	模板配置
visible	Boolean	是否显示	false
onlyOfficeConfig	Object	onlyOffice的配置项	{}
isShowTabs	Boolean	是否需要展示tabs	true
isShowSearchCondition	Boolean	是否展示tabs下的搜索条件	true
tabsData	Array	如果展示tabs就需要将对应的数据传过来	[]
tableData	Array	每个tabs下的表格数据块	[] (数据结构可树形,可列表)
documentServerUrl	String	office的文档服务器地址	''
jwtToken	String	onlyOffice的加密token (后台接口获取)	""
contentHeight	String	内容展示区的高度	650px
defaultProps	Object	表格块数据的映射属性	配置选项，详情如下表
isShowTitleOperate	Boolean	数据块的标题是否可编辑，删除	false
isShowContentOperate	Boolean	数据块的内容是否可编辑，删除	false

defaultProps

名称	类型	说明	默认值
name	Sting	指定标签名称	""
children	String	指定子树节点对象的某个属性名称	''
childName	String	指定子树节点的标签名称	""
childId	String	指定子树节点的标签Id	''

事件

名称	说明	参数
handleSearchDataBlock	查询数据块的数据时触发	两个参数, 依次为：当前tabs下搜索条件，和当前tabs所选中的值
handleClickBlockData	当数据块被点击触发	两个参数, 依次为：数据块父元素的详细信息parent和点击当前数据块的信息children

抛出事件

名称	说明	参数
handleSendMessage	将点击的数据块数据加载到onlyOffice中	将需要加载的数据格式传入

示例

TIP

下列示例中的文档id(onlyOfficeFileId) ,token, 文档服务器地址(documentServerUrl),jwtToken(加密token)均为临时测试数据。

vue

<script lang="ts" setup>
import { ref } from "vue";
import IkTemplateOfficeConfig from "@iking-ui/components/IkTemplateOfficeConfig";

const onlyOfficeConfig = ref(null);
const onlyOfficeFileId = ref("15ba05e178c245b4a0d9dbc3a30118b3"); //文档id
const token = ref("Bearer cade90de98094b51a6e92245fd536278"); // 当前登录token
const documentServerUrl = ref("http://192.168.1.124:3080");  // onlyoffice的文档服务器地址
// 文档加密token
const jwtToken = ref('eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJkb2N1bWVudCI6eyJrZXkiOiIxNzA0NDM2MzU2NTQzIiwidXJsIjoiaHR0cDovLzE5Mi4xNjguMS4xMjQ6ODAwMS9zZXJ2ZXIvb3NzL2Rvd25sb2FkP2ZpbGVVcmw9YmU4YWYwYTdlMDBmNGQwODkzN2ViYzBmZWYxMGExNzAifSwiZWRpdG9yQ29uZmlnIjp7ImNhbGxiYWNrVXJsIjoiaHR0cDovLzE5Mi4xNjguMS4xMjQ6ODAwMS9idXNpbmVzcy9yZXBvcnQvc3VtbWFyeS90ZW1wL3VwZGF0ZS80YmExMTAwYmFjZWQ0YzEzODkxYzA5ODE4NmFhNzMyMT90b2tlbj1CZWFyZXIgY2FkZTkwZGU5ODA5NGI1MWE2ZTkyMjQ1ZmQ1MzYyNzgiLCJtb2RlIjoiIiwidXNlciI6eyJncm91cCI6Ikdyb3VwMSIsImlkIjoiNmM4MmUyYmVkMzZiNDE0YzlhMmU0MzlmYmYzMmI3NzQiLCJuYW1lIjoibXkifX19.qqIn52swBCG2UZEg6Wgy56uD6Cm9f6VVRIp5KtbWkKU')
const initOnlyOfficeConfig = () => {
  onlyOfficeConfig.value = {
    documentType: "word",
    document: {
      fileType: "doc",
      key: `${new Date().getTime()}`,
      title: "测试文档",
      lang: "zh-CN",
      url: `http://192.168.1.124:8001/server/oss/download?fileUrl=${onlyOfficeFileId.value}`, //目前为测试地址
    },
    editorConfig: {
      callbackUrl: `http://192.168.1.124:8001/business/summary/office/update/${onlyOfficeFileId.value}?token=${token.value}`, // 保存的回调函数
    },
  };
};
initOnlyOfficeConfig();

// tabs数据
const tabsData = ref([
  { label: "系统数据", id: "0001" },
  { label: "自定义数据", id: "0002" },
]);

// 默认属性
const defaultProps = ref({
  name: 'label', // 子节点
  children: 'children', 
  childName:'label', // 父节点内的属性
  childId:'id'
})

// 系统数据查询
const tableData = ref([]);
const handleSystemSearchData = (searchCondition?: any) => {
 // 树形结构
  tableData.value = [
    {
      label: "时间",
      children: [
        {
          label: "今年",
          id: "currentYear",
        },
        {
          label: "去年",
          id: "lastYear",
        },
        {
          label: "明年",
          id: "nextYear",
        },
        {
          label: "本月",
          id: "currentMonth",
        },
        {
          label: "上月",
          id: "lastMonth",
        },
      ],
    }
  ];
};
handleSystemSearchData("");

// 自定义数据查询
const handleCustomSearchData = (searchCondition?: any) => {
  //列表结构
  tableData.value = [
    {
      children: [
        {
          label: "20%电子招标率",
          id: "6b7db1fb9b754d62bccc0c757d0d0475",
        },
        {
          label: "时间配置",
          id: "468b506d55cd481b8218b461a352fabc",
        },
        {
          label: "项目总投资状态",
          id: "468b506d55cd481b8218b461a352fab3",
        },
      ],
    },
  ];
};

//切换tabs
const handleSearchTabsData = (searchCondition: any, tabsId: any) => {
  if (tabsId === "0001") {
    handleSystemSearchData(searchCondition);
  } else {
    handleCustomSearchData(searchCondition);
  }
};

// 点击数据块获取数据,发送到onlyOffice //根据业务自己的需求调整
const refIkTemplateOfficeConfig = ref(null);
const handleGetBlockData = (parentData: any, children: any) => {
  refIkTemplateOfficeConfig.value.handleSendMessage(
    `{${parentData? parentData.name:children.childName}_${children.childId}}`
  );
};
</script>
<template>
  <div style="height: 700px">
    <p>onlyOffice模板配置</p>
    <IkTemplateOfficeConfig
      ref="refIkTemplateOfficeConfig"
      :tabsData="tabsData"
      :visible="true"
      :tableData="tableData"
      :documentServerUrl="documentServerUrl"
      @handleSearchDataBlock="handleSearchTabsData"
      @handleClickBlockData="handleGetBlockData"
      :onlyOfficeConfig="onlyOfficeConfig"
      :jwtToken='jwtToken'
      :defaultProps="defaultProps"
      :isShowTitleOperate="true"
      :isShowContentOperate="true"
    />
  </div>
</template>
<style scoped lang="scss"></style>

文档动态配置项组件-IkTemplateOfficeConfig ​

props ​

defaultProps ​

事件 ​

抛出事件 ​

示例 ​

文档动态配置项组件-IkTemplateOfficeConfig

props

defaultProps

事件

抛出事件

示例