zianxin/pj_admin_cloud
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

食堂的所有表单校验修改

Browse Source
This commit is contained in:
ctw committed 2025-01-13 16:03:13 +08:00
1 parent 8af084c695
commit 7f09bed91d
9 files changed
+395 -341
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/views/canteen/canteenCategory/form.vue
+56 -51
View File
@@ -4,13 +4,18 @@
<el-row :gutter="24"> <el-row :gutter="24">
<el-col :span="14" class="mb20"> <el-col :span="14" class="mb20">
<el-form-item label="分类名称" prop="name"> <el-form-item label="分类名称" prop="name">
<el-input v-model="form.name" placeholder="请输入分类名称" /> <el-input v-model.trim="form.name" placeholder="请输入分类名称" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="14" class="mb20"> <el-col :span="14" class="mb20">
<el-form-item label="餐段类型" prop="categoryType"> <el-form-item label="餐段类型" prop="categoryType">
<el-select v-model="form.categoryType" placeholder="请选择餐段类型" multiple> <el-select v-model="form.categoryType" placeholder="请选择餐段类型" multiple>
<el-option :value="item.value" :label="item.label" v-for="(item, index) in daily_menu" :key="index"></el-option> <el-option
:value="item.value"
:label="item.label"
v-for="(item, index) in daily_menu"
:key="index"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
@@ -22,7 +27,7 @@
<el-col :span="14" class="mb20"> <el-col :span="14" class="mb20">
<el-form-item label="分类排序" prop="sort"> <el-form-item label="分类排序" prop="sort">
<el-input v-model="form.sort" placeholder="请输入分类排序" /> <el-input-number v-model="form.sort" :min="0" :precision="0" />
</el-form-item> </el-form-item>
</el-col> </el-col>
@@ -45,92 +50,92 @@
</template> </template>
<script setup lang="ts" name="CanteenCategoryDialog"> <script setup lang="ts" name="CanteenCategoryDialog">
import { useDict } from '/@/hooks/dict'; import { useDict } from "/@/hooks/dict"
import { useMessage } from '/@/hooks/message'; import { useMessage } from "/@/hooks/message"
import { getObj, addObj, putObj } from '/@/api/canteen/canteenCategory'; import { getObj, addObj, putObj } from "/@/api/canteen/canteenCategory"
import { rule } from '/@/utils/validate'; import { rule } from "/@/utils/validate"
const emit = defineEmits(['refresh']); const emit = defineEmits(["refresh"])
// 定义变量内容 // 定义变量内容
const dataFormRef = ref(); const dataFormRef = ref()
const visible = ref(false); const visible = ref(false)
const loading = ref(false); const loading = ref(false)
// 定义字典 // 定义字典
const { daily_menu } = useDict('daily_menu'); const { daily_menu } = useDict("daily_menu")
// 提交表单数据 // 提交表单数据
const form = reactive({ const form = reactive({
id: '', id: "",
parentId: '', parentId: "",
name: '', name: "",
picUrl: '', picUrl: "",
sort: '', sort: "",
status: '', status: "",
creator: '', creator: "",
updater: '', updater: "",
deleted: '', deleted: "",
deptId: '', deptId: "",
categoryType: [], categoryType: [],
}); })
// 定义校验规则 // 定义校验规则
const dataRules = ref({ const dataRules = ref({
name: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }], name: [{ required: true, message: "分类名称不能为空", trigger: "blur" }],
categoryType: [{ required: true, message: '餐段类型不能为空', trigger: 'blur' }], categoryType: [{ required: true, message: "餐段类型不能为空", trigger: "blur" }],
sort: [{ required: true, message: '分类排序不能为空', trigger: 'blur' }], sort: [{ required: true, message: "分类排序不能为空", trigger: "blur" }],
}); })
// 打开弹窗 // 打开弹窗
const openDialog = (id: string) => { const openDialog = (id: string) => {
visible.value = true; visible.value = true
form.id = ''; form.id = ""
// 重置表单数据 // 重置表单数据
nextTick(() => { nextTick(() => {
dataFormRef.value?.resetFields(); dataFormRef.value?.resetFields()
}); })
// 获取canteenCategory信息 // 获取canteenCategory信息
if (id) { if (id) {
form.id = id; form.id = id
getcanteenCategoryData(id); getcanteenCategoryData(id)
} }
}; }
// 提交 // 提交
const onSubmit = async () => { const onSubmit = async () => {
const valid = await dataFormRef.value.validate().catch(() => {}); const valid = await dataFormRef.value.validate().catch(() => {})
if (!valid) return false; if (!valid) return false
try { try {
loading.value = true; loading.value = true
form.id form.id
? await putObj({ ...form, categoryType: form.categoryType.join(',') }) ? await putObj({ ...form, categoryType: form.categoryType.join(",") })
: await addObj({ ...form, categoryType: form.categoryType.join(',') }); : await addObj({ ...form, categoryType: form.categoryType.join(",") })
useMessage().success(form.id ? '修改成功' : '添加成功'); useMessage().success(form.id ? "修改成功" : "添加成功")
visible.value = false; visible.value = false
emit('refresh'); emit("refresh")
} catch (err: any) { } catch (err: any) {
useMessage().error(err.msg); useMessage().error(err.msg)
} finally { } finally {
loading.value = false; loading.value = false
} }
}; }
// 初始化表单数据 // 初始化表单数据
const getcanteenCategoryData = (id: string) => { const getcanteenCategoryData = (id: string) => {
// 获取数据 // 获取数据
loading.value = true; loading.value = true
getObj(id) getObj(id)
.then((res: any) => { .then((res: any) => {
Object.assign(form, res.data, { categoryType: res.data.categoryType.split(',') }); Object.assign(form, res.data, { categoryType: res.data.categoryType.split(",") })
}) })
.finally(() => { .finally(() => {
loading.value = false; loading.value = false
}); })
}; }
// 暴露变量 // 暴露变量
defineExpose({ defineExpose({
openDialog, openDialog,
}); })
</script> </script>
src/views/canteen/canteenDailyMenu/form.vue
+6 -1
View File
@@ -35,7 +35,12 @@
<div class="food_list"> <div class="food_list">
<td class="food_list_item" v-for="(item, index) in selectedList" :key="item.id"> <td class="food_list_item" v-for="(item, index) in selectedList" :key="item.id">
<el-image style="width: 80px; height: 80px" :src="imageBaseUrl + item.picUrl" fit="cover" /> <el-image style="width: 80px; height: 80px" :src="imageBaseUrl + item.picUrl" fit="cover" />
<div class="w-full text-center text-black">{{ item.name }}</div> <div class="w-full flex justify-between items-center text-black">
<span>{{ item.name }}</span>
<span class="mx-1">|</span>
<span>{{ "某分类" }}</span>
</div>
<div class="w-full text-lg text-center text-red-600">{{ "￥6.6" }}</div>
</td> </td>
</div> </div>
</tr> </tr>
src/views/canteen/canteenDailyMenu/index.vue
+10 -2
View File
@@ -47,7 +47,12 @@
fit="cover" fit="cover"
@click="delteData(item.tid)" @click="delteData(item.tid)"
/> />
<div class="w-full text-center text-black">{{ item.name }}</div> <div class="w-full flex justify-between items-center text-black">
<span>{{ item.name }}</span>
<span class="mx-1">|</span>
<span>{{ "某分类" }}</span>
</div>
<div class="w-full text-lg text-center text-red-600">{{ "￥6.6" }}</div>
</td> </td>
</div> </div>
</tr> </tr>
@@ -225,7 +230,10 @@ onMounted(() => {
margin-left: 20px; margin-left: 20px;
&_item { &_item {
display: inline-block; display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
margin: 0 0 10px 10px; margin: 0 0 10px 10px;
padding: 10px 6px; padding: 10px 6px;
background-color: #f2f2f2; background-color: #f2f2f2;
src/views/canteen/canteenOnlineCategory/form.vue
+44 -44
View File
@@ -9,7 +9,7 @@
</el-col> </el-col>
<el-col :span="14" class="mb20"> <el-col :span="14" class="mb20">
<el-form-item label="分类名称" prop="name"> <el-form-item label="分类名称" prop="name">
<el-input v-model="form.name" placeholder="请输入分类名称" /> <el-input v-model.trim="form.name" placeholder="请输入分类名称" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24" class="mb20"> <el-col :span="24" class="mb20">
@@ -19,7 +19,7 @@
</el-col> </el-col>
<el-col :span="14" class="mb20"> <el-col :span="14" class="mb20">
<el-form-item label="分类排序" prop="sort"> <el-form-item label="分类排序" prop="sort">
<el-input-number v-model="form.sort" placeholder="请输入分类排序" /> <el-input-number v-model="form.sort" :min="0" :precision="0" placeholder="请输入分类排序" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<!-- <el-col :span="12" class="mb20">--> <!-- <el-col :span="12" class="mb20">-->
@@ -41,86 +41,86 @@
</template> </template>
<script setup lang="ts" name="CanteenOnlineCategoryDialog"> <script setup lang="ts" name="CanteenOnlineCategoryDialog">
import { useMessage } from '/@/hooks/message'; import { useMessage } from "/@/hooks/message"
import { getObj, addObj, putObj } from '/@/api/canteen/canteenOnlineCategory'; import { getObj, addObj, putObj } from "/@/api/canteen/canteenOnlineCategory"
import { rule } from '/@/utils/validate'; import { rule } from "/@/utils/validate"
const emit = defineEmits(['refresh']); const emit = defineEmits(["refresh"])
// 定义变量内容 // 定义变量内容
const dataFormRef = ref(); const dataFormRef = ref()
const visible = ref(false); const visible = ref(false)
const loading = ref(false); const loading = ref(false)
// 提交表单数据 // 提交表单数据
const form = reactive({ const form = reactive({
id: '', id: "",
merchantId: '', merchantId: "",
parentId: '', parentId: "",
name: '', name: "",
picUrl: '', picUrl: "",
sort: 0, sort: 0,
status: '', status: "",
deptId: '', deptId: "",
}); })
// 定义校验规则 // 定义校验规则
const dataRules = ref({ const dataRules = ref({
merchantId: [{ required: true, message: '商户不能为空', trigger: 'blur' }], merchantId: [{ required: true, message: "商户不能为空", trigger: "blur" }],
name: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }], name: [{ required: true, message: "分类名称不能为空", trigger: "blur" }],
sort: [ sort: [
{ required: true, message: '分类排序不能为空', trigger: 'blur' }, { required: true, message: "分类排序不能为空", trigger: "blur" },
{ validator: rule.number, trigger: 'blur' }, { validator: rule.number, trigger: "blur" },
], ],
}); })
// 打开弹窗 // 打开弹窗
const openDialog = async (id: string) => { const openDialog = async (id: string) => {
visible.value = true; visible.value = true
form.id = ''; form.id = ""
// 重置表单数据 // 重置表单数据
dataFormRef.value?.resetFields(); dataFormRef.value?.resetFields()
// 获取canteenOnlineCategory信息 // 获取canteenOnlineCategory信息
if (id) { if (id) {
form.id = id; form.id = id
getcanteenOnlineCategoryData(id); getcanteenOnlineCategoryData(id)
} }
}; }
// 提交 // 提交
const onSubmit = async () => { const onSubmit = async () => {
const valid = await dataFormRef.value.validate().catch(() => {}); const valid = await dataFormRef.value.validate().catch(() => {})
if (!valid) return false; if (!valid) return false
try { try {
loading.value = true; loading.value = true
form.id ? await putObj(form) : await addObj(form); form.id ? await putObj(form) : await addObj(form)
useMessage().success(form.id ? '修改成功' : '添加成功'); useMessage().success(form.id ? "修改成功" : "添加成功")
visible.value = false; visible.value = false
emit('refresh'); emit("refresh")
} catch (err: any) { } catch (err: any) {
useMessage().error(err.msg); useMessage().error(err.msg)
} finally { } finally {
loading.value = false; loading.value = false
} }
}; }
// 初始化表单数据 // 初始化表单数据
const getcanteenOnlineCategoryData = (id: string) => { const getcanteenOnlineCategoryData = (id: string) => {
// 获取数据 // 获取数据
loading.value = true; loading.value = true
getObj(id) getObj(id)
.then((res: any) => { .then((res: any) => {
Object.assign(form, res.data); Object.assign(form, res.data)
}) })
.finally(() => { .finally(() => {
loading.value = false; loading.value = false
}); })
}; }
// 暴露变量 // 暴露变量
defineExpose({ defineExpose({
openDialog, openDialog,
}); })
</script> </script>
src/views/canteen/canteenOnlineSpu/form.vue
+5 -5
View File
@@ -9,7 +9,7 @@
</el-col> </el-col>
<el-col :span="14" class="mb20"> <el-col :span="14" class="mb20">
<el-form-item label="商品名称" prop="name"> <el-form-item label="商品名称" prop="name">
<el-input v-model="form.name" placeholder="请输入商品名称" /> <el-input v-model.trim="form.name" placeholder="请输入商品名称" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="14" class="mb20"> <el-col :span="14" class="mb20">
@@ -19,17 +19,17 @@
</el-col> </el-col>
<el-col :span="14" class="mb20"> <el-col :span="14" class="mb20">
<el-form-item label="商品价格" prop="price"> <el-form-item label="商品价格" prop="price">
<el-input-number v-model="form.price" :precision="2" placeholder="请输入商品价格" /> <el-input-number v-model="form.price" :min="0" :precision="2" placeholder="请输入商品价格" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="14" class="mb20"> <el-col :span="14" class="mb20">
<el-form-item label="市场价" prop="marketPrice"> <el-form-item label="市场价" prop="marketPrice">
<el-input-number v-model="form.marketPrice" :precision="2" placeholder="请输入市场价" /> <el-input-number v-model="form.marketPrice" :min="0" :precision="2" placeholder="请输入市场价" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="14" class="mb20"> <el-col :span="14" class="mb20">
<el-form-item label="库存" prop="stock"> <el-form-item label="库存" prop="stock">
<el-input-number v-model="form.stock" placeholder="请输入库存" /> <el-input-number v-model="form.stock" :min="0" :precision="0" placeholder="请输入库存" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24" class="mb20"> <el-col :span="24" class="mb20">
@@ -44,7 +44,7 @@
</el-col> </el-col>
<el-col :span="14" class="mb20"> <el-col :span="14" class="mb20">
<el-form-item label="排序字段" prop="sort"> <el-form-item label="排序字段" prop="sort">
<el-input-number v-model="form.sort" placeholder="请输入排序字段" /> <el-input-number v-model="form.sort" :min="0" :precision="0" placeholder="请输入排序字段" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24" class="mb20"> <el-col :span="24" class="mb20">
src/views/canteen/canteenSpu/form.vue
+5 -5
View File
@@ -9,7 +9,7 @@
</el-col> </el-col>
<el-col :span="14" class="mb20"> <el-col :span="14" class="mb20">
<el-form-item label="商品名称" prop="name"> <el-form-item label="商品名称" prop="name">
<el-input v-model="form.name" placeholder="请输入商品名称" /> <el-input v-model.trim="form.name" placeholder="请输入商品名称" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="14" class="mb20"> <el-col :span="14" class="mb20">
@@ -36,7 +36,7 @@
<el-col :span="14" class="mb20"> <el-col :span="14" class="mb20">
<el-form-item label="排序" prop="sort"> <el-form-item label="排序" prop="sort">
<el-input v-model="form.sort" placeholder="请输入排序" /> <el-input-number v-model="form.sort" :min="0" :precision="0" />
</el-form-item> </el-form-item>
</el-col> </el-col>
@@ -52,19 +52,19 @@
<el-col :span="14" class="mb20"> <el-col :span="14" class="mb20">
<el-form-item label="商品价格" prop="price"> <el-form-item label="商品价格" prop="price">
<el-input-number v-model="form.price" :precision="2" placeholder="请输入商品价格" /> <el-input-number v-model="form.price" :min="0" :precision="2" placeholder="请输入商品价格" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="14" class="mb20"> <el-col :span="14" class="mb20">
<el-form-item label="市场价" prop="marketPrice"> <el-form-item label="市场价" prop="marketPrice">
<el-input-number v-model="form.marketPrice" :precision="2" placeholder="请输入市场价" /> <el-input-number v-model="form.marketPrice" :min="0" :precision="2" placeholder="请输入市场价" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="14" class="mb20"> <el-col :span="14" class="mb20">
<el-form-item label="库存" prop="stock"> <el-form-item label="库存" prop="stock">
<el-input-number v-model="form.stock" placeholder="请输入库存" /> <el-input-number v-model="form.stock" :min="0" :precision="0" />
</el-form-item> </el-form-item>
</el-col> </el-col>
src/views/canteen/merchantInfo/index.vue
+120 -91
View File
@@ -1,75 +1,110 @@
<template> <template>
<div class="layout-padding"> <div class="layout-padding">
<div class="layout-padding-auto layout-padding-view"> <div class="layout-padding-auto layout-padding-view">
<el-row> <el-row>
<div class="mb8" style="width: 100%"> <div class="mb8" style="width: 100%">
<el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()" <el-button
v-auth="'canteen_merchantInfo_add'"> icon="folder-add"
新 增 type="primary"
</el-button> class="ml10"
<el-button plain :disabled="multiple" icon="Delete" type="primary" v-auth="'canteen_merchantInfo_del'" @click="formDialogRef.openDialog()"
@click="handleDelete(selectObjs)"> v-auth="'canteen_merchantInfo_add'"
删除 >
</el-button> 新 增
<right-toolbar v-model:showSearch="showSearch" :export="'canteen_merchantInfo_export'" </el-button>
@exportExcel="exportExcel" class="ml10 mr20" style="float: right;" <el-button
@queryTable="getDataList"></right-toolbar> plain
</div> :disabled="multiple"
</el-row> icon="Delete"
<el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle" type="primary"
:header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle" v-auth="'canteen_merchantInfo_del'"
@sort-change="sortChangeHandle"> @click="handleDelete(selectObjs)"
<el-table-column type="selection" width="40" align="center" /> >
<el-table-column type="index" label="#" width="40" /> 删除
<!-- <el-table-column prop="merchantType" label="商户类型" show-overflow-tooltip> </el-button>
<right-toolbar
v-model:showSearch="showSearch"
:export="'canteen_merchantInfo_export'"
@exportExcel="exportExcel"
class="ml10 mr20"
style="float: right"
@queryTable="getDataList"
></right-toolbar>
</div>
</el-row>
<el-table
:data="state.dataList"
v-loading="state.loading"
border
:cell-style="tableStyle.cellStyle"
:header-cell-style="tableStyle.headerCellStyle"
@selection-change="selectionChangHandle"
@sort-change="sortChangeHandle"
>
<el-table-column type="selection" width="40" align="center" />
<el-table-column type="index" label="#" width="40" />
<!-- <el-table-column prop="merchantType" label="商户类型" show-overflow-tooltip>
<template #default="scope"> <template #default="scope">
<dict-tag :options="merchant_type" :value="scope.row.merchantType"></dict-tag> <dict-tag :options="merchant_type" :value="scope.row.merchantType"></dict-tag>
</template> </template>
</el-table-column> --> </el-table-column> -->
<el-table-column prop="name" label="商户名" /> <el-table-column prop="name" label="商户名" />
<el-table-column prop="logo" label="log"> <el-table-column prop="logo" label="logo">
<template #default="{ row }"> <template #default="{ row }">
<preview-image :src="row.logo" /> <preview-image :src="row.logo" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="deptName" label="部门" /> <el-table-column prop="deptName" label="部门" />
<el-table-column prop="collectMoneyCode" label="商户收款二维码" show-overflow-tooltip> <el-table-column prop="collectMoneyCode" label="商户收款二维码" show-overflow-tooltip>
<template #default="{ row }"> <template #default="{ row }">
<preview-image :src="row.logo" /> <preview-image :src="row.logo" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="phone" label="联系电话" show-overflow-tooltip /> <el-table-column prop="phone" label="联系电话" show-overflow-tooltip />
<el-table-column prop="businessTime" label="结束营业时间" show-overflow-tooltip /> <el-table-column prop="businessTime" label="结束营业时间" show-overflow-tooltip />
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip /> <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip />
<el-table-column label="操作" width="150"> <el-table-column label="操作" width="150">
<template #default="scope"> <template #default="scope">
<el-button icon="edit-pen" text type="primary" v-auth="'canteen_merchantInfo_edit'" <el-button
@click="formDialogRef.openDialog(scope.row.id)">编辑</el-button> icon="edit-pen"
<el-button icon="delete" text type="primary" v-auth="'canteen_merchantInfo_del'" text
@click="handleDelete([scope.row.id])">删除</el-button> type="primary"
</template> v-auth="'canteen_merchantInfo_edit'"
</el-table-column> @click="formDialogRef.openDialog(scope.row.id)"
</el-table> >
<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" /> 编辑
</div> </el-button>
<el-button
icon="delete"
text
type="primary"
v-auth="'canteen_merchantInfo_del'"
@click="handleDelete([scope.row.id])"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
</div>
<!-- 编辑、新增 --> <!-- 编辑、新增 -->
<form-dialog ref="formDialogRef" @refresh="getDataList(false)" /> <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
</div>
</div>
</template> </template>
<script setup lang="ts" name="systemMerchantInfo"> <script setup lang="ts" name="systemMerchantInfo">
import { BasicTableProps, useTable } from "/@/hooks/table"; import { BasicTableProps, useTable } from "/@/hooks/table"
import { fetchList, delObjs } from "/@/api/canteen/merchantInfo"; import { fetchList, delObjs } from "/@/api/canteen/merchantInfo"
import { useMessage, useMessageBox } from "/@/hooks/message"; import { useMessage, useMessageBox } from "/@/hooks/message"
import { useDict } from '/@/hooks/dict'; import { useDict } from "/@/hooks/dict"
// 引入组件 // 引入组件
const FormDialog = defineAsyncComponent(() => import('./form.vue')); const FormDialog = defineAsyncComponent(() => import("./form.vue"))
// 定义查询字典 // 定义查询字典
const { merchant_type } = useDict('merchant_type') const { merchant_type } = useDict("merchant_type")
// 定义变量内容 // 定义变量内容
const formDialogRef = ref() const formDialogRef = ref()
// 搜索变量 // 搜索变量
@@ -80,54 +115,48 @@ const selectObjs = ref([]) as any
const multiple = ref(true) const multiple = ref(true)
const state: BasicTableProps = reactive<BasicTableProps>({ const state: BasicTableProps = reactive<BasicTableProps>({
queryForm: {}, queryForm: {},
pageList: fetchList pageList: fetchList,
}) })
// table hook // table hook
const { const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } =
getDataList, useTable(state)
currentChangeHandle,
sizeChangeHandle,
sortChangeHandle,
downBlobFile,
tableStyle
} = useTable(state)
// 清空搜索条件 // 清空搜索条件
const resetQuery = () => { const resetQuery = () => {
// 清空搜索条件 // 清空搜索条件
queryRef.value?.resetFields() queryRef.value?.resetFields()
// 清空多选 // 清空多选
selectObjs.value = [] selectObjs.value = []
getDataList() getDataList()
} }
// 导出excel // 导出excel
const exportExcel = () => { const exportExcel = () => {
downBlobFile('/canteen/merchantInfo/export', Object.assign(state.queryForm, { ids: selectObjs }), 'merchantInfo.xlsx') downBlobFile("/canteen/merchantInfo/export", Object.assign(state.queryForm, { ids: selectObjs }), "merchantInfo.xlsx")
} }
// 多选事件 // 多选事件
const selectionChangHandle = (objs: { id: string }[]) => { const selectionChangHandle = (objs: { id: string }[]) => {
selectObjs.value = objs.map(({ id }) => id); selectObjs.value = objs.map(({ id }) => id)
multiple.value = !objs.length; multiple.value = !objs.length
}; }
// 删除操作 // 删除操作
const handleDelete = async (ids: string[]) => { const handleDelete = async (ids: string[]) => {
try { try {
await useMessageBox().confirm('此操作将永久删除'); await useMessageBox().confirm("此操作将永久删除")
} catch { } catch {
return; return
} }
try { try {
await delObjs(ids); await delObjs(ids)
getDataList(); getDataList()
useMessage().success('删除成功'); useMessage().success("删除成功")
} catch (err: any) { } catch (err: any) {
useMessage().error(err.msg); useMessage().error(err.msg)
} }
}; }
</script> </script>
src/views/wallet/mch-manage/form.vue
+144 -137
View File
@@ -1,180 +1,187 @@
<template> <template>
<el-dialog :title="form.id ? '编辑' : '新增'" width="40%" v-model="visible" :close-on-click-modal="false" draggable> <el-dialog :title="form.id ? '编辑' : '新增'" width="40%" v-model="visible" :close-on-click-modal="false" draggable>
<el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading"> <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
<el-row :gutter="24"> <el-row :gutter="24">
<el-col :span="24" class="mb20">
<el-form-item label="商户名" prop="name">
<el-input v-model.trim="form.name" placeholder="请输入商户名" />
</el-form-item>
</el-col>
<el-col :span="24" class="mb20"> <el-col :span="24" class="mb20">
<el-form-item label="商户名" prop="name"> <el-form-item label="部门" prop="deptId">
<el-input v-model="form.name" placeholder="请输入商户名" /> <select-dept v-model="form.deptId" placeholder="请选择部门" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24" class="mb20"> <el-col :span="24" class="mb20">
<el-form-item label="部门" prop="deptId"> <el-form-item label="商户类型" prop="merchantType">
<select-dept v-model="form.deptId" placeholder="请选择部门" /> <el-checkbox-group v-model="form.merchantType">
</el-form-item> <el-checkbox :label="item.value" v-for="(item, index) in merchant_type" border :key="index">
</el-col> {{ item.label }}
</el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-col>
<el-col :span="24" class="mb20"> <el-col :span="24" class="mb20">
<el-form-item label="商户类型" prop="merchantType"> <el-form-item label="商户logo" prop="logoPic">
<el-checkbox-group v-model="form.merchantType"> <upload-img v-model:imageUrl="form.logoPic"></upload-img>
<el-checkbox :label="item.value" v-for="(item, index) in merchant_type" border :key="index"> </el-form-item>
{{ item.label }} </el-col>
</el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-col>
<el-col :span="24" class="mb20"> <el-col :span="24" class="mb20">
<el-form-item label="商户logo" prop="logoPic"> <el-form-item label="轮播图" prop="swiperPic">
<upload-img v-model:imageUrl="form.logoPic"></upload-img> <upload-imgs v-model:imageUrls="form.swiperPic" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24" class="mb20"> <el-col :span="24" class="mb20">
<el-form-item label="轮播图" prop="swiperPic"> <el-form-item label="联系电话" prop="phone">
<upload-imgs v-model:imageUrls="form.swiperPic" /> <el-input v-model.trim="form.phone" placeholder="请输入联系电话" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24" class="mb20"> <el-col :span="24" class="mb20">
<el-form-item label="联系电话" prop="phone"> <el-form-item label="营业时间" prop="rangeDate">
<el-input v-model="form.phone" placeholder="请输入联系电话" /> <el-time-picker
</el-form-item> v-model="form.rangeDate"
</el-col> placeholder="请选择营业时间"
is-range
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="HH:mm"
format="HH:mm"
/>
</el-form-item>
</el-col>
<el-col :span="24" class="mb20"> <el-col :span="24" class="mb20">
<el-form-item label="营业时间" prop="rangeDate"> <el-form-item label="店铺地址" prop="address">
<el-time-picker v-model="form.rangeDate" placeholder="请选择营业时间" is-range range-separator="至" <el-input type="textarea" v-model.trim="form.address" placeholder="请输入店铺地址" />
start-placeholder="开始日期" end-placeholder="结束日期" value-format="HH:mm" format="HH:mm" /> </el-form-item>
</el-form-item> </el-col>
</el-col> </el-row>
</el-form>
<el-col :span="24" class="mb20"> <template #footer>
<el-form-item label="店铺地址" prop="address"> <span class="dialog-footer">
<el-input type="textarea" v-model="form.address" placeholder="请输入店铺地址" /> <el-button @click="visible = false">取消</el-button>
</el-form-item> <el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
</el-col> </span>
</template>
</el-row> </el-dialog>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
</span>
</template>
</el-dialog>
</template> </template>
<script setup lang="ts" name="MerchantInfoDialog"> <script setup lang="ts" name="MerchantInfoDialog">
import { useDict } from '/@/hooks/dict'; import { useDict } from "/@/hooks/dict"
import { useMessage } from "/@/hooks/message"; import { useMessage } from "/@/hooks/message"
import { getObj, addObj, putObj } from '/@/api/wallet/mch-manage' import { getObj, addObj, putObj } from "/@/api/wallet/mch-manage"
import { rule } from '/@/utils/validate'; import { rule } from "/@/utils/validate"
import { parseTime } from '/@/utils/formatTime' import { parseTime } from "/@/utils/formatTime"
const emit = defineEmits(['refresh']); const emit = defineEmits(["refresh"])
// 定义变量内容 // 定义变量内容
const dataFormRef = ref(); const dataFormRef = ref()
const visible = ref(false) const visible = ref(false)
const loading = ref(false) const loading = ref(false)
//定义业务变量内容 //定义业务变量内容
// 定义字典 // 定义字典
const { merchant_type } = useDict('merchant_type') const { merchant_type } = useDict("merchant_type")
// 提交表单数据 // 提交表单数据
const form = reactive({ const form = reactive({
id: '', id: "",
deptId: '', deptId: "",
name: '', name: "",
merchantType: [], merchantType: [],
logoPic: '', logoPic: "",
collectMoneyCode: '', collectMoneyCode: "",
swiperPic: [], swiperPic: [],
phone: '', phone: "",
businessTime: '', businessTime: "",
address: '', address: "",
jobStartTime: '', jobStartTime: "",
jobEndTime: '', jobEndTime: "",
rangeDate: [], rangeDate: [],
}); })
// 定义校验规则 // 定义校验规则
const dataRules = ref({ const dataRules = ref({
name: [{ required: true, message: '商户名不能为空', trigger: 'blur' }], name: [{ required: true, message: "商户名不能为空", trigger: "blur" }],
types: [{ required: true, message: '请选择商户类型', trigger: 'change' }], types: [{ required: true, message: "请选择商户类型", trigger: "change" }],
logoPic: [{ required: true, message: '请上传商户logo', trigger: 'change' }], logoPic: [{ required: true, message: "请上传商户logo", trigger: "change" }],
swiperPic: [{ required: true, message: '请上传商户轮播图', trigger: 'change' }], swiperPic: [{ required: true, message: "请上传商户轮播图", trigger: "change" }],
rangeDate: [{ required: true, message: '请选择营业时间', trigger: 'change' }], rangeDate: [{ required: true, message: "请选择营业时间", trigger: "change" }],
deptId: [{ required: true, message: '请选择部门', trigger: 'change' }], deptId: [{ required: true, message: "请选择部门", trigger: "change" }],
merchantType: [{ required: true, message: '请选择商户类型', trigger: 'change' }], merchantType: [{ required: true, message: "请选择商户类型", trigger: "change" }],
}) })
// 打开弹窗 // 打开弹窗
const openDialog = (id: string) => { const openDialog = (id: string) => {
visible.value = true visible.value = true
form.id = '' form.id = ""
// 重置表单数据 // 重置表单数据
nextTick(() => { nextTick(() => {
dataFormRef.value?.resetFields(); dataFormRef.value?.resetFields()
}); })
// 获取merchantInfo信息 // 获取merchantInfo信息
if (id) { if (id) {
form.id = id form.id = id
getmerchantInfoData(id) getmerchantInfoData(id)
} }
}; }
const parseDate = (timeString: string) => { const parseDate = (timeString: string) => {
const now = new Date(); const now = new Date()
const [hours, minutes] = timeString.split(":").map(Number) const [hours, minutes] = timeString.split(":").map(Number)
now.setHours(hours) now.setHours(hours)
now.setMinutes(minutes) now.setMinutes(minutes)
now.setSeconds(0) now.setSeconds(0)
now.setMilliseconds(0) now.setMilliseconds(0)
return parseTime(now, "{h}:{i}:{s}") return parseTime(now, "{h}:{i}:{s}")
} }
// 提交 // 提交
const onSubmit = async () => { const onSubmit = async () => {
const valid = await dataFormRef.value.validate().catch(() => { }); const valid = await dataFormRef.value.validate().catch(() => {})
if (!valid) return false; if (!valid) return false
const _pa = { ...form, types: form.merchantType.join(",") } const _pa = { ...form, types: form.merchantType.join(",") }
if (_pa.rangeDate && _pa.rangeDate.length) { if (_pa.rangeDate && _pa.rangeDate.length) {
_pa.jobStartTime = parseDate(_pa.rangeDate[0]) _pa.jobStartTime = parseDate(_pa.rangeDate[0])
_pa.jobEndTime = parseDate(_pa.rangeDate[1]) _pa.jobEndTime = parseDate(_pa.rangeDate[1])
} }
try { try {
loading.value = true; loading.value = true
form.id ? await putObj(form) : await addObj(_pa); form.id ? await putObj(form) : await addObj(_pa)
useMessage().success(form.id ? '修改成功' : '添加成功'); useMessage().success(form.id ? "修改成功" : "添加成功")
visible.value = false; visible.value = false
emit('refresh'); emit("refresh")
} catch (err: any) { } catch (err: any) {
useMessage().error(err.msg); useMessage().error(err.msg)
} finally { } finally {
loading.value = false; loading.value = false
} }
}; }
// 初始化表单数据 // 初始化表单数据
const getmerchantInfoData = (id: string) => { const getmerchantInfoData = (id: string) => {
// 获取数据 // 获取数据
loading.value = true loading.value = true
getObj(id).then((res: any) => { getObj(id)
Object.assign(form, res.data) .then((res: any) => {
}).finally(() => { Object.assign(form, res.data, { merchantType: res.data.types.split(",") })
loading.value = false })
}) .finally(() => {
}; loading.value = false
})
}
// 暴露变量 // 暴露变量
defineExpose({ defineExpose({
openDialog openDialog,
}); })
</script> </script>
src/views/wallet/mch-manage/index.vue
+5 -5
View File
@@ -20,7 +20,7 @@
v-auth="'wallet_mchManage_del'" v-auth="'wallet_mchManage_del'"
@click="handleDelete(selectObjs)" @click="handleDelete(selectObjs)"
> >
删除 删 除
</el-button> </el-button>
<right-toolbar <right-toolbar
v-model:showSearch="showSearch" v-model:showSearch="showSearch"
@@ -44,7 +44,7 @@
<el-table-column type="selection" width="40" align="center" /> <el-table-column type="selection" width="40" align="center" />
<el-table-column type="index" label="#" width="40" /> <el-table-column type="index" label="#" width="40" />
<el-table-column prop="name" label="商户名" /> <el-table-column prop="name" label="商户名" />
<el-table-column prop="logoPic" label="log"> <el-table-column prop="logoPic" label="logo">
<template #default="{ row }"> <template #default="{ row }">
<preview-image :src="row.logoPic" /> <preview-image :src="row.logoPic" />
</template> </template>
@@ -54,7 +54,7 @@
<preview-image :src="row.collectionCode" /> <preview-image :src="row.collectionCode" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="merchantType" label="商户类型" show-overflow-tooltip> <el-table-column prop="merchantType" label="商户类型" show-overflow-tooltip :min-width="160">
<template #default="{ row }"> <template #default="{ row }">
<div class="flex justify-center items-center"> <div class="flex justify-center items-center">
<div v-for="(v, i) in row.types.split(',')" :key="i" class="mr-1"> <div v-for="(v, i) in row.types.split(',')" :key="i" class="mr-1">
@@ -65,7 +65,7 @@
</el-table-column> </el-table-column>
<el-table-column prop="deptName" label="部门" /> <el-table-column prop="deptName" label="部门" />
<el-table-column prop="phone" label="联系电话" show-overflow-tooltip /> <el-table-column prop="phone" label="联系电话" show-overflow-tooltip />
<el-table-column prop="businessTime" label="结束营业时间" show-overflow-tooltip> <el-table-column prop="businessTime" label="结束营业时间" show-overflow-tooltip :min-width="160">
<template #default="{ row }"> <template #default="{ row }">
<div> <div>
<span>{{ row.jobStartTime }}</span> <span>{{ row.jobStartTime }}</span>
@@ -74,7 +74,7 @@
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip /> <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip :min-width="160" />
<el-table-column label="操作" width="150"> <el-table-column label="操作" width="150">
<template #default="scope"> <template #default="scope">
<el-button <el-button