platform-render-component-web v0.0.1

platform-render-component-web

前端组件库vue3版本

项目中使用

下载platform-render-component-web

npm i platform-render-component-web

全局注册platform-render-component-web组件

import PlatformWebComponentV3 from 'platform-render-component-web'
createApp(App).use(PlatformWebComponentV3,{
    $global,
    $axios,
    $api: {
        platformApi: 平台API,
	    applicationApi: 应用API
    },
    useMenuStore,
    useDictStore,
    useUserStore
})

组件目录

1. 卡片组件
2. 部门级联选择器组件
3. 描述列表组件
4. 弹窗组件
5. 人员弹窗选择组件
6. 抽屉组件
7. 表单组件
8. 表单表格组件
9. 附件在线预览组件
10. 页面列表组件
11. 表格组件
12. jsx组件
13. 动态组件
14. svg组件
15. 上传组件

卡片组件Card

Props

Slots

例子

<Card title="卡片标题">
    ...
</Card>
<Card>
    <template #title>
        ...
    </template>
    ...
</Card>

部门级联选择器组件DepartmentCascader

Props

Events

例子

<DepartmentCascader v-model="formData.departmentValue" v-model:options="formData.departmentList" multiple></DepartmentCascader>

描述列表组件Description

Props

例子

<Description :formData="formData" :descriptionColumn="descriptionColumn" v-loading="loading">
    <template #file>
        ...
    </template>
</Description>

const formData = ref({});
const showPo = ref(false);
const descriptionColumn = [
    { field: 'value',label: '标题'},
    { field: 'value',show: showPo,label: 'PO号' },
    { field: 'value',dictType: 'deliveryOrderBusinessType',label: '商机阶段' },
    { componentName: markRaw(Upload),field: 'accessory',label: '附件',span: 24,disabled: true },
    { slot: 'file',label: '插槽'},
    { label: 'VNode',
        render: (h,params) => {
            return h('el-button',{
                link: true,
                type: 'primary',
                onClick: () => {
                    ...
                }
            },'预览')
        }
    },
]

弹窗组件Dialog

Props

Slots

例子

<Dialog v-model="dialogValue" title="弹窗标题">
    ...
</Dialog>

人员弹窗选择组件Person

Props

Events

例子：

<Person v-model="showPersonDialog" type="radio" @confirm="handlePersonConfirm"></Person>

抽屉组件Drawer

Props

Slots

例子

<Drawer v-model="drawerValue" title="抽屉标题">
    ...
</Drawer>

表单组件Form

Props

Slots

事件

例子

<Form ref="FormRef" :formData="formData" :formColumn="formColumn" v-loading="loading">
    <template #file>
        ...
    </template>
</Description>

const formData = ref({});
const show = ref(false);
const formColumn = [
    { field: 'value',label: '标题',required: true,props: {},on: {}},
    { field: 'value',label: '隐藏',show: show},
    { field: 'value',label: '禁用',disabled: true},
    { componentName: 'el-select',field: 'value',dictType: 'dictType',label: '字典' },
    { componentName: 'el-select',field: 'value',optionList: [{code: 'code',name: 'name'}],label: '字典' },
    { slot: 'file',field: 'file',label: '插槽'}
]

表单表格组件FormTable

Props

Slots

使用default插槽后，tableColumn将无效

事件

例子

<FormTable :loading="loading" canAdd :tableData="formData.contactEntityList" tableField="contactEntityList" :tableColumn="tableColumn" :formData="formData">
    <template #slotHeaderName>
        ...
    </template>
    <template #slotName="{ row }">
        ...
    </template>
</FormTable>

const formData = ref({contactEntityList: []});
const tableData = ref([]);
const tableColumn = [
    { type: 'index',label: '序号',width: 60,fixed: 'left' },
    { prop: 'name',label: 'VNode',minWidth: 160,fixed: 'left',
        render: (h,params) => {
            return h('el-button',{
                link: true,
                type: 'primary',
                onClick: () => {
                    
                }
            },params.row.name)
        }
    },
    { slotHeader: 'slotHeaderName',prop: 'name',label: '标题插槽',minWidth: 100 },
    { slot: 'slotName',prop: 'slotName',label: '插槽',minWidth: 100 },
]

附件在线预览组件OnlinePreview

不支持 .xls和 .doc格式文件，如有需要，可自行转换成 .xlsx 或 .docx格式

Props

例子

<OnlinePreview v-model="showOnlinePreview" :title="onlinePreviewTitle" :src="onlinePreviewSrc"></OnlinePreview>

页面列表组件PageList

Props

Slots

事件

例子

<PageList ref="PageList" :searchForm="searchForm" :searchColumn="searchColumn" :tableData="tableData" :tableColumn="tableColumn" v-model:currentPage="currentPage" v-model:pageSize="pageSize" :total="total" :loading="loading" @load="load">
    <template #file>
        ...
    </template>
    <template #btnLeft>
        <el-button type="primary"><el-icon><i-ep-Plus /></el-icon>新增客户</el-button>
        <el-button type="primary"><el-icon><i-ep-Refresh /></el-icon>刷新</el-button>
        <el-button type="primary"><el-icon><i-ep-Upload /></el-icon>导入</el-button>
    </template>
    <template #slotHeaderName>
        ...
    </template>
    <template #slotName="{ row }">
        ...
    </template>
    ...
</PageList>

const searchForm = ref({});
const descriptionColumn = [
    { componentName: 'el-select',span: 6,label: '客户性质',field: 'goodsCode',dictType: 'deliveryOrderBusinessType',props: {},on: {}},
    { slot: 'file',label: '插槽'},
]
const tableData = ref([]);
const tableColumn = [
    { type: 'index',label: '序号',width: 60,fixed: 'left' },
    { prop: 'name',label: 'VNode',minWidth: 160,fixed: 'left',
        render: (h,params) => {
            return h('el-button',{
                link: true,
                type: 'primary',
                onClick: () => {
                    
                }
            },params.row.name)
        }
    },
    { slotHeader: 'slotHeaderName',prop: 'name',label: '标题插槽',minWidth: 100 },
    { slot: 'slotName',prop: 'slotName',label: '插槽',minWidth: 100 },
]

表格组件PageTable

Props

Slots

使用default插槽后，tableColumn将无效

Events

事件

例子

<PageTable :tableData="tableData" :tableColumn="tableColumn" :loading="loading" v-model:currentPage="currentPage" v-model:pageSize="pageSize" :total="total" @load="load">
    <template #slotHeaderName>
        ...
    </template>
    <template #slotName="{ row }">
        ...
    </template>
</PageTable>

<PageTable canAdd :onAdd="handleAddTable" :tableData="tableData" :tableColumn="tableColumn" :showPagination="false">
    <template #slotHeaderName>
        ...
    </template>
    <template #slotName="{ row }">
        ...
    </template>
</PageTable>

const tableData = ref([]);
const tableColumn = [
    { type: 'index',label: '序号',width: 60,fixed: 'left' },
    { prop: 'name',label: 'VNode',minWidth: 160,fixed: 'left',
        render: (h,params) => {
            return h('el-button',{
                link: true,
                type: 'primary',
                onClick: () => {
                    
                }
            },params.row.name)
        }
    },
    { slotHeader: 'slotHeaderName',prop: 'name',label: '标题插槽',minWidth: 100 },
    { slot: 'slotName',prop: 'slotName',label: '插槽',minWidth: 100 },
]

JSX组件Render

Props

例子

<Render :render="render" v-bind="props" />

动态组件RenderComponent

Props

Slots

组件内部已导入el-input , el-select , el-date-picker , el-button 组件，is属性可以是以上字符串，除此之外，is属性需为Object<Component>类型

例子

<RenderComponent v-model="value" is="el-input"></RenderComponent>

svg组件SvgIcon

Props

搭配vite-plugin-svg-icons插件使用，指定svg图标所在文件夹

例子

<SvgIcon name="icon-no-found"></SvgIcon>

上传组件Upload

Props

Slots

事件

例子

<Upload v-model="list" listType="picture-card"></Upload>