wyy
3 years ago
parent
96310a0deb
commit
6f1218b4a9
@ -0,0 +1,99 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<el-upload
|
||||||
|
:action="uploadAction"
|
||||||
|
:headers="uploadHeaders"
|
||||||
|
list-type="picture-card"
|
||||||
|
:on-preview="handlePictureCardPreview"
|
||||||
|
:on-remove="handleRemove"
|
||||||
|
:on-success="handleUploadSuccess"
|
||||||
|
:file-list="imageList"
|
||||||
|
:before-upload="beforeAvatarUpload"
|
||||||
|
>
|
||||||
|
<el-icon><Plus /></el-icon>
|
||||||
|
</el-upload>
|
||||||
|
<el-dialog v-model="dialogVisible">
|
||||||
|
<img
|
||||||
|
width="100%"
|
||||||
|
:src="dialogImageUrl"
|
||||||
|
alt=""
|
||||||
|
>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import $cookie from 'vue-cookies'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
|
||||||
|
const uploadHeaders = { Authorization: $cookie.get('Authorization') }
|
||||||
|
const uploadAction = http.adornUrl('/admin/file/upload/element')
|
||||||
|
const props = defineProps({
|
||||||
|
modelValue: {
|
||||||
|
default: '',
|
||||||
|
type: String
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const emit = defineEmits(['update:modelValue'])
|
||||||
|
const dialogImageUrl = ref('')
|
||||||
|
const dialogVisible = ref(false)
|
||||||
|
const resourcesUrl = import.meta.env.VITE_APP_RESOURCES_URL
|
||||||
|
|
||||||
|
const imageList = computed(() => {
|
||||||
|
const res = []
|
||||||
|
if (props.modelValue) {
|
||||||
|
const imageArray = props.modelValue?.split(',')
|
||||||
|
for (let i = 0; i < imageArray.length; i++) {
|
||||||
|
res.push({ url: resourcesUrl + imageArray[i], response: imageArray[i] })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
emit('update:modelValue', props.modelValue)
|
||||||
|
return res
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 图片上传
|
||||||
|
*/
|
||||||
|
// eslint-disable-next-line no-unused-vars
|
||||||
|
const handleUploadSuccess = (response, file, fileList) => {
|
||||||
|
const pics = fileList.map(file => {
|
||||||
|
if (typeof file.response === 'string') {
|
||||||
|
return file.response
|
||||||
|
}
|
||||||
|
return file.response.data
|
||||||
|
}).join(',')
|
||||||
|
emit('update:modelValue', pics)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 限制图片上传大小
|
||||||
|
*/
|
||||||
|
const beforeAvatarUpload = (file) => {
|
||||||
|
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg'
|
||||||
|
if (!isJPG) {
|
||||||
|
ElMessage.error('上传图片只能是jpeg/jpg/png/gif 格式!')
|
||||||
|
}
|
||||||
|
const isLt2M = file.size / 1024 / 1024 < 2
|
||||||
|
if (!isLt2M) {
|
||||||
|
ElMessage.error('上传图片大小不能超过 2MB!')
|
||||||
|
}
|
||||||
|
return isLt2M && isJPG
|
||||||
|
}
|
||||||
|
|
||||||
|
// eslint-disable-next-line no-unused-vars
|
||||||
|
const handleRemove = (file, fileList) => {
|
||||||
|
const pics = fileList.map(file => {
|
||||||
|
if (typeof file.response === 'string') {
|
||||||
|
return file.response
|
||||||
|
}
|
||||||
|
return file.response.data
|
||||||
|
}).join(',')
|
||||||
|
emit('update:modelValue', pics)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handlePictureCardPreview = (file) => {
|
||||||
|
dialogImageUrl.value = file.url
|
||||||
|
dialogVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
@ -0,0 +1,208 @@
|
|||||||
|
<template>
|
||||||
|
<el-dialog
|
||||||
|
v-model="visible"
|
||||||
|
:title="!dataForm.currentId ? '新增' : '修改'"
|
||||||
|
:close-on-click-modal="false"
|
||||||
|
>
|
||||||
|
<el-form
|
||||||
|
ref="dataFormRef"
|
||||||
|
:model="dataForm"
|
||||||
|
:rules="dataRule"
|
||||||
|
label-width="80px"
|
||||||
|
@keyup.enter="onSubmit()"
|
||||||
|
>
|
||||||
|
<el-form-item
|
||||||
|
v-if="dataForm.type !== 2"
|
||||||
|
label="分类图片"
|
||||||
|
prop="pic"
|
||||||
|
>
|
||||||
|
<pic-upload v-model="dataForm.pic" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item
|
||||||
|
v-if="dataForm.type !== 2"
|
||||||
|
label="分类名称"
|
||||||
|
prop="categoryName"
|
||||||
|
>
|
||||||
|
<el-input
|
||||||
|
v-model="dataForm.categoryName"
|
||||||
|
controls-position="right"
|
||||||
|
:min="0"
|
||||||
|
label="分类名称"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="上级分类">
|
||||||
|
<el-cascader
|
||||||
|
v-model="selectedCategory"
|
||||||
|
expand-trigger="hover"
|
||||||
|
:options="categoryList"
|
||||||
|
:props="categoryTreeProps"
|
||||||
|
change-on-select
|
||||||
|
:clearable="true"
|
||||||
|
@change="handleChange"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item
|
||||||
|
v-if="dataForm.type !== 2"
|
||||||
|
label="排序号"
|
||||||
|
prop="seq"
|
||||||
|
>
|
||||||
|
<el-input-number
|
||||||
|
v-model="dataForm.seq"
|
||||||
|
controls-position="right"
|
||||||
|
:min="0"
|
||||||
|
label="排序号"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item
|
||||||
|
label="状态"
|
||||||
|
prop="status"
|
||||||
|
>
|
||||||
|
<el-radio-group v-model="dataForm.status">
|
||||||
|
<el-radio :label="0">
|
||||||
|
下线
|
||||||
|
</el-radio>
|
||||||
|
<el-radio :label="1">
|
||||||
|
正常
|
||||||
|
</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<div class="dialog-footer">
|
||||||
|
<el-button @click="visible = false">
|
||||||
|
取消
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
@click="onSubmit()"
|
||||||
|
>
|
||||||
|
确定
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
import { treeDataTranslate, idList } from '@/utils'
|
||||||
|
import { Debounce } from '@/utils/debounce'
|
||||||
|
const emit = defineEmits(['refreshDataList'])
|
||||||
|
const visible = ref(false)
|
||||||
|
const dataForm = reactive({
|
||||||
|
categoryId: 0,
|
||||||
|
currentId: 0,
|
||||||
|
grade: 0,
|
||||||
|
categoryName: '',
|
||||||
|
seq: 1,
|
||||||
|
status: 1,
|
||||||
|
parentId: 0,
|
||||||
|
pic: ''
|
||||||
|
})
|
||||||
|
const dataRule = reactive({
|
||||||
|
categoryName: [
|
||||||
|
{ required: true, message: '分类名称不能为空', trigger: 'blur' },
|
||||||
|
{ pattern: /\s\S+|S+\s|\S/, message: '请输入正确的分类名称', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
pic: [
|
||||||
|
{ required: true, message: '分类图片不能为空', trigger: 'blur' }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
const categoryList = ref([])
|
||||||
|
const selectedCategory = ref([])
|
||||||
|
const categoryTreeProps = reactive({
|
||||||
|
value: 'categoryId',
|
||||||
|
label: 'categoryName'
|
||||||
|
})
|
||||||
|
const isSubmit = ref(false)
|
||||||
|
const dataFormRef = ref(null)
|
||||||
|
const init = (id) => {
|
||||||
|
dataForm.currentId = id || 0
|
||||||
|
dataForm.categoryId = id || 0
|
||||||
|
http({
|
||||||
|
url: http.adornUrl('/prod/category/listCategory'),
|
||||||
|
method: 'get',
|
||||||
|
params: http.adornParams()
|
||||||
|
})
|
||||||
|
.then(({ data }) => {
|
||||||
|
categoryList.value = treeDataTranslate(data, 'categoryId', 'parentId')
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
visible.value = true
|
||||||
|
nextTick(() => {
|
||||||
|
dataFormRef.value?.resetFields()
|
||||||
|
selectedCategory.value = []
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
if (dataForm.categoryId) {
|
||||||
|
// 修改
|
||||||
|
http({
|
||||||
|
url: http.adornUrl(`/prod/category/info/${dataForm.categoryId}`),
|
||||||
|
method: 'get',
|
||||||
|
params: http.adornParams()
|
||||||
|
})
|
||||||
|
.then(({ data }) => {
|
||||||
|
dataForm.categoryId = data.categoryId
|
||||||
|
dataForm.categoryName = data.categoryName
|
||||||
|
dataForm.seq = data.seq
|
||||||
|
dataForm.pic = data.pic
|
||||||
|
dataForm.parentId = data.parentId
|
||||||
|
dataForm.status = data.status
|
||||||
|
selectedCategory.value = idList(categoryList.value, data.parentId, 'categoryId', 'children').reverse()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
defineExpose({ init })
|
||||||
|
|
||||||
|
const handleChange = (val) => {
|
||||||
|
dataForm.parentId = val[val.length - 1]
|
||||||
|
}
|
||||||
|
// 表单提交
|
||||||
|
const onSubmit = Debounce(() => {
|
||||||
|
if (selectedCategory.value.length === 1) {
|
||||||
|
dataForm.grade = 0
|
||||||
|
}
|
||||||
|
if (selectedCategory.value.length === 2) {
|
||||||
|
dataForm.grade = 1
|
||||||
|
}
|
||||||
|
if (selectedCategory.value.length === 3) {
|
||||||
|
dataForm.grade = 2
|
||||||
|
}
|
||||||
|
dataFormRef.value?.validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
if (isSubmit.value) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
isSubmit.value = true
|
||||||
|
http({
|
||||||
|
url: http.adornUrl('/prod/category'),
|
||||||
|
method: dataForm.categoryId ? 'put' : 'post',
|
||||||
|
data: http.adornData({
|
||||||
|
categoryId: dataForm.categoryId || undefined,
|
||||||
|
categoryName: dataForm.categoryName,
|
||||||
|
status: dataForm.status,
|
||||||
|
seq: dataForm.seq,
|
||||||
|
grade: dataForm.grade,
|
||||||
|
parentId: dataForm.parentId,
|
||||||
|
pic: dataForm.pic
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
ElMessage({
|
||||||
|
message: '操作成功',
|
||||||
|
type: 'success',
|
||||||
|
duration: 1000,
|
||||||
|
onClose: () => {
|
||||||
|
isSubmit.value = false
|
||||||
|
visible.value = false
|
||||||
|
emit('refreshDataList')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
@ -0,0 +1,178 @@
|
|||||||
|
<template>
|
||||||
|
<div class="mod-category">
|
||||||
|
<el-form
|
||||||
|
:inline="true"
|
||||||
|
:model="dataForm"
|
||||||
|
>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button
|
||||||
|
v-if="isAuth('prod:category:save')"
|
||||||
|
type="primary"
|
||||||
|
icon="el-icon-plus"
|
||||||
|
@click="onAddOrUpdate()"
|
||||||
|
>
|
||||||
|
新增
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<el-table
|
||||||
|
:data="dataList"
|
||||||
|
border
|
||||||
|
row-key="categoryId"
|
||||||
|
style="width: 100%;"
|
||||||
|
>
|
||||||
|
<el-table-column
|
||||||
|
prop="categoryName"
|
||||||
|
header-align="center"
|
||||||
|
tree-key="categoryId"
|
||||||
|
width="150"
|
||||||
|
label="分类名称"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
prop="pic"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="图片"
|
||||||
|
>
|
||||||
|
<template #default="scope">
|
||||||
|
<img
|
||||||
|
alt=""
|
||||||
|
:src="resourcesUrl + scope.row.pic "
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="status"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="状态"
|
||||||
|
>
|
||||||
|
<template #default="scope">
|
||||||
|
<el-tag
|
||||||
|
v-if="scope.row.status === 0"
|
||||||
|
type="danger"
|
||||||
|
>
|
||||||
|
下线
|
||||||
|
</el-tag>
|
||||||
|
<el-tag v-else>
|
||||||
|
正常
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="seq"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="排序号"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="操作"
|
||||||
|
>
|
||||||
|
<template #default="scope">
|
||||||
|
<el-button
|
||||||
|
v-if="isAuth('prod:category:update')"
|
||||||
|
type="primary"
|
||||||
|
@click="onAddOrUpdate(scope.row.categoryId)"
|
||||||
|
>
|
||||||
|
修改
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
v-if="isAuth('prod:category:delete')"
|
||||||
|
type="danger"
|
||||||
|
@click="onDelete(scope.row.categoryId)"
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<!-- 弹窗, 新增 / 修改 -->
|
||||||
|
<add-or-update
|
||||||
|
v-if="addOrUpdateVisible"
|
||||||
|
ref="addOrUpdateRef"
|
||||||
|
@refresh-data-list="getDataList"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { isAuth, treeDataTranslate } from '@/utils'
|
||||||
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
|
import AddOrUpdate from './add-or-update.vue'
|
||||||
|
const resourcesUrl = import.meta.env.VITE_APP_RESOURCES_URL
|
||||||
|
const dataForm = ref({})
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getDataList()
|
||||||
|
})
|
||||||
|
|
||||||
|
const dataList = ref([])
|
||||||
|
const dataListLoading = ref(false)
|
||||||
|
/**
|
||||||
|
* 获取数据列表
|
||||||
|
*/
|
||||||
|
const getDataList = () => {
|
||||||
|
dataListLoading.value = true
|
||||||
|
http({
|
||||||
|
url: http.adornUrl('/prod/category/table'),
|
||||||
|
method: 'get',
|
||||||
|
params: http.adornParams()
|
||||||
|
})
|
||||||
|
.then(({ data }) => {
|
||||||
|
dataList.value = treeDataTranslate(data, 'categoryId', 'parentId')
|
||||||
|
dataListLoading.value = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const addOrUpdateVisible = ref(false)
|
||||||
|
const addOrUpdateRef = ref(null)
|
||||||
|
/**
|
||||||
|
* 新增 / 修改
|
||||||
|
* @param id
|
||||||
|
*/
|
||||||
|
const onAddOrUpdate = (id) => {
|
||||||
|
addOrUpdateVisible.value = true
|
||||||
|
nextTick(() => {
|
||||||
|
addOrUpdateRef.value?.init(id)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 删除
|
||||||
|
* @param id
|
||||||
|
*/
|
||||||
|
const onDelete = (id) => {
|
||||||
|
ElMessageBox.confirm('确定进行删除操作?', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
http({
|
||||||
|
url: http.adornUrl(`/prod/category/${id}`),
|
||||||
|
method: 'delete'
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
ElMessage({
|
||||||
|
message: '操作成功',
|
||||||
|
type: 'success',
|
||||||
|
duration: 1500,
|
||||||
|
onClose: () => {
|
||||||
|
getDataList()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.mod-category {
|
||||||
|
img {
|
||||||
|
height: 80px;
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,219 @@
|
|||||||
|
<template>
|
||||||
|
<el-dialog
|
||||||
|
v-model="visible"
|
||||||
|
:title="!dataForm.prodCommId ? '新增' : '修改'"
|
||||||
|
:close-on-click-modal="false"
|
||||||
|
>
|
||||||
|
<el-form
|
||||||
|
ref="dataFormRef"
|
||||||
|
:model="dataForm"
|
||||||
|
:rules="dataRule"
|
||||||
|
label-width="80px"
|
||||||
|
@keyup.enter="onSubmit()"
|
||||||
|
>
|
||||||
|
<div v-if="!isEdit">
|
||||||
|
<el-form-item
|
||||||
|
label="评论内容"
|
||||||
|
prop="userName"
|
||||||
|
>
|
||||||
|
<el-input
|
||||||
|
v-model="dataForm.content"
|
||||||
|
type="textarea"
|
||||||
|
:readonly="true"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item
|
||||||
|
label="评论图片"
|
||||||
|
prop="userName"
|
||||||
|
>
|
||||||
|
<div v-if="!dataForm.pics?.length">
|
||||||
|
无
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<img
|
||||||
|
v-for="item in dataForm.pics"
|
||||||
|
:key="item"
|
||||||
|
alt=""
|
||||||
|
max-width="100%"
|
||||||
|
:src="dialogImageUrl + item"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item
|
||||||
|
label="记录时间"
|
||||||
|
prop="userName"
|
||||||
|
>
|
||||||
|
<el-input
|
||||||
|
v-model="dataForm.recTime"
|
||||||
|
:readonly="true"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item
|
||||||
|
label="回复时间"
|
||||||
|
prop="userName"
|
||||||
|
:readonly="true"
|
||||||
|
>
|
||||||
|
<el-input
|
||||||
|
v-model="dataForm.replyTime"
|
||||||
|
:readonly="true"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item
|
||||||
|
label="IP来源"
|
||||||
|
prop="userName"
|
||||||
|
>
|
||||||
|
<el-input
|
||||||
|
v-model="dataForm.postip"
|
||||||
|
:readonly="true"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item
|
||||||
|
label="得分"
|
||||||
|
prop="score"
|
||||||
|
>
|
||||||
|
<el-input
|
||||||
|
v-model="dataForm.score"
|
||||||
|
:readonly="true"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item
|
||||||
|
label="是否匿名"
|
||||||
|
prop="isAnonymous"
|
||||||
|
>
|
||||||
|
<el-radio-group
|
||||||
|
v-model="dataForm.isAnonymous"
|
||||||
|
:disabled="true"
|
||||||
|
>
|
||||||
|
<el-radio :label="1">
|
||||||
|
是
|
||||||
|
</el-radio>
|
||||||
|
<el-radio :label="0">
|
||||||
|
不是
|
||||||
|
</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-form-item
|
||||||
|
label="掌柜回复"
|
||||||
|
type="textarea"
|
||||||
|
prop="userName"
|
||||||
|
>
|
||||||
|
<el-input
|
||||||
|
v-model="dataForm.replyContent"
|
||||||
|
:readonly="!isEdit"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item
|
||||||
|
v-if="isEdit"
|
||||||
|
label="审核"
|
||||||
|
prop="status"
|
||||||
|
>
|
||||||
|
<el-radio-group
|
||||||
|
v-model="dataForm.status"
|
||||||
|
:readonly="true"
|
||||||
|
>
|
||||||
|
<el-radio :label="1">
|
||||||
|
审核通过
|
||||||
|
</el-radio>
|
||||||
|
<el-radio :label="-1">
|
||||||
|
不通过
|
||||||
|
</el-radio>
|
||||||
|
<el-radio :label="0">
|
||||||
|
等待审核
|
||||||
|
</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<div class="dialog-footer">
|
||||||
|
<el-button @click="visible = false">
|
||||||
|
取消
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
v-if="isEdit"
|
||||||
|
type="primary"
|
||||||
|
@click="onSubmit()"
|
||||||
|
>
|
||||||
|
确定
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
const emit = defineEmits(['refreshDataList'])
|
||||||
|
const dataRule = ref({})
|
||||||
|
const isEdit = ref(false)
|
||||||
|
const dataForm = ref({
|
||||||
|
prodCommId: null,
|
||||||
|
prodId: null,
|
||||||
|
orderItemId: null,
|
||||||
|
userId: null,
|
||||||
|
content: null,
|
||||||
|
replyContent: null,
|
||||||
|
recTime: null,
|
||||||
|
replyTime: null,
|
||||||
|
replySts: null,
|
||||||
|
postip: null,
|
||||||
|
score: null,
|
||||||
|
usefulCounts: null,
|
||||||
|
photoJson: null,
|
||||||
|
isAnonymous: null,
|
||||||
|
status: null
|
||||||
|
})
|
||||||
|
const init = (prodCommId, isEditParam) => {
|
||||||
|
isEdit.value = isEditParam
|
||||||
|
dataForm.value.prodCommId = prodCommId || 0
|
||||||
|
visible.value = true
|
||||||
|
nextTick(() => {
|
||||||
|
dataFormRef.value?.resetFields()
|
||||||
|
if (dataForm.value.prodCommId) {
|
||||||
|
http({
|
||||||
|
url: http.adornUrl('/prod/prodComm/info/' + dataForm.value.prodCommId),
|
||||||
|
method: 'get',
|
||||||
|
params: http.adornParams()
|
||||||
|
})
|
||||||
|
.then(({ data }) => {
|
||||||
|
dataForm.value = data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
defineExpose({ init })
|
||||||
|
|
||||||
|
const visible = ref(false)
|
||||||
|
const dataFormRef = ref(null)
|
||||||
|
/**
|
||||||
|
* 表单提交
|
||||||
|
*/
|
||||||
|
const onSubmit = () => {
|
||||||
|
dataFormRef.value?.validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
http({
|
||||||
|
url: http.adornUrl('/prod/prodComm'),
|
||||||
|
method: dataForm.value.prodCommId ? 'put' : 'post',
|
||||||
|
data: http.adornData(dataForm.value)
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
ElMessage({
|
||||||
|
message: '操作成功',
|
||||||
|
type: 'success',
|
||||||
|
duration: 1500,
|
||||||
|
onClose: () => {
|
||||||
|
visible.value = false
|
||||||
|
emit('refreshDataList')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
@ -0,0 +1,122 @@
|
|||||||
|
<template>
|
||||||
|
<div class="mod-prod-prodComm">
|
||||||
|
<avue-crud
|
||||||
|
ref="crudRef"
|
||||||
|
:page="page"
|
||||||
|
:data="dataList"
|
||||||
|
:table-loading="dataListLoading"
|
||||||
|
:option="tableOption"
|
||||||
|
@search-change="onSearch"
|
||||||
|
@on-load="getDataList"
|
||||||
|
@refresh-change="refreshChange"
|
||||||
|
@row-del="rowDel"
|
||||||
|
>
|
||||||
|
<template #nickName="scope">
|
||||||
|
{{ scope.row.user.nickName }}
|
||||||
|
</template>
|
||||||
|
<template #replyTime="scope">
|
||||||
|
{{ scope.row.replyTime ? scope.row.replyTime : '-' }}
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #menu="scope">
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
icon="el-icon-edit"
|
||||||
|
@click="onAddOrUpdate(scope.row.prodCommId,true)"
|
||||||
|
>
|
||||||
|
编辑
|
||||||
|
</el-button>
|
||||||
|
|
||||||
|
<el-button
|
||||||
|
type="success"
|
||||||
|
icon="el-icon-view"
|
||||||
|
@click="onAddOrUpdate(scope.row.prodCommId,false)"
|
||||||
|
>
|
||||||
|
查看
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</avue-crud>
|
||||||
|
<add-or-update
|
||||||
|
v-if="addOrUpdateVisible"
|
||||||
|
ref="addOrUpdateRef"
|
||||||
|
@refresh-data-list="refreshChange"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
|
import { tableOption } from '@/crud/prod/prodComm.js'
|
||||||
|
import AddOrUpdate from './add-or-update.vue'
|
||||||
|
|
||||||
|
const dataList = ref([])
|
||||||
|
const page = reactive({
|
||||||
|
total: 0, // 总页数
|
||||||
|
currentPage: 1, // 当前页数
|
||||||
|
pageSize: 20 // 每页显示多少条
|
||||||
|
})
|
||||||
|
const dataListLoading = ref(false)
|
||||||
|
|
||||||
|
const getDataList = (pageParam, params, done) => {
|
||||||
|
dataListLoading.value = true
|
||||||
|
http({
|
||||||
|
url: http.adornUrl('/prod/prodComm/page'),
|
||||||
|
method: 'get',
|
||||||
|
params: http.adornParams(Object.assign({
|
||||||
|
current: pageParam == null ? page.currentPage : pageParam.currentPage,
|
||||||
|
size: pageParam == null ? page.pageSize : pageParam.pageSize
|
||||||
|
}, params))
|
||||||
|
})
|
||||||
|
.then(({ data }) => {
|
||||||
|
dataList.value = data.records
|
||||||
|
page.total = data.total
|
||||||
|
dataListLoading.value = false
|
||||||
|
if (done) done()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const addOrUpdateVisible = ref(false)
|
||||||
|
const addOrUpdateRef = ref(null)
|
||||||
|
/**
|
||||||
|
* 新增 / 修改
|
||||||
|
*/
|
||||||
|
const onAddOrUpdate = (id, isEdit) => {
|
||||||
|
addOrUpdateVisible.value = true
|
||||||
|
nextTick(() => {
|
||||||
|
addOrUpdateRef.value?.init(id, isEdit)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const rowDel = (row) => {
|
||||||
|
ElMessageBox.confirm('确定进行删除操作?', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
http({
|
||||||
|
url: http.adornUrl('/prod/prodComm/' + row.prodCommId),
|
||||||
|
method: 'delete',
|
||||||
|
data: http.adornData({})
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
ElMessage({
|
||||||
|
message: '操作成功',
|
||||||
|
type: 'success',
|
||||||
|
duration: 1500,
|
||||||
|
onClose: () => {
|
||||||
|
getDataList()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}).catch(() => { })
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 刷新回调
|
||||||
|
*/
|
||||||
|
const refreshChange = () => {
|
||||||
|
getDataList(page)
|
||||||
|
}
|
||||||
|
const onSearch = (params, done) => {
|
||||||
|
getDataList(page, params, done)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -0,0 +1,159 @@
|
|||||||
|
<template>
|
||||||
|
<div class="mod-prod-prod-transport">
|
||||||
|
<el-form-item
|
||||||
|
label="运费设置"
|
||||||
|
:rules="[{ required: true, message: '运费模板不能为空'}]"
|
||||||
|
>
|
||||||
|
<el-select
|
||||||
|
v-model="transportId"
|
||||||
|
placeholder="请选择"
|
||||||
|
@change="changeTransport"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="transport in transportList"
|
||||||
|
:key="transport.transportId"
|
||||||
|
:label="transport.transName"
|
||||||
|
:value="transport.transportId"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-table
|
||||||
|
v-if="transportInfo.transfees"
|
||||||
|
:data="transportInfo.transfees"
|
||||||
|
style="width: 100%"
|
||||||
|
>
|
||||||
|
<el-table-column
|
||||||
|
label="配送区域"
|
||||||
|
width="350"
|
||||||
|
>
|
||||||
|
<template #default="scope">
|
||||||
|
<span v-if="!scope.row.cityList.length">所有地区</span>
|
||||||
|
<el-tag
|
||||||
|
v-for="city in scope.row.cityList"
|
||||||
|
v-else
|
||||||
|
:key="city.areaId"
|
||||||
|
>
|
||||||
|
{{ city.areaName }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="firstPiece"
|
||||||
|
:label="tableTitle[0]"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
prop="firstFee"
|
||||||
|
:label="tableTitle[1]"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
prop="continuousPiece"
|
||||||
|
:label="tableTitle[2]"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
prop="continuousFee"
|
||||||
|
:label="tableTitle[3]"
|
||||||
|
/>
|
||||||
|
</el-table>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item v-if="transportInfo.hasFreeCondition === 1">
|
||||||
|
<el-table
|
||||||
|
:data="transportInfo.transfeeFrees"
|
||||||
|
style="width: 100%"
|
||||||
|
>
|
||||||
|
<el-table-column
|
||||||
|
label="指定区域"
|
||||||
|
width="350"
|
||||||
|
>
|
||||||
|
<template #default="scope">
|
||||||
|
<el-tag
|
||||||
|
v-for="city in scope.row.freeCityList"
|
||||||
|
:key="city.areaId"
|
||||||
|
>
|
||||||
|
{{ city.areaName }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="freeType"
|
||||||
|
label="包邮条件"
|
||||||
|
>
|
||||||
|
<template #default="scope">
|
||||||
|
<span v-if="scope.row.freeType === 0">满件/重量/体积包邮</span>
|
||||||
|
<span v-if="scope.row.freeType === 1">满金额包邮</span>
|
||||||
|
<span v-if="scope.row.freeType === 2">满件/重量/体积且满金额包邮</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="amount">
|
||||||
|
<template #default="scope">
|
||||||
|
<span v-if="scope.row.freeType === 1">满{{ scope.row.amount }}元金额包邮</span>
|
||||||
|
<span v-if="scope.row.freeType === 0">满{{ scope.row.piece }}件/重量/体积包邮</span>
|
||||||
|
<span v-if="scope.row.freeType === 2">满{{ scope.row.piece }}件/重量/体积且满{{ scope.row.amount }}元金额包邮</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
const props = defineProps({
|
||||||
|
modelValue: {
|
||||||
|
default: null,
|
||||||
|
type: Number
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const emit = defineEmits(['input', 'update:modelValue'])
|
||||||
|
const transportId = ref(null)
|
||||||
|
const tableTitle = computed(() => {
|
||||||
|
const titles = [['首件(个)', '运费(元)', '续件(个)', '续费(元)'], ['首重(kg)', '运费(元)', '续重(kg)', '续费(元)'], ['首体积(m³)', '运费(元)', '续体积(m³)', '续费(元)']]
|
||||||
|
if (transportInfo.value.chargeType) {
|
||||||
|
return titles[transportInfo.value.chargeType]
|
||||||
|
}
|
||||||
|
return titles[0]
|
||||||
|
})
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.modelValue,
|
||||||
|
(id) => {
|
||||||
|
transportId.value = id
|
||||||
|
})
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getTransportList()
|
||||||
|
})
|
||||||
|
|
||||||
|
const transportList = ref([{
|
||||||
|
transportId: null,
|
||||||
|
transName: ''
|
||||||
|
}])
|
||||||
|
const getTransportList = () => {
|
||||||
|
http({
|
||||||
|
url: http.adornUrl('/shop/transport/list'),
|
||||||
|
method: 'get',
|
||||||
|
params: http.adornParams({})
|
||||||
|
})
|
||||||
|
.then(({ data }) => {
|
||||||
|
transportList.value = data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const transportInfo = ref({
|
||||||
|
hasFreeCondition: false,
|
||||||
|
transfeeFrees: [{ freeCityList: [] }]
|
||||||
|
})
|
||||||
|
const changeTransport = (id) => {
|
||||||
|
emit('update:modelValue', id)
|
||||||
|
if (!id) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
http({
|
||||||
|
url: http.adornUrl(`/shop/transport/info/${transportId.value}`),
|
||||||
|
method: 'get',
|
||||||
|
params: http.adornParams({})
|
||||||
|
})
|
||||||
|
.then(({ data }) => {
|
||||||
|
transportInfo.value = data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
@ -0,0 +1,247 @@
|
|||||||
|
<template>
|
||||||
|
<div class="mod-prod-sku-table">
|
||||||
|
<el-form-item>
|
||||||
|
<el-table
|
||||||
|
:data="modelValue"
|
||||||
|
border
|
||||||
|
style="width: 100%; margin-top: 20px"
|
||||||
|
>
|
||||||
|
<el-table-column
|
||||||
|
v-for="(leftTitle, index) in tableLeftTitles"
|
||||||
|
:key="index"
|
||||||
|
:label="leftTitle"
|
||||||
|
>
|
||||||
|
<template #default="scope">
|
||||||
|
{{ scope.row.properties.split(';')[index].split(':')[1] }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
v-if="tableLeftTitles.length"
|
||||||
|
prop="pic"
|
||||||
|
label="sku图片"
|
||||||
|
width="180"
|
||||||
|
>
|
||||||
|
<template #default="scope">
|
||||||
|
<pic-upload v-model="scope.row.pic" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
v-if="tableLeftTitles.length"
|
||||||
|
prop="prodName"
|
||||||
|
label="商品名称"
|
||||||
|
width="250"
|
||||||
|
>
|
||||||
|
<template #default="scope">
|
||||||
|
<el-input
|
||||||
|
v-model="scope.row.prodName"
|
||||||
|
type="textarea"
|
||||||
|
:disabled="!scope.row.status"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="price"
|
||||||
|
label="销售价"
|
||||||
|
width="160"
|
||||||
|
>
|
||||||
|
<template #default="scope">
|
||||||
|
<el-input-number
|
||||||
|
v-model="scope.row.price"
|
||||||
|
controls-position="right"
|
||||||
|
:precision="2"
|
||||||
|
:max="1000000000"
|
||||||
|
:min="0.01"
|
||||||
|
:disabled="!scope.row.status"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="oriPrice"
|
||||||
|
label="市场价"
|
||||||
|
width="160"
|
||||||
|
>
|
||||||
|
<template #default="scope">
|
||||||
|
<el-input-number
|
||||||
|
v-model="scope.row.oriPrice"
|
||||||
|
controls-position="right"
|
||||||
|
:precision="2"
|
||||||
|
:max="1000000000"
|
||||||
|
:min="0.01"
|
||||||
|
:disabled="!scope.row.status"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="stocks"
|
||||||
|
label="库存"
|
||||||
|
width="160"
|
||||||
|
>
|
||||||
|
<template #default="scope">
|
||||||
|
<el-input-number
|
||||||
|
v-model="scope.row.stocks"
|
||||||
|
:min="0"
|
||||||
|
controls-position="right"
|
||||||
|
type="number"
|
||||||
|
:disabled="!scope.row.status"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="weight"
|
||||||
|
label="商品重量(kg)"
|
||||||
|
width="210"
|
||||||
|
>
|
||||||
|
<template #default="scope">
|
||||||
|
<el-input-number
|
||||||
|
v-model="scope.row.weight"
|
||||||
|
:precision="2"
|
||||||
|
:min="0"
|
||||||
|
controls-position="right"
|
||||||
|
:disabled="!scope.row.status"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="volume"
|
||||||
|
label="商品体积(m³)"
|
||||||
|
width="210"
|
||||||
|
>
|
||||||
|
<template #default="scope">
|
||||||
|
<el-input-number
|
||||||
|
v-model="scope.row.volume"
|
||||||
|
:precision="2"
|
||||||
|
:min="0"
|
||||||
|
controls-position="right"
|
||||||
|
:disabled="!scope.row.status"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
label="操作"
|
||||||
|
>
|
||||||
|
<template #default="scope">
|
||||||
|
<el-button
|
||||||
|
v-if="scope.row.status"
|
||||||
|
type="text"
|
||||||
|
@click="changeSkuStatus(`${scope.$index}`)"
|
||||||
|
>
|
||||||
|
禁用
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
v-else
|
||||||
|
type="text"
|
||||||
|
@click="changeSkuStatus(`${scope.$index}`)"
|
||||||
|
>
|
||||||
|
启用
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import PicUpload from '@/components/pic-upload'
|
||||||
|
import { scoreProdStore } from '@/stores/prod.js'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
modelValue: {
|
||||||
|
default: () => [],
|
||||||
|
type: Array
|
||||||
|
},
|
||||||
|
prodName: {
|
||||||
|
default: '',
|
||||||
|
type: String
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const emit = defineEmits(['update:modelValue'])
|
||||||
|
const dbSpecs = ref([]) // 数据库中的规格
|
||||||
|
let initing = false
|
||||||
|
|
||||||
|
const tableLeftTitles = computed(() => {
|
||||||
|
const res = []
|
||||||
|
for (let i = 0; i < skuTags.length; i++) {
|
||||||
|
const skuTag = skuTags[i]
|
||||||
|
res.push(skuTag.tagName)
|
||||||
|
}
|
||||||
|
return res
|
||||||
|
})
|
||||||
|
const prod = scoreProdStore()
|
||||||
|
const skuTags = computed({
|
||||||
|
get () { return prod.skuTags }
|
||||||
|
})
|
||||||
|
|
||||||
|
watch(() => props.prodName,
|
||||||
|
() => {
|
||||||
|
skuAddProdName()
|
||||||
|
})
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
http({
|
||||||
|
url: http.adornUrl('/prod/spec/list'),
|
||||||
|
method: 'get',
|
||||||
|
params: http.adornParams()
|
||||||
|
})
|
||||||
|
.then(({ data }) => {
|
||||||
|
dbSpecs.value = data
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
const init = () => {
|
||||||
|
initing = true
|
||||||
|
}
|
||||||
|
defineExpose({ init })
|
||||||
|
|
||||||
|
const changeSkuStatus = (tagIndex) => {
|
||||||
|
// eslint-disable-next-line vue/no-mutating-props
|
||||||
|
props.modelValue[tagIndex].status = props.modelValue[tagIndex].status ? 0 : 1
|
||||||
|
}
|
||||||
|
const skuAddProdName = () => {
|
||||||
|
if (initing) return
|
||||||
|
const skuList = []
|
||||||
|
for (let i = 0; i < props.modelValue.length; i++) {
|
||||||
|
const sku = Object.assign({}, props.modelValue[i])
|
||||||
|
if (!sku.properties) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
sku.skuName = ''
|
||||||
|
const properties = sku.properties.split(';')
|
||||||
|
for (const propertiesKey in properties) {
|
||||||
|
sku.skuName += properties[propertiesKey].split(':')[1] + ' '
|
||||||
|
}
|
||||||
|
sku.prodName = props.prodName + ' ' + sku.skuName
|
||||||
|
skuList.push(sku)
|
||||||
|
}
|
||||||
|
emit('update:modelValue', skuList)
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.mod-prod-sku-table{
|
||||||
|
:deep(.pic-uploader-component .el-upload) {
|
||||||
|
border: 1px dashed #d9d9d9;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
.pic-uploader-icon {
|
||||||
|
font-size: 28px;
|
||||||
|
color: #8c939d;
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
line-height: 120px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.pic {
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:deep(.pic-uploader-component .el-upload:hover) {
|
||||||
|
border-color: #409EFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,181 @@
|
|||||||
|
<template>
|
||||||
|
<div class="mod-prod">
|
||||||
|
<avue-crud
|
||||||
|
ref="crudRef"
|
||||||
|
:page="page"
|
||||||
|
:data="dataList"
|
||||||
|
:table-loading="dataListLoading"
|
||||||
|
:permission="permission"
|
||||||
|
:option="tableOption"
|
||||||
|
@search-change="onSearch"
|
||||||
|
@selection-change="selectionChange"
|
||||||
|
@on-load="getDataList"
|
||||||
|
>
|
||||||
|
<template #menu-left>
|
||||||
|
<el-button
|
||||||
|
v-if="isAuth('shop:pickAddr:save')"
|
||||||
|
type="primary"
|
||||||
|
icon="el-icon-plus"
|
||||||
|
@click.stop="onAddOrUpdate()"
|
||||||
|
>
|
||||||
|
新增
|
||||||
|
</el-button>
|
||||||
|
|
||||||
|
<el-button
|
||||||
|
v-if="isAuth('shop:pickAddr:delete')"
|
||||||
|
type="danger"
|
||||||
|
:disabled="dataListSelections.length <= 0"
|
||||||
|
@click="onDelete()"
|
||||||
|
>
|
||||||
|
批量删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #status="scope">
|
||||||
|
<el-tag v-if="scope.row.status === 1">
|
||||||
|
上架
|
||||||
|
</el-tag>
|
||||||
|
<el-tag v-else>
|
||||||
|
未上架
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #menu="scope">
|
||||||
|
<el-button
|
||||||
|
v-if="isAuth('prod:prod:update')"
|
||||||
|
type="primary"
|
||||||
|
icon="el-icon-edit"
|
||||||
|
@click="onAddOrUpdate(scope.row.prodId)"
|
||||||
|
>
|
||||||
|
修改
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
v-if="isAuth('prod:prod:delete')"
|
||||||
|
type="danger"
|
||||||
|
icon="el-icon-delete"
|
||||||
|
@click="onDelete(scope.row.prodId)"
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</avue-crud>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { isAuth } from '@/utils'
|
||||||
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
|
import { tableOption } from '@/crud/prod/prodList.js'
|
||||||
|
const permission = reactive({
|
||||||
|
delBtn: isAuth('prod:prod:delete')
|
||||||
|
})
|
||||||
|
const dataList = ref([])
|
||||||
|
const page = reactive({
|
||||||
|
total: 0, // 总页数
|
||||||
|
currentPage: 1, // 当前页数
|
||||||
|
pageSize: 10 // 每页显示多少条
|
||||||
|
})
|
||||||
|
const dataListLoading = ref(false)
|
||||||
|
/**
|
||||||
|
* 获取数据列表
|
||||||
|
*/
|
||||||
|
const getDataList = (pageParam, params, done) => {
|
||||||
|
dataListLoading.value = true
|
||||||
|
http({
|
||||||
|
url: http.adornUrl('/prod/prod/page'),
|
||||||
|
method: 'get',
|
||||||
|
params: http.adornParams(
|
||||||
|
Object.assign(
|
||||||
|
{
|
||||||
|
current: pageParam == null ? page.currentPage : pageParam.currentPage,
|
||||||
|
size: pageParam == null ? page.pageSize : pageParam.pageSize
|
||||||
|
},
|
||||||
|
params
|
||||||
|
)
|
||||||
|
)
|
||||||
|
})
|
||||||
|
.then(({ data }) => {
|
||||||
|
dataList.value = data.records
|
||||||
|
for (const key in dataList.value) {
|
||||||
|
// eslint-disable-next-line no-prototype-builtins
|
||||||
|
if (dataList.value.hasOwnProperty(key)) {
|
||||||
|
const element = dataList.value[key]
|
||||||
|
element.imgs = element.imgs.split(',')[0]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
page.total = data.total
|
||||||
|
dataListLoading.value = false
|
||||||
|
if (done) done()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const router = useRouter()
|
||||||
|
/**
|
||||||
|
* 新增 / 修改
|
||||||
|
* @param id
|
||||||
|
*/
|
||||||
|
const onAddOrUpdate = (id) => {
|
||||||
|
router.push({
|
||||||
|
path: '/prodInfo',
|
||||||
|
query: { prodId: id }
|
||||||
|
})
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 删除和批量删除
|
||||||
|
* @param id
|
||||||
|
*/
|
||||||
|
const onDelete = (id) => {
|
||||||
|
const prodIds = getSeleProdIds()
|
||||||
|
if (id) {
|
||||||
|
prodIds.push(id)
|
||||||
|
}
|
||||||
|
ElMessageBox.confirm(`确定进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
http({
|
||||||
|
url: http.adornUrl('/prod/prod'),
|
||||||
|
method: 'delete',
|
||||||
|
data: http.adornData(prodIds, false)
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
ElMessage({
|
||||||
|
message: '操作成功',
|
||||||
|
type: 'success',
|
||||||
|
duration: 1500,
|
||||||
|
onClose: () => {
|
||||||
|
getDataList(page)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.catch(() => { })
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 条件查询
|
||||||
|
* @param params
|
||||||
|
* @param done
|
||||||
|
*/
|
||||||
|
const onSearch = (params, done) => {
|
||||||
|
getDataList(page, params, done)
|
||||||
|
}
|
||||||
|
|
||||||
|
const dataListSelections = ref([])
|
||||||
|
/**
|
||||||
|
* 多选变化
|
||||||
|
* @param val
|
||||||
|
*/
|
||||||
|
const selectionChange = (val) => {
|
||||||
|
dataListSelections.value = val
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 获取选中的商品Id列表
|
||||||
|
*/
|
||||||
|
const getSeleProdIds = () => {
|
||||||
|
return dataListSelections.value?.map(item => {
|
||||||
|
return item.prodId
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
@ -0,0 +1,145 @@
|
|||||||
|
<template>
|
||||||
|
<el-dialog
|
||||||
|
v-model="visible"
|
||||||
|
:title="!dataForm.id ? '新增' : '修改'"
|
||||||
|
:close-on-click-modal="false"
|
||||||
|
>
|
||||||
|
<el-form
|
||||||
|
ref="dataFormRef"
|
||||||
|
:model="dataForm"
|
||||||
|
:rules="dataRule"
|
||||||
|
label-width="80px"
|
||||||
|
@keyup.enter="onSubmit()"
|
||||||
|
>
|
||||||
|
<el-form-item
|
||||||
|
label="标签名称"
|
||||||
|
:rules="[
|
||||||
|
{ required: true, message: '标签名称不能为空', trigger: 'blur' },
|
||||||
|
{ pattern: /\s\S+|S+\s|\S/, message: '请输入正确的标签名称', trigger: 'blur' }
|
||||||
|
]"
|
||||||
|
prop="title"
|
||||||
|
>
|
||||||
|
<el-input v-model="dataForm.title" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item
|
||||||
|
label="状态"
|
||||||
|
prop="status"
|
||||||
|
>
|
||||||
|
<el-radio-group v-model="dataForm.status">
|
||||||
|
<el-radio :label="1">
|
||||||
|
正常
|
||||||
|
</el-radio>
|
||||||
|
<el-radio :label="0">
|
||||||
|
禁用
|
||||||
|
</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item
|
||||||
|
label="列表样式"
|
||||||
|
prop="style"
|
||||||
|
>
|
||||||
|
<el-radio-group v-model="dataForm.style">
|
||||||
|
<el-radio :label="0">
|
||||||
|
一列一个
|
||||||
|
</el-radio>
|
||||||
|
<el-radio :label="1">
|
||||||
|
一列两个
|
||||||
|
</el-radio>
|
||||||
|
<el-radio :label="2">
|
||||||
|
一列三个
|
||||||
|
</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item
|
||||||
|
label="排序"
|
||||||
|
prop="seq"
|
||||||
|
>
|
||||||
|
<el-input-number
|
||||||
|
v-model="dataForm.seq"
|
||||||
|
controls-position="right"
|
||||||
|
:min="0"
|
||||||
|
label="排序号"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<div class="dialog-footer">
|
||||||
|
<el-button @click="visible = false">
|
||||||
|
取消
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
@click="onSubmit()"
|
||||||
|
>
|
||||||
|
确定
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
import { Debounce } from '@/utils/debounce'
|
||||||
|
const emit = defineEmits(['refreshDataList'])
|
||||||
|
const visible = ref(false)
|
||||||
|
const dataRule = {}
|
||||||
|
const dataForm = ref({
|
||||||
|
id: null,
|
||||||
|
title: null,
|
||||||
|
shopId: null,
|
||||||
|
status: 1,
|
||||||
|
isDefault: null,
|
||||||
|
prodCount: null,
|
||||||
|
seq: null,
|
||||||
|
style: 0
|
||||||
|
})
|
||||||
|
|
||||||
|
const init = (id) => {
|
||||||
|
dataForm.value.id = id || 0
|
||||||
|
visible.value = true
|
||||||
|
nextTick(() => {
|
||||||
|
dataFormRef.value?.resetFields()
|
||||||
|
if (dataForm.value.id) {
|
||||||
|
http({
|
||||||
|
url: http.adornUrl('/prod/prodTag/info/' + dataForm.value.id),
|
||||||
|
method: 'get',
|
||||||
|
params: http.adornParams()
|
||||||
|
})
|
||||||
|
.then(({ data }) => {
|
||||||
|
dataForm.value = data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
defineExpose({ init })
|
||||||
|
|
||||||
|
const dataFormRef = ref(null)
|
||||||
|
/**
|
||||||
|
* 表单提交
|
||||||
|
*/
|
||||||
|
const onSubmit = Debounce(() => {
|
||||||
|
dataFormRef.value?.validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
http({
|
||||||
|
url: http.adornUrl('/prod/prodTag'),
|
||||||
|
method: dataForm.value.id ? 'put' : 'post',
|
||||||
|
data: http.adornData(dataForm.value)
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
ElMessage({
|
||||||
|
message: '操作成功',
|
||||||
|
type: 'success',
|
||||||
|
duration: 1500,
|
||||||
|
onClose: () => {
|
||||||
|
visible.value = false
|
||||||
|
emit('refreshDataList')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
@ -0,0 +1,156 @@
|
|||||||
|
<template>
|
||||||
|
<div class="mod-prod-prodTag">
|
||||||
|
<avue-crud
|
||||||
|
ref="crudRef"
|
||||||
|
:page="page"
|
||||||
|
:data="dataList"
|
||||||
|
:table-loading="dataListLoading"
|
||||||
|
:option="tableOption"
|
||||||
|
@search-change="onSearch"
|
||||||
|
@on-load="getDataList"
|
||||||
|
@refresh-change="refreshChange"
|
||||||
|
>
|
||||||
|
<template #menu-left>
|
||||||
|
<el-button
|
||||||
|
v-if="isAuth('prod:prodTag:save')"
|
||||||
|
type="primary"
|
||||||
|
icon="el-icon-plus"
|
||||||
|
@click="onAddOrUpdate()"
|
||||||
|
>
|
||||||
|
新增
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
<template #title="scope">
|
||||||
|
{{ scope.row.title || '-' }}
|
||||||
|
</template>
|
||||||
|
<template #status="scope">
|
||||||
|
<el-tag
|
||||||
|
v-if="scope.row.status === 0"
|
||||||
|
type="danger"
|
||||||
|
>
|
||||||
|
禁用
|
||||||
|
</el-tag>
|
||||||
|
<el-tag v-else>
|
||||||
|
正常
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #isDfault="scope">
|
||||||
|
<el-tag v-if="scope.row.isDefault === 0">
|
||||||
|
自定义类型
|
||||||
|
</el-tag>
|
||||||
|
<el-tag v-else>
|
||||||
|
默认类型
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #menu="scope">
|
||||||
|
<el-button
|
||||||
|
v-if="isAuth('prod:prodTag:update')"
|
||||||
|
type="primary"
|
||||||
|
icon="el-icon-edit"
|
||||||
|
@click="onAddOrUpdate(scope.row.id)"
|
||||||
|
>
|
||||||
|
修改
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
v-if="isAuth('prod:prodTag:delete')"
|
||||||
|
type="danger"
|
||||||
|
icon="el-icon-delete"
|
||||||
|
@click.stop="onDelete(scope.row.id)"
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</avue-crud>
|
||||||
|
<add-or-update
|
||||||
|
v-if="addOrUpdateVisible"
|
||||||
|
ref="addOrUpdateRef"
|
||||||
|
@refresh-data-list="refreshChange"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { isAuth } from '@/utils'
|
||||||
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
|
import { tableOption } from '@/crud/prod/prodTag.js'
|
||||||
|
import AddOrUpdate from './add-or-update.vue'
|
||||||
|
|
||||||
|
const dataList = ref([])
|
||||||
|
const page = reactive({
|
||||||
|
total: 0, // 总页数
|
||||||
|
currentPage: 1, // 当前页数
|
||||||
|
pageSize: 10 // 每页显示多少条
|
||||||
|
})
|
||||||
|
const dataListLoading = ref(false)
|
||||||
|
|
||||||
|
const getDataList = (pageParam, params, done) => {
|
||||||
|
dataListLoading.value = true
|
||||||
|
http({
|
||||||
|
url: http.adornUrl('/prod/prodTag/page'),
|
||||||
|
method: 'get',
|
||||||
|
params: http.adornParams(Object.assign({
|
||||||
|
current: pageParam == null ? page.currentPage : pageParam.currentPage,
|
||||||
|
size: pageParam == null ? page.pageSize : pageParam.pageSize
|
||||||
|
}, params))
|
||||||
|
})
|
||||||
|
.then(({ data }) => {
|
||||||
|
dataList.value = data.records
|
||||||
|
page.total = data.total
|
||||||
|
dataListLoading.value = false
|
||||||
|
if (done) done()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const addOrUpdateVisible = ref(false)
|
||||||
|
const addOrUpdateRef = ref(null)
|
||||||
|
/**
|
||||||
|
* 新增 / 修改
|
||||||
|
* @param id
|
||||||
|
*/
|
||||||
|
const onAddOrUpdate = (id) => {
|
||||||
|
addOrUpdateVisible.value = true
|
||||||
|
nextTick(() => {
|
||||||
|
addOrUpdateRef.value?.init(id)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const onDelete = (id) => {
|
||||||
|
ElMessageBox.confirm('确定进行删除操作?', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
http({
|
||||||
|
url: http.adornUrl('/prod/prodTag/' + id),
|
||||||
|
method: 'delete',
|
||||||
|
data: http.adornData({})
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
ElMessage({
|
||||||
|
message: '操作成功',
|
||||||
|
type: 'success',
|
||||||
|
duration: 1500,
|
||||||
|
onClose: () => {
|
||||||
|
getDataList(page)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}).catch(() => { })
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 刷新回调
|
||||||
|
*/
|
||||||
|
const refreshChange = () => {
|
||||||
|
getDataList(page)
|
||||||
|
}
|
||||||
|
const onSearch = (params, done) => {
|
||||||
|
getDataList(page, params, done)
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@ -0,0 +1,190 @@
|
|||||||
|
<template>
|
||||||
|
<el-dialog
|
||||||
|
v-model="visible"
|
||||||
|
:title="!dataList[0].propId ? '新增' : '修改'"
|
||||||
|
:close-on-click-modal="false"
|
||||||
|
>
|
||||||
|
<el-table
|
||||||
|
:data="dataList"
|
||||||
|
border
|
||||||
|
style="width: 100%;"
|
||||||
|
>
|
||||||
|
<el-table-column
|
||||||
|
prop="propName"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="属性名称"
|
||||||
|
>
|
||||||
|
<template #default="scope">
|
||||||
|
<el-input
|
||||||
|
v-model="scope.row.propName"
|
||||||
|
placeholder="请输入内容"
|
||||||
|
maxlength="10"
|
||||||
|
show-word-limit
|
||||||
|
clearable
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="prodPropValues"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="属性值"
|
||||||
|
>
|
||||||
|
<template #default="scope">
|
||||||
|
<el-col
|
||||||
|
v-for="item in scope.row.prodPropValues"
|
||||||
|
:key="item.valueId"
|
||||||
|
:span="12"
|
||||||
|
>
|
||||||
|
<el-input
|
||||||
|
v-model="item.propValue"
|
||||||
|
placeholder="请输入内容"
|
||||||
|
class="prop-value-input"
|
||||||
|
maxlength="20"
|
||||||
|
show-word-limit
|
||||||
|
clearable
|
||||||
|
@clear="clearProdPropValues"
|
||||||
|
/>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="4">
|
||||||
|
<el-button
|
||||||
|
v-show="scope.row.prodPropValues[scope.row.prodPropValues.length-1].propValue"
|
||||||
|
type="primary"
|
||||||
|
class="add-input"
|
||||||
|
icon="el-icon-circle-plus"
|
||||||
|
@click="addInput()"
|
||||||
|
/>
|
||||||
|
</el-col>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<template #footer>
|
||||||
|
<div class="dialog-footer">
|
||||||
|
<el-button @click="visible = false">
|
||||||
|
取消
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
@click="onSubmit()"
|
||||||
|
>
|
||||||
|
确定
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
import { Debounce } from '@/utils/debounce'
|
||||||
|
const emit = defineEmits(['refreshDataList'])
|
||||||
|
|
||||||
|
const visible = ref(false)
|
||||||
|
const dataList = ref([{ propId: 0, propName: '', prodPropValues: [{ valueId: 0 }] }])
|
||||||
|
const page = {
|
||||||
|
total: 0, // 总页数
|
||||||
|
currentPage: 1, // 当前页数
|
||||||
|
pageSize: 10 // 每页显示多少条
|
||||||
|
}
|
||||||
|
|
||||||
|
const init = (val) => {
|
||||||
|
if (val) {
|
||||||
|
dataList.value = [JSON.parse(JSON.stringify(val))]
|
||||||
|
} else {
|
||||||
|
dataList.value = [
|
||||||
|
{ propId: 0, propName: '', prodPropValues: [{ valueId: 0 }] }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
visible.value = true
|
||||||
|
}
|
||||||
|
defineExpose({ init })
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 表单提交
|
||||||
|
*/
|
||||||
|
const onSubmit = Debounce(() => {
|
||||||
|
if (dataList.value[0].prodPropValues) {
|
||||||
|
const temp = []
|
||||||
|
for (const key in dataList.value[0].prodPropValues) {
|
||||||
|
// eslint-disable-next-line no-prototype-builtins
|
||||||
|
if (dataList.value[0].prodPropValues.hasOwnProperty(key)) {
|
||||||
|
const element = dataList.value[0].prodPropValues[key]
|
||||||
|
if (element.propValue) {
|
||||||
|
temp.push(dataList.value[0].prodPropValues[key])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
dataList.value[0].prodPropValues = temp
|
||||||
|
}
|
||||||
|
if (!dataList.value[0].propName.trim()) {
|
||||||
|
dataList.value[0].propName = ''
|
||||||
|
ElMessage.error('属性名不能为空')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (dataList.value[0].prodPropValues.length < 1) {
|
||||||
|
dataList.value[0].prodPropValues = [{ valueId: 0 }]
|
||||||
|
ElMessage.error('规格项不能为空')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (dataList.value[0].propName.length > 10) {
|
||||||
|
ElMessage.error('属性名称长度不能大于10')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (dataList.value[0].prodPropValues.find(el => !el.propValue.trim())) {
|
||||||
|
ElMessage.error('属性值不能为空')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (dataList.value[0].prodPropValues.find(el => el.propValue.length > 20)) {
|
||||||
|
ElMessage.error('属性值长度不能大于20')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
http({
|
||||||
|
url: http.adornUrl('/prod/spec'),
|
||||||
|
method: dataList.value[0].propId ? 'put' : 'post',
|
||||||
|
data: http.adornData({
|
||||||
|
propId: dataList.value[0].propId || undefined,
|
||||||
|
propName: dataList.value[0].propName,
|
||||||
|
prodPropValues: dataList.value[0].prodPropValues
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
ElMessage({
|
||||||
|
message: '操作成功',
|
||||||
|
type: 'success',
|
||||||
|
duration: 1500,
|
||||||
|
onClose: () => {
|
||||||
|
visible.value = false
|
||||||
|
emit('refreshDataList', page)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
const clearProdPropValues = () => {
|
||||||
|
if (dataList.value[0].prodPropValues.length === 1) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
for (let i = 0; i < dataList.value[0].prodPropValues.length; i++) {
|
||||||
|
const element = dataList.value[0].prodPropValues[i]
|
||||||
|
if (!element.propValue) {
|
||||||
|
dataList.value[0].prodPropValues.splice(i, 1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const addInput = () => {
|
||||||
|
const temp = dataList.value[0].prodPropValues
|
||||||
|
if (temp[temp.length - 1].propValue) {
|
||||||
|
temp.push({})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.prop-value-input {
|
||||||
|
padding: 3px;
|
||||||
|
}
|
||||||
|
.add-input {
|
||||||
|
margin: 3px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,161 @@
|
|||||||
|
<template>
|
||||||
|
<div class="mod-prod">
|
||||||
|
<avue-crud
|
||||||
|
ref="crudRef"
|
||||||
|
:page="page"
|
||||||
|
:data="dataList"
|
||||||
|
:option="tableOption"
|
||||||
|
:permission="permission"
|
||||||
|
@search-change="onSearch"
|
||||||
|
@on-load="getDataList"
|
||||||
|
>
|
||||||
|
<template #prodPropValues="scope">
|
||||||
|
<el-tag
|
||||||
|
v-for="item in scope.row.prodPropValues"
|
||||||
|
:key="item.valueId"
|
||||||
|
>
|
||||||
|
{{ item.propValue }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
<template #menu-left>
|
||||||
|
<el-button
|
||||||
|
v-if="isAuth('shop:pickAddr:save')"
|
||||||
|
type="primary"
|
||||||
|
icon="el-icon-plus"
|
||||||
|
|
||||||
|
@click.stop="onAddOrUpdate()"
|
||||||
|
>
|
||||||
|
新增
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
<template #menu="scope">
|
||||||
|
<el-button
|
||||||
|
v-if="isAuth('prod:spec:update')"
|
||||||
|
type="primary"
|
||||||
|
icon="el-icon-edit"
|
||||||
|
|
||||||
|
@click.stop="onAddOrUpdate(scope.row)"
|
||||||
|
>
|
||||||
|
编辑
|
||||||
|
</el-button>
|
||||||
|
|
||||||
|
<el-button
|
||||||
|
v-if="isAuth('prod:spec:delete')"
|
||||||
|
type="danger"
|
||||||
|
icon="el-icon-delete"
|
||||||
|
|
||||||
|
@click.stop="onDelete(scope.row.propId)"
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</avue-crud>
|
||||||
|
<!-- 弹窗, 新增 / 修改 -->
|
||||||
|
<add-or-update
|
||||||
|
v-if="addOrUpdateVisible"
|
||||||
|
ref="addOrUpdateRef"
|
||||||
|
@refresh-data-list="getDataList"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { isAuth } from '@/utils'
|
||||||
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
|
import AddOrUpdate from './add-or-update.vue'
|
||||||
|
import { tableOption } from '@/crud/prod/spec.js'
|
||||||
|
const permission = ref({
|
||||||
|
delBtn: isAuth('prod:prod:delete')
|
||||||
|
})
|
||||||
|
const dataList = ref([])
|
||||||
|
const dataListLoading = ref(false)
|
||||||
|
const dataListSelections = ref([])
|
||||||
|
const page = reactive({
|
||||||
|
total: 0, // 总页数
|
||||||
|
currentPage: 1, // 当前页数
|
||||||
|
pageSize: 10 // 每页显示多少条
|
||||||
|
})
|
||||||
|
/**
|
||||||
|
* 获取数据列表
|
||||||
|
*/
|
||||||
|
const getDataList = (pageParam, params, done) => {
|
||||||
|
dataListLoading.value = true
|
||||||
|
http({
|
||||||
|
url: http.adornUrl('/prod/spec/page'),
|
||||||
|
method: 'get',
|
||||||
|
params: http.adornParams(
|
||||||
|
Object.assign(
|
||||||
|
{
|
||||||
|
current: pageParam == null ? page.currentPage : pageParam.currentPage,
|
||||||
|
size: pageParam == null ? page.pageSize : pageParam.pageSize
|
||||||
|
},
|
||||||
|
params
|
||||||
|
)
|
||||||
|
)
|
||||||
|
})
|
||||||
|
.then(({ data }) => {
|
||||||
|
dataList.value = data.records
|
||||||
|
page.total = data.total
|
||||||
|
dataListLoading.value = false
|
||||||
|
if (done) done()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const addOrUpdateVisible = ref(false)
|
||||||
|
const addOrUpdateRef = ref(null)
|
||||||
|
/**
|
||||||
|
* 新增 / 修改
|
||||||
|
* @param val
|
||||||
|
*/
|
||||||
|
const onAddOrUpdate = (val) => {
|
||||||
|
addOrUpdateVisible.value = true
|
||||||
|
nextTick(() => {
|
||||||
|
addOrUpdateRef.value?.init(val)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 删除
|
||||||
|
* @param id
|
||||||
|
*/
|
||||||
|
const onDelete = (id) => {
|
||||||
|
const ids = id ? [id] : dataListSelections.value?.map(item => {
|
||||||
|
return item.propId
|
||||||
|
})
|
||||||
|
ElMessageBox.confirm(`确定进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
http({
|
||||||
|
url: http.adornUrl(`/prod/spec/${ids}`),
|
||||||
|
method: 'delete',
|
||||||
|
data: http.adornData(ids, false)
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
ElMessage({
|
||||||
|
message: '操作成功',
|
||||||
|
type: 'success',
|
||||||
|
duration: 1500,
|
||||||
|
onClose: () => {
|
||||||
|
getDataList(page)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.catch(() => { })
|
||||||
|
}
|
||||||
|
|
||||||
|
const onSearch = (params, done) => {
|
||||||
|
getDataList(page, params, done)
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
:deep(.prop-value) {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 3px 3px 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue