wyy
3 years ago
parent
552513a534
commit
96310a0deb
@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-upload
|
||||
class="pic-uploader-component"
|
||||
:action="http.adornUrl('/admin/file/upload/element')"
|
||||
accept=".png,.jpg,.jpeg,.gif"
|
||||
:headers="{Authorization: $cookie.get('Authorization')}"
|
||||
:show-file-list="false"
|
||||
:on-success="handleUploadSuccess"
|
||||
:before-upload="beforeAvatarUpload"
|
||||
>
|
||||
<img
|
||||
v-if="value"
|
||||
alt=""
|
||||
:src="resourcesUrl + value"
|
||||
class="pic"
|
||||
>
|
||||
<i
|
||||
v-else
|
||||
class="el-icon-plus pic-uploader-icon"
|
||||
/>
|
||||
</el-upload>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import $cookie from 'vue-cookies'
|
||||
import { ElMessage } from 'element-plus'
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const props = defineProps({
|
||||
value: {
|
||||
default: '',
|
||||
type: String
|
||||
}
|
||||
})
|
||||
const resourcesUrl = import.meta.env.VITE_APP_RESOURCES_URL
|
||||
/**
|
||||
* 图片上传
|
||||
*/
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const handleUploadSuccess = (response, file) => {
|
||||
emit('update:modelValue', file.response.data)
|
||||
}
|
||||
|
||||
/**
|
||||
* 限制图片上传大小
|
||||
*/
|
||||
const beforeAvatarUpload = (file) => {
|
||||
const isLt2M = file.size / 1024 / 1024 < 2
|
||||
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg'
|
||||
if (!isJPG) {
|
||||
ElMessage.error('上传图片只能是jpeg/jpg/png/gif 格式!')
|
||||
}
|
||||
if (!isLt2M) {
|
||||
ElMessage.error('上传图片大小不能超过 2MB!')
|
||||
}
|
||||
return isLt2M && isJPG
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pic-uploader-component :deep(.el-upload) {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.pic-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
line-height: 178px;
|
||||
text-align: center;
|
||||
}
|
||||
.pic {
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.pic-uploader-component :deep(.el-upload:hover) {
|
||||
border-color: #409EFF;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,226 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="visible"
|
||||
title="选择商品"
|
||||
:modal="false"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-table
|
||||
ref="prodTableRef"
|
||||
v-loading="dataListLoading"
|
||||
:data="dataList"
|
||||
border
|
||||
style="width: 100%;"
|
||||
@selection-change="selectChangeHandle"
|
||||
>
|
||||
<el-table-column
|
||||
v-if="isSingle"
|
||||
width="50"
|
||||
header-align="center"
|
||||
align="center"
|
||||
>
|
||||
<template #default="scope">
|
||||
<div>
|
||||
<el-radio
|
||||
v-model="singleSelectProdId"
|
||||
:label="scope.row.prodId"
|
||||
@change="getSelectProdRow(scope.row)"
|
||||
>
|
||||
|
||||
</el-radio>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-if="!isSingle"
|
||||
type="selection"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="50"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="prodName"
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="产品名称"
|
||||
/>
|
||||
<el-table-column
|
||||
align="center"
|
||||
width="140"
|
||||
label="产品图片"
|
||||
>
|
||||
<template #default="scope">
|
||||
<img
|
||||
alt=""
|
||||
:src="scope.row.pic"
|
||||
width="100"
|
||||
height="100"
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
:current-page="pageIndex"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="pageSize"
|
||||
:total="totalPage"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
/>
|
||||
<template #footer>
|
||||
<span>
|
||||
<el-button @click="visible = false">取消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="submitProds()"
|
||||
>确定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ElMessage } from 'element-plus'
|
||||
const emit = defineEmits(['refreshSelectProds'])
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const props = defineProps({
|
||||
isSingle: {
|
||||
default: false,
|
||||
type: Boolean
|
||||
}
|
||||
})
|
||||
const visible = ref(false)
|
||||
const dataForm = reactive({
|
||||
product: ''
|
||||
})
|
||||
const singleSelectProdId = ref(0)
|
||||
const selectProds = ref([])
|
||||
const dataList = ref([])
|
||||
const pageIndex = ref(1)
|
||||
const pageSize = ref(10)
|
||||
const totalPage = ref(0)
|
||||
const dataListLoading = ref(false)
|
||||
const dataListSelections = ref([])
|
||||
|
||||
onMounted(() => {
|
||||
getDataList()
|
||||
})
|
||||
|
||||
/**
|
||||
* 获取数据列表
|
||||
*/
|
||||
const init = (selectProdParam) => {
|
||||
selectProds.value = selectProdParam
|
||||
visible.value = true
|
||||
dataListLoading.value = true
|
||||
if (selectProds.value) {
|
||||
selectProds.value?.forEach(row => {
|
||||
dataListSelections.value.push(row)
|
||||
})
|
||||
}
|
||||
getDataList()
|
||||
}
|
||||
defineExpose({ init })
|
||||
|
||||
const prodTableRef = ref(null)
|
||||
const getDataList = () => {
|
||||
http({
|
||||
url: http.adornUrl('/prod/prod/page'),
|
||||
method: 'get',
|
||||
params: http.adornParams(
|
||||
Object.assign(
|
||||
{
|
||||
current: pageIndex.value,
|
||||
size: pageSize.value
|
||||
},
|
||||
{
|
||||
prodName: dataForm.prodName
|
||||
}
|
||||
)
|
||||
)
|
||||
})
|
||||
.then(({ data }) => {
|
||||
dataList.value = data.records
|
||||
totalPage.value = data.total
|
||||
dataListLoading.value = false
|
||||
if (selectProds.value) {
|
||||
nextTick(() => {
|
||||
selectProds.value?.forEach(row => {
|
||||
const index = dataList.value?.findIndex((prodItem) => prodItem.prodId === row.prodId)
|
||||
prodTableRef.value?.toggleRowSelection(dataList.value[index])
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
/**
|
||||
* 每页数
|
||||
* @param val
|
||||
*/
|
||||
const sizeChangeHandle = (val) => {
|
||||
pageSize.value = val
|
||||
pageIndex.value = 1
|
||||
getDataList()
|
||||
}
|
||||
/**
|
||||
* 当前页
|
||||
* @param val
|
||||
*/
|
||||
const currentChangeHandle = (val) => {
|
||||
pageIndex.value = val
|
||||
getDataList()
|
||||
}
|
||||
/**
|
||||
* 单选商品事件
|
||||
* @param row
|
||||
*/
|
||||
const getSelectProdRow = (row) => {
|
||||
dataListSelections.value = [row]
|
||||
}
|
||||
/**
|
||||
* 多选点击事件
|
||||
* @param selection
|
||||
*/
|
||||
const selectChangeHandle = (selection) => {
|
||||
dataList.value?.forEach((tableItem) => {
|
||||
const selectedProdIndex = selection.findIndex((selectedProd) => {
|
||||
if (!selectedProd) {
|
||||
return false
|
||||
}
|
||||
return selectedProd.prodId === tableItem.prodId
|
||||
})
|
||||
const dataSelectedProdIndex = dataListSelections.value?.findIndex((dataSelectedProd) => dataSelectedProd.prodId === tableItem.prodId)
|
||||
if (selectedProdIndex > -1 && dataSelectedProdIndex === -1) {
|
||||
dataListSelections.value.push(tableItem)
|
||||
} else if (selectedProdIndex === -1 && dataSelectedProdIndex > -1) {
|
||||
dataListSelections.value.splice(dataSelectedProdIndex, 1)
|
||||
}
|
||||
})
|
||||
}
|
||||
/**
|
||||
* 确定事件
|
||||
*/
|
||||
const submitProds = () => {
|
||||
if (!dataListSelections.value.length) {
|
||||
ElMessage({
|
||||
message: '请选择商品',
|
||||
type: 'error',
|
||||
duration: 1000,
|
||||
onClose: () => {}
|
||||
})
|
||||
return
|
||||
}
|
||||
const prods = []
|
||||
dataListSelections.value.forEach(item => {
|
||||
const prodIndex = prods.findIndex((prod) => prod.prodId === item.prodId)
|
||||
if (prodIndex === -1) {
|
||||
prods.push({ prodId: item.prodId, prodName: item.prodName, pic: item.pic })
|
||||
}
|
||||
})
|
||||
emit('refreshSelectProds', prods)
|
||||
dataListSelections.value = []
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<div class="components-add-or-upload">
|
||||
<el-tooltip
|
||||
v-if="props.tinymceUploadType === 'prod'"
|
||||
content="内容"
|
||||
placement="top"
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="clickUpload()"
|
||||
>
|
||||
<el-icon><UploadFilled /></el-icon>
|
||||
上传图片
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
|
||||
<el-button
|
||||
v-else
|
||||
:style="{ background: props.color, borderColor: props.color }"
|
||||
type="primary"
|
||||
@click="clickUpload()"
|
||||
>
|
||||
<el-icon><UploadFilled /></el-icon>
|
||||
上传图片
|
||||
</el-button>
|
||||
<!-- 弹窗, 新增图片 -->
|
||||
<!-- <elx-imgbox-->
|
||||
<!-- v-if="elxImgboxVisible"-->
|
||||
<!-- ref="elxImgboxRef"-->
|
||||
<!-- @refresh-pic="refreshPic"-->
|
||||
<!-- />-->
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
// const emit = defineEmits(['successCBK'])
|
||||
const props = defineProps({
|
||||
color: {
|
||||
type: String,
|
||||
default: '#155bd4'
|
||||
},
|
||||
tinymceUploadType: {
|
||||
default: '',
|
||||
type: String
|
||||
}
|
||||
})
|
||||
|
||||
const elxImgboxVisible = ref(false)
|
||||
// const maxNum = ref(15) // 可选择的最大图片数量
|
||||
const imgUrls = ref([])
|
||||
// const resourcesUrl = import.meta.env.VITE_APP_RESOURCES_URL
|
||||
// const elxImgboxRef = ref()
|
||||
// const dialogVisible = ref()
|
||||
/**
|
||||
* 打开图片选择窗
|
||||
*/
|
||||
const clickUpload = () => {
|
||||
imgUrls.value = ''
|
||||
elxImgboxVisible.value = true
|
||||
// nextTick(() => {
|
||||
// elxImgboxRef.value?.init(0, maxNum.value)
|
||||
// })
|
||||
}
|
||||
/**
|
||||
* 接收回调的图片数据
|
||||
*/
|
||||
// const refreshPic = imagePath => {
|
||||
// const imageArray = imagePath.split(',')
|
||||
// const data = []
|
||||
// imageArray.forEach(img => {
|
||||
// data.push(resourcesUrl + img)
|
||||
// })
|
||||
// imgUrls.value = ''
|
||||
// dialogVisible.value = false
|
||||
// emit('successCBK', data)
|
||||
// }
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.components-add-or-upload{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,253 @@
|
||||
<template>
|
||||
<div class="mod-index-img">
|
||||
<el-dialog
|
||||
v-model="visible"
|
||||
:title="!dataForm.imgId ? '新增' : '修改'"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form
|
||||
ref="dataFormRef"
|
||||
:model="dataForm"
|
||||
:rules="dataRule"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item
|
||||
label="轮播图片"
|
||||
prop="imgUrl"
|
||||
>
|
||||
<pic-upload v-model="dataForm.imgUrl" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="顺序"
|
||||
prop="seq"
|
||||
:rules="[
|
||||
{ required: false, pattern: /\s\S+|S+\s|\S/, message: '请输入正确的顺序', trigger: 'blur' }
|
||||
]"
|
||||
>
|
||||
<el-input v-model="dataForm.seq" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="状态"
|
||||
prop="status"
|
||||
>
|
||||
<el-radio-group v-model="dataForm.status">
|
||||
<el-radio :label="0">
|
||||
禁用
|
||||
</el-radio>
|
||||
<el-radio :label="1">
|
||||
正常
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型">
|
||||
<el-radio-group
|
||||
v-model="dataForm.type"
|
||||
@change="deleteRelation"
|
||||
>
|
||||
<el-radio :label="-1">
|
||||
无
|
||||
</el-radio>
|
||||
<el-radio :label="0">
|
||||
商品
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
<div v-if="dataForm.relation!=null">
|
||||
<el-card
|
||||
:body-style="{ padding: '0px' }"
|
||||
style="height: 160px;width: 120px"
|
||||
>
|
||||
<img
|
||||
alt=""
|
||||
:src="card.pic"
|
||||
style="height:104px;width:100%"
|
||||
>
|
||||
<div class="card-prod-bottom">
|
||||
<span class="card-prod-name">{{ card.name }}</span>
|
||||
<el-button
|
||||
type="text"
|
||||
class="card-prod-name-button"
|
||||
@click="deleteRelation"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
<div v-if="dataForm.relation==null">
|
||||
<el-button
|
||||
v-if=" dataForm.type == 0"
|
||||
@click="addProd"
|
||||
>
|
||||
选择商品
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="onSubmit()"
|
||||
>
|
||||
确定
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
<!-- 商品选择弹窗-->
|
||||
<prods-select
|
||||
v-if="prodsSelectVisible"
|
||||
ref="prodsSelectRef"
|
||||
:is-single="true"
|
||||
@refresh-select-prods="selectCouponProds"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Debounce } from '@/utils/debounce'
|
||||
const emit = defineEmits(['refreshDataList'])
|
||||
const dataForm = ref({
|
||||
status: 1,
|
||||
des: '',
|
||||
imgUrl: '',
|
||||
seq: 0,
|
||||
imgId: 0,
|
||||
type: -1,
|
||||
relation: null
|
||||
})
|
||||
const dataRule = reactive({
|
||||
imgUrl: [
|
||||
{ required: true, message: '轮播图片不能为空', trigger: 'blur' }
|
||||
]
|
||||
})
|
||||
// 关联数据
|
||||
const card = ref({
|
||||
id: 0,
|
||||
pic: '',
|
||||
name: '',
|
||||
realData: {
|
||||
prod: [],
|
||||
shop: [],
|
||||
activity: []
|
||||
}
|
||||
})
|
||||
const page = reactive({
|
||||
total: 0, // 总页数
|
||||
currentPage: 1, // 当前页数
|
||||
pageSize: 10 // 每页显示多少条
|
||||
})
|
||||
const prodsSelectVisible = ref(false)
|
||||
const visible = ref(false)
|
||||
const dataFormRef = ref(null)
|
||||
/**
|
||||
* 获取分类数据
|
||||
* @param id
|
||||
*/
|
||||
const init = (id) => {
|
||||
visible.value = true
|
||||
dataForm.value.imgId = id || 0
|
||||
if (dataForm.value.imgId) {
|
||||
// 获取产品数据
|
||||
http({
|
||||
url: http.adornUrl(`/admin/indexImg/info/${dataForm.value.imgId}`),
|
||||
method: 'get'
|
||||
})
|
||||
.then(({ data }) => {
|
||||
dataForm.value = data
|
||||
if (data.relation) {
|
||||
card.value.pic = data.pic
|
||||
card.value.name = data.prodName
|
||||
card.value.id = data.relation
|
||||
}
|
||||
})
|
||||
} else {
|
||||
nextTick(() => {
|
||||
dataFormRef.value?.resetFields()
|
||||
dataForm.value.imgUrl = ''
|
||||
})
|
||||
}
|
||||
}
|
||||
defineExpose({ init })
|
||||
|
||||
/**
|
||||
* 表单提交
|
||||
*/
|
||||
const onSubmit = Debounce(() => {
|
||||
dataFormRef.value?.validate((valid) => {
|
||||
if (!valid) {
|
||||
return
|
||||
}
|
||||
const param = dataForm.value
|
||||
http({
|
||||
url: http.adornUrl('/admin/indexImg'),
|
||||
method: param.imgId ? 'put' : 'post',
|
||||
data: http.adornData(param)
|
||||
})
|
||||
.then(() => {
|
||||
ElMessage({
|
||||
message: '操作成功',
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
visible.value = false
|
||||
emit('refreshDataList', page)
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
/**
|
||||
* 删除关联数据
|
||||
*/
|
||||
const deleteRelation = () => {
|
||||
dataForm.value.relation = null
|
||||
}
|
||||
|
||||
const prodsSelectRef = ref(null)
|
||||
/**
|
||||
* 打开选择商品
|
||||
*/
|
||||
const addProd = () => {
|
||||
prodsSelectVisible.value = true
|
||||
nextTick(() => {
|
||||
prodsSelectRef.value?.init(card.value.realData.prod)
|
||||
})
|
||||
}
|
||||
/**
|
||||
* 添加指定商品
|
||||
*/
|
||||
const selectCouponProds = (prods) => {
|
||||
card.value.realData.prods = prods
|
||||
if (prods.length) {
|
||||
const selectProd = prods[0]
|
||||
dataForm.value.relation = selectProd.prodId
|
||||
card.value.pic = selectProd.pic
|
||||
card.value.name = selectProd.prodName
|
||||
card.value.id = selectProd.prodId
|
||||
} else {
|
||||
card.value = {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
//card样式
|
||||
.card-prod-bottom {
|
||||
position: relative;
|
||||
text-align: left;
|
||||
.card-prod-name {
|
||||
margin: auto;
|
||||
padding: 0 6px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 118px;
|
||||
display: inline-block;
|
||||
}
|
||||
.card-prod-name-button {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,177 @@
|
||||
<template>
|
||||
<div class="mod-prod">
|
||||
<avue-crud
|
||||
ref="crudRef"
|
||||
:page="page"
|
||||
:data="dataList"
|
||||
:table-loading="dataListLoading"
|
||||
:option="tableOption"
|
||||
@search-change="onSearch"
|
||||
@selection-change="selectionChange"
|
||||
@on-load="getDataList"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button
|
||||
v-if="isAuth('admin:indexImg:save')"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@click.stop="onAddOrUpdate()"
|
||||
>
|
||||
新增
|
||||
</el-button>
|
||||
|
||||
<el-button
|
||||
v-if="isAuth('admin:indexImg:delete')"
|
||||
type="danger"
|
||||
:disabled="dataListSelections.length <= 0"
|
||||
@click="onDelete()"
|
||||
>
|
||||
批量删除
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<template #imgUrl="scope">
|
||||
<img
|
||||
v-if="scope.row.imgUrl"
|
||||
alt=""
|
||||
:src="scope.row.imgUrl"
|
||||
width="100"
|
||||
height="100"
|
||||
>
|
||||
<img
|
||||
v-else
|
||||
alt=""
|
||||
src="~@/assets/img/def.png"
|
||||
width="100"
|
||||
height="100"
|
||||
>
|
||||
</template>
|
||||
<template #menu="scope">
|
||||
<el-button
|
||||
v-if="isAuth('admin:indexImg:update')"
|
||||
type="primary"
|
||||
icon="el-icon-edit"
|
||||
@click="onAddOrUpdate(scope.row.imgId)"
|
||||
>
|
||||
修改
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="isAuth('admin:indexImg:delete')"
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
@click="onDelete(scope.row.imgId)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</avue-crud>
|
||||
|
||||
<!-- 弹窗, 新增 / 修改 -->
|
||||
<add-or-update
|
||||
v-if="addOrUpdateVisible"
|
||||
ref="addOrUpdateRef"
|
||||
@refresh-data-list="getDataList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { isAuth } from '@/utils'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import AddOrUpdate from './add-or-update.vue'
|
||||
import { tableOption } from '@/crud/admin/indexImg.js'
|
||||
|
||||
const dataList = ref([])
|
||||
const dataListLoading = ref(false)
|
||||
const dataListSelections = ref([])
|
||||
const resourcesUrl = import.meta.env.VITE_APP_RESOURCES_URL
|
||||
const page = reactive({
|
||||
total: 0, // 总页数
|
||||
currentPage: 1, // 当前页数
|
||||
pageSize: 10 // 每页显示多少
|
||||
})
|
||||
/**
|
||||
* 获取数据列表
|
||||
*/
|
||||
const getDataList = (pageParam, params, done) => {
|
||||
dataListLoading.value = true
|
||||
http({
|
||||
url: http.adornUrl('/admin/indexImg/page'),
|
||||
method: 'get',
|
||||
params: http.adornParams(
|
||||
Object.assign(
|
||||
{
|
||||
current: pageParam == null ? page.currentPage : pageParam.currentPage,
|
||||
size: pageParam == null ? page.pageSize : pageParam.pageSize
|
||||
},
|
||||
params
|
||||
)
|
||||
)
|
||||
})
|
||||
.then(({ data }) => {
|
||||
data.records.forEach(item => {
|
||||
item.imgUrl = item.imgUrl ? resourcesUrl + item.imgUrl : ''
|
||||
})
|
||||
dataList.value = data.records
|
||||
page.total = data.total
|
||||
dataListLoading.value = false
|
||||
if (done) done()
|
||||
})
|
||||
}
|
||||
|
||||
const addOrUpdateVisible = ref(false)
|
||||
const addOrUpdateRef = ref(null)
|
||||
/**
|
||||
* 新增 / 修改
|
||||
* @param id
|
||||
*/
|
||||
const onAddOrUpdate = (id) => {
|
||||
addOrUpdateVisible.value = true
|
||||
nextTick(() => {
|
||||
addOrUpdateRef.value?.init(id)
|
||||
})
|
||||
}
|
||||
/**
|
||||
* 删除
|
||||
* @param id
|
||||
*/
|
||||
const onDelete = (id) => {
|
||||
const ids = id ? [id] : dataListSelections.value?.map(item => {
|
||||
return item.imgId
|
||||
})
|
||||
ElMessageBox.confirm(`确定进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
http({
|
||||
url: http.adornUrl('/admin/indexImg'),
|
||||
method: 'delete',
|
||||
data: http.adornData(ids, false)
|
||||
})
|
||||
.then(() => {
|
||||
ElMessage({
|
||||
message: '操作成功',
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
getDataList()
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
/**
|
||||
* 条件查询
|
||||
*/
|
||||
const onSearch = (params, done) => {
|
||||
getDataList(page, params, done)
|
||||
}
|
||||
/**
|
||||
* 多选变化
|
||||
*/
|
||||
const selectionChange = (val) => {
|
||||
dataListSelections.value = val
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="visible"
|
||||
:modal="false"
|
||||
title="选择发货地址"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form
|
||||
ref="dataFormRef"
|
||||
:model="dataForm"
|
||||
:rules="dataRule"
|
||||
label-width="80px"
|
||||
@keyup.enter="onSubmit()"
|
||||
>
|
||||
<el-form-item label="快递公司">
|
||||
<el-select
|
||||
v-model="dataForm.dvyId"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in dataForm.dvyNames"
|
||||
:key="item.dvyId"
|
||||
:label="item.dvyName"
|
||||
:value="item.dvyId"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="快递单号"
|
||||
prop="dvyFlowId"
|
||||
>
|
||||
<el-input
|
||||
v-model="dataForm.dvyFlowId"
|
||||
controls-position="right"
|
||||
:min="0"
|
||||
label="快递单号"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="visible = false">取消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="onSubmit()"
|
||||
>确定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ElMessage } from 'element-plus'
|
||||
const emit = defineEmits(['refreshDataList'])
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const validDvyFlowId = (rule, value, callback) => {
|
||||
if (!value.trim()) {
|
||||
callback(new Error('不能为空'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
const dataRule = {
|
||||
dvyFlowId: [
|
||||
{ required: true, message: '不能为空', trigger: 'blur' },
|
||||
{ validator: validDvyFlowId, trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
|
||||
const visible = ref(false)
|
||||
const dataForm = reactive({
|
||||
dvyId: '',
|
||||
dvyFlowId: 0,
|
||||
dvyNames: [],
|
||||
orderNumber: 0
|
||||
})
|
||||
|
||||
const init = (orderNumber, dvyId, dvyFlowId) => {
|
||||
visible.value = true
|
||||
dataForm.orderNumber = orderNumber || ''
|
||||
dataForm.dvyId = dvyId || ''
|
||||
dataForm.dvyFlowId = dvyFlowId || ''
|
||||
http({
|
||||
url: http.adornUrl('/admin/delivery/list'),
|
||||
method: 'get',
|
||||
params: http.adornParams()
|
||||
}).then(({ data }) => {
|
||||
dataForm.dvyNames = data
|
||||
})
|
||||
}
|
||||
defineExpose({ init })
|
||||
|
||||
const dataFormRef = ref(null)
|
||||
/**
|
||||
* 表单提交
|
||||
*/
|
||||
const onSubmit = () => {
|
||||
dataFormRef.value?.validate((valid) => {
|
||||
if (valid) {
|
||||
http({
|
||||
url: http.adornUrl('/order/order/delivery'),
|
||||
method: 'put',
|
||||
data: http.adornData({
|
||||
orderNumber: dataForm.orderNumber,
|
||||
dvyId: dataForm.dvyId,
|
||||
dvyFlowId: dataForm.dvyFlowId
|
||||
})
|
||||
})
|
||||
.then(() => {
|
||||
ElMessage({
|
||||
message: '操作成功',
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
visible.value = false
|
||||
emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<div class="mod-hotSearch-add-or-update">
|
||||
<el-dialog
|
||||
v-model="visible"
|
||||
:title="!dataForm.hotSearchId ? '新增' : '修改'"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form
|
||||
ref="dataFormRef"
|
||||
:model="dataForm"
|
||||
:rules="dataRule"
|
||||
label-width="80px"
|
||||
@keyup.enter="onSubmit()"
|
||||
>
|
||||
<el-form-item
|
||||
label="标题"
|
||||
prop="title"
|
||||
>
|
||||
<el-input
|
||||
v-model="dataForm.title"
|
||||
controls-position="right"
|
||||
:min="0"
|
||||
maxlength="50"
|
||||
show-word-limit
|
||||
label="标题"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
label="内容"
|
||||
prop="content"
|
||||
>
|
||||
<el-input
|
||||
v-model="dataForm.content"
|
||||
controls-position="right"
|
||||
type="textarea"
|
||||
:min="0"
|
||||
maxlength="255"
|
||||
show-word-limit
|
||||
label="内容"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="排序号"
|
||||
prop="seq"
|
||||
>
|
||||
<el-input-number
|
||||
v-model="dataForm.seq"
|
||||
controls-position="right"
|
||||
:min="0"
|
||||
label="排序号"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="状态"
|
||||
prop="status"
|
||||
>
|
||||
<el-radio-group v-model="dataForm.status">
|
||||
<el-radio :label="0">
|
||||
下线
|
||||
</el-radio>
|
||||
<el-radio :label="1">
|
||||
正常
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="visible = false">
|
||||
取消
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="onSubmit()"
|
||||
>
|
||||
确定
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Debounce } from '@/utils/debounce'
|
||||
const emit = defineEmits(['refreshDataList'])
|
||||
const dataForm = ref({
|
||||
hotSearchId: 0,
|
||||
title: '',
|
||||
content: '',
|
||||
recDate: '',
|
||||
seq: 0,
|
||||
status: 0
|
||||
})
|
||||
const page = reactive({
|
||||
total: 0, // 总页数
|
||||
currentPage: 1, // 当前页数
|
||||
pageSize: 10 // 每页显示多少条
|
||||
})
|
||||
const visible = ref(false)
|
||||
const dataRule = {
|
||||
title: [
|
||||
{ required: true, message: '标题不能为空', trigger: 'blur' },
|
||||
{ min: 1, max: 50, message: '长度在1到50个字符内', trigger: 'blur' },
|
||||
{ pattern: /\s\S+|S+\s|\S/, message: '标题不能为空', trigger: 'blur' }
|
||||
],
|
||||
content: [
|
||||
{ required: true, message: '内容不能为空', trigger: 'blur' },
|
||||
{ min: 1, max: 255, message: '长度在1到255个字符内', trigger: 'blur' },
|
||||
{ pattern: /\s\S+|S+\s|\S/, message: '内容不能为空', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
|
||||
const dataFormRef = ref(null)
|
||||
const init = (id) => {
|
||||
dataForm.value.hotSearchId = id || 0
|
||||
visible.value = true
|
||||
nextTick(() => {
|
||||
dataFormRef.value?.resetFields()
|
||||
if (dataForm.value.hotSearchId) {
|
||||
http({
|
||||
url: http.adornUrl('/admin/hotSearch/info/' + dataForm.value.hotSearchId),
|
||||
method: 'get',
|
||||
params: http.adornParams()
|
||||
})
|
||||
.then(({ data }) => {
|
||||
dataForm.value = data
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
defineExpose({ init })
|
||||
|
||||
/**
|
||||
* 表单提交
|
||||
*/
|
||||
const onSubmit = Debounce(() => {
|
||||
dataFormRef.value?.validate(valid => {
|
||||
if (valid) {
|
||||
const param = dataForm.value
|
||||
http({
|
||||
url: http.adornUrl('/admin/hotSearch'),
|
||||
method: param.hotSearchId ? 'put' : 'post',
|
||||
data: http.adornData(param)
|
||||
})
|
||||
.then(() => {
|
||||
ElMessage({
|
||||
message: '操作成功',
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
visible.value = false
|
||||
emit('refreshDataList', page)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,172 @@
|
||||
<template>
|
||||
<div class="mod-hotSearcch">
|
||||
<avue-crud
|
||||
ref="crudRef"
|
||||
:page="page"
|
||||
:data="dataList"
|
||||
:table-loading="dataListLoading"
|
||||
:option="tableOption"
|
||||
@search-change="onSearch"
|
||||
@on-load="getDataList"
|
||||
@refresh-change="refreshChange"
|
||||
@selection-change="selectionChange"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button
|
||||
v-if="isAuth('admin:hotSearch:save')"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@click="onAddOrUpdate()"
|
||||
>
|
||||
新增
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
:disabled="dataListSelections.length <= 0"
|
||||
@click.stop="onDeconste"
|
||||
>
|
||||
批量删除
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<template #status="scope">
|
||||
<el-tag
|
||||
v-if="scope.row.status === 0"
|
||||
type="danger"
|
||||
>
|
||||
未启用
|
||||
</el-tag>
|
||||
<el-tag v-else>
|
||||
启用
|
||||
</el-tag>
|
||||
</template>
|
||||
|
||||
<template #menu="scope">
|
||||
<el-button
|
||||
v-if="isAuth('admin:hotSearch:update')"
|
||||
type="primary"
|
||||
icon="el-icon-edit"
|
||||
@click="onAddOrUpdate(scope.row.hotSearchId)"
|
||||
>
|
||||
修改
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="isAuth('admin:hotSearch:deconste')"
|
||||
type="danger"
|
||||
icon="el-icon-deconste"
|
||||
@click.stop="onDeconste(scope.row,scope.index)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</avue-crud>
|
||||
|
||||
<!-- 弹窗, 新增 / 修改 -->
|
||||
<add-or-update
|
||||
v-if="addOrUpdateVisible"
|
||||
ref="addOrUpdateRef"
|
||||
@refresh-data-list="getDataList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { isAuth } from '@/utils'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { tableOption } from '@/crud/shop/hotSearch.js'
|
||||
import AddOrUpdate from './add-or-update.vue'
|
||||
const dataList = ref([])
|
||||
const page = reactive({
|
||||
total: 0, // 总页数
|
||||
currentPage: 1, // 当前页数
|
||||
pageSize: 10 // 每页显示多少条
|
||||
})
|
||||
const dataListLoading = ref(false)
|
||||
const dataListSelections = ref([])
|
||||
|
||||
/**
|
||||
* 获取数据列表
|
||||
*/
|
||||
const getDataList = (pageParam, params, done) => {
|
||||
dataListLoading.value = true
|
||||
http({
|
||||
url: http.adornUrl('/admin/hotSearch/page'),
|
||||
method: 'get',
|
||||
params: http.adornParams(Object.assign({
|
||||
current: pageParam ? pageParam.currentPage : 1,
|
||||
size: pageParam ? pageParam.pageSize : 20
|
||||
}, params))
|
||||
})
|
||||
.then(({ data }) => {
|
||||
page.total = data.total
|
||||
page.pageSize = data.size
|
||||
page.currentPage = data.current
|
||||
dataList.value = data.records
|
||||
dataListLoading.value = false
|
||||
if (done) done()
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 多选回调
|
||||
* @param list
|
||||
*/
|
||||
const selectionChange = (list) => {
|
||||
dataListSelections.value = list
|
||||
}
|
||||
|
||||
const addOrUpdateVisible = ref(false)
|
||||
const addOrUpdateRef = ref(null)
|
||||
/**
|
||||
* 新增 / 修改
|
||||
* @param id
|
||||
*/
|
||||
const onAddOrUpdate = (id) => {
|
||||
addOrUpdateVisible.value = true
|
||||
nextTick(() => {
|
||||
addOrUpdateRef.value?.init(id)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 点击查询
|
||||
*/
|
||||
const onSearch = (params, done) => {
|
||||
getDataList(page, params, done)
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除
|
||||
*/
|
||||
const onDeconste = (row) => {
|
||||
const ids = row.hotSearchId ? [row.hotSearchId] : dataListSelections.value?.map(item => {
|
||||
return item.hotSearchId
|
||||
})
|
||||
ElMessageBox.confirm(`确定进行[${row.hotSearchId ? '删除' : '批量删除'}]操作?`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
http({
|
||||
url: http.adornUrl('/admin/hotSearch'),
|
||||
method: 'delete',
|
||||
data: http.adornData(ids, false)
|
||||
})
|
||||
.then(() => {
|
||||
ElMessage({
|
||||
message: '操作成功',
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
getDataList()
|
||||
}
|
||||
})
|
||||
})
|
||||
}).catch(() => { })
|
||||
}
|
||||
const refreshChange = () => {
|
||||
getDataList(page)
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="visible"
|
||||
:title="!dataForm.id ? '新增' : '修改'"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form
|
||||
ref="dataFormRef"
|
||||
:model="dataForm"
|
||||
:rules="dataRule"
|
||||
label-width="80px"
|
||||
@keyup.enter="onSubmit()"
|
||||
>
|
||||
<el-form-item
|
||||
label="公告标题"
|
||||
prop="title"
|
||||
>
|
||||
<el-input v-model="dataForm.title" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="状态"
|
||||
prop="status"
|
||||
>
|
||||
<el-radio-group v-model="dataForm.status">
|
||||
<el-radio :label="1">
|
||||
公布
|
||||
</el-radio>
|
||||
<el-radio :label="0">
|
||||
撤销
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="置顶"
|
||||
prop="isTop"
|
||||
>
|
||||
<el-radio-group v-model="dataForm.isTop">
|
||||
<el-radio :label="1">
|
||||
是
|
||||
</el-radio>
|
||||
<el-radio :label="0">
|
||||
否
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="公告内容"
|
||||
prop="content"
|
||||
>
|
||||
<TinyMce
|
||||
ref="contentEnRef"
|
||||
v-model="dataForm.content"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button
|
||||
@click="visible = false"
|
||||
>取消</el-button>
|
||||
<el-button
|
||||
|
||||
type="primary"
|
||||
@click="onSubmit()"
|
||||
>确定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Debounce } from '@/utils/debounce'
|
||||
const emit = defineEmits(['refreshDataList'])
|
||||
const visible = ref(false)
|
||||
const contentEnRef = ref(null)
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const validateTitle = (rule, value, callback) => {
|
||||
if (!value.trim()) {
|
||||
dataForm.value.title = ''
|
||||
callback(new Error('公告标题不能为空'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
const dataRule = {
|
||||
title: [
|
||||
{ required: true, message: '公告标题不能为空', trigger: 'blur' },
|
||||
{ validator: validateTitle, trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
|
||||
const dataForm = ref({
|
||||
title: null,
|
||||
content: null,
|
||||
url: null,
|
||||
status: 1,
|
||||
isTop: 0
|
||||
})
|
||||
const dataFormRef = ref(null)
|
||||
const init = (id) => {
|
||||
dataForm.value.id = id || 0
|
||||
visible.value = true
|
||||
nextTick(() => {
|
||||
dataFormRef.value?.resetFields()
|
||||
if (dataForm.value.id) {
|
||||
http({
|
||||
url: http.adornUrl('/shop/notice/info/' + dataForm.value.id),
|
||||
method: 'get',
|
||||
params: http.adornParams()
|
||||
})
|
||||
.then(({ data }) => {
|
||||
dataForm.value = data
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
defineExpose({ init })
|
||||
|
||||
/**
|
||||
* 表单提交
|
||||
*/
|
||||
const onSubmit = Debounce(() => {
|
||||
dataFormRef.value?.validate((valid) => {
|
||||
if (valid) {
|
||||
http({
|
||||
url: http.adornUrl('/shop/notice'),
|
||||
method: dataForm.value.id ? 'put' : 'post',
|
||||
data: http.adornData(dataForm.value)
|
||||
})
|
||||
.then(() => {
|
||||
ElMessage({
|
||||
message: '操作成功',
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
visible.value = false
|
||||
emit('refreshDataList')
|
||||
dataForm.value.content = ''
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<div class="mod-shop-notice">
|
||||
<avue-crud
|
||||
ref="crudRef"
|
||||
:page="page"
|
||||
:data="dataList"
|
||||
:table-loading="dataListLoading"
|
||||
:option="tableOption"
|
||||
@search-change="onSearch"
|
||||
@on-load="getDataList"
|
||||
@refresh-change="refreshChange"
|
||||
>
|
||||
<template #status="scope">
|
||||
<el-tag
|
||||
v-if="scope.row.status === 0"
|
||||
type="danger"
|
||||
>
|
||||
撤销
|
||||
</el-tag>
|
||||
<el-tag v-else>
|
||||
公布
|
||||
</el-tag>
|
||||
</template>
|
||||
<template #isTop="scope">
|
||||
<el-tag v-if="scope.row.isTop === 0">
|
||||
否
|
||||
</el-tag>
|
||||
<el-tag v-else>
|
||||
是
|
||||
</el-tag>
|
||||
</template>
|
||||
<template #menuLeft>
|
||||
<el-button
|
||||
v-if="isAuth('shop:notice:save')"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@click="onAddOrUpdate()"
|
||||
>
|
||||
新增
|
||||
</el-button>
|
||||
</template>
|
||||
<template #menu="scope">
|
||||
<el-button
|
||||
v-if="isAuth('shop:notice:update')"
|
||||
type="primary"
|
||||
icon="el-icon-edit"
|
||||
@click="onAddOrUpdate(scope.row.id)"
|
||||
>
|
||||
修改
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="isAuth('shop:notice:delete')"
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
@click.stop="onDelete(scope.row.id)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</avue-crud>
|
||||
<add-or-update
|
||||
v-if="addOrUpdateVisible"
|
||||
ref="addOrUpdateRef"
|
||||
@refresh-data-list="refreshChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { isAuth } from '@/utils'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { tableOption } from '@/crud/shop/notice'
|
||||
import AddOrUpdate from './add-or-update.vue'
|
||||
|
||||
const dataList = ref([])
|
||||
const page = reactive({
|
||||
total: 0, // 总页数
|
||||
currentPage: 1, // 当前页数
|
||||
pageSize: 10 // 每页显示多少条
|
||||
})
|
||||
const dataListLoading = ref(false)
|
||||
const addOrUpdateVisible = ref(false)
|
||||
|
||||
const getDataList = (pageParam, params, done) => {
|
||||
dataListLoading.value = true
|
||||
http({
|
||||
url: http.adornUrl('/shop/notice/page'),
|
||||
method: 'get',
|
||||
params: http.adornParams(Object.assign({
|
||||
current: pageParam == null ? page.currentPage : pageParam.currentPage,
|
||||
size: pageParam == null ? page.pageSize : pageParam.pageSize
|
||||
}, params))
|
||||
})
|
||||
.then(({ data }) => {
|
||||
dataList.value = data.records
|
||||
page.total = data.total
|
||||
dataListLoading.value = false
|
||||
if (done) done()
|
||||
})
|
||||
}
|
||||
|
||||
const addOrUpdateRef = ref(null)
|
||||
/**
|
||||
* 新增 / 修改
|
||||
* @param id
|
||||
*/
|
||||
const onAddOrUpdate = (id) => {
|
||||
addOrUpdateVisible.value = true
|
||||
nextTick(() => {
|
||||
addOrUpdateRef.value?.init(id)
|
||||
})
|
||||
}
|
||||
|
||||
const onDelete = (id) => {
|
||||
ElMessageBox.confirm('确定进行删除操作?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
http({
|
||||
url: http.adornUrl('/shop/notice/' + id),
|
||||
method: 'delete',
|
||||
data: http.adornData({})
|
||||
})
|
||||
.then(() => {
|
||||
ElMessage({
|
||||
message: '操作成功',
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
getDataList()
|
||||
}
|
||||
})
|
||||
})
|
||||
}).catch(() => { })
|
||||
}
|
||||
|
||||
/**
|
||||
* 刷新回调
|
||||
*/
|
||||
const refreshChange = () => {
|
||||
getDataList(page)
|
||||
}
|
||||
|
||||
const onSearch = (params, done) => {
|
||||
getDataList(page, params, done)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@ -0,0 +1,289 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="visible"
|
||||
:title="!dataForm.addrId ? '新增' : '修改'"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form
|
||||
ref="dataFormRef"
|
||||
:model="dataForm"
|
||||
:rules="dataRule"
|
||||
label-width="80px"
|
||||
@keyup.enter="onSubmit()"
|
||||
>
|
||||
<el-form-item
|
||||
label="名称"
|
||||
prop="addrName"
|
||||
>
|
||||
<el-input
|
||||
v-model="dataForm.addrName"
|
||||
placeholder="自提点名称"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="省份">
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="province">
|
||||
<el-select
|
||||
v-model="dataForm.provinceId"
|
||||
placeholder="请选择"
|
||||
@change="selectProvince"
|
||||
>
|
||||
<el-option
|
||||
v-for="province in provinceList"
|
||||
:key="province.areaId"
|
||||
:label="province.areaName"
|
||||
:value="province.areaId"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="city">
|
||||
<el-select
|
||||
v-model="dataForm.cityId"
|
||||
placeholder="请选择"
|
||||
@change="selectCity"
|
||||
>
|
||||
<el-option
|
||||
v-for="city in cityList"
|
||||
:key="city.areaId"
|
||||
:label="city.areaName"
|
||||
:value="city.areaId"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="area">
|
||||
<el-select
|
||||
v-model="dataForm.areaId"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="area in areaList"
|
||||
:key="area.areaId"
|
||||
:label="area.areaName"
|
||||
:value="area.areaId"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="地址"
|
||||
prop="addr"
|
||||
>
|
||||
<el-input
|
||||
v-model="dataForm.addr"
|
||||
placeholder="地址"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="手机号"
|
||||
prop="mobile"
|
||||
>
|
||||
<el-input
|
||||
v-model="dataForm.mobile"
|
||||
maxlength="11"
|
||||
placeholder="手机号"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span
|
||||
class="dialog-footer"
|
||||
>
|
||||
<el-button @click="visible = false">取消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="onSubmit()"
|
||||
>确定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { isMobile } from '@/utils/validate'
|
||||
import { Debounce } from '@/utils/debounce'
|
||||
const emit = defineEmits(['refreshDataList'])
|
||||
const visible = ref(false)
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const validateMobile = (rule, value, callback) => {
|
||||
if (!isMobile(value)) {
|
||||
callback(new Error('手机号格式错误'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
const dataRule = {
|
||||
addrName: [
|
||||
{ required: true, message: '自提点名称不能为空', trigger: 'blur' },
|
||||
{ pattern: /\s\S+|S+\s|\S/, message: '请输入正确的自提点名称', trigger: 'blur' }
|
||||
],
|
||||
addr: [
|
||||
{ required: true, message: '地址不能为空', trigger: 'blur' },
|
||||
{ pattern: /\s\S+|S+\s|\S/, message: '请输入正确的地址', trigger: 'blur' }
|
||||
],
|
||||
city: [{ required: true, message: '城市不能为空', trigger: 'blur' }],
|
||||
province: [
|
||||
{ required: true, message: '省份不能为空', trigger: 'blur' }
|
||||
],
|
||||
area: [{ required: true, message: '区/县不能为空', trigger: 'blur' }],
|
||||
mobile: [
|
||||
{ required: true, message: '手机号不能为空', trigger: 'blur' },
|
||||
{ validator: validateMobile, trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
const provinceList = ref([])
|
||||
const dataFormRef = ref(null)
|
||||
const cityList = ref([])
|
||||
const areaList = ref([])
|
||||
const dataForm = reactive({
|
||||
addrId: 0,
|
||||
addr: '',
|
||||
addrName: '',
|
||||
mobile: '',
|
||||
area: '',
|
||||
city: '',
|
||||
province: '',
|
||||
areaId: null,
|
||||
cityId: null,
|
||||
provinceId: null
|
||||
})
|
||||
const page = reactive({
|
||||
total: 0, // 总页数
|
||||
currentPage: 1, // 当前页数
|
||||
pageSize: 10 // 每页显示多少条
|
||||
})
|
||||
const init = (id) => {
|
||||
dataForm.addrId = id || 0
|
||||
visible.value = true
|
||||
nextTick(() => {
|
||||
dataFormRef.value?.resetFields()
|
||||
cityList.value = []
|
||||
areaList.value = []
|
||||
dataForm.provinceId = null
|
||||
dataForm.cityId = null
|
||||
dataForm.areaId = null
|
||||
})
|
||||
listAreaByParentId().then(({ data }) => {
|
||||
provinceList.value = data
|
||||
})
|
||||
if (dataForm.addrId) {
|
||||
http({
|
||||
url: http.adornUrl(
|
||||
`/shop/pickAddr/info/${dataForm.addrId}`
|
||||
),
|
||||
method: 'get',
|
||||
params: http.adornParams()
|
||||
})
|
||||
.then(({ data }) => {
|
||||
dataForm.addr = data.addr
|
||||
dataForm.mobile = data.mobile
|
||||
dataForm.addrName = data.addrName
|
||||
dataForm.areaId = data.areaId
|
||||
dataForm.cityId = data.cityId
|
||||
dataForm.provinceId = data.provinceId
|
||||
listAreaByParentId(data.provinceId).then(({ data }) => {
|
||||
cityList.value = data
|
||||
})
|
||||
listAreaByParentId(data.cityId).then(({ data }) => {
|
||||
areaList.value = data
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
defineExpose({ init })
|
||||
|
||||
const listAreaByParentId = (pid) => {
|
||||
if (!pid) pid = 0
|
||||
return http({
|
||||
url: http.adornUrl('/admin/area/listByPid'),
|
||||
method: 'get',
|
||||
params: http.adornParams({ pid })
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 选择省
|
||||
* @param val
|
||||
*/
|
||||
const selectProvince = (val) => {
|
||||
dataForm.cityId = null
|
||||
dataForm.city = ''
|
||||
// 获取城市的select
|
||||
listAreaByParentId(val).then(({ data }) => {
|
||||
cityList.value = data
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 选择市
|
||||
* @param val
|
||||
*/
|
||||
const selectCity = (val) => {
|
||||
dataForm.areaId = null
|
||||
dataForm.area = ''
|
||||
// 获取区的select
|
||||
listAreaByParentId(val).then(({ data }) => {
|
||||
areaList.value = data
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 表单提交
|
||||
*/
|
||||
const onSubmit = Debounce(() => {
|
||||
for (let i = 0; i < provinceList.value.length; i++) {
|
||||
if (provinceList.value[i].areaId === dataForm.provinceId) {
|
||||
// 将省名字保存起来
|
||||
dataForm.province = provinceList.value[i].areaName
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < cityList.value.length; i++) {
|
||||
if (cityList.value[i].areaId === dataForm.cityId) {
|
||||
// 将市名字保存起来
|
||||
dataForm.city = cityList.value[i].areaName
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < areaList.value.length; i++) {
|
||||
if (areaList.value[i].areaId === dataForm.areaId) {
|
||||
// 将市名字保存起来
|
||||
dataForm.area = areaList.value[i].areaName
|
||||
}
|
||||
}
|
||||
dataFormRef.value?.validate(valid => {
|
||||
if (valid) {
|
||||
http({
|
||||
url: http.adornUrl('/shop/pickAddr'),
|
||||
method: dataForm.addrId ? 'put' : 'post',
|
||||
data: http.adornData({
|
||||
addrId: dataForm.addrId || undefined,
|
||||
addr: dataForm.addr,
|
||||
addrName: dataForm.addrName,
|
||||
mobile: dataForm.mobile,
|
||||
area: dataForm.area,
|
||||
city: dataForm.city,
|
||||
province: dataForm.province,
|
||||
areaId: dataForm.areaId,
|
||||
cityId: dataForm.cityId,
|
||||
provinceId: dataForm.provinceId
|
||||
})
|
||||
})
|
||||
.then(() => {
|
||||
ElMessage({
|
||||
message: '操作成功',
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
visible.value = false
|
||||
emit('refreshDataList', page)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<div class="mod-pickAddr">
|
||||
<avue-crud
|
||||
ref="crudRef"
|
||||
:page="page"
|
||||
:data="dataList"
|
||||
:option="tableOption"
|
||||
:permission="permission"
|
||||
@search-change="onSearch"
|
||||
@selection-change="selectionChange"
|
||||
@on-load="getDataList"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button
|
||||
v-if="isAuth('shop:pickAddr:save')"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@click.stop="onAddOrUpdate()"
|
||||
>
|
||||
新增
|
||||
</el-button>
|
||||
|
||||
<el-button
|
||||
v-if="isAuth('shop:pickAddr:delete')"
|
||||
type="danger"
|
||||
:disabled="dataListSelections.length <= 0"
|
||||
@click="onDelete()"
|
||||
>
|
||||
批量删除
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<template #menu="scope">
|
||||
<el-button
|
||||
v-if="isAuth('shop:pickAddr:update')"
|
||||
type="primary"
|
||||
icon="el-icon-edit"
|
||||
@click.stop="onAddOrUpdate(scope.row.addrId)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
|
||||
<el-button
|
||||
v-if="isAuth('shop:pickAddr:delete')"
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
@click.stop="onDelete(scope.row.addrId)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</avue-crud>
|
||||
|
||||
<!-- 弹窗, 新增 / 修改 -->
|
||||
<add-or-update
|
||||
v-if="addOrUpdateVisible"
|
||||
ref="addOrUpdateRef"
|
||||
@refresh-data-list="getDataList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { isAuth } from '@/utils'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import AddOrUpdate from './add-or-update.vue'
|
||||
import { tableOption } from '@/crud/shop/pickAddr.js'
|
||||
const permission = {
|
||||
delBtn: isAuth('prod:prod:delete')
|
||||
}
|
||||
const dataList = ref([])
|
||||
const dataListSelections = ref([])
|
||||
const page = reactive({
|
||||
total: 0, // 总页数
|
||||
currentPage: 1, // 当前页数
|
||||
pageSize: 10 // 每页显示多少条
|
||||
})
|
||||
/**
|
||||
* 获取数据列表
|
||||
*/
|
||||
const getDataList = (pageParam, params, done) => {
|
||||
http({
|
||||
url: http.adornUrl('/shop/pickAddr/page'),
|
||||
method: 'get',
|
||||
params: http.adornParams(
|
||||
Object.assign(
|
||||
{
|
||||
current: pageParam == null ? page.currentPage : pageParam.currentPage,
|
||||
size: pageParam == null ? page.pageSize : pageParam.pageSize
|
||||
},
|
||||
params
|
||||
)
|
||||
)
|
||||
})
|
||||
.then(({ data }) => {
|
||||
dataList.value = data.records
|
||||
page.total = data.total
|
||||
if (done) done()
|
||||
})
|
||||
}
|
||||
|
||||
const addOrUpdateVisible = ref(false)
|
||||
const addOrUpdateRef = ref(null)
|
||||
/**
|
||||
* 新增 / 修改
|
||||
* @param id
|
||||
*/
|
||||
const onAddOrUpdate = (id) => {
|
||||
addOrUpdateVisible.value = true
|
||||
nextTick(() => {
|
||||
addOrUpdateRef.value?.init(id)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除
|
||||
* @param id
|
||||
*/
|
||||
const onDelete = (id) => {
|
||||
const ids = id ? [id] : dataListSelections.value?.map(item => {
|
||||
return item.addrId
|
||||
})
|
||||
ElMessageBox.confirm(
|
||||
'确定进行删除操作?', '提示',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
http({
|
||||
url: http.adornUrl('/shop/pickAddr'),
|
||||
method: 'delete',
|
||||
data: http.adornData(ids, false)
|
||||
})
|
||||
.then(() => {
|
||||
ElMessage({
|
||||
message: '操作成功',
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
getDataList(page)
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => { })
|
||||
}
|
||||
|
||||
/**
|
||||
* 条件查询
|
||||
* @param params
|
||||
* @param done
|
||||
*/
|
||||
const onSearch = (params, done) => {
|
||||
getDataList(page, params, done)
|
||||
}
|
||||
/**
|
||||
* 多选变化
|
||||
* @param val
|
||||
*/
|
||||
const selectionChange = (val) => {
|
||||
dataListSelections.value = val
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<div class="mod-transport">
|
||||
<avue-crud
|
||||
ref="crudRef"
|
||||
:page="page"
|
||||
:data="dataList"
|
||||
:option="tableOption"
|
||||
@search-change="onSearch"
|
||||
@selection-change="selectionChange"
|
||||
@on-load="getDataList"
|
||||
>
|
||||
<template #prod-prop-values="scope">
|
||||
<el-tag
|
||||
v-for="item in scope.row.prodPropValues"
|
||||
:key="item.valueId"
|
||||
>
|
||||
{{ item.propValue }}
|
||||
</el-tag>
|
||||
</template>
|
||||
<template #menu-left>
|
||||
<el-button
|
||||
v-if="isAuth('shop:transport:save')"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@click.stop="onAddOrUpdate()"
|
||||
>
|
||||
新增
|
||||
</el-button>
|
||||
|
||||
<el-button
|
||||
v-if="isAuth('shop:transport:delete')"
|
||||
type="danger"
|
||||
:disabled="dataListSelections.length <= 0"
|
||||
@click="onDelete()"
|
||||
>
|
||||
批量删除
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<template #menu="scope">
|
||||
<el-button
|
||||
v-if="isAuth('shop:transport:update')"
|
||||
type="primary"
|
||||
icon="el-icon-edit"
|
||||
@click.stop="onAddOrUpdate(scope.row.transportId)"
|
||||
>
|
||||
修改
|
||||
</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>
|
||||
<!-- 弹窗, 新增 / 修改 -->
|
||||
<add-or-update
|
||||
v-if="addOrUpdateVisible"
|
||||
ref="addOrUpdateRef"
|
||||
@refresh-data-list="getDataList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { isAuth } from '@/utils'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { tableOption } from '@/crud/shop/transport'
|
||||
import AddOrUpdate from './add-or-update.vue'
|
||||
const dataList = ref([])
|
||||
const dataListSelections = ref([])
|
||||
const page = ref({
|
||||
total: 0, // 总页数
|
||||
currentPage: 1, // 当前页数
|
||||
pageSize: 10 // 每页显示多少条
|
||||
})
|
||||
|
||||
/**
|
||||
* 获取数据列表
|
||||
*/
|
||||
const getDataList = (pageParam, params, done) => {
|
||||
http({
|
||||
url: http.adornUrl('/shop/transport/page'),
|
||||
method: 'get',
|
||||
params: http.adornParams(
|
||||
Object.assign(
|
||||
{
|
||||
current: pageParam == null ? page.value.currentPage : pageParam.currentPage,
|
||||
size: pageParam == null ? page.value.pageSize : pageParam.pageSize
|
||||
},
|
||||
params
|
||||
)
|
||||
)
|
||||
})
|
||||
.then(({ data }) => {
|
||||
dataList.value = data.records
|
||||
page.value.total = data.total
|
||||
if (done) done()
|
||||
})
|
||||
}
|
||||
|
||||
const addOrUpdateVisible = ref(false)
|
||||
const addOrUpdateRef = ref(null)
|
||||
/**
|
||||
* 新增 / 修改
|
||||
* @param id
|
||||
*/
|
||||
const onAddOrUpdate = (id) => {
|
||||
addOrUpdateVisible.value = true
|
||||
nextTick(() => {
|
||||
addOrUpdateRef.value?.init(id)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除
|
||||
* @param id
|
||||
*/
|
||||
const onDelete = (id) => {
|
||||
const ids = id ? [id] : dataListSelections.value?.map(item => item.transportId)
|
||||
ElMessageBox.confirm(
|
||||
`确定进行[${id ? '删除' : '批量删除'}]操作?`,
|
||||
'提示',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
http({
|
||||
url: http.adornUrl('/shop/transport'),
|
||||
method: 'delete',
|
||||
data: http.adornData(ids, false)
|
||||
})
|
||||
.then(() => {
|
||||
ElMessage({
|
||||
message: '操作成功',
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
getDataList()
|
||||
}
|
||||
})
|
||||
})
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
/**
|
||||
* 条件查询
|
||||
*/
|
||||
const onSearch = (params, done) => {
|
||||
getDataList(page.value, params, done)
|
||||
}
|
||||
|
||||
/**
|
||||
* 多选变化
|
||||
*/
|
||||
const selectionChange = (val) => {
|
||||
dataListSelections.value = val
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="visible"
|
||||
:title="!dataForm.userId ? '新增' : '修改'"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form
|
||||
ref="dataFormRef"
|
||||
:model="dataForm"
|
||||
:rules="dataRule"
|
||||
label-width="80px"
|
||||
@keyup.enter="onSubmit()"
|
||||
>
|
||||
<el-form-item
|
||||
label="用户头像"
|
||||
prop="pic"
|
||||
>
|
||||
<img
|
||||
:src="dataForm.pic"
|
||||
class="image"
|
||||
alt=""
|
||||
>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="用户昵称"
|
||||
prop="nickName"
|
||||
>
|
||||
<el-input
|
||||
v-model="dataForm.nickName"
|
||||
:disabled="true"
|
||||
placeholder="用户昵称"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="状态"
|
||||
prop="status"
|
||||
>
|
||||
<el-radio-group v-model="dataForm.status">
|
||||
<el-radio :label="0">
|
||||
禁用
|
||||
</el-radio>
|
||||
<el-radio :label="1">
|
||||
正常
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span
|
||||
class="dialog-footer"
|
||||
>
|
||||
<el-button @click="visible = false">取消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="onSubmit()"
|
||||
>确定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Debounce } from '@/utils/debounce'
|
||||
const emit = defineEmits(['refreshDataList'])
|
||||
|
||||
const visible = ref(false)
|
||||
const dataForm = ref({
|
||||
userId: 0,
|
||||
nickName: '',
|
||||
pic: '',
|
||||
status: 1
|
||||
})
|
||||
const page = reactive({
|
||||
total: 0, // 总页数
|
||||
currentPage: 1, // 当前页数
|
||||
pageSize: 10 // 每页显示多少条
|
||||
})
|
||||
const dataRule = {
|
||||
nickName: [
|
||||
{ required: true, message: '用户名不能为空', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
|
||||
const dataFormRef = ref(null)
|
||||
const init = (id) => {
|
||||
dataForm.value.userId = id || 0
|
||||
visible.value = true
|
||||
nextTick(() => {
|
||||
dataFormRef.value?.resetFields()
|
||||
})
|
||||
if (dataForm.value.userId) {
|
||||
http({
|
||||
url: http.adornUrl(`/admin/user/info/${dataForm.value.userId}`),
|
||||
method: 'get',
|
||||
params: http.adornParams()
|
||||
})
|
||||
.then(({ data }) => {
|
||||
dataForm.value = data
|
||||
})
|
||||
}
|
||||
}
|
||||
defineExpose({ init })
|
||||
|
||||
/**
|
||||
* 表单提交
|
||||
*/
|
||||
const onSubmit = Debounce(() => {
|
||||
dataFormRef.value?.validate(valid => {
|
||||
if (valid) {
|
||||
http({
|
||||
url: http.adornUrl('/admin/user'),
|
||||
method: dataForm.value.userId ? 'put' : 'post',
|
||||
data: http.adornData({
|
||||
userId: dataForm.value.userId || undefined,
|
||||
nickName: dataForm.value.nickName,
|
||||
status: dataForm.value.status
|
||||
})
|
||||
})
|
||||
.then(() => {
|
||||
ElMessage({
|
||||
message: '操作成功',
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
visible.value = false
|
||||
emit('refreshDataList', page)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<div class="mod-user">
|
||||
<avue-crud
|
||||
ref="crudRef"
|
||||
:page="page"
|
||||
:data="dataList"
|
||||
:option="tableOption"
|
||||
@search-change="onSearch"
|
||||
@selection-change="selectionChange"
|
||||
@on-load="getDataList"
|
||||
>
|
||||
<template #pic="scope">
|
||||
<span
|
||||
v-if="scope.row.pic"
|
||||
class="avue-crud__img"
|
||||
>
|
||||
<i
|
||||
:src="scope.row.pic"
|
||||
class="el-icon-document"
|
||||
/>
|
||||
</span>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
|
||||
<template #status="scope">
|
||||
<el-tag
|
||||
v-if="scope.row.status === 0"
|
||||
type="danger"
|
||||
>
|
||||
禁用
|
||||
</el-tag>
|
||||
<el-tag v-else>
|
||||
正常
|
||||
</el-tag>
|
||||
</template>
|
||||
|
||||
<template #menu="scope">
|
||||
<el-button
|
||||
v-if="isAuth('admin:user:update')"
|
||||
type="primary"
|
||||
icon="el-icon-edit"
|
||||
@click.stop="onAddOrUpdate(scope.row.userId)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
</template>
|
||||
</avue-crud>
|
||||
|
||||
<!-- 弹窗, 新增 / 修改 -->
|
||||
<add-or-update
|
||||
v-if="addOrUpdateVisible"
|
||||
ref="addOrUpdateRef"
|
||||
@refresh-data-list="getDataList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { isAuth } from '@/utils'
|
||||
import { tableOption } from '@/crud/user/user.js'
|
||||
import AddOrUpdate from './add-or-update.vue'
|
||||
|
||||
const dataList = ref([])
|
||||
const dataListLoading = ref(false)
|
||||
const dataListSelections = ref([])
|
||||
const addOrUpdateVisible = ref(false)
|
||||
const page = reactive({
|
||||
total: 0, // 总页数
|
||||
currentPage: 1, // 当前页数
|
||||
pageSize: 10 // 每页显示多少条
|
||||
})
|
||||
/**
|
||||
* 获取数据列表
|
||||
*/
|
||||
const getDataList = (pageParam, params, done) => {
|
||||
dataListLoading.value = true
|
||||
http({
|
||||
url: http.adornUrl('/admin/user/page'),
|
||||
method: 'get',
|
||||
params: http.adornParams(
|
||||
Object.assign(
|
||||
{
|
||||
current: pageParam == null ? page.currentPage : pageParam.currentPage,
|
||||
size: pageParam == null ? page.pageSize : pageParam.pageSize
|
||||
},
|
||||
params
|
||||
)
|
||||
)
|
||||
})
|
||||
.then(({ data }) => {
|
||||
dataList.value = data.records
|
||||
page.total = data.total
|
||||
dataListLoading.value = false
|
||||
if (done) done()
|
||||
})
|
||||
}
|
||||
|
||||
const addOrUpdateRef = ref(null)
|
||||
/**
|
||||
* 新增 / 修改
|
||||
* @param id
|
||||
*/
|
||||
const onAddOrUpdate = (id) => {
|
||||
addOrUpdateVisible.value = true
|
||||
nextTick(() => {
|
||||
addOrUpdateRef.value?.init(id)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 条件查询
|
||||
*/
|
||||
const onSearch = (params, done) => {
|
||||
getDataList(page, params, done)
|
||||
}
|
||||
|
||||
/**
|
||||
* 多选变化
|
||||
*/
|
||||
const selectionChange = (val) => {
|
||||
dataListSelections.value = val
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in new issue