pvtfxms7o
/
yudao
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: pvtfxms7o:9502fa189079236e430e99b57bbb6f0725085865
Branches Tags
pvtfxms7o:main
pvtfxms7o:cyj
pvtfxms7o:yq
pvtfxms7o:qjh
pvtfxms7o:qjj
pvtfxms7o:branch
..
compare: pvtfxms7o:c25697f0bc7c6bef4711ceab4e35265d7dc48551
Branches Tags
pvtfxms7o:main
pvtfxms7o:cyj
pvtfxms7o:yq
pvtfxms7o:qjh
pvtfxms7o:qjj
pvtfxms7o:branch

No commits in common. '9502fa189079236e430e99b57bbb6f0725085865' and 'c25697f0bc7c6bef4711ceab4e35265d7dc48551' have entirely different histories.
9502fa1890 ... c25697f0bc

8 changed files with 586 additions and 518 deletions
Show Stats

67
front-end/mall4v/src/views/modules/shop/hotSearch/add-or-update.vue
Unescape View File

@ -1,12 +1,10 @@
<template> <template>
<div class="mod-hotSearch-add-or-update"> <div class="mod-hotSearch-add-or-update">
<!-- 对话框 -->
<el-dialog <el-dialog
v-model="visible" v-model="visible"
:title="!dataForm.hotSearchId ? '新增' : '修改'" :title="!dataForm.hotSearchId ? '新增' : '修改'"
:close-on-click-modal="false" :close-on-click-modal="false"
> >
<!-- 表单 -->
<el-form <el-form
ref="dataFormRef" ref="dataFormRef"
:model="dataForm" :model="dataForm"
@ -14,8 +12,10 @@
label-width="80px" label-width="80px"
@keyup.enter="onSubmit()" @keyup.enter="onSubmit()"
> >
<!-- 标题输入框 --> <el-form-item
<el-form-item label="标题" prop="title"> label="标题"
prop="title"
>
<el-input <el-input
v-model="dataForm.title" v-model="dataForm.title"
controls-position="right" controls-position="right"
@ -26,8 +26,10 @@
/> />
</el-form-item> </el-form-item>
<!-- 内容文本区域 --> <el-form-item
<el-form-item label="内容" prop="content"> label="内容"
prop="content"
>
<el-input <el-input
v-model="dataForm.content" v-model="dataForm.content"
controls-position="right" controls-position="right"
@ -38,9 +40,10 @@
label="内容" label="内容"
/> />
</el-form-item> </el-form-item>
<el-form-item
<!-- 排序号输入框 --> label="排序号"
<el-form-item label="排序号" prop="seq"> prop="seq"
>
<el-input-number <el-input-number
v-model="dataForm.seq" v-model="dataForm.seq"
controls-position="right" controls-position="right"
@ -48,21 +51,31 @@
label="排序号" label="排序号"
/> />
</el-form-item> </el-form-item>
<el-form-item
<!-- 状态选择 --> label="状态"
<el-form-item label="状态" prop="status"> prop="status"
>
<el-radio-group v-model="dataForm.status"> <el-radio-group v-model="dataForm.status">
<el-radio :label="0">下线</el-radio> <el-radio :label="0">
<el-radio :label="1">正常</el-radio> 下线
</el-radio>
<el-radio :label="1">
正常
</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- 对话框底部按钮 -->
<template #footer> <template #footer>
<div class="dialog-footer"> <div class="dialog-footer">
<el-button @click="visible = false">取消</el-button> <el-button @click="visible = false">
<el-button type="primary" @click="onSubmit()">确定</el-button> 取消
</el-button>
<el-button
type="primary"
@click="onSubmit()"
>
确定
</el-button>
</div> </div>
</template> </template>
</el-dialog> </el-dialog>
@ -72,12 +85,7 @@
<script setup> <script setup>
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import { Debounce } from '@/utils/debounce' import { Debounce } from '@/utils/debounce'
import { ref, reactive, nextTick, defineEmits, defineExpose } from 'vue'
// 定义事件发射器，用于向父组件发送事件
const emit = defineEmits(['refreshDataList']) const emit = defineEmits(['refreshDataList'])
// 表单数据对象，初始化默认值
const dataForm = ref({ const dataForm = ref({
hotSearchId: 0, hotSearchId: 0,
title: '', title: '',
@ -86,18 +94,12 @@ const dataForm = ref({
seq: 0, seq: 0,
status: 0 status: 0
}) })
// 分页信息（此处未在代码中使用）
const page = reactive({ const page = reactive({
total: 0, // 总页数 total: 0, // 总页数
currentPage: 1, // 当前页数 currentPage: 1, // 当前页数
pageSize: 10 // 每页显示多少条 pageSize: 10 // 每页显示多少条
}) })
// 控制对话框显示/隐藏的布尔值
const visible = ref(false) const visible = ref(false)
// 表单验证规则
const dataRule = { const dataRule = {
title: [ title: [
{ required: true, message: '标题不能为空', trigger: 'blur' }, { required: true, message: '标题不能为空', trigger: 'blur' },
@ -111,13 +113,7 @@ const dataRule = {
] ]
} }
// 表单引用
const dataFormRef = ref(null) const dataFormRef = ref(null)
/**
* 初始化方法，接受可选的ID作为参数
* @param id - 热门搜索条目ID，如果存在则为编辑模式
*/
const init = (id) => { const init = (id) => {
dataForm.value.hotSearchId = id || 0 dataForm.value.hotSearchId = id || 0
visible.value = true visible.value = true
@ -163,4 +159,5 @@ const onSubmit = Debounce(() => {
} }
}) })
}) })
</script> </script>

58
front-end/mall4v/src/views/modules/shop/hotSearch/index.vue
Unescape View File

@ -1,6 +1,5 @@
<template> <template>
<div class="mod-hotSearcch"> <div class="mod-hotSearcch">
<!-- 使用avue-crud构建CRUD表格 -->
<avue-crud <avue-crud
ref="crudRef" ref="crudRef"
:page="page" :page="page"
@ -12,7 +11,6 @@
@refresh-change="refreshChange" @refresh-change="refreshChange"
@selection-change="selectionChange" @selection-change="selectionChange"
> >
<!-- 自定义左侧菜单按钮 -->
<template #menu-left> <template #menu-left>
<el-button <el-button
v-if="isAuth('admin:hotSearch:save')" v-if="isAuth('admin:hotSearch:save')"
@ -31,13 +29,18 @@
</el-button> </el-button>
</template> </template>
<!-- 自定义状态列内容 -->
<template #status="scope"> <template #status="scope">
<el-tag v-if="scope.row.status === 0" type="danger">未启用</el-tag> <el-tag
<el-tag v-else>启用</el-tag> v-if="scope.row.status === 0"
type="danger"
>
未启用
</el-tag>
<el-tag v-else>
启用
</el-tag>
</template> </template>
<!-- 自定义行操作菜单 -->
<template #menu="scope"> <template #menu="scope">
<el-button <el-button
v-if="isAuth('admin:hotSearch:update')" v-if="isAuth('admin:hotSearch:update')"
@ -51,14 +54,14 @@
v-if="isAuth('admin:hotSearch:deconste')" v-if="isAuth('admin:hotSearch:deconste')"
type="danger" type="danger"
icon="el-icon-deconste" icon="el-icon-deconste"
@click.stop="onDeconste(scope.row, scope.index)" @click.stop="onDeconste(scope.row,scope.index)"
> >
删除 删除
</el-button> </el-button>
</template> </template>
</avue-crud> </avue-crud>
<!-- 引入用于添加或更新记录的子组件 --> <!-- 弹窗, 新增 / 修改 -->
<add-or-update <add-or-update
v-if="addOrUpdateVisible" v-if="addOrUpdateVisible"
ref="addOrUpdateRef" ref="addOrUpdateRef"
@ -72,23 +75,15 @@ import { isAuth } from '@/utils'
import { ElMessage, ElMessageBox } from 'element-plus' import { ElMessage, ElMessageBox } from 'element-plus'
import { tableOption } from '@/crud/shop/hotSearch.js' import { tableOption } from '@/crud/shop/hotSearch.js'
import AddOrUpdate from './add-or-update.vue' import AddOrUpdate from './add-or-update.vue'
import { ref, reactive, nextTick } from 'vue'
// 数据列表引用
const dataList = ref([]) const dataList = ref([])
// 分页信息
const page = reactive({ const page = reactive({
total: 0, // 总页数 total: 0, // 总页数
currentPage: 1, // 当前页数 currentPage: 1, // 当前页数
pageSize: 10 // 每页显示多少条 pageSize: 10 // 每页显示多少条
}) })
// 表格加载状态
const dataListLoading = ref(false) const dataListLoading = ref(false)
/** /**
* 获取数据列表方法 * 获取数据列表
*/ */
const getDataList = (pageParam, params, done) => { const getDataList = (pageParam, params, done) => {
dataListLoading.value = true dataListLoading.value = true
@ -109,25 +104,20 @@ const getDataList = (pageParam, params, done) => {
if (done) done() if (done) done()
}) })
} }
// 多选框选中的数据
const dataListSelections = ref([]) const dataListSelections = ref([])
/** /**
* 多选回调 * 多选回调
* @param list - 用户选择的数据列表 * @param list
*/ */
const selectionChange = (list) => { const selectionChange = (list) => {
dataListSelections.value = list dataListSelections.value = list
} }
// 控制添加或更新对话框显示/隐藏
const addOrUpdateVisible = ref(false) const addOrUpdateVisible = ref(false)
const addOrUpdateRef = ref(null) const addOrUpdateRef = ref(null)
/** /**
* 新增或修改热门搜索条目 * 新增 / 修改
* @param id - 如果存在则为编辑模式，否则为新增模式 * @param id
*/ */
const onAddOrUpdate = (id) => { const onAddOrUpdate = (id) => {
addOrUpdateVisible.value = true addOrUpdateVisible.value = true
@ -137,20 +127,19 @@ const onAddOrUpdate = (id) => {
} }
/** /**
* 条件查询触发的数据获取 * 点击查询
* @param params - 查询参数
* @param done - 完成回调
*/ */
const onSearch = (params, done) => { const onSearch = (params, done) => {
getDataList(page, params, done) getDataList(page, params, done)
} }
/** /**
* 删除单个或多个热门搜索条目 * 删除
* @param row - 如果传入row则删除单个条目，否则批量删除选中项
*/ */
const onDeconste = (row) => { const onDeconste = (row) => {
const ids = row.hotSearchId ? [row.hotSearchId] : dataListSelections.value?.map(item => item.hotSearchId) const ids = row.hotSearchId ? [row.hotSearchId] : dataListSelections.value?.map(item => {
return item.hotSearchId
})
ElMessageBox.confirm(`确定进行[${row.hotSearchId ? '删除' : '批量删除'}]操作?`, '提示', { ElMessageBox.confirm(`确定进行[${row.hotSearchId ? '删除' : '批量删除'}]操作?`, '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
@ -172,13 +161,10 @@ const onDeconste = (row) => {
} }
}) })
}) })
}).catch(() => {}) }).catch(() => { })
} }
/**
* 刷新页面数据
*/
const refreshChange = () => { const refreshChange = () => {
getDataList(page) getDataList(page)
} }
</script> </script>

83
front-end/mall4v/src/views/modules/shop/notice/add-or-update.vue
Unescape View File

@ -4,7 +4,6 @@
:title="!dataForm.id ? '新增' : '修改'" :title="!dataForm.id ? '新增' : '修改'"
:close-on-click-modal="false" :close-on-click-modal="false"
> >
<!-- 表单 -->
<el-form <el-form
ref="dataFormRef" ref="dataFormRef"
:model="dataForm" :model="dataForm"
@ -12,38 +11,58 @@
label-width="80px" label-width="80px"
@keyup.enter="onSubmit()" @keyup.enter="onSubmit()"
> >
<!-- 公告标题 --> <el-form-item
<el-form-item label="公告标题" prop="title"> label="公告标题"
prop="title"
>
<el-input v-model="dataForm.title" /> <el-input v-model="dataForm.title" />
</el-form-item> </el-form-item>
<el-form-item
<!-- 状态选择 --> label="状态"
<el-form-item label="状态" prop="status"> prop="status"
>
<el-radio-group v-model="dataForm.status"> <el-radio-group v-model="dataForm.status">
<el-radio :label="1">公布</el-radio> <el-radio :label="1">
<el-radio :label="0">撤销</el-radio> 公布
</el-radio>
<el-radio :label="0">
撤销
</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item
<!-- 置顶选项 --> label="置顶"
<el-form-item label="置顶" prop="isTop"> prop="isTop"
>
<el-radio-group v-model="dataForm.isTop"> <el-radio-group v-model="dataForm.isTop">
<el-radio :label="1">是</el-radio> <el-radio :label="1">
<el-radio :label="0">否</el-radio> 是
</el-radio>
<el-radio :label="0">
否
</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item
<!-- 公告内容 --> label="公告内容"
<el-form-item label="公告内容" prop="content"> prop="content"
<TinyMce ref="contentEnRef" v-model="dataForm.content" /> >
<TinyMce
ref="contentEnRef"
v-model="dataForm.content"
/>
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- 对话框底部按钮 -->
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button @click="visible = false">取消</el-button> <el-button
<el-button type="primary" @click="onSubmit()">确定</el-button> @click="visible = false"
>取消</el-button>
<el-button
type="primary"
@click="onSubmit()"
>确定</el-button>
</span> </span>
</template> </template>
</el-dialog> </el-dialog>
@ -52,20 +71,11 @@
<script setup> <script setup>
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import { Debounce } from '@/utils/debounce' import { Debounce } from '@/utils/debounce'
import { ref, nextTick, defineEmits, defineExpose } from 'vue'
// 定义事件发射器，用于向父组件发送事件
const emit = defineEmits(['refreshDataList']) const emit = defineEmits(['refreshDataList'])
// 控制对话框显示/隐藏的布尔值
const visible = ref(false) const visible = ref(false)
// TinyMce组件引用
const contentEnRef = ref(null) const contentEnRef = ref(null)
/** // eslint-disable-next-line no-unused-vars
* 自定义验证规则：确保公告标题不为空白字符
*/
const validateTitle = (rule, value, callback) => { const validateTitle = (rule, value, callback) => {
if (!value.trim()) { if (!value.trim()) {
dataForm.value.title = '' dataForm.value.title = ''
@ -74,8 +84,6 @@ const validateTitle = (rule, value, callback) => {
callback() callback()
} }
} }
// 表单验证规则
const dataRule = { const dataRule = {
title: [ title: [
{ required: true, message: '公告标题不能为空', trigger: 'blur' }, { required: true, message: '公告标题不能为空', trigger: 'blur' },
@ -83,7 +91,6 @@ const dataRule = {
] ]
} }
// 表单数据对象，初始化默认值
const dataForm = ref({ const dataForm = ref({
title: null, title: null,
content: null, content: null,
@ -91,14 +98,7 @@ const dataForm = ref({
status: 1, status: 1,
isTop: 0 isTop: 0
}) })
// 表单引用
const dataFormRef = ref(null) const dataFormRef = ref(null)
/**
* 初始化方法，接受可选的ID作为参数
* @param id - 公告条目ID，如果存在则为编辑模式
*/
const init = (id) => { const init = (id) => {
dataForm.value.id = id || 0 dataForm.value.id = id || 0
visible.value = true visible.value = true
@ -144,4 +144,5 @@ const onSubmit = Debounce(() => {
} }
}) })
}) })
</script> </script>

56
front-end/mall4v/src/views/modules/shop/notice/index.vue
Unescape View File

@ -1,6 +1,5 @@
<template> <template>
<div class="mod-shop-notice"> <div class="mod-shop-notice">
<!-- 使用avue-crud构建CRUD表格 -->
<avue-crud <avue-crud
ref="crudRef" ref="crudRef"
:page="page" :page="page"
@ -11,19 +10,25 @@
@on-load="getDataList" @on-load="getDataList"
@refresh-change="refreshChange" @refresh-change="refreshChange"
> >
<!-- 自定义状态列内容 -->
<template #status="scope"> <template #status="scope">
<el-tag v-if="scope.row.status === 0" type="danger">撤销</el-tag> <el-tag
<el-tag v-else>公布</el-tag> v-if="scope.row.status === 0"
type="danger"
>
撤销
</el-tag>
<el-tag v-else>
公布
</el-tag>
</template> </template>
<!-- 自定义置顶列内容 -->
<template #isTop="scope"> <template #isTop="scope">
<el-tag v-if="scope.row.isTop === 0">否</el-tag> <el-tag v-if="scope.row.isTop === 0">
<el-tag v-else>是</el-tag> 否
</el-tag>
<el-tag v-else>
是
</el-tag>
</template> </template>
<!-- 自定义左侧菜单按钮 -->
<template #menu-left> <template #menu-left>
<el-button <el-button
v-if="isAuth('shop:notice:save')" v-if="isAuth('shop:notice:save')"
@ -34,8 +39,6 @@
新增 新增
</el-button> </el-button>
</template> </template>
<!-- 自定义行操作菜单 -->
<template #menu="scope"> <template #menu="scope">
<el-button <el-button
v-if="isAuth('shop:notice:update')" v-if="isAuth('shop:notice:update')"
@ -55,8 +58,6 @@
</el-button> </el-button>
</template> </template>
</avue-crud> </avue-crud>
<!-- 引入用于添加或更新记录的子组件 -->
<add-or-update <add-or-update
v-if="addOrUpdateVisible" v-if="addOrUpdateVisible"
ref="addOrUpdateRef" ref="addOrUpdateRef"
@ -71,25 +72,16 @@ import { isAuth } from '@/utils'
import { ElMessage, ElMessageBox } from 'element-plus' import { ElMessage, ElMessageBox } from 'element-plus'
import { tableOption } from '@/crud/shop/notice' import { tableOption } from '@/crud/shop/notice'
import AddOrUpdate from './add-or-update.vue' import AddOrUpdate from './add-or-update.vue'
import { ref, reactive, nextTick } from 'vue'
// 数据列表引用
const dataList = ref([]) const dataList = ref([])
// 分页信息
const page = reactive({ const page = reactive({
total: 0, // 总页数 total: 0, // 总页数
currentPage: 1, // 当前页数 currentPage: 1, // 当前页数
pageSize: 10 // 每页显示多少条 pageSize: 10 // 每页显示多少条
}) })
// 表格加载状态
const dataListLoading = ref(false) const dataListLoading = ref(false)
// 控制添加或更新对话框显示/隐藏
const addOrUpdateVisible = ref(false) const addOrUpdateVisible = ref(false)
// 获取数据列表方法
const getDataList = (pageParam, params, done) => { const getDataList = (pageParam, params, done) => {
dataListLoading.value = true dataListLoading.value = true
http({ http({
@ -108,12 +100,10 @@ const getDataList = (pageParam, params, done) => {
}) })
} }
// 添加或更新引用
const addOrUpdateRef = ref(null) const addOrUpdateRef = ref(null)
/** /**
* 新增 / 修改 * 新增 / 修改
* @param id - 如果存在则为编辑模式，否则为新增模式 * @param id
*/ */
const onAddOrUpdate = (id) => { const onAddOrUpdate = (id) => {
addOrUpdateVisible.value = true addOrUpdateVisible.value = true
@ -122,10 +112,6 @@ const onAddOrUpdate = (id) => {
}) })
} }
/**
* 删除公告条目
* @param id - 公告条目的ID
*/
const onDelete = (id) => { const onDelete = (id) => {
ElMessageBox.confirm('确定进行删除操作?', '提示', { ElMessageBox.confirm('确定进行删除操作?', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
@ -148,7 +134,7 @@ const onDelete = (id) => {
} }
}) })
}) })
}).catch(() => {}) }).catch(() => { })
} }
/** /**
@ -158,12 +144,10 @@ const refreshChange = () => {
getDataList(page) getDataList(page)
} }
/**
* 条件查询触发的数据获取
* @param params - 查询参数
* @param done - 完成回调
*/
const onSearch = (params, done) => { const onSearch = (params, done) => {
getDataList(page, params, done) getDataList(page, params, done)
} }
</script> </script>
<style lang="scss" scoped>
</style>

107
front-end/mall4v/src/views/modules/shop/pickAddr/add-or-update.vue
Unescape View File

@ -4,7 +4,6 @@
:title="!dataForm.addrId ? '新增' : '修改'" :title="!dataForm.addrId ? '新增' : '修改'"
:close-on-click-modal="false" :close-on-click-modal="false"
> >
<!-- 表单 -->
<el-form <el-form
ref="dataFormRef" ref="dataFormRef"
:model="dataForm" :model="dataForm"
@ -12,12 +11,15 @@
label-width="80px" label-width="80px"
@keyup.enter="onSubmit()" @keyup.enter="onSubmit()"
> >
<!-- 自提点名称 --> <el-form-item
<el-form-item label="名称" prop="addrName"> label="名称"
<el-input v-model="dataForm.addrName" placeholder="自提点名称" /> prop="addrName"
>
<el-input
v-model="dataForm.addrName"
placeholder="自提点名称"
/>
</el-form-item> </el-form-item>
<!-- 省份、城市、区县选择 -->
<el-form-item label="省份"> <el-form-item label="省份">
<el-col :span="8"> <el-col :span="8">
<el-form-item prop="province"> <el-form-item prop="province">
@ -53,7 +55,10 @@
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-form-item prop="area"> <el-form-item prop="area">
<el-select v-model="dataForm.areaId" placeholder="请选择"> <el-select
v-model="dataForm.areaId"
placeholder="请选择"
>
<el-option <el-option
v-for="area in areaList" v-for="area in areaList"
:key="area.areaId" :key="area.areaId"
@ -64,23 +69,35 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-form-item> </el-form-item>
<el-form-item
<!-- 地址 --> label="地址"
<el-form-item label="地址" prop="addr"> prop="addr"
<el-input v-model="dataForm.addr" placeholder="地址" /> >
<el-input
v-model="dataForm.addr"
placeholder="地址"
/>
</el-form-item> </el-form-item>
<el-form-item
<!-- 手机号 --> label="手机号"
<el-form-item label="手机号" prop="mobile"> prop="mobile"
<el-input v-model="dataForm.mobile" maxlength="11" placeholder="手机号" /> >
<el-input
v-model="dataForm.mobile"
maxlength="11"
placeholder="手机号"
/>
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- 对话框底部按钮 -->
<template #footer> <template #footer>
<span class="dialog-footer"> <span
class="dialog-footer"
>
<el-button @click="visible = false">取消</el-button> <el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="onSubmit()">确定</el-button> <el-button
type="primary"
@click="onSubmit()"
>确定</el-button>
</span> </span>
</template> </template>
</el-dialog> </el-dialog>
@ -90,15 +107,9 @@
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import { isMobile } from '@/utils/validate' import { isMobile } from '@/utils/validate'
import { Debounce } from '@/utils/debounce' import { Debounce } from '@/utils/debounce'
import { ref, reactive, nextTick, defineEmits, defineExpose } from 'vue'
// 定义事件发射器，用于向父组件发送事件
const emit = defineEmits(['refreshDataList']) const emit = defineEmits(['refreshDataList'])
// 控制对话框显示/隐藏的布尔值
const visible = ref(false) const visible = ref(false)
// eslint-disable-next-line no-unused-vars
// 验证手机号格式
const validateMobile = (rule, value, callback) => { const validateMobile = (rule, value, callback) => {
if (!isMobile(value)) { if (!isMobile(value)) {
callback(new Error('手机号格式错误')) callback(new Error('手机号格式错误'))
@ -106,8 +117,6 @@ const validateMobile = (rule, value, callback) => {
callback() callback()
} }
} }
// 表单验证规则
const dataRule = { const dataRule = {
addrName: [ addrName: [
{ required: true, message: '自提点名称不能为空', trigger: 'blur' }, { required: true, message: '自提点名称不能为空', trigger: 'blur' },
@ -127,20 +136,10 @@ const dataRule = {
{ validator: validateMobile, trigger: 'blur' } { validator: validateMobile, trigger: 'blur' }
] ]
} }
// 省列表
const provinceList = ref([]) const provinceList = ref([])
// 表单引用
const dataFormRef = ref(null) const dataFormRef = ref(null)
// 城市列表
const cityList = ref([]) const cityList = ref([])
// 区/县列表
const areaList = ref([]) const areaList = ref([])
// 表单数据对象，初始化默认值
const dataForm = reactive({ const dataForm = reactive({
addrId: 0, addrId: 0,
addr: '', addr: '',
@ -153,18 +152,11 @@ const dataForm = reactive({
cityId: null, cityId: null,
provinceId: null provinceId: null
}) })
// 分页信息
const page = reactive({ const page = reactive({
total: 0, // 总页数 total: 0, // 总页数
currentPage: 1, // 当前页数 currentPage: 1, // 当前页数
pageSize: 10 // 每页显示多少条 pageSize: 10 // 每页显示多少条
}) })
/**
* 初始化方法，接受可选的ID作为参数
* @param id - 自提点地址条目ID，如果存在则为编辑模式
*/
const init = (id) => { const init = (id) => {
dataForm.addrId = id || 0 dataForm.addrId = id || 0
visible.value = true visible.value = true
@ -181,7 +173,9 @@ const init = (id) => {
}) })
if (dataForm.addrId) { if (dataForm.addrId) {
http({ http({
url: http.adornUrl(`/shop/pickAddr/info/${dataForm.addrId}`), url: http.adornUrl(
`/shop/pickAddr/info/${dataForm.addrId}`
),
method: 'get', method: 'get',
params: http.adornParams() params: http.adornParams()
}) })
@ -203,10 +197,6 @@ const init = (id) => {
} }
defineExpose({ init }) defineExpose({ init })
/**
* 根据父级ID获取地区列表
* @param pid - 父级地区ID，默认为0表示获取省级列表
*/
const listAreaByParentId = (pid) => { const listAreaByParentId = (pid) => {
if (!pid) pid = 0 if (!pid) pid = 0
return http({ return http({
@ -217,26 +207,26 @@ const listAreaByParentId = (pid) => {
} }
/** /**
* 选择省时触发 * 选择省
* @param val - 省ID * @param val
*/ */
const selectProvince = (val) => { const selectProvince = (val) => {
dataForm.cityId = null dataForm.cityId = null
dataForm.city = '' dataForm.city = ''
dataForm.areaId = null // 获取城市的select
dataForm.area = ''
listAreaByParentId(val).then(({ data }) => { listAreaByParentId(val).then(({ data }) => {
cityList.value = data cityList.value = data
}) })
} }
/** /**
* 选择市时触发 * 选择市
* @param val - 市ID * @param val
*/ */
const selectCity = (val) => { const selectCity = (val) => {
dataForm.areaId = null dataForm.areaId = null
dataForm.area = '' dataForm.area = ''
// 获取区的select
listAreaByParentId(val).then(({ data }) => { listAreaByParentId(val).then(({ data }) => {
areaList.value = data areaList.value = data
}) })
@ -246,23 +236,24 @@ const selectCity = (val) => {
* 表单提交 * 表单提交
*/ */
const onSubmit = Debounce(() => { const onSubmit = Debounce(() => {
// 设置省市区的名字
for (let i = 0; i < provinceList.value.length; i++) { for (let i = 0; i < provinceList.value.length; i++) {
if (provinceList.value[i].areaId === dataForm.provinceId) { if (provinceList.value[i].areaId === dataForm.provinceId) {
// 将省名字保存起来
dataForm.province = provinceList.value[i].areaName dataForm.province = provinceList.value[i].areaName
} }
} }
for (let i = 0; i < cityList.value.length; i++) { for (let i = 0; i < cityList.value.length; i++) {
if (cityList.value[i].areaId === dataForm.cityId) { if (cityList.value[i].areaId === dataForm.cityId) {
// 将市名字保存起来
dataForm.city = cityList.value[i].areaName dataForm.city = cityList.value[i].areaName
} }
} }
for (let i = 0; i < areaList.value.length; i++) { for (let i = 0; i < areaList.value.length; i++) {
if (areaList.value[i].areaId === dataForm.areaId) { if (areaList.value[i].areaId === dataForm.areaId) {
// 将市名字保存起来
dataForm.area = areaList.value[i].areaName dataForm.area = areaList.value[i].areaName
} }
} }
dataFormRef.value?.validate(valid => { dataFormRef.value?.validate(valid => {
if (valid) { if (valid) {
http({ http({

40
front-end/mall4v/src/views/modules/shop/pickAddr/index.vue
Unescape View File

@ -1,6 +1,5 @@
<template> <template>
<div class="mod-pickAddr"> <div class="mod-pickAddr">
<!-- 使用avue-crud构建CRUD表格 -->
<avue-crud <avue-crud
ref="crudRef" ref="crudRef"
:page="page" :page="page"
@ -11,7 +10,6 @@
@selection-change="selectionChange" @selection-change="selectionChange"
@on-load="getDataList" @on-load="getDataList"
> >
<!-- 自定义左侧菜单按钮 -->
<template #menu-left> <template #menu-left>
<el-button <el-button
v-if="isAuth('shop:pickAddr:save')" v-if="isAuth('shop:pickAddr:save')"
@ -32,7 +30,6 @@
</el-button> </el-button>
</template> </template>
<!-- 自定义行操作菜单 -->
<template #menu="scope"> <template #menu="scope">
<el-button <el-button
v-if="isAuth('shop:pickAddr:update')" v-if="isAuth('shop:pickAddr:update')"
@ -68,28 +65,18 @@ import { isAuth } from '@/utils'
import { ElMessage, ElMessageBox } from 'element-plus' import { ElMessage, ElMessageBox } from 'element-plus'
import AddOrUpdate from './add-or-update.vue' import AddOrUpdate from './add-or-update.vue'
import { tableOption } from '@/crud/shop/pickAddr.js' import { tableOption } from '@/crud/shop/pickAddr.js'
import { ref, reactive, nextTick } from 'vue'
// 定义权限控制对象
const permission = { const permission = {
delBtn: isAuth('prod:prod:delete') delBtn: isAuth('prod:prod:delete')
} }
// 数据列表引用
const dataList = ref([]) const dataList = ref([])
// 已选中的数据项
const dataListSelections = ref([]) const dataListSelections = ref([])
// 分页信息
const page = reactive({ const page = reactive({
total: 0, // 总页数 total: 0, // 总页数
currentPage: 1, // 当前页数 currentPage: 1, // 当前页数
pageSize: 10 // 每页显示多少条 pageSize: 10 // 每页显示多少条
}) })
/** /**
* 获取数据列表方法 * 获取数据列表
*/ */
const getDataList = (pageParam, params, done) => { const getDataList = (pageParam, params, done) => {
http({ http({
@ -112,13 +99,11 @@ const getDataList = (pageParam, params, done) => {
}) })
} }
// 控制添加或更新对话框显示/隐藏
const addOrUpdateVisible = ref(false) const addOrUpdateVisible = ref(false)
const addOrUpdateRef = ref(null) const addOrUpdateRef = ref(null)
/** /**
* 新增 / 修改 * 新增 / 修改
* @param id - 如果存在则为编辑模式，否则为新增模式 * @param id
*/ */
const onAddOrUpdate = (id) => { const onAddOrUpdate = (id) => {
addOrUpdateVisible.value = true addOrUpdateVisible.value = true
@ -128,11 +113,13 @@ const onAddOrUpdate = (id) => {
} }
/** /**
* 删除单个或多个自提点地址 * 删除
* @param id - 单个自提点地址ID，若未提供则执行批量删除 * @param id
*/ */
const onDelete = (id) => { const onDelete = (id) => {
const ids = id ? [id] : dataListSelections.value?.map(item => item.addrId) const ids = id ? [id] : dataListSelections.value?.map(item => {
return item.addrId
})
ElMessageBox.confirm( ElMessageBox.confirm(
'确定进行删除操作?', '提示', '确定进行删除操作?', '提示',
{ {
@ -158,21 +145,20 @@ const onDelete = (id) => {
}) })
}) })
}) })
.catch(() => {}) .catch(() => { })
} }
/** /**
* 条件查询触发的数据获取 * 条件查询
* @param params - 查询参数 * @param params
* @param done - 完成回调 * @param done
*/ */
const onSearch = (params, done) => { const onSearch = (params, done) => {
getDataList(page, params, done) getDataList(page, params, done)
} }
/** /**
* 多选变化时触发 * 多选变化
* @param val - 当前选择的数据项数组 * @param val
*/ */
const selectionChange = (val) => { const selectionChange = (val) => {
dataListSelections.value = val dataListSelections.value = val

523
front-end/mall4v/src/views/modules/shop/transport/add-or-update.vue
Unescape View File

@ -1,142 +1,326 @@
<template> <template>
<!-- 使用Element Plus的el-dialog组件创建一个对话框 -->
<el-dialog <el-dialog
v-model="visible" v-model="visible"
:title="!dataForm.transportId ? '新增' : '修改'" :title="!dataForm.transportId ? '新增' : '修改'"
:close-on-click-modal="false" :close-on-click-modal="false"
width="1400px" width="1400px"
class="transport-dialog" class="transport-dialog"
> >
<!-- 表单元素，包含多个表单项和一个表格 --> <el-form
<el-form ref="dataFormRef"
ref="dataFormRef" :model="dataForm"
:model="dataForm" label-width="80px"
label-width="80px" @keyup.enter="onSubmit()"
@keyup.enter="onSubmit()" >
> <el-form-item
<!-- 模板名称输入框 --> label="模板名称"
<el-form-item prop="transName"
label="模板名称" :rules="[
prop="transName"
:rules="[
{ required: true, message: '模板名称不能为空'}, { required: true, message: '模板名称不能为空'},
{ pattern: /\s\S+|S+\s|\S/, message: '请输入正确的模板名称', trigger: 'blur' }]" { pattern: /\s\S+|S+\s|\S/, message: '请输入正确的模板名称', trigger: 'blur' }
> ]"
<el-input v-model="dataForm.transName" placeholder="模板名称" /> >
</el-form-item> <el-input
v-model="dataForm.transName"
<!-- 模板类型选择器 --> placeholder="模板名称"
<el-form-item label="模板类型" prop="isFreeFee" required> />
<el-radio-group v-model="dataForm.isFreeFee" @change="changeFreeFee">
<el-radio :label="0">买家承担运费</el-radio>
<el-radio :label="1">卖家包邮</el-radio>
</el-radio-group>
</el-form-item>
<!-- 收费方式选择器 -->
<el-form-item label="收费方式" prop="chargeType">
<el-radio-group v-model="dataForm.chargeType" :disabled="dataForm.isFreeFee == 1">
<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-table
:data="dataForm.transfees"
border
style="width: 100%;"
class="table-con"
>
<!-- 可配送区域列 -->
<el-table-column header-align="center" align="center" width="450" label="可配送区域">
<template #default="scope">
<span v-if="scope.$index == 0">所有地区</span>
<span v-if="(!scope.row.cityList || !scope.row.cityList.length) && scope.$index > 0">请选择可配送区域</span>
<span v-if="scope.$index > 0">
<el-tag v-for="city in scope.row.cityList" :key="city.areaId">{{ city.areaName }}</el-tag>
</span>
<el-button v-if="isAuth('shop:transfee:update') && scope.$index > 0" type="text" @click="onAddOrUpdate(`${scope.$index}`)">编辑</el-button>
<el-button v-if="isAuth('shop:transfee:delete') && scope.$index > 0" type="text" @click="onDelete(`${scope.$index}`)">删除</el-button>
</template>
</el-table-column>
<!-- 动态生成的列，根据chargeType显示不同的标题 -->
<el-table-column v-for="(item, index) in tableTitle" :key="index" header-align="center" align="center" :label="item">
<template #default="scope">
<el-form-item :prop="`transfees.${scope.$index}.[${index}]`" label-width="0px" :rules="[{ required: true, message: `${item}不能为空`}]">
<el-input v-model="scope.row[index]" type="number" :min="0" :disabled="!scope.row.status && scope.$index === 0" @change="checkNumber(scope.row, index + 1)" />
</el-form-item> </el-form-item>
</template> <el-form-item
</el-table-column> label="模板类型"
</el-table> prop="isFreeFee"
required="required"
<!-- 添加新的运费项按钮 --> >
<div v-if="dataForm.isFreeFee == 0" style="margin-top: 20px"> <el-radio-group
<el-button type="primary" icon="el-icon-location-outline" @click="addTransfee()">点击添加可配送的区域和运费</el-button> v-model="dataForm.isFreeFee"
</div> @change="changeFreeFee"
>
<!-- 指定条件包邮复选框 --> <el-radio :label="0">
<el-checkbox v-if="!dataForm.isFreeFee" v-model="dataForm.hasFreeCondition" style="margin-top:10px;font-size:50px">指定条件包邮</el-checkbox> 买家承担运费
</el-radio>
<!-- 包邮条件表格 --> <el-radio :label="1">
<el-table 卖家包邮
v-if="dataForm.hasFreeCondition && !dataForm.isFreeFee" </el-radio>
:data="dataForm.transfeeFrees"
border
style="width: 100%;"
>
<!-- 指定区域列 -->
<el-table-column header-align="center" align="center" width="350" label="指定区域">
<template #default="scope">
<span v-if="!scope.row.freeCityList || !scope.row.freeCityList.length">请选择指定包邮城市</span>
<el-tag v-for="city in scope.row.freeCityList" :key="city.areaId">{{ city.areaName }}</el-tag>
<el-button v-if="isAuth('shop:transfee:update')" type="text" @click="addOrUpdateTransfeeFree(`${scope.$index}`)">编辑</el-button>
<el-button v-if="isAuth('shop:transfee:delete')" type="text" @click="deleteTransfeeFree(`${scope.$index}`)">删除</el-button>
</template>
</el-table-column>
<!-- 设置包邮条件列 -->
<el-table-column header-align="center" align="center" width="600" label="设置包邮条件">
<template #default="scope">
<el-radio-group v-model="scope.row.freeType">
<el-radio :label="0">满件/重量/体积包邮</el-radio>
<el-radio :label="1">满金额包邮</el-radio>
<el-radio :label="2">满件/重量/体积且满金额包邮</el-radio>
</el-radio-group> </el-radio-group>
</template> </el-form-item>
</el-table-column> <el-form-item
label="收费方式"
<!-- 包邮条件详情列 --> prop="chargeType"
<el-table-column header-align="center" align="left"> >
<template #default="scope"> <el-radio-group
<el-form-item v-if="scope.row.freeType == 1 || scope.row.freeType == 2" :prop="`transfeeFrees.${scope.$index}.amount`" label-width="0px" :rules="[{ required: true, message: `不能为空`}]"> v-model="dataForm.chargeType"
满 <el-input v-model="scope.row.amount" style="width:100px" /> 元包邮 :disabled="dataForm.isFreeFee == 1"
</el-form-item> >
<el-form-item v-if="scope.row.freeType == 0 || scope.row.freeType == 2" :prop="`transfeeFrees.${scope.$index}.piece`" label-width="0px" :rules="[{ required: true, message: `不能为空`}]"> <el-radio :label="0">
满 <el-input v-model="scope.row.piece" style="width:100px" /> 件/重量/体积包邮 按件数
</el-form-item> </el-radio>
</template> <el-radio :label="1">
</el-table-column> 按重量
</el-table> </el-radio>
<el-radio :label="2">
<!-- 添加新的包邮条件按钮 --> 按体积
<div v-if="dataForm.isFreeFee == 0" style="margin-top: 20px"> </el-radio>
<el-button type="primary" icon="el-icon-location-outline" @click="addTransfeeFree()">点击添加指定包邮条件</el-button> </el-radio-group>
</div> </el-form-item>
</el-form> <el-table
:data="dataForm.transfees"
<!-- 对话框底部按钮 --> border
<template #footer> style="width: 100%;"
<div class="dialog-footer"> class="table-con"
<el-button @click="visible = false">取消</el-button> >
<el-button type="primary" @click="onSubmit()">确定</el-button> <el-table-column
</div> header-align="center"
</template> align="center"
width="450"
<!-- 子组件，用于添加或更新城市选择 --> label="可配送区域"
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdateRef" @refresh-data-list="getDataList" /> >
<template #default="scope">
<span v-if="scope.$index == 0">所有地区</span>
<span v-if="(!scope.row.cityList || !scope.row.cityList.length) && scope.$index > 0">请选择可配送区域</span>
<span v-if="scope.$index > 0">
<el-tag
v-for="city in scope.row.cityList"
:key="city.areaId"
>{{ city.areaName }}</el-tag>
</span>
<el-button
v-if="isAuth('shop:transfee:update') && scope.$index > 0"
type="text"
@click="onAddOrUpdate(`${scope.$index}`)"
>
编辑
</el-button>
<el-button
v-if="isAuth('shop:transfee:delete') && scope.$index > 0"
type="text"
@click="onDelete(`${scope.$index}`)"
>
删除
</el-button>
</template>
</el-table-column>
<el-table-column
header-align="center"
align="center"
width="180"
:label="tableTitle[0]"
>
<template #default="scope">
<el-form-item
:prop="`transfees.${scope.$index}.firstPiece`"
label-width="0px"
:rules="[{ required: true, message: `${tableTitle[0]}不能为空`}]"
>
<el-input
v-model="scope.row.firstPiece"
type="number"
:disabled="!scope.row.status && scope.$index === 0"
@change="checkNumber(scope.row, 1)"
/>
</el-form-item>
</template>
</el-table-column>
<el-table-column
header-align="center"
align="center"
:label="tableTitle[1]"
>
<template #default="scope">
<el-form-item
:prop="`transfees.${scope.$index}.firstFee`"
label-width="0px"
:rules="[{ required: true, message: `${tableTitle[1]}不能为空`}]"
>
<el-input
v-model="scope.row.firstFee"
type="number"
:min="0"
:disabled="!scope.row.status && scope.$index === 0"
/>
</el-form-item>
</template>
</el-table-column>
<el-table-column
header-align="center"
align="center"
:label="tableTitle[2]"
>
<template #default="scope">
<el-form-item
:prop="`transfees.${scope.$index}.continuousPiece`"
label-width="0px"
:rules="[{ required: true, message: `${tableTitle[2]}不能为空`}]"
>
<el-input
v-model="scope.row.continuousPiece"
type="number"
:disabled="!scope.row.status && scope.$index === 0"
@change="checkNumber(scope.row, 3)"
/>
</el-form-item>
</template>
</el-table-column>
<el-table-column
header-align="center"
align="center"
:label="tableTitle[3]"
>
<template #default="scope">
<el-form-item
:prop="`transfees.${scope.$index}.continuousFee`"
label-width="0px"
:rules="[{ required: true, message: `${tableTitle[3]}不能为空`}]"
>
<el-input
v-model="scope.row.continuousFee"
type="number"
:min="0"
:disabled="!scope.row.status && scope.$index === 0"
/>
</el-form-item>
</template>
</el-table-column>
</el-table>
<div
v-if="dataForm.isFreeFee == 0"
style="margin-top: 20px"
>
<el-button
type="primary"
icon="el-icon-location-outline"
@click="addTransfee()"
>
点击添加可配送的区域和运费
</el-button>
</div>
<el-checkbox
v-if="!dataForm.isFreeFee"
v-model="dataForm.hasFreeCondition"
style="margin-top:10px;font-size:50px"
>
指定条件包邮
</el-checkbox>
<el-table
v-if="dataForm.hasFreeCondition && !dataForm.isFreeFee"
:data="dataForm.transfeeFrees"
border
style="width: 100%;"
>
<el-table-column
header-align="center"
align="center"
width="350"
label="指定区域"
>
<template #default="scope">
<span v-if="!scope.row.freeCityList || !scope.row.freeCityList.length">请选择指定包邮城市</span>
<el-tag
v-for="city in scope.row.freeCityList"
:key="city.areaId"
>
{{ city.areaName }}
</el-tag>
<el-button
v-if="isAuth('shop:transfee:update')"
type="text"
@click="addOrUpdateTransfeeFree(`${scope.$index}`)"
>
编辑
</el-button>
<el-button
v-if="isAuth('shop:transfee:delete')"
type="text"
@click="deleteTransfeeFree(`${scope.$index}`)"
>
删除
</el-button>
</template>
</el-table-column>
<el-table-column
header-align="center"
align="center"
width="600"
label="设置包邮条件"
>
<template #default="scope">
<el-radio-group v-model="scope.row.freeType">
<el-radio :label="0">
满件/重量/体积包邮
</el-radio>
<el-radio :label="1">
满金额包邮
</el-radio>
<el-radio :label="2">
满件/重量/体积且满金额包邮
</el-radio>
</el-radio-group>
</template>
</el-table-column>
<el-table-column
header-align="center"
align="left"
>
<template #default="scope">
<el-form-item
v-if="scope.row.freeType == 1 || scope.row.freeType == 2"
:prop="`transfeeFrees.${scope.$index}.amount`"
label-width="0px"
:rules="[{ required: true, message: `不能为空`}]"
>
满 <el-input
v-model="scope.row.amount"
style="width:100px"
/> 元包邮
</el-form-item>
<el-form-item
v-if="scope.row.freeType == 0 || scope.row.freeType == 2"
:prop="`transfeeFrees.${scope.$index}.piece`"
label-width="0px"
:rules="[{ required: true, message: `不能为空`}]"
>
满 <el-input
v-model="scope.row.piece"
style="width:100px"
/> 件/重量/体积包邮
</el-form-item>
</template>
</el-table-column>
</el-table>
<div
v-if="dataForm.isFreeFee == 0"
style="margin-top: 20px"
>
<el-button
type="primary"
icon="el-icon-location-outline"
@click="addTransfeeFree()"
>
点击添加指定包邮条件
</el-button>
</div>
</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>
<!-- 弹窗, 新增 / 修改 -->
<add-or-update
v-if="addOrUpdateVisible"
ref="addOrUpdateRef"
@refresh-data-list="getDataList"
/>
</el-dialog> </el-dialog>
</template> </template>
@ -145,18 +329,10 @@ import { isAuth } from '@/utils'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import { Debounce } from '@/utils/debounce' import { Debounce } from '@/utils/debounce'
import AddOrUpdate from './add-or-update.vue' import AddOrUpdate from './add-or-update.vue'
import { ref, reactive, computed, watch, nextTick } from 'vue'
// 定义一个事件发射器，允许子组件向父组件发送消息
const emit = defineEmits(['refreshDataList']) const emit = defineEmits(['refreshDataList'])
// 是否有免费条件的标志
const hasFreeCondition = ref(0) const hasFreeCondition = ref(0)
// 控制对话框的可见性
const visible = ref(false) const visible = ref(false)
// 表单数据对象，包含运输模板的各项信息
const dataForm = ref({ const dataForm = ref({
hasFreeCondition: false, hasFreeCondition: false,
transName: '', transName: '',
@ -167,28 +343,20 @@ const dataForm = ref({
transfees: [{ cityList: [], status: 1 }], transfees: [{ cityList: [], status: 1 }],
transfeeFrees: [{ freeCityList: [], freeType: 0 }] transfeeFrees: [{ freeCityList: [], freeType: 0 }]
}) })
// 分页配置
const page = reactive({ const page = reactive({
total: 0, // 总页数 total: 0, // 总页数
currentPage: 1, // 当前页数 currentPage: 1, // 当前页数
pageSize: 10 // 每页显示多少条 pageSize: 10 // 每页显示多少条
}) })
// 根据chargeType计算表格标题
const tableTitle = computed(() => { const tableTitle = computed(() => {
const titles = [ const titles = [['首件(个)', '运费(元)', '续件(个)', '续费(元)'], ['首重(kg)', '运费(元)', '续重(kg)', '续费(元)'], ['首体积(m³)', '运费(元)', '续体积(m³)', '续费(元)']]
['首件(个)', '运费(元)', '续件(个)', '续费(元)'],
['首重(kg)', '运费(元)', '续重(kg)', '续费(元)'],
['首体积(m³)', '运费(元)', '续体积(m³)', '续费(元)']
]
if (dataForm.value.chargeType) { if (dataForm.value.chargeType) {
return titles[dataForm.value.chargeType] return titles[dataForm.value.chargeType]
} }
return titles[0] return titles[0]
}) })
// 监听visible值的变化，如果对话框不可见则关闭选择城市的对话框 // 如果当前对话框不可见，则关闭选择城市的对话框
watch( watch(
() => visible.value, () => visible.value,
(val) => { (val) => {
@ -198,19 +366,11 @@ watch(
} }
) )
// 控制添加或更新对话框的可见性
const addOrUpdateVisible = ref(false) const addOrUpdateVisible = ref(false)
const dataFormRef = ref(null) const dataFormRef = ref(null)
/**
* 初始化方法，根据ID加载或创建新的运输模板
* @param id - 运输模板ID，若不存在则为创建模式
*/
const init = (id) => { const init = (id) => {
visible.value = true visible.value = true
dataForm.value.transportId = id || 0 dataForm.value.transportId = id || 0
// 确保在DOM更新后重置表单字段
nextTick(() => { nextTick(() => {
dataFormRef.value?.resetFields() dataFormRef.value?.resetFields()
dataForm.value = { dataForm.value = {
@ -224,10 +384,9 @@ const init = (id) => {
transfeeFrees: [{ freeCityList: [], freeType: 0 }] transfeeFrees: [{ freeCityList: [], freeType: 0 }]
} }
}) })
// 如果存在ID，则加载现有运输模板的数据
if (dataForm.value.transportId) { if (dataForm.value.transportId) {
http({ http({
// 获取运费模板数据
url: http.adornUrl(`/shop/transport/info/${dataForm.value.transportId}`), url: http.adornUrl(`/shop/transport/info/${dataForm.value.transportId}`),
method: 'get' method: 'get'
}) })
@ -242,16 +401,8 @@ const init = (id) => {
}) })
} }
} }
// 将init方法暴露给父组件调用
defineExpose({ init }) defineExpose({ init })
/**
* 获取城市列表并填充到对应的运费项或包邮条件中
* @param row - 当前行索引
* @param cityList - 城市列表
* @param type - 类型标识符，0为普通运费项，1为包邮条件
*/
const getDataList = (row, cityList, type) => { const getDataList = (row, cityList, type) => {
if (type === 0) { if (type === 0) {
dataForm.value.transfees[row].cityList = cityList dataForm.value.transfees[row].cityList = cityList
@ -262,25 +413,22 @@ const getDataList = (row, cityList, type) => {
} }
/** /**
* 添加一个新的运费项 * 添加运费项
*/ */
const addTransfee = () => { const addTransfee = () => {
dataForm.value.transfees.push({ cityList: [], status: 1 }) dataForm.value.transfees.push({ cityList: [], status: 1 })
} }
/** /**
* 删除指定的运费项 * 删除运费项
* @param rowIndex - 要删除的行索引
*/ */
const onDelete = (rowIndex) => { const onDelete = (rowIndex) => {
dataForm.value.transfees.splice(rowIndex, 1) dataForm.value.transfees.splice(rowIndex, 1)
} }
// 引用添加或更新子组件实例
const addOrUpdateRef = ref(null) const addOrUpdateRef = ref(null)
/** /**
* 可配送区域和运费编辑（当前功能未实现） * 可配送区域和运费编辑
*/ */
const onAddOrUpdate = () => { const onAddOrUpdate = () => {
ElMessage({ ElMessage({
@ -300,16 +448,14 @@ const addTransfeeFree = () => {
} }
/** /**
* 删除指定的包邮条件 * 删除指定包邮条件
* @param rowIndex - 要删除的行索引
*/ */
const deleteTransfeeFree = (rowIndex) => { const deleteTransfeeFree = (rowIndex) => {
dataForm.value.transfeeFrees?.splice(rowIndex, 1) dataForm.value.transfeeFrees?.splice(rowIndex, 1)
} }
/** /**
* 编辑指定的包邮条件 * 指定包邮条件编辑
* @param rowIndex - 要编辑的行索引
*/ */
const addOrUpdateTransfeeFree = (rowIndex) => { const addOrUpdateTransfeeFree = (rowIndex) => {
addOrUpdateVisible.value = true addOrUpdateVisible.value = true
@ -324,8 +470,8 @@ const addOrUpdateTransfeeFree = (rowIndex) => {
} }
/** /**
* 改变模板类型，0表示买家承担运费，1表示卖家包邮 * 改变模板类型， 0 买家承担运费 1 卖家包邮
* @param val - 新的选择值 * @param val
*/ */
const changeFreeFee = (val) => { const changeFreeFee = (val) => {
dataForm.value.hasFreeCondition = false dataForm.value.hasFreeCondition = false
@ -338,9 +484,7 @@ const changeFreeFee = (val) => {
} }
/** /**
* 校验输入的数字，确保其为正整数且不小于零 * 校验输入的数字
* @param row - 当前行对象
* @param type - 需要校验的字段类型
*/ */
const checkNumber = (row, type) => { const checkNumber = (row, type) => {
if (type === 1) { if (type === 1) {
@ -353,9 +497,7 @@ const checkNumber = (row, type) => {
} }
/** /**
* 保留整数并处理小于零的情况 * 保留整数并小于零的数设为0
* @param num - 输入的数字
* @returns 处理后的数字
*/ */
const getNumber = (num) => { const getNumber = (num) => {
num = Math.round(num) num = Math.round(num)
@ -363,12 +505,11 @@ const getNumber = (num) => {
} }
/** /**
* 提交表单，保存运输模板信息 * 表单提交
*/ */
const onSubmit = Debounce(() => { const onSubmit = Debounce(() => {
dataFormRef.value?.validate((valid) => { dataFormRef.value?.validate((valid) => {
if (valid) { if (valid) {
// 检查每个运费项是否选择了可配送区域
for (let i = 1; i < dataForm.value.transfees.length; i++) { for (let i = 1; i < dataForm.value.transfees.length; i++) {
const transfee = dataForm.value.transfees[i] const transfee = dataForm.value.transfees[i]
if (transfee.cityList.length === 0) { if (transfee.cityList.length === 0) {
@ -380,18 +521,12 @@ const onSubmit = Debounce(() => {
return return
} }
} }
// 设置是否有免费条件
if (dataForm.value.hasFreeCondition) { if (dataForm.value.hasFreeCondition) {
hasFreeCondition.value = 1 hasFreeCondition.value = 1
} else { } else {
hasFreeCondition.value = 0 hasFreeCondition.value = 0
} }
// 清空默认运费项的城市列表，因为它是全局性的
dataForm.value.transfees[0].cityList = [] dataForm.value.transfees[0].cityList = []
// 发起HTTP请求保存运输模板信息
http({ http({
url: http.adornUrl('/shop/transport'), url: http.adornUrl('/shop/transport'),
method: dataForm.value.transportId ? 'put' : 'post', method: dataForm.value.transportId ? 'put' : 'post',

170
front-end/mall4v/src/views/modules/shop/transport/index.vue
Unescape View File

@ -1,99 +1,91 @@
<template> <template>
<!-- 使用avue-crud组件创建一个可编辑的数据表格 -->
<div class="mod-transport"> <div class="mod-transport">
<avue-crud <avue-crud
ref="crudRef" ref="crudRef"
:page="page" :page="page"
:data="dataList" :data="dataList"
:option="tableOption" :option="tableOption"
@search-change="onSearch" @search-change="onSearch"
@selection-change="selectionChange" @selection-change="selectionChange"
@on-load="getDataList" @on-load="getDataList"
> >
<!-- 自定义列内容：产品属性值 --> <template #prod-prop-values="scope">
<template #prod-prop-values="scope"> <el-tag
<el-tag v-for="item in scope.row.prodPropValues" :key="item.valueId">{{ item.propValue }}</el-tag> v-for="item in scope.row.prodPropValues"
</template> :key="item.valueId"
>
{{ item.propValue }}
</el-tag>
</template>
<template #menu-left>
<el-button
v-if="isAuth('shop:transport:save')"
type="primary"
icon="el-icon-plus"
@click.stop="onAddOrUpdate()"
>
新增
</el-button>
<!-- 左侧菜单按钮 --> <el-button
<template #menu-left> v-if="isAuth('shop:transport:delete')"
<el-button type="danger"
v-if="isAuth('shop:transport:save')" :disabled="dataListSelections.length <= 0"
type="primary" @click="onDelete()"
icon="el-icon-plus" >
@click.stop="onAddOrUpdate()" 批量删除
> </el-button>
新增 </template>
</el-button>
<el-button <template #menu="scope">
v-if="isAuth('shop:transport:delete')" <el-button
type="danger" v-if="isAuth('shop:transport:update')"
:disabled="dataListSelections.length <= 0" type="primary"
@click="onDelete()" icon="el-icon-edit"
> @click.stop="onAddOrUpdate(scope.row.transportId)"
批量删除 >
</el-button> 修改
</template> </el-button>
<!-- 行内操作按钮 --> <el-button
<template #menu="scope"> v-if="isAuth('shop:transport:delete')"
<el-button type="danger"
v-if="isAuth('shop:transport:update')" icon="el-icon-delete"
type="primary" @click.stop="onDelete(scope.row.transportId)"
icon="el-icon-edit" >
@click.stop="onAddOrUpdate(scope.row.transportId)" 删除
> </el-button>
修改 </template>
</el-button>
<el-button
v-if="isAuth('shop:transport:delete')"
type="danger"
icon="el-icon-delete"
@click.stop="onDelete(scope.row.transportId)"
>
删除
</el-button>
</template>
</avue-crud> </avue-crud>
<!-- 弹窗, 新增 / 修改 --> <!-- 弹窗, 新增 / 修改 -->
<add-or-update <add-or-update
v-if="addOrUpdateVisible" v-if="addOrUpdateVisible"
ref="addOrUpdateRef" ref="addOrUpdateRef"
@refresh-data-list="getDataList" @refresh-data-list="getDataList"
/> />
</div> </div>
</template> </template>
<script setup> <script setup>
import { isAuth } from '@/utils' // 导入权限验证工具函数 import { isAuth } from '@/utils'
import { ElMessage, ElMessageBox } from 'element-plus' // 导入Element Plus的消息提示和消息框组件 import { ElMessage, ElMessageBox } from 'element-plus'
import { tableOption } from '@/crud/shop/transport' // 导入表格配置选项 import { tableOption } from '@/crud/shop/transport'
import AddOrUpdate from './add-or-update.vue' // 导入添加或更新对话框组件 import AddOrUpdate from './add-or-update.vue'
import { ref, nextTick } from 'vue' // 导入Vue的响应式API const dataList = ref([])
import http from '@/api/http' // 假设这是导入的HTTP请求模块 const dataListSelections = ref([])
// 定义响应式变量
const dataList = ref([]) // 数据列表
const dataListSelections = ref([]) // 多选框选中的数据项
const page = ref({ const page = ref({
total: 0, // 总页数 total: 0, // 总页数
currentPage: 1, // 当前页码 currentPage: 1, // 当前页数
pageSize: 10 // 每页大小 pageSize: 10 // 每页显示多少条
}) })
/** /**
* 获取数据列表 * 获取数据列表
* @param {Object} pageParam - 分页参数
* @param {Object} params - 查询参数
* @param {Function} done - 加载完成回调函数
*/ */
const getDataList = (pageParam, params, done) => { const getDataList = (pageParam, params, done) => {
http({ http({
url: http.adornUrl('/shop/transport/page'), // 请求URL url: http.adornUrl('/shop/transport/page'),
method: 'get', // HTTP方法 method: 'get',
params: http.adornParams( params: http.adornParams(
Object.assign( Object.assign(
{ {
@ -102,36 +94,34 @@ const getDataList = (pageParam, params, done) => {
}, },
params params
) )
) // 请求参数 )
}) })
.then(({ data }) => { .then(({ data }) => {
dataList.value = data.records // 设置数据列表 dataList.value = data.records
page.value.total = data.total // 设置总条目数 page.value.total = data.total
if (done) done() // 如果有传入done函数，则执行 if (done) done()
}) })
} }
// 控制添加或更新对话框的显示状态
const addOrUpdateVisible = ref(false) const addOrUpdateVisible = ref(false)
const addOrUpdateRef = ref(null) const addOrUpdateRef = ref(null)
/** /**
* 新增或修改运输模板 * 新增 / 修改
* @param {Number} id - 运输模板ID，如果存在则是修改操作 * @param id
*/ */
const onAddOrUpdate = (id) => { const onAddOrUpdate = (id) => {
addOrUpdateVisible.value = true // 显示对话框 addOrUpdateVisible.value = true
nextTick(() => { nextTick(() => {
addOrUpdateRef.value?.init(id) // 初始化子组件并传递ID addOrUpdateRef.value?.init(id)
}) })
} }
/** /**
* 删除运输模板 * 删除
* @param {Number} id - 单个运输模板ID，如果不存在则进行批量删除 * @param id
*/ */
const onDelete = (id) => { const onDelete = (id) => {
const ids = id ? [id] : dataListSelections.value?.map(item => item.transportId) // 确定要删除的ID列表 const ids = id ? [id] : dataListSelections.value?.map(item => item.transportId)
ElMessageBox.confirm( ElMessageBox.confirm(
`确定进行[${id ? '删除' : '批量删除'}]操作?`, `确定进行[${id ? '删除' : '批量删除'}]操作?`,
'提示', '提示',
@ -145,7 +135,7 @@ const onDelete = (id) => {
http({ http({
url: http.adornUrl('/shop/transport'), url: http.adornUrl('/shop/transport'),
method: 'delete', method: 'delete',
data: http.adornData(ids, false) // 请求体数据 data: http.adornData(ids, false)
}) })
.then(() => { .then(() => {
ElMessage({ ElMessage({
@ -153,7 +143,7 @@ const onDelete = (id) => {
type: 'success', type: 'success',
duration: 1500, duration: 1500,
onClose: () => { onClose: () => {
getDataList() // 刷新数据列表 getDataList()
} }
}) })
}) })
@ -162,18 +152,16 @@ const onDelete = (id) => {
/** /**
* 条件查询 * 条件查询
* @param {Object} params - 查询参数
* @param {Function} done - 查询完成后回调
*/ */
const onSearch = (params, done) => { const onSearch = (params, done) => {
getDataList(page.value, params, done) // 根据查询条件获取数据列表 getDataList(page.value, params, done)
} }
/** /**
* 多选变化时触发 * 多选变化
* @param {Array} val - 选中的数据项数组
*/ */
const selectionChange = (val) => { const selectionChange = (val) => {
dataListSelections.value = val // 更新选中的数据项 dataListSelections.value = val
} }
</script> </script>

Write Preview
Loading…
Cancel
Save