0.2.2 • Published 2 years ago
ousu-ui v0.2.2
ousu-ui
瓯速前端PC端UI组件库
一、查询组件
- 配置文档
methods: "handleQuerys", //向父组件传递数据的方法名称
size: "small", //表单项尺寸,可选值medium / small / mini
isBorder: false, //是否有边框
buttonCenter: false, //按钮是否居中
queryListStyles: null, //父容器样式配置
itemStyles: null, //搜索项样式配置
inputBtStyles: null, //表单项标题样式配置
buttonBoxStyles: null, //按钮容器配置
buttonWrap: false, //按钮容器是否断行
isAdvanced: false, //是否高级搜索- 组件用法
export const querysBase = {
methods: "handleOpt",
inputList: {
username: {
title: "用户名称", //表单标题
type: "input", //表单类型
placeholder: "请输入用户名称", //提示文字
value: "",
callback: "watch",
},
level: {
title: "用户等级",
type: "select",
placeholder: "请选择用户等级",
value: "",
callback: "watch",
options: [
{
dicKey: 1,
dicValue: "白金会员",
},
{
dicKey: 2,
dicValue: "钻石会员",
},
], //下拉选项
},
cascader: {
title: "级联菜单",
type: "cascader",
placeholder: "请选择级联菜单",
value: "",
options: cascaderOptions,
},
switch: {
title: "是否冻结",
type: "switch",
placeholder: "请选择是否冻结",
value: false,
},
radio: {
title: "用户性别",
type: "radio",
placeholder: "请选择是否冻结",
value: "",
options: [
{
dicKey: 1,
dicValue: "先生",
},
{
dicKey: 2,
dicValue: "女士",
},
],
},
},
};
<ousu-querys :querys="querys" @handleOpt="handleOpt"></ousu-querys>二、表格组件
- 配置文档
methods: "handleOpt",
align: "center",
height: "100%", //Table的高度，默认为自动高度。
stripe: false, //是否为斑马纹table
border: false, //是否带有纵向边框
size: "medium", //Table 的尺寸,medium / small / mini
fit: true, //列的宽度是否自撑开
"show-header": true, //是否显示表头
column: [],
...this.tables,
page: {
pageIndex: 1,
pageSize: 20,
total: 20,
...this.tables.page,
},
options: {
isFull: true, //是否全屏
isPage: true, //是否分页
isFullNoPage: false, //全屏无分页
...this.tables.options,
}- 组件用法
export const tablesBase = {
loading: false,
column: [
{
label: "序号",
width: "80",
type: "index",
},
{
label: "用户名",
prop: "username",
},
{
label: "姓名",
prop: "realname",
},
{
label: "手机号",
prop: "mobile",
},
{
label: "创建人",
prop: "create_user",
width: 160,
},
{
label: "创建时间",
prop: "create_time",
width: 160,
formatter: (row) => {
return window.$UtilFun.dateFormat(row.create_time, "dateTime");
},
},
{
label: "操作",
slot: "handle",
width: 150,
},
],
tableData: [],
height: 300, //表格固定高度
page: {
pageIndex: 1,
pageSize: 20,
total: 0,
},
options: {
isFull: false,
},
parameter: {},
};
<ousu-tables @page="handlePage" :tables="tables">
<template #handle="{ row }">
<ousu-buttons :buttons="recordButtons" :isPermi="true" :row="row" @handleOpt="handleOpt"></ousu-buttons>
</template>
</ousu-tables>三、表单组件
- 配置文档
formsStyles: {}, //表单样式属性
labelWidth: "120px", //表单域标签的宽度
inline: true, //行内表单模式
labelPosition: "", //表单域标签的位置
labelSuffix: "：", //表单域标签的后缀
hideRequiredAsterisk: false, //是否隐藏必填字段的标签旁边的红色星号
showMessage: true, //是否显示校验错误信息
inlineMessage: false, //是否以行内形式展示校验信息
statusIcon: false, //是否在输入框中显示校验结果反馈图标
validateOnRuleChange: true, //是否在 rules 属性改变后立即触发一次验证
size: "default", //用于控制该表单内组件的尺寸;medium / small / mini
disabled: false, //是否禁用该表单内的所有组件
isBtnBg: true, //按钮是否有背景颜色
isBtnCustom: false, //是否自定义按钮
...this.forms,- 组件用法
export const formsBase = {
methods: "handleOpt",
isBtnBg: false,
formsStyles: {
width: "1000px",
},
inputList: {
username: {
label: "用户名称",
type: "input",
placeholder: "请输入用户名",
value: "admins",
verify: {
fun: "verifyUserName",
},
},
birthday: {
label: "出生日期",
type: "date",
placeholder: "请选择出生日期",
value: "",
"value-format": "yyyy-MM-DD",
},
idCard: {
label: "身份证号",
type: "input",
placeholder: "请输入身份证号",
value: "",
verify: {
fun: "verifyIdentity",
options: {
required: false,
},
},
},
mobile: {
label: "手机号码",
type: "input",
placeholder: "请输入手机号码",
value: "",
verify: {
fun: "verifyMobile",
options: {
required: false,
},
},
},
email: {
label: "电子邮箱",
type: "input",
placeholder: "请输入电子邮箱",
value: "",
verify: {
fun: "verifyEmail",
options: {
required: false,
},
},
},
realname: {
label: "中文名称",
type: "input",
placeholder: "请输入中文名称",
value: "",
verify: {
fun: "verifyCh",
options: {
required: false,
},
},
},
gender: {
label: "用户性别",
type: "radio",
placeholder: "请选择性别",
value: 1,
options: [
{
dicKey: 1,
dicValue: "先生",
},
{
dicKey: 2,
dicValue: "女士",
},
{
dicKey: 3,
dicValue: "保密",
},
],
},
type: {
label: "用户类型",
type: "select",
placeholder: "请选择用户类型",
value: "",
options: [
{
dicKey: 1,
dicValue: "政府用户",
},
{
dicKey: 2,
dicValue: "平台用户",
},
{
dicKey: 3,
dicValue: "企业用户",
},
],
},
label: {
label: "个性标签",
type: "checkbox",
placeholder: "请选择个性标签",
value: [],
options: [
{
dicKey: 1,
dicValue: "五官端正",
},
{
dicKey: 2,
dicValue: "文艺青年",
},
{
dicKey: 3,
dicValue: "毒舌特质",
},
{
dicKey: 4,
dicValue: "帅气俊朗",
},
{
dicKey: 5,
dicValue: "校花校草",
},
{
dicKey: 6,
dicValue: "闷骚",
},
],
},
areas: {
label: "所在地区",
type: "cascader",
placeholder: "请选择所在地区",
value: 2,
options: cascaderOptions,
},
vip: {
label: "开启会员",
type: "switch",
placeholder: "请选择是否开启会员",
value: false,
},
avatar: {
label: "用户头像",
type: "upload",
placeholder: "请上传用户头像",
value: [],
},
password: {
label: "登录密码",
type: "input",
placeholder: "请输入登录密码",
value: "a123456",
"input-type": "password",
verify: {
fun: "verifyPwd",
},
},
passwords: {
label: "确认密码",
type: "input",
placeholder: "请输入确认密码",
value: "a123456",
"input-type": "password",
verify: {
fun: "verifyPwds",
options: { dependency: "password" },
},
},
},
};
<ousu-forms :forms="forms" :isDialog="false" @handleOpt="handleOpt"></ousu-forms>四、详情组件
- 配置文档
detailStyles: {}, //容器样式配置
border: true, //是否有边框
...this.options,- 组件用法
export const detailBase = {
detailStyles: {
width: "1000px",
},
border: true,
column: [
[
{
type: "label",
label: "用户名称：",
width: 150,
},
{
type: "prop",
prop: "username",
width: 350,
},
{
type: "label",
label: "出生日期：",
width: 150,
},
{
type: "prop",
prop: "birthday",
width: 350,
formatter: (row) => {
return window.$UtilFun.dateFormat(row);
},
},
],
[
{
type: "label",
label: "身份证号码：",
width: 150,
},
{
type: "prop",
prop: "idCard",
width: 350,
},
{
type: "label",
label: "手机号码：",
width: 150,
},
{
type: "prop",
prop: "mobile",
width: 350,
},
],
[
{
type: "label",
label: "电子邮箱：",
width: 150,
},
{
type: "prop",
prop: "email",
width: 350,
},
{
type: "label",
label: "真实姓名：",
width: 150,
},
{
type: "prop",
prop: "realname",
width: 350,
},
],
[
{
type: "label",
label: "用户性别：",
width: 150,
},
{
type: "prop",
prop: "gender",
width: 350,
},
{
type: "label",
label: "用户类型：",
width: 150,
},
{
type: "prop",
prop: "type",
width: 350,
},
],
[
{
type: "label",
label: "个性标签：",
width: 150,
},
{
type: "prop",
prop: "label",
width: 350,
formatter: (row) => {
return row.join();
},
},
{
type: "label",
label: "所在地区：",
width: 150,
},
{
type: "prop",
prop: "area",
width: 350,
},
],
[
{
type: "label",
label: "用户头像：",
width: 150,
},
{
type: "image",
prop: "avatar",
width: 350,
colspan: 3,
options: { fit: "contain" }, //el-image属性配置
},
],
],
};
<ousu-detail :options="detailOptions" :detailData="detailData"></ousu-detail>五、列表组件
- 配置文档
props: {
options: Object,//配置文件
columns: Array,//字段属性集合
rowsData: Array,//列表数据
idName: String,//唯一ID名称
},
isTitle: true, //是否有标题
isAni: false, //是否有动画
isBorder: false, //是否是边框
isSelected: false, //是否选中
duration: 100, //动画速度
...this.options,- 组件用法
export const baseColumns = [
{
prop: "time",
label: "时间",
styles: {
width: "20%",
},
},
{
prop: "name",
label: "姓名",
styles: {
width: "20%",
},
},
{
prop: "workType",
label: "工种",
styles: {
width: "20%",
},
},
{
prop: "groupName",
label: "班组",
styles: {
width: "20%",
},
},
{
prop: "dirct",
label: "状态",
slot: "status",
styles: {
width: "20%",
},
},
];
<ousu-rows :columns="columns" :rowsData="rowsData" :options="{ isAni: true }" idName="rowsBase">
<template #status="{ row }">
<span :style="{ color: row.dirct == 1 ? '#ff0000' : '#ff9900' }">{{row.dirct == 1 ? "进" : "出"}}</span>
</template>
</ousu-rows>