Compare commits

...

2 Commits

@ -1,10 +1,12 @@
<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"
@ -12,10 +14,8 @@
label-width="80px" label-width="80px"
@keyup.enter="onSubmit()" @keyup.enter="onSubmit()"
> >
<el-form-item <!-- 标题输入框 -->
label="标题" <el-form-item label="标题" prop="title">
prop="title"
>
<el-input <el-input
v-model="dataForm.title" v-model="dataForm.title"
controls-position="right" controls-position="right"
@ -26,10 +26,8 @@
/> />
</el-form-item> </el-form-item>
<el-form-item <!-- 内容文本区域 -->
label="内容" <el-form-item label="内容" prop="content">
prop="content"
>
<el-input <el-input
v-model="dataForm.content" v-model="dataForm.content"
controls-position="right" controls-position="right"
@ -40,10 +38,9 @@
label="内容" label="内容"
/> />
</el-form-item> </el-form-item>
<el-form-item
label="排序号" <!-- 排序号输入框 -->
prop="seq" <el-form-item label="排序号" prop="seq">
>
<el-input-number <el-input-number
v-model="dataForm.seq" v-model="dataForm.seq"
controls-position="right" controls-position="right"
@ -51,31 +48,21 @@
label="排序号" label="排序号"
/> />
</el-form-item> </el-form-item>
<el-form-item
label="状态" <!-- 状态选择 -->
prop="status" <el-form-item label="状态" prop="status">
>
<el-radio-group v-model="dataForm.status"> <el-radio-group v-model="dataForm.status">
<el-radio :label="0"> <el-radio :label="0">下线</el-radio>
下线 <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 @click="visible = false">取消</el-button>
取消 <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>
@ -85,7 +72,12 @@
<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: '',
@ -94,12 +86,18 @@ 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' },
@ -113,7 +111,13 @@ 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
@ -159,5 +163,4 @@ const onSubmit = Debounce(() => {
} }
}) })
}) })
</script> </script>

@ -1,5 +1,6 @@
<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"
@ -11,6 +12,7 @@
@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')"
@ -29,18 +31,13 @@
</el-button> </el-button>
</template> </template>
<!-- 自定义状态列内容 -->
<template #status="scope"> <template #status="scope">
<el-tag <el-tag v-if="scope.row.status === 0" type="danger"></el-tag>
v-if="scope.row.status === 0" <el-tag v-else></el-tag>
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')"
@ -54,14 +51,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"
@ -75,15 +72,23 @@ 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
@ -104,20 +109,25 @@ 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
@ -127,19 +137,20 @@ 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 => { const ids = row.hotSearchId ? [row.hotSearchId] : dataListSelections.value?.map(item => item.hotSearchId)
return item.hotSearchId
})
ElMessageBox.confirm(`确定进行[${row.hotSearchId ? '删除' : '批量删除'}]操作?`, '提示', { ElMessageBox.confirm(`确定进行[${row.hotSearchId ? '删除' : '批量删除'}]操作?`, '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
@ -161,10 +172,13 @@ const onDeconste = (row) => {
} }
}) })
}) })
}).catch(() => { }) }).catch(() => {})
} }
/**
* 刷新页面数据
*/
const refreshChange = () => { const refreshChange = () => {
getDataList(page) getDataList(page)
} }
</script> </script>

@ -4,6 +4,7 @@
: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"
@ -11,58 +12,38 @@
label-width="80px" label-width="80px"
@keyup.enter="onSubmit()" @keyup.enter="onSubmit()"
> >
<el-form-item <!-- 公告标题 -->
label="公告标题" <el-form-item label="公告标题" prop="title">
prop="title"
>
<el-input v-model="dataForm.title" /> <el-input v-model="dataForm.title" />
</el-form-item> </el-form-item>
<el-form-item
label="状态" <!-- 状态选择 -->
prop="status" <el-form-item label="状态" prop="status">
>
<el-radio-group v-model="dataForm.status"> <el-radio-group v-model="dataForm.status">
<el-radio :label="1"> <el-radio :label="1">公布</el-radio>
公布 <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="置顶" <!-- 置顶选项 -->
prop="isTop" <el-form-item label="置顶" prop="isTop">
>
<el-radio-group v-model="dataForm.isTop"> <el-radio-group v-model="dataForm.isTop">
<el-radio :label="1"> <el-radio :label="1"></el-radio>
<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="公告内容" <!-- 公告内容 -->
prop="content" <el-form-item label="公告内容" 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 <el-button @click="visible = false">取消</el-button>
@click="visible = false" <el-button type="primary" @click="onSubmit()"></el-button>
>取消</el-button>
<el-button
type="primary"
@click="onSubmit()"
>确定</el-button>
</span> </span>
</template> </template>
</el-dialog> </el-dialog>
@ -71,11 +52,20 @@
<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 = ''
@ -84,6 +74,8 @@ const validateTitle = (rule, value, callback) => {
callback() callback()
} }
} }
//
const dataRule = { const dataRule = {
title: [ title: [
{ required: true, message: '公告标题不能为空', trigger: 'blur' }, { required: true, message: '公告标题不能为空', trigger: 'blur' },
@ -91,6 +83,7 @@ const dataRule = {
] ]
} }
//
const dataForm = ref({ const dataForm = ref({
title: null, title: null,
content: null, content: null,
@ -98,7 +91,14 @@ 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,5 +144,4 @@ const onSubmit = Debounce(() => {
} }
}) })
}) })
</script> </script>

@ -1,5 +1,6 @@
<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"
@ -10,25 +11,19 @@
@on-load="getDataList" @on-load="getDataList"
@refresh-change="refreshChange" @refresh-change="refreshChange"
> >
<!-- 自定义状态列内容 -->
<template #status="scope"> <template #status="scope">
<el-tag <el-tag v-if="scope.row.status === 0" type="danger"></el-tag>
v-if="scope.row.status === 0" <el-tag v-else></el-tag>
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 v-if="scope.row.isTop === 0"></el-tag>
<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')"
@ -39,6 +34,8 @@
新增 新增
</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')"
@ -58,6 +55,8 @@
</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,16 +71,25 @@ 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({
@ -100,10 +108,12 @@ 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
@ -112,6 +122,10 @@ const onAddOrUpdate = (id) => {
}) })
} }
/**
* 删除公告条目
* @param id - 公告条目的ID
*/
const onDelete = (id) => { const onDelete = (id) => {
ElMessageBox.confirm('确定进行删除操作?', '提示', { ElMessageBox.confirm('确定进行删除操作?', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
@ -134,7 +148,7 @@ const onDelete = (id) => {
} }
}) })
}) })
}).catch(() => { }) }).catch(() => {})
} }
/** /**
@ -144,10 +158,12 @@ 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>

@ -4,6 +4,7 @@
: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"
@ -11,15 +12,12 @@
label-width="80px" label-width="80px"
@keyup.enter="onSubmit()" @keyup.enter="onSubmit()"
> >
<el-form-item <!-- 自提点名称 -->
label="名称" <el-form-item label="名称" prop="addrName">
prop="addrName" <el-input v-model="dataForm.addrName" placeholder="自提点名称" />
>
<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">
@ -55,10 +53,7 @@
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-form-item prop="area"> <el-form-item prop="area">
<el-select <el-select v-model="dataForm.areaId" placeholder="请选择">
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"
@ -69,35 +64,23 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-form-item> </el-form-item>
<el-form-item
label="地址" <!-- 地址 -->
prop="addr" <el-form-item label="地址" 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="手机号" <!-- 手机号 -->
prop="mobile" <el-form-item label="手机号" 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 <span class="dialog-footer">
class="dialog-footer"
>
<el-button @click="visible = false">取消</el-button> <el-button @click="visible = false">取消</el-button>
<el-button <el-button type="primary" @click="onSubmit()"></el-button>
type="primary"
@click="onSubmit()"
>确定</el-button>
</span> </span>
</template> </template>
</el-dialog> </el-dialog>
@ -107,9 +90,15 @@
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('手机号格式错误'))
@ -117,6 +106,8 @@ const validateMobile = (rule, value, callback) => {
callback() callback()
} }
} }
//
const dataRule = { const dataRule = {
addrName: [ addrName: [
{ required: true, message: '自提点名称不能为空', trigger: 'blur' }, { required: true, message: '自提点名称不能为空', trigger: 'blur' },
@ -136,10 +127,20 @@ 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: '',
@ -152,11 +153,18 @@ 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
@ -173,9 +181,7 @@ const init = (id) => {
}) })
if (dataForm.addrId) { if (dataForm.addrId) {
http({ http({
url: http.adornUrl( url: http.adornUrl(`/shop/pickAddr/info/${dataForm.addrId}`),
`/shop/pickAddr/info/${dataForm.addrId}`
),
method: 'get', method: 'get',
params: http.adornParams() params: http.adornParams()
}) })
@ -197,6 +203,10 @@ 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({
@ -207,26 +217,26 @@ const listAreaByParentId = (pid) => {
} }
/** /**
* 选择省 * 选择省时触发
* @param val * @param val - 省ID
*/ */
const selectProvince = (val) => { const selectProvince = (val) => {
dataForm.cityId = null dataForm.cityId = null
dataForm.city = '' dataForm.city = ''
// select dataForm.areaId = null
dataForm.area = ''
listAreaByParentId(val).then(({ data }) => { listAreaByParentId(val).then(({ data }) => {
cityList.value = data cityList.value = data
}) })
} }
/** /**
* 选择市 * 选择市时触发
* @param val * @param val - 市ID
*/ */
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
}) })
@ -236,24 +246,23 @@ 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({

@ -1,5 +1,6 @@
<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"
@ -10,6 +11,7 @@
@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')"
@ -30,6 +32,7 @@
</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')"
@ -65,18 +68,28 @@ 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({
@ -99,11 +112,13 @@ 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
@ -113,13 +128,11 @@ const onAddOrUpdate = (id) => {
} }
/** /**
* 删除 * 删除单个或多个自提点地址
* @param id * @param id - 单个自提点地址ID若未提供则执行批量删除
*/ */
const onDelete = (id) => { const onDelete = (id) => {
const ids = id ? [id] : dataListSelections.value?.map(item => { const ids = id ? [id] : dataListSelections.value?.map(item => item.addrId)
return item.addrId
})
ElMessageBox.confirm( ElMessageBox.confirm(
'确定进行删除操作?', '提示', '确定进行删除操作?', '提示',
{ {
@ -145,20 +158,21 @@ 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

@ -1,326 +1,142 @@
<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 <!-- 表单元素包含多个表单项和一个表格 -->
ref="dataFormRef" <el-form
:model="dataForm" ref="dataFormRef"
label-width="80px" :model="dataForm"
@keyup.enter="onSubmit()" label-width="80px"
> @keyup.enter="onSubmit()"
<el-form-item >
label="模板名称" <!-- 模板名称输入框 -->
prop="transName" <el-form-item
:rules="[ label="模板名称"
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-input </el-form-item>
v-model="dataForm.transName"
placeholder="模板名称" <!-- 模板类型选择器 -->
/> <el-form-item label="模板类型" prop="isFreeFee" required>
</el-form-item> <el-radio-group v-model="dataForm.isFreeFee" @change="changeFreeFee">
<el-form-item <el-radio :label="0">买家承担运费</el-radio>
label="模板类型" <el-radio :label="1">卖家包邮</el-radio>
prop="isFreeFee" </el-radio-group>
required="required" </el-form-item>
>
<el-radio-group <!-- 收费方式选择器 -->
v-model="dataForm.isFreeFee" <el-form-item label="收费方式" prop="chargeType">
@change="changeFreeFee" <el-radio-group v-model="dataForm.chargeType" :disabled="dataForm.isFreeFee == 1">
> <el-radio :label="0">按件数</el-radio>
<el-radio :label="0"> <el-radio :label="1">按重量</el-radio>
买家承担运费 <el-radio :label="2">按体积</el-radio>
</el-radio> </el-radio-group>
<el-radio :label="1"> </el-form-item>
卖家包邮
</el-radio> <!-- 运费项表格 -->
</el-radio-group> <el-table
</el-form-item> :data="dataForm.transfees"
<el-form-item border
label="收费方式" style="width: 100%;"
prop="chargeType" class="table-con"
> >
<el-radio-group <!-- 可配送区域列 -->
v-model="dataForm.chargeType" <el-table-column header-align="center" align="center" width="450" label="可配送区域">
:disabled="dataForm.isFreeFee == 1" <template #default="scope">
> <span v-if="scope.$index == 0"></span>
<el-radio :label="0"> <span v-if="(!scope.row.cityList || !scope.row.cityList.length) && scope.$index > 0"></span>
按件数 <span v-if="scope.$index > 0">
</el-radio> <el-tag v-for="city in scope.row.cityList" :key="city.areaId">{{ city.areaName }}</el-tag>
<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> </span>
<el-button <el-button v-if="isAuth('shop:transfee:update') && scope.$index > 0" type="text" @click="onAddOrUpdate(`${scope.$index}`)"></el-button>
v-if="isAuth('shop:transfee:update') && scope.$index > 0" <el-button v-if="isAuth('shop:transfee:delete') && scope.$index > 0" type="text" @click="onDelete(`${scope.$index}`)"></el-button>
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> </template>
<!-- 弹窗, 新增 / 修改 --> </el-table-column>
<add-or-update
v-if="addOrUpdateVisible" <!-- 动态生成的列根据chargeType显示不同的标题 -->
ref="addOrUpdateRef" <el-table-column v-for="(item, index) in tableTitle" :key="index" header-align="center" align="center" :label="item">
@refresh-data-list="getDataList" <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>
</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>
@ -329,10 +145,18 @@ 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: '',
@ -343,20 +167,28 @@ 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 = [['首件(个)', '运费(元)', '续件(个)', '续费(元)'], ['首重(kg)', '运费(元)', '续重(kg)', '续费(元)'], ['首体积(m³)', '运费(元)', '续体积(m³)', '续费(元)']] const titles = [
['首件(个)', '运费(元)', '续件(个)', '续费(元)'],
['首重(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) => {
@ -366,11 +198,19 @@ 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 = {
@ -384,9 +224,10 @@ 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'
}) })
@ -401,8 +242,16 @@ 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
@ -413,22 +262,25 @@ 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({
@ -448,14 +300,16 @@ 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
@ -470,8 +324,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
@ -484,7 +338,9 @@ const changeFreeFee = (val) => {
} }
/** /**
* 校验输入的数字 * 校验输入的数字确保其为正整数且不小于零
* @param row - 当前行对象
* @param type - 需要校验的字段类型
*/ */
const checkNumber = (row, type) => { const checkNumber = (row, type) => {
if (type === 1) { if (type === 1) {
@ -497,7 +353,9 @@ const checkNumber = (row, type) => {
} }
/** /**
* 保留整数并小于零的数设为0 * 保留整数并处理小于零的情况
* @param num - 输入的数字
* @returns 处理后的数字
*/ */
const getNumber = (num) => { const getNumber = (num) => {
num = Math.round(num) num = Math.round(num)
@ -505,11 +363,12 @@ 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) {
@ -521,12 +380,18 @@ 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',

@ -1,91 +1,99 @@
<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"> <!-- 自定义列内容产品属性值 -->
<el-tag <template #prod-prop-values="scope">
v-for="item in scope.row.prodPropValues" <el-tag v-for="item in scope.row.prodPropValues" :key="item.valueId">{{ item.propValue }}</el-tag>
:key="item.valueId" </template>
>
{{ 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 <!-- 左侧菜单按钮 -->
v-if="isAuth('shop:transport:delete')" <template #menu-left>
type="danger" <el-button
:disabled="dataListSelections.length <= 0" v-if="isAuth('shop:transport:save')"
@click="onDelete()" type="primary"
> icon="el-icon-plus"
批量删除 @click.stop="onAddOrUpdate()"
</el-button> >
</template> 新增
</el-button>
<template #menu="scope"> <el-button
<el-button v-if="isAuth('shop:transport:delete')"
v-if="isAuth('shop:transport:update')" type="danger"
type="primary" :disabled="dataListSelections.length <= 0"
icon="el-icon-edit" @click="onDelete()"
@click.stop="onAddOrUpdate(scope.row.transportId)" >
> 批量删除
修改 </el-button>
</el-button> </template>
<el-button <!-- 行内操作按钮 -->
v-if="isAuth('shop:transport:delete')" <template #menu="scope">
type="danger" <el-button
icon="el-icon-delete" v-if="isAuth('shop:transport:update')"
@click.stop="onDelete(scope.row.transportId)" type="primary"
> 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' import { ElMessage, ElMessageBox } from 'element-plus' // 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' //
const dataList = ref([]) import { ref, nextTick } from 'vue' // VueAPI
const dataListSelections = ref([]) import http from '@/api/http' // HTTP
//
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: http.adornUrl('/shop/transport/page'), // URL
method: 'get', method: 'get', // HTTP
params: http.adornParams( params: http.adornParams(
Object.assign( Object.assign(
{ {
@ -94,34 +102,36 @@ 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() if (done) done() // done
}) })
} }
//
const addOrUpdateVisible = ref(false) const addOrUpdateVisible = ref(false)
const addOrUpdateRef = ref(null) const addOrUpdateRef = ref(null)
/** /**
* 新增 / 修改 * 新增或修改运输模板
* @param id * @param {Number} id - 运输模板ID如果存在则是修改操作
*/ */
const onAddOrUpdate = (id) => { const onAddOrUpdate = (id) => {
addOrUpdateVisible.value = true addOrUpdateVisible.value = true //
nextTick(() => { nextTick(() => {
addOrUpdateRef.value?.init(id) addOrUpdateRef.value?.init(id) // ID
}) })
} }
/** /**
* 删除 * 删除运输模板
* @param id * @param {Number} id - 单个运输模板ID如果不存在则进行批量删除
*/ */
const onDelete = (id) => { const onDelete = (id) => {
const ids = id ? [id] : dataListSelections.value?.map(item => item.transportId) const ids = id ? [id] : dataListSelections.value?.map(item => item.transportId) // ID
ElMessageBox.confirm( ElMessageBox.confirm(
`确定进行[${id ? '删除' : '批量删除'}]操作?`, `确定进行[${id ? '删除' : '批量删除'}]操作?`,
'提示', '提示',
@ -135,7 +145,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({
@ -143,7 +153,7 @@ const onDelete = (id) => {
type: 'success', type: 'success',
duration: 1500, duration: 1500,
onClose: () => { onClose: () => {
getDataList() getDataList() //
} }
}) })
}) })
@ -152,16 +162,18 @@ 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>

Loading…
Cancel
Save