wyy
2 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