dbsd_kczx/src/utils/common/renderUtils.ts

176 lines
4.4 KiB
TypeScript
Raw Normal View History

2022-03-10 09:47:29 +08:00
import { h } from 'vue';
2022-06-10 10:44:44 +08:00
import { Avatar, Tag, Tooltip } from 'ant-design-vue';
2022-03-10 09:47:29 +08:00
import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
import { Tinymce } from '/@/components/Tinymce';
import Icon from '/@/components/Icon';
import { getDictItemsByCode } from '/@/utils/dict/index';
import { filterMultiDictText } from '/@/utils/dict/JDictSelectUtil.js';
2022-06-10 10:44:44 +08:00
import { isEmpty } from '/@/utils/is';
import { useMessage } from '/@/hooks/web/useMessage';
const { createMessage } = useMessage();
2022-03-10 09:47:29 +08:00
const render = {
/**
*
*/
renderAvatar: ({ record }) => {
if (record.avatar) {
let avatarList = record.avatar.split(',');
2022-06-10 10:44:44 +08:00
return h(
'span',
avatarList.map((item) => {
return h(Avatar, {
src: getFileAccessHttpUrl(item),
shape: 'square',
size: 'default',
style: { marginRight: '5px' },
});
2022-06-10 10:44:44 +08:00
})
);
2022-03-10 09:47:29 +08:00
} else {
2022-06-10 10:44:44 +08:00
return h(
Avatar,
{ shape: 'square', size: 'default' },
{
icon: () => h(Icon, { icon: 'ant-design:file-image-outlined', size: 30 }),
}
);
2022-03-10 09:47:29 +08:00
}
},
/**
*
* @param v
* @param code
* @param renderTag 使tag渲染
*/
2022-06-10 10:44:44 +08:00
renderDict: (v, code, renderTag = false) => {
2022-03-10 09:47:29 +08:00
let text = '';
let array = getDictItemsByCode(code) || [];
2022-06-10 10:44:44 +08:00
let obj = array.filter((item) => {
2022-03-10 09:47:29 +08:00
return item.value == v;
});
if (obj.length > 0) {
text = obj[0].text;
}
2022-06-10 10:44:44 +08:00
return isEmpty(text) || !renderTag ? h('span', text) : h(Tag, text);
2022-03-10 09:47:29 +08:00
},
/**
*
* @param text
*/
2022-06-10 10:44:44 +08:00
renderImage: ({ text }) => {
if (!text) {
//update-begin-author:taoyan date:2022-5-24 for: VUEN-1084 【vue3】online表单测试发现的新问题 41、生成的代码树默认图大小未改
2022-06-10 10:44:44 +08:00
return h(
Avatar,
{ shape: 'square', size: 25 },
2022-06-10 10:44:44 +08:00
{
icon: () => h(Icon, { icon: 'ant-design:file-image-outlined', size: 25 }),
2022-06-10 10:44:44 +08:00
}
);
2022-03-10 09:47:29 +08:00
}
let avatarList = text.split(',');
2022-06-10 10:44:44 +08:00
return h(
'span',
avatarList.map((item) => {
return h(Avatar, {
src: getFileAccessHttpUrl(item),
shape: 'square',
size: 25,
style: { marginRight: '5px' },
});
2022-06-10 10:44:44 +08:00
})
);
//update-end-author:taoyan date:2022-5-24 for: VUEN-1084 【vue3】online表单测试发现的新问题 41、生成的代码树默认图大小未改
2022-03-10 09:47:29 +08:00
},
/**
* Tooltip
* @param text
* @param len
*/
2022-06-10 10:44:44 +08:00
renderTip: (text, len = 20) => {
if (text) {
let showText = text + '';
if (showText.length > len) {
showText = showText.substr(0, len) + '...';
2022-03-10 09:47:29 +08:00
}
2022-06-10 10:44:44 +08:00
return h(Tooltip, { title: text }, () => showText);
2022-03-10 09:47:29 +08:00
}
return text;
},
/**
* a标签
* @param text
*/
2022-06-10 10:44:44 +08:00
renderHref: ({ text }) => {
if (!text) {
return '';
2022-03-10 09:47:29 +08:00
}
2022-06-10 10:44:44 +08:00
const len = 20;
if (text.length > len) {
text = text.substr(0, len);
2022-03-10 09:47:29 +08:00
}
2022-06-10 10:44:44 +08:00
return h('a', { href: text, target: '_blank' }, text);
2022-03-10 09:47:29 +08:00
},
/**
*
* @param v
* @param array
*/
2022-06-10 10:44:44 +08:00
renderDictNative: (v, array, renderTag = false) => {
2022-03-10 09:47:29 +08:00
let text = '';
let color = '';
2022-06-10 10:44:44 +08:00
let obj = array.filter((item) => {
2022-03-10 09:47:29 +08:00
return item.value == v;
});
if (obj.length > 0) {
text = obj[0].label;
color = obj[0].color;
}
2022-06-10 10:44:44 +08:00
return isEmpty(text) || !renderTag ? h('span', text) : h(Tag, { color }, () => text);
2022-03-10 09:47:29 +08:00
},
/**
*
*/
renderTinymce: ({ model, field }) => {
return h(Tinymce, {
showImageUpload: false,
height: 300,
value: model[field],
onChange: (value: string) => {
model[field] = value;
},
});
},
renderSwitch: (text, arr) => {
2022-06-10 10:44:44 +08:00
return text ? filterMultiDictText(arr, text) : '';
2022-03-10 09:47:29 +08:00
},
renderCategoryTree: (text, code) => {
2022-06-10 10:44:44 +08:00
let array = getDictItemsByCode(code);
return filterMultiDictText(array, text);
},
renderTag(text, color) {
return isEmpty(text) ? h('span', text) : h(Tag, { color }, () => text);
2022-03-10 09:47:29 +08:00
},
};
/**
*
*/
function downloadFile(url) {
if (!url) {
createMessage.warning('未知的文件');
return;
}
if (url.indexOf(',') > 0) {
url = url.substring(0, url.indexOf(','));
}
url = getFileAccessHttpUrl(url.split(',')[0]);
if (url) {
window.open(url);
}
}
export { render, downloadFile };