Skip to content

H
hls-easy-ui
Commit ebdb24cc authored by 王纵's avatar 王纵
Browse files
Options

附件组件开发

parent a16c3377
Hide whitespace changes
Inline Side-by-side
Showing with 345 additions and 31 deletions
src/Dynamic/ConfigRenderComponent/DForm/FormItem/DAttachment.vue 0 → 100644
View file @ ebdb24cc
<!--
* @Author: zong.wang01@hand-china.com
* @Date: 2024-08-01 09:55:12
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-21 15:44:04
* @Version: 1.0.0
* @Description: 动态渲染-附件组件
* @Copyright: Copyright (c) 2021, Hand-RongJing
-->
<template>
<div class="d-attachment">
<div class="attachment-preview" v-for="(file, index) in fileList" :key="file.fileUrl" @click="preview(file)">
<img src="../../../assets/pdf.svg" class="file-type-icon"/>
<div class="file-content">
<div class="file-name">{{file.fileName}}</div>
<div class="file-info">{{file.realName}} {{file.creationDate}}</div>
</div>
<img
v-if="canEdit"
src="../../../assets/delete.svg"
class="file-delete-icon"
@click="(e) => deleteFile(e, file, index)"
/>
</div>
<span v-if="!canEdit && fileList.length === 0">暂无附件信息</span>
<van-uploader
result-type="file"
:before-read="beforeRead"
:after-read="attachmentUpload"
v-if="canEdit"
>
<van-button icon="plus" type="default" block class="upload-btn" style="width: calc(100vw - 24px);" />
</van-uploader>
</div>
</template>
<script>
import { Button, Uploader, ImagePreview, Toast } from 'vant';
import {getAttachUUid, upload, getAttachments, deleteAttachment} from '../../../service';
import {getOrganizationId} from '../../../utils/utils';
export default {
name: 'DAttachment',
components: {
[Uploader.name]: Uploader,
[Button.name]: Button,
[ImagePreview.name]: ImagePreview
},
props: {
modelValue: {
type: String,
default: ''
},
isNew: {
type: Boolean,
default: true
},
attachmentUuid: {
type: String,
default: ''
},
bucketName: {
type: String,
default: ''
},
required: {
type: Boolean,
default: false,
},
canEdit: {
type: Boolean,
default: false,
}
},
data () {
return {
uuid: '',
fileList: [],
imgTypes: ['image/png', 'image/svg+xml']
}
},
watch: {
// attachmentUuid: function(newValue, oldValue) {
// if (newValue !== oldValue) {
// this.uuid = newValue;
// }
// },
// isNew: function(newValue, oldValue) {
// if (newValue !== oldValue) {
// if (!newValue) {
// // 查询附件内容
// this.getAttachments();
// }
// }
// },
},
mounted() {
this.$nextTick(() => {
console.log(this.isNew, this.attachmentUuid)
this.uuid = this.attachmentUuid;
if (this.isNew) {
this.getUuid();
} else {
this.getAttachments();
}
})
},
methods: {
// 获取uuid
async getUuid() {
const response = await getAttachUUid();
this.$emit('getUuidSuccess', response.content);
this.uuid = response.content;
},
attachmentUpload(file) {
const formData = new FormData();
formData.append('attachmentUUID', this.uuid)
formData.append('bucketName', this.bucketName)
formData.append('file', file.file)
upload(formData).then(async res => {
await this.getAttachments();
this.$emit('onUploadSuccess', file, this.fileList);
})
},
async beforeRead(file) {
if (!this.uuid) {
await this.getUuid();
}
return file;
},
async getAttachments() { // 获取附件
const params = {
attachmentUUID: this.attachmentUuid || this.uuid,
bucketName: this.bucketName
}
const res = await getAttachments(params);
this.fileList = res;
this.$emit('getAttachments', this.fileList);
},
deleteFile(e, file, index){ // 删除附件
e.stopPropagation();
e.preventDefault();
console.log('删除')
const params = {
attachmentUUID: this.attachmentUuid || this.uuid,
bucketName: this.bucketName,
tenantId: getOrganizationId()
}
deleteAttachment(params, [file.fileUrl]).then(res => {
this.fileList.splice(index, 1);
this.$emit('getAttachments', this.fileList);
})
},
preview(file) { // 预览
if (this.imgTypes.includes(file.fileType)) {
const images = this.fileList.filter( o => this.imgTypes.includes(o.fileType)).map(e => e.fileUrl);
const index = images.findIndex(o => o === file.fileUrl);
ImagePreview({
images: images,
startPosition: index,
});
} else {
Toast('该文件暂不支持预览！')
}
}
},
}
</script>
<style lang="less" scope>
.d-attachment {
padding-top: 12px;
.attachment-preview {
display: flex;
align-items: center;
background-color: #F8F9FE;
padding: 14px;
margin-bottom: 12px;
.file-type-icon {
width: 50px;
}
.file-content {
flex: 1;
text-align: left;
padding: 0 12px;
.file-name {
font-family: PingFangSC-Medium;
font-size: 14px;
color: #383F45;
}
.file-info {
font-family: PingFangSC-Regular;
font-size: 12px;
color: #33333350;
}
}
.file-delete-icon {
width: 20px;
}
}
.upload-btn {
width: calc(100vw - 24px);
background: #F8F9FE;
height: 76px;
border: 0;
}
}
</style>
src/Dynamic/ConfigRenderComponent/DForm/FormItem/DUrl.vue
View file @ ebdb24cc
......@@ -2,31 +2,33 @@
* @Author: zong.wang01@hand-china.com
* @Date: 2024-08-01 09:55:12
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-19 11:22:26
* @LastEditTime: 2024-08-21 15:44:45
* @Version: 1.0.0
* @Description: 动态渲染-超链接组件
* @Copyright: Copyright (c) 2021, Hand-RongJing
-->
<template>
<van-cell center class="d-form-item d-url" :required="required">
<template #label>
<d-label :label="label" :help="help" />
</template>
<d-custom-render
:getData="getCurrentRecord"
:renderer="renderer"
:fieldConfig="fieldConfig"
>
<div class="d-url-value cell-value">
<img src="../../../assets/url-icon.png" alt="" class="right-icon" />
<a>{{value}}</a>
</div>
</d-custom-render>
<!-- <fragment v-else>
<img src="../../../assets/url-icon.png" alt="" class="right-icon" />
<a>{{value}}</a>
</fragment> -->
</van-cell>
<div :class="`${fieldConfig.dataClass}_form d-form-item`">
<van-cell center class="d-url" :required="required">
<template #label>
<d-label :label="label" :help="help" />
</template>
<d-custom-render
:getData="getCurrentRecord"
:renderer="renderer"
:fieldConfig="fieldConfig"
>
<div class="d-url-value cell-value">
<img src="../../../assets/url-icon.png" alt="" class="right-icon" />
<a>{{value}}</a>
</div>
</d-custom-render>
<!-- <fragment v-else>
<img src="../../../assets/url-icon.png" alt="" class="right-icon" />
<a>{{value}}</a>
</fragment> -->
</van-cell>
</div>
</template>
<script>
......
src/Dynamic/ConfigRenderComponent/DForm/index.vue
View file @ ebdb24cc
......@@ -2,7 +2,7 @@
* @Author: zong.wang01@hand-china.com
* @Date: 2024-07-29 10:51:56
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-20 22:53:12
* @LastEditTime: 2024-08-21 15:43:25
* @Version: 1.0.0
* @Description: 表单渲染
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -115,7 +115,7 @@
:name="field.columnName"
:label="field.description"
:help="field.help"
:renderer="field.renderer"
:renderer="formType === 'tableForm' ? field.formRenderer : field.renderer"
:fieldConfig="field"
:disabled="readOnly || field.readOnly"
:required="field.required"
......@@ -343,7 +343,7 @@ export default {
});
return fieldsValue;
}
return this.fieldsObj;
return {...this.fieldsObj, _status: this.status};
},
setFieldsValue(fieldsValue) {
this.fieldsObj = {...this.fieldsObj, ...fieldsValue};
......
src/Dynamic/ConfigRenderComponent/LayoutBuilder.jsx
View file @ ebdb24cc
......@@ -2,7 +2,7 @@
* @Author: zong.wang01@hand-china.com
* @Date: 2024-07-30 21:21:37
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-16 10:01:26
* @LastEditTime: 2024-08-21 15:42:05
* @Version: 1.0.0
* @Description:
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -96,7 +96,8 @@ export class ColumnBuilder extends BaseBuilder {
getCustomizedRenderer(columnName) {
const currentRenderers = this.getCurrentRenderers(columnName, this.componentRenderers);
let renderer = currentRenderers.length > 0 ? currentRenderers[0].renderer : undefined;
return { renderer };
let formRenderer = currentRenderers.length > 0 ? currentRenderers[0].formRenderer : undefined;
return { renderer, formRenderer };
}
getCurrentRenderers(columnName, renderers) {
......@@ -185,6 +186,8 @@ export class ColumnBuilder extends BaseBuilder {
required: field.inputModeDisplay === "REQUIRED",
clearFlag: field.clearButton === 'Y',
renderer: customizedRenderer.renderer,
formRenderer: customizedRenderer.formRenderer,
dataClass: `${this.layoutCode}-${this.tabCode}-${field.columnName}`.toLowerCase(),
}
});
// return newFields;
......
src/Dynamic/assets/delete.svg 0 → 100644
View file @ ebdb24cc
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>删除备份 4</title>
<g id="整理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="附件、超链接" transform="translate(-319.000000, -790.000000)" fill-rule="nonzero">
<g id="编组-4" transform="translate(22.000000, 761.000000)">
<g id="删除备份-4" transform="translate(297.000000, 29.000000)">
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="20" height="20"></rect>
<path d="M0.128247511,9.9984573 C0.128247511,13.5242158 2.00916209,16.7821661 5.06255271,18.5450555 C8.11594334,20.3079449 11.8778859,20.3079449 14.9312765,18.5450555 C17.9846671,16.7821661 19.8655817,13.5242158 19.8655817,9.9984573 C19.8655817,6.47269875 17.9846671,3.21474849 14.9312765,1.45185909 C11.8778859,-0.311030307 8.11594334,-0.311030307 5.06255271,1.45185909 C2.00916209,3.21474849 0.128247511,6.47269875 0.128247511,9.9984573 Z" id="路径" fill="#EC5F5F"></path>
<path d="M14.2331753,10.8772834 L5.76013964,10.8772834 C5.27521686,10.8772834 4.88182776,10.4838943 4.88182776,9.99897153 C4.88182776,9.51404875 5.27521686,9.12065965 5.76013964,9.12065965 L14.2336895,9.12065965 C14.7186123,9.12065965 15.1120014,9.51404875 15.1120014,9.99897153 C15.1120014,10.4838943 14.7186123,10.8772834 14.2331753,10.8772834 L14.2331753,10.8772834 Z" id="路径" fill="#FFFDFD"></path>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/Dynamic/assets/pdf.svg 0 → 100644
View file @ ebdb24cc
<?xml version="1.0" encoding="UTF-8"?>
<svg width="50px" height="50px" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>PDF</title>
<g id="整理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="附件、超链接" transform="translate(-36.000000, -775.000000)">
<g id="编组-4" transform="translate(22.000000, 761.000000)">
<g id="PDF" transform="translate(14.000000, 14.000000)">
<rect id="矩形" x="0" y="0" width="50" height="50"></rect>
<g id="Pdf" transform="translate(3.000000, 1.000000)" fill-rule="nonzero">
<path d="M40.4797978,42.5238131 C40.4797978,43.1173924 40.2428257,43.6866602 39.8210797,44.1063842 C39.3993337,44.5261081 38.8273234,44.7619066 38.2308845,44.7619066 L6.74662669,44.7619066 C6.1501878,44.7619066 5.5781775,44.5261081 5.15643152,44.1063842 C4.73468555,43.6866602 4.49775114,43.1173924 4.49775114,42.5238131 L4.49775114,2.23813094 C4.49775114,1.64455165 4.73468555,1.07528381 5.15643152,0.655559865 C5.5781775,0.235835917 6.1501878,0 6.74662669,0 L26.0644678,0 C26.6622256,-0.00340194813 27.2367642,0.230143652 27.6611694,0.649084563 L39.8275862,12.7571702 C40.2485454,13.1795405 40.4832161,13.7513246 40.4797978,14.3462165 L40.4797978,42.5238131 L40.4797978,42.5238131 Z" id="路径" fill="#EBECF0"></path>
<path d="M40.4797601,42.5238131 L40.4797601,44.7619066 C40.4797601,45.3554859 40.2428257,45.9247537 39.8210797,46.3444776 C39.3993337,46.7642016 38.8273234,47 38.2308845,47 L6.74662669,47 C5.50460702,47 4.49775114,45.9979714 4.49775114,44.7619066 L4.49775114,42.5238131 C4.49775114,43.1173924 4.73468555,43.6866602 5.15643152,44.1063842 C5.5781775,44.5261081 6.1501878,44.7619066 6.74662669,44.7619066 L38.2308845,44.7619066 C38.8273234,44.7619066 39.3993337,44.5261081 39.8210797,44.1063842 C40.2428257,43.6866602 40.4797601,43.1173924 40.4797601,42.5238131 L40.4797601,42.5238131 Z" id="路径" fill="#C1C7D0"></path>
<path d="M0,24.6190655 L44.9775112,24.6190655 L44.9775112,35.8095327 C44.9775112,36.403112 44.7405768,36.9723798 44.3188308,37.3921038 C43.8970849,37.8118277 43.3250746,38.0476262 42.7286357,38.0476262 L2.24887555,38.0476262 C1.65243666,38.0476262 1.08042636,37.8118277 0.658680381,37.3921038 C0.236934404,36.9723798 0,36.403112 0,35.8095327 L0,24.6190655 L0,24.6190655 Z" id="路径" fill="#FF5630"></path>
<path d="M4.49775114,24.6190655 L4.49775114,20.1428785 L0,24.6190655 L4.49775114,24.6190655 Z M40.4797601,24.6190655 L40.5247376,20.1428785 L45,24.6190655 L40.4797601,24.6190655 Z" id="形状" fill="#DE350B"></path>
<path d="M11.2443778,26.8571589 L15.1574213,26.8571589 C15.8731951,26.8238425 16.5716617,27.082491 17.0914543,27.5733488 C17.5904628,28.0702365 17.8593128,28.7513009 17.8335832,29.4533473 C17.8566013,30.1549309 17.5881597,30.8349605 17.0914543,31.3333458 C16.5532152,31.8405623 15.8303537,32.1073046 15.089955,32.0719167 L12.8410795,32.0719167 L12.8410795,35.5857234 L11.2443778,35.5857234 L11.2443778,26.8571589 Z M12.7511245,30.6171559 L14.7751124,30.6171559 C15.193486,30.649898 15.6113515,30.5478941 15.9670165,30.3262038 C16.2260019,30.0941595 16.3594362,29.7538735 16.3268366,29.4085855 C16.3268366,28.6476337 15.8245877,28.2671578 14.8200899,28.2671578 L12.7511245,28.2671578 L12.7511245,30.6171559 Z M18.9355322,26.9914445 L22.4887556,26.9914445 C23.5198269,26.9481413 24.5140912,27.3769235 25.1874063,28.1552531 C25.89871,29.0412282 26.2587805,30.1560768 26.1994003,31.288584 C26.2489542,32.4334123 25.9081677,33.5612921 25.2323838,34.4890576 C24.5884114,35.3475176 23.5647776,35.8401801 22.4887556,35.8095327 L18.9355322,35.8095327 L18.9355322,26.9914445 Z M20.4422789,34.2876292 L22.4887556,34.2876292 C23.1383831,34.3109611 23.7589338,34.0188645 24.1529235,33.5042965 C24.5860955,32.8659952 24.7919483,32.1016878 24.7376312,31.3333458 C24.8125728,30.5355326 24.5882817,29.7383334 24.107946,29.0952523 C23.6713344,28.600419 23.0379035,28.3220632 22.3763118,28.3343006 L20.4422789,28.3343006 L20.4422789,34.2876292 Z M33.7331334,28.4014434 L29.077961,28.4014434 L29.077961,30.4828703 L33.7331334,30.4828703 L33.7331334,31.9152501 L29.077961,31.9152501 L29.077961,35.6752471 L27.5712144,35.6752471 L27.5712144,26.9466826 L33.7331334,26.9466826 L33.7331334,28.4014434 Z" id="形状" fill="#FFFFFF"></path>
<path d="M40.4797601,14.3462165 L40.4797601,14.6595496 L28.3133433,14.6595496 C27.0713236,14.6595496 26.0644678,13.657521 26.0644678,12.4214561 L26.0644678,0 C26.6622256,-0.00340194813 27.2367642,0.230143652 27.6611694,0.649084563 L39.8500749,12.7571702 C40.2628079,13.1831735 40.4892116,13.7545161 40.4797601,14.3462165 L40.4797601,14.3462165 Z" id="路径" fill="#C1C7D0"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/Dynamic/index.js 0 → 100644
View file @ ebdb24cc
/*
* @Author: zong.wang01@hand-china.com
* @Date: 2024-08-21 09:26:09
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-21 09:38:02
* @Version: 1.0.0
* @Description:
* @Copyright: Copyright (c) 2021, Hand-RongJing
*/
import Dynamic from './index.vue';
import {
getFormValuesByTabCode,
getRefByTabCode,
getOrganizationId,
getCurrentUser
} from './utils/utils';
import DAttachment from './ConfigRenderComponent/DForm/FormItem/DAttachment.vue';
const DUtils = {
getFormValuesByTabCode,
getRefByTabCode,
getOrganizationId,
getCurrentUser
}
export {
Dynamic,
DAttachment,
DUtils
}
\ No newline at end of file
src/Dynamic/service.js
View file @ ebdb24cc
......@@ -2,12 +2,12 @@
* @Author: zong.wang01@hand-china.com
* @Date: 2024-08-09 10:54:02
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-19 11:08:33
* @LastEditTime: 2024-08-21 15:38:30
* @Version: 1.0.0
* @Description: 页面配置请求
* @Copyright: Copyright (c) 2021, Hand-RongJing
*/
import {getOrganizationId} from './utils/utils';
import {getOrganizationId, isTenantRoleLevel} from './utils/utils';
import hlsHttp from './utils/hlsHttp'
export async function query(layoutCode, param) {
......@@ -93,3 +93,25 @@ export function deleteTableRecords(destroyUrl, dataSetName, params) {
export function save(params) {
return hlsHttp.post(`/hllc/v1/${getOrganizationId()}/dynamic-crud/save`, params);
}
// ---------附件相关接口-------
// 获取uuid
export function getAttachUUid() {
return hlsHttp.post(`/hfle/v1/${getOrganizationId()}/files/uuid`);
}
// 附件上传
export function upload(params) {
return hlsHttp.post(`/hfle/v1/${getOrganizationId()}/files/attachment/multipart`, params);
}
// 查询附件
export function getAttachments(params) {
const tenantId = getOrganizationId();
return hlsHttp.get(`/hfle/v1/${isTenantRoleLevel() ? `${tenantId}/` : ''}files/${params.attachmentUUID}/file`, params);
}
// 删除附件
export function deleteAttachment(params, data) {
return hlsHttp.post(`/hfle/v1/${getOrganizationId()}/files/delete-by-uuidurl`, data, params);
}
src/Dynamic/utils/hlsHttp.js
View file @ ebdb24cc
......@@ -2,7 +2,7 @@
* @Author: zong.wang01@hand-china.com
* @Date: 2024-07-29 16:36:23
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-16 15:50:20
* @LastEditTime: 2024-08-21 15:45:23
* @Version: 1.0.0
* @Description:
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -167,7 +167,7 @@ export function get (url, param = {}) {
})
}
// post请求
export function post (url, param = {}) {
export function post (url, param = {}, queryParams = {}) {
param.user_id = window.localStorage.user_id
param.access_token = window.localStorage.access_token
let headers = {}
......@@ -194,6 +194,7 @@ export function post (url, param = {}) {
headers: headers,
url: baseUrl + url,
data: param,
params: queryParams
}).then(res => {
resolve(res)
}).catch(err => {
......
src/Dynamic/utils/utils.js
View file @ ebdb24cc
......@@ -2,7 +2,7 @@
* @Author: zong.wang01@hand-china.com
* @Date: 2024-07-30 14:39:47
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-20 22:55:32
* @LastEditTime: 2024-08-21 15:45:48
* @Version: 1.0.0
* @Description: 工具类
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -173,6 +173,15 @@ const getCurrentUser = () => {
};
/**
* 判断角色层级是否是租户层级
*/
const isTenantRoleLevel = () => {
const { currentRoleLevel } = getCurrentUser();
return currentRoleLevel !== 'site';
}
export {
getCustomizedProp,
getCustomized,
......@@ -183,5 +192,6 @@ export {
getFormValuesByTabCode,
getRefByTabCode,
getOrganizationId,
getCurrentUser
getCurrentUser,
isTenantRoleLevel
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment