更新组件代码,优化material选择器功能,并修复部分错误
This commit is contained in:
parent
7446d2c97f
commit
c43b561d6c
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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">
|
||||||
|
|
Loading…
Reference in New Issue