mirror of
https://gitee.com/gz-yami/mall4v.git
synced 2025-12-26 07:16:27 +08:00
补充代码
This commit is contained in:
parent
0230b22090
commit
275df4962c
@ -15,7 +15,11 @@
|
||||
:src="resourcesUrl + modelValue"
|
||||
class="pic"
|
||||
>
|
||||
<el-icon v-else>
|
||||
<el-icon
|
||||
v-else
|
||||
color="#8c939d"
|
||||
size="28"
|
||||
>
|
||||
<Plus />
|
||||
</el-icon>
|
||||
</el-upload>
|
||||
@ -85,4 +89,8 @@ const beforeAvatarUpload = (file) => {
|
||||
.pic-uploader-component :deep(.el-upload:hover) {
|
||||
border-color: #409EFF;
|
||||
}
|
||||
:deep(.el-upload) {
|
||||
width: 148px;
|
||||
height: 148px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,81 +0,0 @@
|
||||
<template>
|
||||
<div class="components-add-or-upload">
|
||||
<el-tooltip
|
||||
v-if="props.tinymceUploadType === 'prod'"
|
||||
content="内容"
|
||||
placement="top"
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="clickUpload()"
|
||||
>
|
||||
<el-icon><UploadFilled /></el-icon>
|
||||
上传图片
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
|
||||
<el-button
|
||||
v-else
|
||||
:style="{ background: props.color, borderColor: props.color }"
|
||||
type="primary"
|
||||
@click="clickUpload()"
|
||||
>
|
||||
<el-icon><UploadFilled /></el-icon>
|
||||
上传图片
|
||||
</el-button>
|
||||
<!-- 弹窗, 新增图片 -->
|
||||
<!-- <elx-imgbox-->
|
||||
<!-- v-if="elxImgboxVisible"-->
|
||||
<!-- ref="elxImgboxRef"-->
|
||||
<!-- @refresh-pic="refreshPic"-->
|
||||
<!-- />-->
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
// const emit = defineEmits(['successCBK'])
|
||||
const props = defineProps({
|
||||
color: {
|
||||
type: String,
|
||||
default: '#155bd4'
|
||||
},
|
||||
tinymceUploadType: {
|
||||
default: '',
|
||||
type: String
|
||||
}
|
||||
})
|
||||
|
||||
const elxImgboxVisible = ref(false)
|
||||
// const maxNum = ref(15) // 可选择的最大图片数量
|
||||
const imgUrls = ref([])
|
||||
// const resourcesUrl = import.meta.env.VITE_APP_RESOURCES_URL
|
||||
// const elxImgboxRef = ref()
|
||||
// const dialogVisible = ref()
|
||||
/**
|
||||
* 打开图片选择窗
|
||||
*/
|
||||
const clickUpload = () => {
|
||||
imgUrls.value = ''
|
||||
elxImgboxVisible.value = true
|
||||
// nextTick(() => {
|
||||
// elxImgboxRef.value?.init(0, maxNum.value)
|
||||
// })
|
||||
}
|
||||
/**
|
||||
* 接收回调的图片数据
|
||||
*/
|
||||
// const refreshPic = imagePath => {
|
||||
// const imageArray = imagePath.split(',')
|
||||
// const data = []
|
||||
// imageArray.forEach(img => {
|
||||
// data.push(resourcesUrl + img)
|
||||
// })
|
||||
// imgUrls.value = ''
|
||||
// dialogVisible.value = false
|
||||
// emit('successCBK', data)
|
||||
// }
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.components-add-or-upload{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
@ -9,13 +9,26 @@
|
||||
:init="init"
|
||||
api-key="i6mv006qcwsfu1t7ebisntg5w261vpowkwirnx9cnse3ho5o"
|
||||
/>
|
||||
<!-- 增加图片区域 -->
|
||||
<div
|
||||
class="add-or-upload"
|
||||
>
|
||||
<add-or-upload
|
||||
v-show="isLoaded"
|
||||
@success-c-b-k="imageSuccessCBK"
|
||||
/>
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
list-type="picture"
|
||||
:action="uploadAction"
|
||||
:headers="uploadHeaders"
|
||||
:on-success="imageSuccessCBK"
|
||||
:show-file-list="false"
|
||||
:before-upload="beforeAvatarUpload"
|
||||
>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
>
|
||||
点击上传图片
|
||||
</el-button>
|
||||
</el-upload>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -23,7 +36,11 @@
|
||||
|
||||
<script setup>
|
||||
import Editor from '@tinymce/tinymce-vue'
|
||||
import AddOrUpload from './add-or-upload.vue'
|
||||
import $cookie from 'vue-cookies'
|
||||
|
||||
const uploadHeaders = { Authorization: $cookie.get('Authorization') }
|
||||
const uploadAction = http.adornUrl('/admin/file/upload/element')
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: String,
|
||||
@ -46,6 +63,7 @@ const props = defineProps({
|
||||
default: 'auto'
|
||||
}
|
||||
})
|
||||
|
||||
const toxFullscreen = ref(false)
|
||||
const hasChange = ref(false)
|
||||
const hasInit = ref(false)
|
||||
@ -131,12 +149,28 @@ const destroyTinymce = () => {
|
||||
tinymce.destroy()
|
||||
}
|
||||
}
|
||||
const imageSuccessCBK = (arr) => {
|
||||
arr.forEach(v => {
|
||||
window.tinymce.get(props.id).insertContent(`<img alt="" class="wscnph" src="${v}" >`)
|
||||
const resourcesUrl = import.meta.env.VITE_APP_RESOURCES_URL
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const imageSuccessCBK = (response, file, fileList) => {
|
||||
fileList.forEach(v => {
|
||||
window.tinymce.get(props.id).insertContent(`<img alt="" src="${resourcesUrl + v.response.data}" >`)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 限制图片上传大小
|
||||
*/
|
||||
const beforeAvatarUpload = (file) => {
|
||||
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg'
|
||||
if (!isJPG) {
|
||||
this.$message.error('上传图片只能是jpeg/jpg/png/gif 格式!')
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 2
|
||||
if (!isLt2M) {
|
||||
this.$message.error('上传图片大小不能超过 2MB!')
|
||||
}
|
||||
return isLt2M && isJPG
|
||||
}
|
||||
</script>
|
||||
<!--eslint-disable-next-line vue-scoped-css/enforce-style-type -->
|
||||
<style lang="scss">
|
||||
|
||||
@ -112,7 +112,8 @@ const categoryList = ref([])
|
||||
const selectedCategory = ref([])
|
||||
const categoryTreeProps = reactive({
|
||||
value: 'categoryId',
|
||||
label: 'categoryName'
|
||||
label: 'categoryName',
|
||||
checkStrictly: true
|
||||
})
|
||||
const isSubmit = ref(false)
|
||||
const dataFormRef = ref(null)
|
||||
|
||||
@ -93,6 +93,7 @@
|
||||
v-if="addOrUpdateVisible"
|
||||
ref="addOrUpdateRef"
|
||||
@refresh-data-list="getDataList"
|
||||
@close="addOrUpdateVisible=false"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -150,13 +150,13 @@ watch(() => skuTags.value,
|
||||
initing = false
|
||||
return
|
||||
}
|
||||
let skuList = []
|
||||
let skuListArr = []
|
||||
if (type.value === 4) {
|
||||
// 删除规格值
|
||||
props.skuList?.forEach(sku => {
|
||||
const propertiesArray = sku.properties.split(';')
|
||||
if (tagItemName.value !== propertiesArray[tagNameIndex].split(':')[1]) {
|
||||
skuList.push(sku)
|
||||
skuListArr.push(sku)
|
||||
}
|
||||
})
|
||||
} else if (type.value === 2) {
|
||||
@ -165,25 +165,25 @@ watch(() => skuTags.value,
|
||||
// 增加或删除规格
|
||||
let tempSkuList = []
|
||||
val?.forEach(tag => {
|
||||
if (skuList.length === 0) {
|
||||
if (skuListArr.length === 0) {
|
||||
if (tagName === tag.tagName) {
|
||||
const sku = Object.assign({}, defalutSku.value)
|
||||
sku.properties = properties // 销售属性组合字符串
|
||||
skuList.push(sku)
|
||||
skuListArr.push(sku)
|
||||
} else {
|
||||
tag.tagItems.forEach(tagItem => {
|
||||
const sku = Object.assign({}, defalutSku.value)
|
||||
sku.properties = `${tag.tagName}:${tagItem.propValue}` // 销售属性组合字符串
|
||||
skuList.push(sku)
|
||||
skuListArr.push(sku)
|
||||
})
|
||||
}
|
||||
if (val.length === 1) {
|
||||
skuList = props.skuList.concat(skuList)
|
||||
skuListArr = props.skuList.concat(skuListArr)
|
||||
}
|
||||
} else {
|
||||
tempSkuList = []
|
||||
if (tagName === tag.tagName) {
|
||||
skuList.forEach(sku => {
|
||||
skuListArr.forEach(sku => {
|
||||
if (sku.properties.indexOf(tagName) === -1) {
|
||||
const newSku = Object.assign({}, sku)
|
||||
newSku.properties = `${sku.properties};${properties}`
|
||||
@ -192,7 +192,7 @@ watch(() => skuTags.value,
|
||||
})
|
||||
} else {
|
||||
tag.tagItems.forEach(tagItem => {
|
||||
skuList.forEach(sku => {
|
||||
skuListArr.forEach(sku => {
|
||||
if (sku.properties.indexOf(tag.tagName) === -1) {
|
||||
const newSku = Object.assign({}, sku)
|
||||
newSku.properties = `${sku.properties};${tag.tagName}:${tagItem.propValue}`
|
||||
@ -201,37 +201,40 @@ watch(() => skuTags.value,
|
||||
})
|
||||
})
|
||||
}
|
||||
skuList = props.skuList.concat(tempSkuList)
|
||||
skuListArr = props.skuList.concat(tempSkuList)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
// 增加或删除规格
|
||||
let tempSkuList = []
|
||||
val?.forEach(tag => {
|
||||
if (skuList.length === 0) {
|
||||
if (skuListArr.length === 0) {
|
||||
tag.tagItems.forEach(tagItem => {
|
||||
const sku = Object.assign({}, defalutSku.value)
|
||||
sku.properties = `${tag.tagName}:${tagItem.propValue}` // 销售属性组合字符串
|
||||
skuList.push(sku)
|
||||
skuListArr.push(sku)
|
||||
})
|
||||
} else {
|
||||
tempSkuList = []
|
||||
tag.tagItems.forEach(tagItem => {
|
||||
skuList.forEach(sku => {
|
||||
skuListArr.forEach(sku => {
|
||||
const newSku = Object.assign({}, sku)
|
||||
newSku.properties = `${sku.properties};${tag.tagName}:${tagItem.propValue}`
|
||||
tempSkuList.push(newSku)
|
||||
})
|
||||
})
|
||||
skuList = tempSkuList
|
||||
skuListArr = tempSkuList
|
||||
}
|
||||
})
|
||||
}
|
||||
if (!skuList.length) {
|
||||
skuList.push(Object.assign({}, defalutSku.value))
|
||||
if (!skuListArr.length) {
|
||||
skuListArr.push(Object.assign({}, defalutSku.value))
|
||||
}
|
||||
// debugger
|
||||
emit('change', skuList)
|
||||
emit('change', skuListArr)
|
||||
},
|
||||
{
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
@ -62,6 +62,7 @@
|
||||
v-if="addOrUpdateVisible"
|
||||
ref="addOrUpdateRef"
|
||||
@refresh-data-list="refreshChange"
|
||||
@close="addOrUpdateVisible=false"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -77,7 +77,8 @@ const dataForm = ref({
|
||||
})
|
||||
const categoryTreeProps = reactive({
|
||||
value: 'areaId',
|
||||
label: 'areaName'
|
||||
label: 'areaName',
|
||||
checkStrictly: true
|
||||
})
|
||||
const selectedOptions = ref([])
|
||||
const dataFormRef = ref(null)
|
||||
@ -92,20 +93,23 @@ const init = (areaId) => {
|
||||
url: http.adornUrl('/admin/area/info/' + dataForm.value.areaId),
|
||||
method: 'get',
|
||||
params: http.adornParams()
|
||||
}).then(({ data }) => {
|
||||
dataForm.value = data
|
||||
selectedOptions.value.push(dataForm.value.parentId)
|
||||
categoryTreeProps.areaId = dataForm.value.areaId
|
||||
categoryTreeProps.areaName = dataForm.value.areaName
|
||||
})
|
||||
.then(({ data }) => {
|
||||
dataForm.value = data
|
||||
selectedOptions.value = dataForm.value.parentId
|
||||
selectedOptions.level = dataForm.value.level
|
||||
categoryTreeProps.areaId = dataForm.value.areaId
|
||||
categoryTreeProps.areaName = dataForm.value.areaName
|
||||
})
|
||||
}
|
||||
http({
|
||||
url: http.adornUrl('/admin/area/list'),
|
||||
method: 'get',
|
||||
params: http.adornParams()
|
||||
}).then(({ data }) => {
|
||||
areaList.value = treeDataTranslate(data, 'areaId', 'parentId')
|
||||
})
|
||||
.then(({ data }) => {
|
||||
areaList.value = treeDataTranslate(data, 'areaId', 'parentId')
|
||||
})
|
||||
})
|
||||
}
|
||||
defineExpose({ init })
|
||||
|
||||
@ -34,7 +34,6 @@
|
||||
<el-button
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
|
||||
@click="() => remove(node, data)"
|
||||
>
|
||||
删除
|
||||
@ -47,6 +46,7 @@
|
||||
v-if="addOrUpdateVisible"
|
||||
ref="addOrUpdateRef"
|
||||
@refresh-data-list="getDataList"
|
||||
@close="addOrUpdateVisible=false"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -41,6 +41,7 @@
|
||||
:options="menuList"
|
||||
:props="menuListTreeProps"
|
||||
change-on-select
|
||||
:clearable="true"
|
||||
@change="handleSelectMenuChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
@ -172,7 +173,8 @@ const menuList = ref([])
|
||||
const selectedMenu = ref([])
|
||||
const menuListTreeProps = {
|
||||
value: 'menuId',
|
||||
label: 'name'
|
||||
label: 'name',
|
||||
checkStrictly: true
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
|
||||
@ -128,6 +128,7 @@
|
||||
v-if="addOrUpdateVisible"
|
||||
ref="addOrUpdateRef"
|
||||
@refresh-data-list="getDataList"
|
||||
@close="addOrUpdateVisible=false"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user