补充代码

This commit is contained in:
wyy 2023-11-24 16:46:55 +08:00
parent 0230b22090
commit 275df4962c
11 changed files with 91 additions and 117 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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">

View File

@ -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)

View File

@ -93,6 +93,7 @@
v-if="addOrUpdateVisible"
ref="addOrUpdateRef"
@refresh-data-list="getDataList"
@close="addOrUpdateVisible=false"
/>
</div>
</template>

View File

@ -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
}
)

View File

@ -62,6 +62,7 @@
v-if="addOrUpdateVisible"
ref="addOrUpdateRef"
@refresh-data-list="refreshChange"
@close="addOrUpdateVisible=false"
/>
</div>
</template>

View File

@ -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 })

View File

@ -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>

View File

@ -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

View File

@ -128,6 +128,7 @@
v-if="addOrUpdateVisible"
ref="addOrUpdateRef"
@refresh-data-list="getDataList"
@close="addOrUpdateVisible=false"
/>
</div>
</template>