renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/feature/0915_素材中心新增手动上传' into test

Browse Source
This commit is contained in:
rd
2025-09-22 11:23:49 +08:00
parent 6840da9987 d4f82dbc3e
commit 280d66f677
9 changed files with 188 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/styles/components/ant-input.scss
View File

@ -27,7 +27,7 @@
&:focus-within, &:focus-within,
&.ant-input-focus, &.ant-input-focus,
&.ant-textarea-focus { &.ant-textarea-focus {
background-color: var(--color-bg-2) !important; background-color: #fff !important;
border-color: $color-primary !important; border-color: $color-primary !important;
box-shadow: 0 0 0 0 var(--color-primary-light-2) !important; box-shadow: 0 0 0 0 var(--color-primary-light-2) !important;
} }

6
src/styles/components/ant-modal.scss
View File

@ -41,6 +41,12 @@
.ant-modal-confirm-body-wrapper { .ant-modal-confirm-body-wrapper {
.ant-modal-confirm-title { .ant-modal-confirm-title {
font-family: $font-family-medium;
font-weight: 500;
color: #211F24;
font-size: 16px;
font-style: normal;
line-height: 24px;
.anticon { .anticon {
font-size: 24px; font-size: 24px;
} }

33
src/styles/components/ant-select.scss
View File

@ -27,13 +27,28 @@
.ant-select-arrow { .ant-select-arrow {
color: #737478; color: #737478;
//font-size: 14px;
.anticon {
&.anticon-down {
color: #737478;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.9629 5.5L11.1379 4.67504L7.01314 8.79983L2.88835 4.67504L2.0634 5.5L6.60063 10.0372C6.60063 10.0372 6.60066 10.0373 7.01314 9.62479L6.60063 10.0372L7.01314 10.4497L11.9629 5.5Z' fill='%23737478'/%3E%3C/svg%3E");
background-size: 14px;
width: 14px;
height: 14px;
background-repeat: no-repeat;
background-position: center right;
> svg {
display: none;
}
}
}
} }
&:focus, &:focus,
&-focused { &-focused {
.ant-select-selector { .ant-select-selector {
background-color: var(--color-bg-2) !important; background-color: #fff !important;
border-color: rgb(var(--primary-6)) !important; border-color: $color-primary !important;
box-shadow: 0 0 0 0 var(--color-primary-light-2) !important; box-shadow: 0 0 0 0 var(--color-primary-light-2) !important;
} }
} }
@ -44,7 +59,7 @@
&:not(.ant-select-disabled) { &:not(.ant-select-disabled) {
&:hover { &:hover {
.ant-select-selector { .ant-select-selector {
border-color: rgb(var(--primary-6)) !important; border-color: $color-primary !important;
} }
} }
} }
@ -55,6 +70,16 @@
} }
} }
&.ant-select-open {
.ant-select-arrow {
.anticon {
&.anticon-down {
transform: rotate(180deg);
}
}
}
}
} }
.ant-select { .ant-select {

42
src/styles/components/ant-table.scss
View File

@ -56,20 +56,40 @@
} }
.ant-table-bordered { .ant-table-bordered {
.ant-table-container { .ant-table-container {
.ant-table-thead { .ant-table-content {
.ant-table-cell { > table {
border-inline-end: none !important ; border-top: none !important;
border-bottom: 1px solid var(--Border-1, #d7d7d9);
} .ant-table-thead {
} .ant-table-cell {
.ant-table-tbody { border-inline-end: none !important;
.ant-table-row { border-bottom: 1px solid var(--Border-1, #d7d7d9);
.ant-table-cell { }
border-inline-end: none !important;
border-bottom: 1px solid var(--Border-1, #e6e6e8); .ant-table-cell-fix-right-first {
&::after {
border-inline-end: none !important;
}
}
}
.ant-table-tbody {
.ant-table-row {
.ant-table-cell {
border-inline-end: none !important;
border-bottom: 1px solid var(--Border-1, #e6e6e8);
}
.ant-table-cell-fix-right-first {
&::after {
border-inline-end: none !important;
}
}
}
} }
} }
} }
} }
} }
} }

2
src/styles/components/ant-textarea.scss
View File

@ -6,7 +6,7 @@
&:not(.ant-input-textarea-disabled) { &:not(.ant-input-textarea-disabled) {
&:hover { &:hover {
.ant-input { .ant-input {
border-color: rgb(var(--primary-6)) !important; border-color: $color-primary !important;
} }
} }
} }

2
src/utils/tools.ts
View File

@ -120,7 +120,7 @@ export function formatFileSize(bytes: number): string {
if (bytes === 0) return '0 Bytes'; if (bytes === 0) return '0 Bytes';
const k = 1024; const k = 1024;
const sizes = ['Bytes', 'kb', 'mb', 'gb', 'tb']; const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
const i = Math.floor(Math.log(bytes) / Math.log(k)); const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]; return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];

32
src/views/material-center/components/raw-material/components/add-raw-material-drawer/index.vue
View File

@ -19,7 +19,7 @@ import {
documentExtensions, documentExtensions,
} from '@/views/material-center/components/raw-material/constants'; } from '@/views/material-center/components/raw-material/constants';
import icon1 from '@/assets/img/media-account/icon-delete.png'; // import icon1 from '@/assets/img/media-account/icon-delete.png';
import icon2 from '../../img/icon-no-text.png'; import icon2 from '../../img/icon-no-text.png';
enum EnumUploadStatus { enum EnumUploadStatus {
@ -186,7 +186,7 @@ export default defineComponent({
const currentData = { const currentData = {
uid, uid,
name, name: name.slice(0, 20),
// type, // type,
type: fileType, type: fileType,
uploadStatus: statusText ? EnumUploadStatus.error : EnumUploadStatus.uploading, uploadStatus: statusText ? EnumUploadStatus.error : EnumUploadStatus.uploading,
@ -263,7 +263,7 @@ export default defineComponent({
if (hasUploading) { if (hasUploading) {
modalRef.value = Modal.warning({ modalRef.value = Modal.warning({
title: '上传未完成', title: '上传未完成',
content: <p class="h-22px">当前原料正在上传中，关闭弹窗将导致上传失败，请等待上传完成后再点击“确定”</p>, content: <p>当前原料正在上传中，关闭弹窗将导致上传失败，请等待上传完成后再点击“确定”</p>,
okText: '我知道了', okText: '我知道了',
centered: true, centered: true,
}); });
@ -312,7 +312,7 @@ export default defineComponent({
const renderUploadStatus = (record) => { const renderUploadStatus = (record) => {
if (record.uploadStatus === EnumUploadStatus.error) { if (record.uploadStatus === EnumUploadStatus.error) {
return ( return (
<div> <div class="w-100px">
<p class="upload-text">上传失败</p> <p class="upload-text">上传失败</p>
<p class="upload-text !color-#F64B31">{record.statusText}</p> <p class="upload-text !color-#F64B31">{record.statusText}</p>
</div> </div>
@ -320,9 +320,7 @@ export default defineComponent({
} }
return ( return (
<div> <div>
<span class="upload-text ml-26px"> <p class="upload-text w-100px">{record.uploadStatus === EnumUploadStatus.done ? '上传成功' : '上传中'}</p>
{record.uploadStatus === EnumUploadStatus.done ? '上传成功' : '上传中'}
</span>
<Progress percent={record.percent} class="m-0 p-0 " /> <Progress percent={record.percent} class="m-0 p-0 " />
</div> </div>
); );
@ -340,7 +338,7 @@ export default defineComponent({
ref="tableRef" ref="tableRef"
dataSource={uploadData.value} dataSource={uploadData.value}
pagination={false} pagination={false}
class="w-100% flex-1" class="w-100% flex-1 overflow-hidden"
scroll={{ y: '100%' }} scroll={{ y: '100%' }}
> >
<Column <Column
@ -352,15 +350,16 @@ export default defineComponent({
customRender={({ text, record }) => { customRender={({ text, record }) => {
return ( return (
<div class="flex items-center justify-end"> <div class="flex items-center justify-end">
<ImgLazyLoad width={64} height={64} src={record.cover} class="!rounded-6px mr-16px flex-shrink-0" /> <ImgLazyLoad width={64} height={64} src={record.cover} class="!rounded-8px mr-16px flex-shrink-0" />
<TextArea <TextArea
v-model:value={record.name} v-model:value={record.name}
placeholder="请输入文件名称" placeholder="请输入文件名称"
size="large" size="large"
class="w-full !h-72px" class="w-full !h-72px no-resize"
showCount showCount
maxlength={20} maxlength={20}
autoSize={false}
/> />
</div> </div>
); );
@ -458,12 +457,9 @@ export default defineComponent({
customRender={({ text, record }) => { customRender={({ text, record }) => {
return ( return (
<div class="flex items-center justify-end"> <div class="flex items-center justify-end">
<img <icon-delete
alt="" class="mr-8px color-#737478 cursor-pointer"
class="cursor-pointer" size="14"
src={icon1}
width="14"
height="14"
onClick={() => openDeleteModal(record)} onClick={() => openDeleteModal(record)}
/> />
</div> </div>
@ -482,7 +478,7 @@ export default defineComponent({
<Drawer <Drawer
width={1100} width={1100}
title="上传到原料库" title="上传到原料库"
rootClassName="xt-add-raw-material-modal" rootClassName="xt-add-raw-material-drawer"
v-model:open={visible.value} v-model:open={visible.value}
onClose={onClose} onClose={onClose}
maskClosable={false} maskClosable={false}
@ -510,7 +506,7 @@ export default defineComponent({
<span class="cts">点击或拖拽文件到此处上传</span> <span class="cts">点击或拖拽文件到此处上传</span>
</div> </div>
</Upload> </Upload>
<p class="mb-4px cts !color-#939499 !text-12px !lh-20px">{`视频格式：视频格式：MP4、AVI、MOV，大小<1000MB`}</p> <p class="mb-4px cts !color-#939499 !text-12px !lh-20px">{`视频格式：MP4、AVI、MOV，大小<1000MB`}</p>
<p class="mb-4px cts !color-#939499 !text-12px !lh-20px">{`图片格式：PNG、JPG、JPEG、GIF、WEBP、BMP，大小<20MB`}</p> <p class="mb-4px cts !color-#939499 !text-12px !lh-20px">{`图片格式：PNG、JPG、JPEG、GIF、WEBP、BMP，大小<20MB`}</p>
<p class="cts !color-#939499 !text-12px !lh-20px">{`文本格式：TXT、DOC、DOCX、PDF，大小<20MB`}</p> <p class="cts !color-#939499 !text-12px !lh-20px">{`文本格式：TXT、DOC、DOCX、PDF，大小<20MB`}</p>
</div> </div>

175
src/views/material-center/components/raw-material/components/add-raw-material-drawer/style.scss
View File

@ -1,110 +1,133 @@
.xt-add-raw-material-modal { .xt-add-raw-material-drawer {
.ant-drawer-header { .ant-drawer-content {
height: 58px; border-radius: 16px 0 0 16px;
border-bottom: none;
}
.ant-upload { .ant-drawer-header {
width: 100%; height: 58px;
} border-bottom: none;
.ant-select {
//.ant-select-selection-overflow-item {
// max-width: 50%;
//}
}
.ant-drawer-body {
padding: 0;
display: flex;
flex-direction: column;
.cts {
color: #211f24;
font-family: $font-family-regular;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px;
} }
.content { .ant-upload {
.upload-box { width: 100%;
transition: all 0.3s; }
&:hover { .ant-select {
border-color: #6d4cfe; //.ant-select-selection-overflow-item {
// max-width: 50%;
//}
}
.ant-table {
.ant-table-container {
display: flex;
flex-direction: column;
}
.ant-table-header {
.ant-table-cell {
&::before {
display: none;
}
} }
} }
}
.upload-text { .ant-input-textarea {
color: #000; &.no-resize {
text-align: center; textarea {
resize: none;
}
}
}
.ant-drawer-body {
padding: 0;
display: flex;
flex-direction: column;
.cts {
color: #211f24;
font-family: $font-family-regular; font-family: $font-family-regular;
font-size: 12px; font-size: 14px;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
line-height: 20px; line-height: 22px;
} }
.ant-progress { .content {
display: flex; .upload-box {
align-items: center; transition: all 0.3s;
justify-content: center;
.ant-progress-outer {
position: relative;
width: 100%;
height: 6px !important;
margin: 0;
padding: 0;
.ant-progress-inner {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 100px;
height: 6px !important;
background: var(--BG-200, #F2F3F5);
.ant-progress-bg {
height: 6px !important;
background-color: #6D4CFE;
}
&:hover {
border-color: #6d4cfe;
} }
} }
.upload-text {
.ant-progress-text { color: #000;
color: var(--Text-1, #211F24); text-align: center;
font-family: $font-family-regular; font-family: $font-family-regular;
font-size: 12px; font-size: 12px;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
line-height: 20px;
.anticon {
font-size: 16px;
}
} }
&.ant-progress-status-success { .ant-progress {
display: flex;
align-items: center;
justify-content: center;
.ant-progress-outer { .ant-progress-outer {
.ant-progress-bg { position: relative;
background-color: #25C883; width: 100px !important;
height: 6px !important;
margin: 0;
padding: 0;
.ant-progress-inner {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
height: 6px !important;
background: var(--BG-200, #f2f3f5);
.ant-progress-bg {
height: 6px !important;
background-color: #6d4cfe;
}
} }
} }
.ant-progress-text { .ant-progress-text {
color: #25C883; color: var(--Text-1, #211f24);
font-family: $font-family-regular;
font-size: 12px;
font-style: normal;
font-weight: 400;
.anticon {
font-size: 16px;
}
}
&.ant-progress-status-success {
.ant-progress-outer {
.ant-progress-bg {
background-color: #25c883;
}
}
.ant-progress-text {
color: #25c883;
}
} }
} }
} }
}
.footer { .footer {
}
} }
} }
} }

12
src/views/material-center/components/raw-material/components/table/index.vue
View File

@ -33,12 +33,12 @@
</template> </template>
<template v-if="column.dataIndex === 'name'" #customRender="{ record }"> <template v-if="column.dataIndex === 'name'" #customRender="{ record }">
<div class="flex items-center"> <div class="flex items-center">
<HoverImagePreview :src="record.type === RawMaterialType.Text ? icon2 : record.cover"> <HoverImagePreview :src="record.type === RawMaterialType.Text ? '' : record.cover">
<ImgLazyLoad <ImgLazyLoad
:height="64" :height="64"
:src="record.type === RawMaterialType.Text ? icon2 : record.cover" :src="record.type === RawMaterialType.Text ? icon2 : record.cover"
:width="64" :width="64"
class="!rounded-6px mr-16px" class="!rounded-8px mr-16px"
/> />
</HoverImagePreview> </HoverImagePreview>
<div class="flex-1 flex flex-col overflow-hidden"> <div class="flex-1 flex flex-col overflow-hidden">
@ -54,9 +54,9 @@
<div v-if="record.tags.length > 0" class="flex flex-wrap gap-4px"> <div v-if="record.tags.length > 0" class="flex flex-wrap gap-4px">
<Tag v-for="tag in record.tags" :key="tag.id" class="mr-0 rounded-4px bg-#F2F3F5 px-8px"> <Tag v-for="tag in record.tags" :key="tag.id" class="mr-0 rounded-4px bg-#F2F3F5 px-8px">
<Tooltip v-if="tag.name.length > 5" :title="tag.name"> <Tooltip v-if="tag.name.length > 5" :title="tag.name">
<span class="cts !color-#55585F !lh-20px !text-12px"> {{ `${tag.name.slice(0, 5)}...` }} </span> <span class="cts !color-#55585F !lh-20px !text-12px regular"> {{ `${tag.name.slice(0, 5)}...` }} </span>
</Tooltip> </Tooltip>
<span v-else class="cts !color-#55585F !lh-20px !text-12px"> {{ tag.name }} </span> <span v-else class="cts !color-#55585F !lh-20px !text-12px regular"> {{ tag.name }} </span>
</Tag> </Tag>
</div> </div>
<template v-else> -</template> <template v-else> -</template>
@ -75,7 +75,7 @@
</template> </template>
<template v-else-if="column.dataIndex === 'operation'" #customRender="{ record }"> <template v-else-if="column.dataIndex === 'operation'" #customRender="{ record }">
<div class="flex items-center"> <div class="flex items-center">
<img class="mr-8px cursor-pointer" :src="icon1" width="14" height="14" @click="onDelete(record)" /> <icon-delete class="mr-8px color-#737478 cursor-pointer" size="14" @click="onDelete(record)" />
<Button class="mr-8px !h-24px !px-12px" ghost size="small" type="primary" @click="onEdit(record)" <Button class="mr-8px !h-24px !px-12px" ghost size="small" type="primary" @click="onEdit(record)"
>编辑 >编辑
</Button> </Button>
@ -102,7 +102,7 @@ import TextOverTips from '@/components/text-over-tips';
import HoverImagePreview from '@/components/hover-image-preview'; import HoverImagePreview from '@/components/hover-image-preview';
import ImgLazyLoad from '@/components/img-lazy-load'; import ImgLazyLoad from '@/components/img-lazy-load';
import icon1 from '@/assets/img/media-account/icon-delete.png'; // import icon1 from '@/assets/img/media-account/icon-delete.png';
import icon2 from '../../img/icon-no-text.png'; import icon2 from '../../img/icon-no-text.png';
const emits = defineEmits(['sorterChange', 'delete', 'select', 'selectAll', 'edit']); const emits = defineEmits(['sorterChange', 'delete', 'select', 'selectAll', 'edit']);