zmj
/
multiStoreAdmin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更新组件代码，优化material选择器功能，并修复部分错误

This commit is contained in:
zmj 2024-06-07 09:59:38 +08:00
parent 7446d2c97f
commit c43b561d6c
3 changed files with 34 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/material/index.vue
View File

@ -128,7 +128,7 @@
<ul class="file-list flex flex-wrap mt-4"> <ul class="file-list flex flex-wrap mt-4">
<li class="file-item-wrap" v-for="item in pager.lists" :key="item.id" :style="{ width: fileSize }"> <li class="file-item-wrap" v-for="item in pager.lists" :key="item.id" :style="{ width: fileSize }">
<del-wrap @close="batchFileDelete([item.id])"> <del-wrap @close="batchFileDelete([item.id])">
<file-item :uri="item.url" :file-size="fileSize" :type="type" @click="selectFile(item)"> <file-item :uri="item.uri" :file-size="fileSize" :type="type" @click="selectFile(item)">
<div class="item-selected" v-if="isSelect(item.id)"> <div class="item-selected" v-if="isSelect(item.id)">
<icon :size="24" name="el-icon-Check" color="#fff" /> <icon :size="24" name="el-icon-Check" color="#fff" />
</div> </div>
@ -143,7 +143,7 @@
</popover-input> </popover-input>
<el-button v-if="item.type === 10 || item.type === 20" type="primary" link <el-button v-if="item.type === 10 || item.type === 20" type="primary" link
@click="handlePreview(item.url)"> @click="handlePreview(item.uri)">
查看 查看
</el-button> </el-button>
@ -170,7 +170,7 @@
</el-table-column> </el-table-column>
<el-table-column label="名称" min-width="100" show-overflow-tooltip> <el-table-column label="名称" min-width="100" show-overflow-tooltip>
<template #default="{ row }"> <template #default="{ row }">
<el-link @click.stop="handlePreview(row.url)" :underline="false"> <el-link @click.stop="handlePreview(row.uri)" :underline="false">
{{ row.name }} {{ row.name }}
</el-link> </el-link>
</template> </template>
@ -185,8 +185,8 @@
</popover-input> </popover-input>
</div> </div>
<div class="inline-block"> <div class="inline-block">
<el-button type="primary" link @click.stop="handlePreview(row.url)"> <el-button type="primary" link @click.stop="handlePreview(row.uri)">
查12看 查看
</el-button> </el-button>
</div> </div>
<div class="inline-block"> <div class="inline-block">
@ -247,7 +247,7 @@
<li class="mb-4" v-for="item in select" :key="item.id"> <li class="mb-4" v-for="item in select" :key="item.id">
<div class="select-item"> <div class="select-item">
<del-wrap @close="cancelSelete(item.id)"> <del-wrap @close="cancelSelete(item.id)">
<file-item :uri="item.url" file-size="100px" :type="type"></file-item> <file-item :uri="item.uri" file-size="100px" :type="type"></file-item>
</del-wrap> </del-wrap>
</div> </div>
</li> </li>

61
src/components/material/picker.vue
View File

@ -1,33 +1,18 @@
<template> <template>
<div class="material-select"> <div class="material-select">
<popup <popup ref="popupRef" width="830px" custom-class="body-padding" :title="`选择${tipsText}`" @confirm="handleConfirm"
ref="popupRef" @close="handleClose">
width="830px"
custom-class="body-padding"
:title="`选择${tipsText}`"
@confirm="handleConfirm"
@close="handleClose"
>
<template v-if="!hiddenUpload" #trigger> <template v-if="!hiddenUpload" #trigger>
<div class="material-select__trigger clearfix" @click.stop> <div class="material-select__trigger clearfix" @click.stop>
<draggable class="draggable" v-model="fileList" animation="300" item-key="id"> <draggable class="draggable" v-model="fileList" animation="300" item-key="id">
<template v-slot:item="{ element, index }"> <template v-slot:item="{ element, index }">
<div <div class="material-preview" :class="{
class="material-preview"
:class="{
'is-disabled': disabled, 'is-disabled': disabled,
'is-one': limit == 1 'is-one': limit == 1
}" }" @click="showPopup(index)">
@click="showPopup(index)"
>
<del-wrap @close="deleteImg(index)"> <del-wrap @close="deleteImg(index)">
<file-item <file-item :uri="excludeDomain ? getImageUrl(element) : element" :file-size="size"
:uri="excludeDomain ? getImageUrl(element) : element" :width="width" :height="height" :type="type"></file-item>
:file-size="size"
:width="width"
:height="height"
:type="type"
></file-item>
</del-wrap> </del-wrap>
<div class="operation-btns text-xs text-center"> <div class="operation-btns text-xs text-center">
<span>修改</span> <span>修改</span>
@ -37,24 +22,16 @@
</div> </div>
</template> </template>
</draggable> </draggable>
<div <div class="material-upload" @click="showPopup(-1)" v-show="showUpload" :class="{
class="material-upload"
@click="showPopup(-1)"
v-show="showUpload"
:class="{
'is-disabled': disabled, 'is-disabled': disabled,
'is-one': limit == 1, 'is-one': limit == 1,
[uploadClass]: true [uploadClass]: true
}" }">
>
<slot name="upload"> <slot name="upload">
<div <div class="upload-btn" :style="{
class="upload-btn"
:style="{
width: width || size, width: width || size,
height: height || size height: height || size
}" }">
>
<icon :size="25" name="el-icon-Plus" /> <icon :size="25" name="el-icon-Plus" />
<span>添加</span> <span>添加</span>
</div> </div>
@ -64,13 +41,8 @@
</template> </template>
<el-scrollbar> <el-scrollbar>
<div class="material-wrap"> <div class="material-wrap">
<material <material ref="materialRef" :type="type" :file-size="fileSize" :limit="meterialLimit"
ref="materialRef" @change="selectChange" />
:type="type"
:file-size="fileSize"
:limit="meterialLimit"
@change="selectChange"
/>
</div> </div>
</el-scrollbar> </el-scrollbar>
</popup> </popup>
@ -186,7 +158,7 @@ export default defineComponent({
const handleConfirm = useThrottleFn( const handleConfirm = useThrottleFn(
() => { () => {
const selectUri = select.value.map((item) => const selectUri = select.value.map((item) =>
props.excludeDomain ? item.uri : item.url props.excludeDomain ? item.uri : item.uri
) )
if (!isAdd.value) { if (!isAdd.value) {
fileList.value.splice(currentIndex.value, 1, selectUri.shift()) fileList.value.splice(currentIndex.value, 1, selectUri.shift())
@ -270,6 +242,7 @@ export default defineComponent({
<style scoped lang="scss"> <style scoped lang="scss">
.material-select { .material-select {
.material-upload, .material-upload,
.material-preview { .material-preview {
position: relative; position: relative;
@ -279,17 +252,21 @@ export default defineComponent({
margin-bottom: 8px; margin-bottom: 8px;
box-sizing: border-box; box-sizing: border-box;
float: left; float: left;
&.is-disabled { &.is-disabled {
cursor: not-allowed; cursor: not-allowed;
} }
&.is-one { &.is-one {
margin-bottom: 0; margin-bottom: 0;
} }
&:hover { &:hover {
.operation-btns { .operation-btns {
display: block; display: block;
} }
} }
.operation-btns { .operation-btns {
display: none; display: none;
position: absolute; position: absolute;
@ -301,12 +278,14 @@ export default defineComponent({
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
} }
} }
.material-upload { .material-upload {
:deep(.upload-btn) { :deep(.upload-btn) {
@apply text-tx-secondary box-border rounded border-br border-dashed border flex flex-col justify-center items-center; @apply text-tx-secondary box-border rounded border-br border-dashed border flex flex-col justify-center items-center;
} }
} }
} }
.material-wrap { .material-wrap {
min-width: 720px; min-width: 720px;
height: 430px; height: 430px;

2
src/views/permission/admin/edit.vue
View File

@ -5,7 +5,7 @@
<el-form-item label="店员名称" prop="staff_name"> <el-form-item label="店员名称" prop="staff_name">
<el-input v-model="formData.staff_name" clearable placeholder="请输入店员名称" /> <el-input v-model="formData.staff_name" clearable placeholder="请输入店员名称" />
</el-form-item> </el-form-item>
<el-form-item label="头像"> <el-form-item label="头34像">
<material-picker v-model="formData.avatar" :limit="1" /> <material-picker v-model="formData.avatar" :limit="1" />
</el-form-item> </el-form-item>
<el-form-item label="店员账号" prop="account"> <el-form-item label="店员账号" prop="account">