inl-app-manager v1.0.0-rc.157
inl-card 使用文档
编辑引用
用户自定义卡片
main.ts
import { createApp } from "vue";
// 引入inl-cards
import cards from "inl-card-v2/cards";
import "inl-card-v2/style.css";
import "inl-card-v2/iconfont.js";
// 项目主页
import main from "./index";
// 用户自定义卡片
import customCards from "./customCards";
import "./index.css";
const app = createApp(main);
// 把自带卡片和自定义卡片同时注册进去
app.use(customCards).use(cards).mount("#inl-card");
customCards(文件夹)
index.ts
import { App } from "vue"; import { cardCompInfo } from "inl-card-v2"; import cc from "./customCard";
const comp = cc; const components: Record<string, cardCompInfo> = {}; for (let i of comp) { componentsi.linkName = { comp: i.comp, cname: i.cname, linkName: i.linkName, tags: i.tags, }; } export default { install(app: App) { for (let i of comp) { app.component(i.linkName, i.comp); } }, cards: components, version: "0.0.1", };
> >
> > `customCard.tsx`
> >
``` ts
import { defineComponent } from "vue";
// 引入相关类型和默认组件
import {
cardBox,
createCardProps,
cardDefComponent,
cardTags,
cardHead,
cardBody,
} from "inl-card-v2";
const linkName = "inl-card-cdc";
const componentDetail = {
cname: "用户自定义卡片一",
linkName,
tags: [cardTags.anquan],
};
const props = createCardProps({});
const customCard = defineComponent({
props,
components: {
cardBox,
cardHead,
cardBody,
},
setup(props, ctx) {
return () => (
<cardBox
vSlots={{
// 卡片身体部分
cardBody: () => (
<cardBody
vSlots={{
customCardBody: () => <>asd</>,
}}
/>
),
// 卡片头部
cardHead: () => <cardHead title={componentDetail.cname} />,
}}
/>
);
},
});
export default cardDefComponent(customCard, componentDetail);
index.tsx
import { defineComponent } from "vue";
import { cardEditor } from "inl-card-v2";
import customCards from "./customCards";
const components: Record<string, any> = {
cardEditor,
};
export default defineComponent({
components,
setup() {
const save = () => {
console.info("保存回调");
};
return () => (
<>
<cardEditor
onSaveCallback={save}
customCards={customCards.cards}
currentRecord={{
id: "479278807188275200",
createUser: "2",
createDt: "2023-04-03T05:22:52.000+00:00",
updateUser: "2",
updateDt: "2023-04-03T05:53:34.000+00:00",
pageName: "页面名称77",
pageDetail: 'pagejson'
}}
/>
</>
);
},
});
预览引用
import {productionComponent, cardEditor, PageInfo} from 'inl-card-v2';
import {defineComponent} from 'vue';
// componentProps
const props = {
pageInfo: {
type: Object as PropType<pageInfo>,
},
customCards: {
type: Object as PropType<Record<string, cardCompInfo>>,
default: {},
},
}
// use
export default defineComponent({
components: {
defineComponent
},
setup() {
const pageInfo: PageInfo;
return <>
<defineComponent customCards={} pageInfo={pageInfo} />
</>
}
})
通过IU+PC查询点地址和点数据(接口一)
用于应用中心的动态表格和状态属性首次查询。
export const getPointData = async (params: { instanceIdList: string[]; propertyCodeList: string[]; thingCode?: string; // 只查询同一类物模型 }): Promise< Array<{ instanceId: string; propertyIdAndPointInfo: Record< string, { pointCode: string | null; value: string | boolean } ; }> => { return await instance.post( "/mtip/thing/v2/thingInstAdapter/getPrePointCodeAndValueByIuPC", params ); };
9 days ago
9 days ago
11 days ago
12 days ago
12 days ago
16 days ago
17 days ago
22 days ago
22 days ago
23 days ago
23 days ago
24 days ago
24 days ago
27 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
7 months ago
8 months ago
8 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago