让企业管理更智慧、更快捷

Skip to content
源代码提交（4）
隐藏空白变更内容
行内 左右并排
src/plugins/vxe-table/renderer/el-hoc.js
浏览文件 @ c1a5fc31
......@@ -25,22 +25,24 @@ function renderSolts(h, slots, params, data) {
const slotsKey = Object.keys(slots)
return [
slotsKey.map(v => {
if(typeof slots[v] === 'string') {
return slots[v]
}
if(typeof slots[v] === 'function') {
let slotNode = slots[v](h, params, data)
if(typeof slotNode !== 'string') {
if(!slotNode.data) XEUtils.set(slotNode, 'data', {})
slotNode.data.slot = v
}
return slotNode
}
const slotChild = renderChild(h, slots[v], params, data)
let slotNode = h("template", slotChild)
XEUtils.set(slotNode, 'data', {
slot: v
})
return slotNode
})
]
}
}
// 渲染子组件
function renderChild(h, child, params, data) {
if(typeof child === 'function') {
return [child(h, params, data)]
} else {
return child
}
}
// 默认Hoc模板
function renderHocTemplate (h, renderOpts, params, data, property, renderName) {
const cellValue = XEUtils.get(data, property)
......@@ -55,7 +57,7 @@ function renderHocTemplate (h, renderOpts, params, data, property, renderName) {
}
const { $table, $rowIndex } = params // 解构
const { hocName, field = "value", updateValue, props, attrs, className, events, scopedSlots, slot, slots, ref } = deaultRenderOpts
const { hocName, field = "value", updateValue, props, attrs, className, events, scopedSlots, slot, slots, ref, tooltip } = deaultRenderOpts
const propsOpts = typeof props === 'function' ? props(data, params, property) || {} : (props || {})
const eventsOpts = typeof events === 'function' ? events(data, params, property) || {} : (events || {})
const { changeCb } = eventsOpts
......@@ -78,6 +80,38 @@ function renderHocTemplate (h, renderOpts, params, data, property, renderName) {
})
},
}
let tooltipList = []
const defaultTooltopClass = "mt-2 text-color-secondary text-sm"
if(tooltip) {
if(typeof tooltip === 'string') {
tooltipList.push({
text: tooltip,
class: defaultTooltopClass
})
} else if(Array.isArray(tooltip)) { // 数组
tooltipList = tooltip.map(item => {
return {
text: item.text || item,
class: item.class || defaultTooltopClass
}
})
} else if(typeof tooltip === 'object'){ // 对象
const { text, class:tooltipClass } = tooltip
if(Array.isArray(text)) {
tooltipList = text.map((item, index) => {
return {
text: item,
class: (Array.isArray(tooltipClass) ? tooltipClass[index] : tooltipClass) || defaultTooltopClass
}
})
} else {
tooltipList.push({
text: text,
class: tooltipClass || defaultTooltopClass
})
}
}
}
return [
h(hocName, {
class: className,
......@@ -96,7 +130,12 @@ function renderHocTemplate (h, renderOpts, params, data, property, renderName) {
scopedSlots: scopedSlots,
slot: slot,
ref: ref
}, slots ? renderSolts(h, slots, params, data) : null)
}, slots ? renderSolts(h, slots, params, data) : null),
tooltipList.length > 0 ? tooltipList.map(item => {
return h("div", {
class: item.class
}, renderChild(h, item.text, params, data))
}) : null
];
}
......
src/stories/changelog.stories.mdx
浏览文件 @ c1a5fc31
......@@ -7,6 +7,16 @@
`优化`
`新特性`
`非兼容性更新`
---
### **v0.1.40 20211022**
#### 新增
- 新增 hoc render `tooltip` 属性-可自定义组件提示信息
#### 优化
- 优化 hoc render `solts` 属性-兼容更多类型自定义slots
---
### **v0.1.39 20210926**
......
src/stories/render/hoc.stories.js
浏览文件 @ c1a5fc31
......@@ -52,17 +52,75 @@ HocTpl.args = {
{ title: null, span: 24, itemRender: { name: 'ElHoc', hocName: "lwc-editor-quill", props: { customUpload: true } } },
{ title: null, span: 24, itemRender: { name: 'ElHoc', hocName: "el-button", props: { type: "primary" },
slots: "确认" } },
{ title: "输入框", span: 24, itemRender: { name: 'ElHoc', hocName: "el-input",
attrs: {
placeholder: "primary"
},
slots: {
suffix: (h) => {
return h("i", {
class: "el-input__icon el-icon-date"
})
{ title: "输入框", span: 24, itemRender: {
name: 'ElHoc',
hocName: "el-input",
attrs: {
placeholder: "primary"
},
slots: {
suffix: (h) => {
return h("i", {
class: "el-input__icon el-icon-date"
})
},
append: (h, params, data) => {
return [
h("el-button", {
props: {
type: "text", size: "small", icon: "el-icon-document"
},
attrs: {
title: "详情"
},
on: {
click() {
}
}
}, "详情"),
h("el-divider", {
props: {
direction: "vertical"
}
}),
h("el-button", {
props: {
type: "text", size: "small", icon: "el-icon-thumb"
},
attrs: {
title: "测试",
},
on: {
click() {
}
}
}, "测试"),
]
},
prepend: () => {
return "1213"
}
},
tooltip: {
text: [
232121,
(h) => {
return "sjsdsa"
},
(h) => {
return h("div", 12121213)
},
(h) => {
return [
h("div", 123),
h("div", 23334),
]
},
],
// class: "text-color-main"
}
}
} }
]
};
......
src/stories/select/dialog/index.stories.js
浏览文件 @ c1a5fc31
......@@ -53,7 +53,10 @@ let data = [
export const Default = Template.bind({});
Default.storyName = "Object单选";
Default.args = {
value: {},
value: {
id: 5,
username: "555"
},
optionProps: {
id: "id",
name: "username",
......
src/stories/select/dialog/src/index.js
浏览文件 @ c1a5fc31
......@@ -371,6 +371,7 @@ export default {
this.selectList = []
this.selectValue = this.multiple ? val.map(v => { return v[this.optionProps["id"]] }) : val[this.optionProps["id"]]
this.selectList = this.multiple ? val : [val]
this.initStatus = true
} else {
this.selectValue = val
// 判断是否初始化
......
src/stories/select/down-table/index.stories.js
浏览文件 @ c1a5fc31
......@@ -47,7 +47,10 @@ let data = [
export const Default = Template.bind({});
Default.storyName = "Object单选"
Default.args = {
value: {},
value: {
id: 5,
username: "1233"
},
optionProps: {
id: "id",
name: "username"
......
src/stories/select/down-table/src/index.js
浏览文件 @ c1a5fc31
......@@ -352,6 +352,7 @@ export default {
this.selectList = []
this.selectValue = this.multiple ? val.map(v => { return v[this.optionProps["id"]] }) : val[this.optionProps["id"]]
this.selectList = this.multiple ? val : [val]
this.initStatus = true
} else {
this.selectValue = val
// 判断是否需要初始化并且是否初始化完成
......
src/stories/table/basic/index.stories.js
浏览文件 @ c1a5fc31
......@@ -161,25 +161,25 @@ DefaultList.args = {
printConfig: {},
importConfig: {},
exportConfig: {},
// pagerConfig: {
// currentPage: 1,
// pageSize: 5,
// className: 'relative',
// slots: {
// left: ({ $grid }, h) => {
// const { $createElement } = $grid
// return $createElement('div', {
// class: ['left-4', 'absolute', 'top-2/4', '-translate-y-1/2'],
// style: { left: '12px' }
// }, [
// $createElement('el-button', {
// }, '设为已读'),
// $createElement('el-button', {
// }, '全部已读'),
// ])
// }
// }
// },
pagerConfig: {
currentPage: 1,
pageSize: 5,
className: 'relative',
slots: {
left: ({ $grid }, h) => {
const { $createElement } = $grid
return $createElement('div', {
class: ['left-4', 'absolute', 'top-2/4', '-translate-y-1/2'],
style: { left: '12px' }
}, [
$createElement('el-button', {
}, '设为已读'),
$createElement('el-button', {
}, '全部已读'),
])
}
}
},
editConfig: {
trigger: "click",
mode: "row",
......@@ -287,7 +287,7 @@ DefaultList.args = {
},
columns: [
{ type: "checkbox", width: 50 },
{ type: "seq", width: 60 },
// { type: "seq", width: 60 },
{ field: "id", title: "ID", visible: false },
{ field: "name", title: "Name", editRender: { name: "input" } },
{ field: "nickname", title: "Nickname", editRender: { name: "input" } },
......@@ -312,13 +312,14 @@ DefaultList.args = {
},
},
proxyConfig: {
// props: {
// result: "pageList", // 配置响应结果列表字段
// total: "totalRowCount", // 配置响应结果总页数字段
// },
props: {
result: "pageList", // 配置响应结果列表字段
total: "totalRowCount", // 配置响应结果总页数字段
},
ajax: {
// 接收 Promise 对象
query: async ({ page, sorts, filters, $grid }) => {
console.log("page", page)
let filterData = data.filter((v) => {
return v.name.indexOf($grid.formConfig.data.name || "") >= 0;
});
......@@ -331,7 +332,7 @@ DefaultList.args = {
}),
totalRowCount: filterData.length,
};
return obj.pageList;
// return obj.pageList;
return await getData(obj);
},
},
......@@ -413,7 +414,7 @@ DefaultExpand.args = {
// { field: 'email', title: '邮件', className: "w-1/3 md:w-1/3 sm:w-1/2", itemRender: { name: 'ElInput', props: { placeholder: '请输入邮件' } } },
{ field: 'nickname', title: '昵称', className: "w-1/3 md:w-1/3 sm:w-1/2", folding: true, itemRender: { name: 'ElInput', props: { placeholder: '请输入昵称' } } },
{ field: 'role', title: '角色', className: "w-1/3 md:w-1/3 sm:w-1/2", folding: true, itemRender: { name: 'ElInput', props: { placeholder: '请输入角色' } } },
{ field: 'sex', title: '性别', className: "w-1/3 md:w-1/3 sm:w-1/2", folding: true, titleSuffix: { message: '注意，必填信息！', icon: 'fa fa-info-circle' }, itemRender: { name: 'ElSelect', options: [] } },
{ field: 'sex', title: '性别', className: "w-1/3 md:w-1/3 sm:w-1/2", folding: true, titleSuffix: { message: '注意，必填信息！', icon: 'fa fa-info-circle' }, itemRender: { name: 'ElSelect', props: { multiple: true }, options: [] } },
{ field: 'age', title: '年龄', className: "w-1/3 md:w-1/3 sm:w-1/2", folding: true, itemRender: { name: 'ElInput', props: { type: 'number', min: 1, max: 120, placeholder: '请输入年龄' } } },
{ className: "float-right", align: 'right', itemRender: { name: '$buttons', children: [{ props: { type: 'submit', content: '搜索', status: 'primary' } }, { props: { type: 'reset', content: '重置' } }] } },
{ className: "float-right pr-0", align: 'right', collapseNode: true }
......
src/stories/table/basic/src/index.js
浏览文件 @ c1a5fc31
......@@ -31,14 +31,9 @@ const renderCard = (h, cardConfig, contentConfig, _vm) => {
let $grid = _vm.getTableGrid()
$grid.tablePage.currentPage = currentPage
$grid.tablePage.pageSize = pageSize
// 若搜索参数有修改 修改表单页码到第一页
if(JSON.stringify(_vm.lastFormData) !== JSON.stringify($grid.formConfig.data)) {
$grid.tablePage.currentPage = 1
_vm.lastFormData = $grid.formConfig.data
}
_vm.pageChange($grid.tablePage.currentPage, $grid.tablePage.pageSize)
if(proxyConfig) {
_vm.loadTableData();
_vm.refreshTableData();
// _vm.$refs[_vm.gridTable].commitProxy("query")
}
}
......@@ -282,11 +277,6 @@ const renderTable = (h, contentConfig, formConfig, _vm) => {
ref: _vm.gridTable,
on: {
"page-change": ({ currentPage, pageSize, $grid }) => {
// 若搜索参数有修改 修改表单页码到第一页
if(JSON.stringify(_vm.lastFormData) !== JSON.stringify($grid.formConfig.data)) {
$grid.tablePage.currentPage = 1
_vm.lastFormData = $grid.formConfig.data
}
_vm.pageChange($grid.tablePage.currentPage, $grid.tablePage.pageSize)
},
...events
......@@ -347,8 +337,6 @@ export default {
tableColumns: [],
formData: {},
btnType: "init",
lastFormData: {},
setFormData: false,
defaultGridConfig: {},
loading: true
}
......@@ -408,11 +396,6 @@ export default {
}
this.$emit('form-reset', Object.assign(formData))
}
// 设置最后一次的表单搜索参数
if(this.setFormData) {
this.setFormData = false
this.lastFormData = formData
}
}
return formData
......@@ -510,9 +493,20 @@ export default {
/**
* @Author: TangLiangcheng
* @Date: 2021-06-08 10:40:36
* @Desc: 加载表格数据
* @Desc: 加载表格数据，回到第一页
*/
async loadTableData() {
this.loading = true;
this.$refs[this.gridTable].commitProxy("reload").then((res) => {
this.loading = false;
})
},
/**
* @Author: TangLiangcheng
* @Date: 2021-06-08 10:40:36
* @Desc: 刷新当前页面
*/
async refreshTableData() {
this.loading = true;
this.$refs[this.gridTable].commitProxy("query").then((res) => {
this.loading = false;
......@@ -543,7 +537,6 @@ export default {
on: {
submit: () => {
_this.btnType = "submit"
_this.setFormData = true
_this.$nextTick(() => {
_this.loadTableData();
// _this.$refs[_this.gridTable].commitProxy("reload")
......@@ -551,7 +544,6 @@ export default {
},
reset: () => {
_this.btnType = "reset"
_this.setFormData = true
_this.$nextTick(() => {
_this.loadTableData();
// _this.$refs[_this.gridTable].commitProxy("reload")
......
src/stories/timeline/approve-info/src/index.js
浏览文件 @ c1a5fc31
......@@ -50,7 +50,7 @@ function renderTimeLineItem(h, _vm) {
scopedSlots: {
default: () => {
return h("div", {
class: "border bg-theme-primary border-theme-primary px-4 py-2 bg-opacity-5 border-opacity-10",
class: `border ${getFormData(_vm.itemProps.pass || "pass", day) ? "bg-theme-primary border-theme-primary" : "bg-theme-danger border-theme-danger"} px-4 py-2 bg-opacity-5 border-opacity-10`,
style: {
"--bg-opacity": 0.05,
"--border-opacity": 0.10,
......@@ -99,7 +99,8 @@ export default {
return {
date: "date",
title: "title",
note: "note"
note: "note",
pass: "pass",
}
}
}
......

致力于帮助企业简化企业管理与运营管理