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-07 18:25:20 +08:00
1 parent 5da50dbc19
commit 79497d7b05
8 files changed
+209 -248
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.env.development
+3 -1
View File
@@ -10,10 +10,12 @@ ENV = 'development'
# ADMIN 服务地址 # ADMIN 服务地址
# VITE_ADMIN_PROXY_PATH = http://123.156.230.15:8089/api/ # VITE_ADMIN_PROXY_PATH = http://123.156.230.15:8089/api/
VITE_ADMIN_PROXY_PATH = http://pjcloud.center.takin.cc/ VITE_ADMIN_PROXY_PATH = http://pjcloud.center.takin.cc/
VITE_ADMIN_PROXY_PATH = http://192.168.101.24:9999/
# VITE_ADMIN_PROXY_PATH = http://localhost:9999 # VITE_ADMIN_PROXY_PATH = http://localhost:9999
# 图片访问基础地址 # 图片访问基础地址
VITE_IMAGE_BASE_PATH = http://123.156.230.15:8089/api VITE_IMAGE_BASE_PATH = http://192.168.101.24:9999
# VITE_IMAGE_BASE_PATH = http://123.156.230.15:8089/api
# VITE_IMAGE_BASE_PATH = http://pjcloud.center.takin.cc # VITE_IMAGE_BASE_PATH = http://pjcloud.center.takin.cc
# VITE_IMAGE_BASE_PATH = http://localhost:9999 # VITE_IMAGE_BASE_PATH = http://localhost:9999
src/components/Select/SelectMch.vue
+64 -51
View File
@@ -1,73 +1,86 @@
<template> <template>
<el-select style="width: 100%;" v-model="state.selectId" :placeholder="props.placeholder" clearable <el-select
remote-show-suffix filterable remote :remote-method="remoteSearch" :loading="state.loading" style="width: 100%"
@visible-change="(e: boolean) => e && getOptions()"> v-model="state.selectId"
<el-option v-for="v in state.options" :key="v.id" :label="`${v.name}`" :value="v.id"> :placeholder="props.placeholder"
<div class="flex items-center"> clearable
<div class="color-primary">{{ v.name }}</div> remote-show-suffix
<div class="flex items-center just ml5"> filterable
<el-tag size="small"> remote
{{ v.deptName }} :remote-method="remoteSearch"
</el-tag> :loading="state.loading"
</div> @visible-change="(e: boolean) => e && getOptions()"
</div> >
</el-option> <el-option v-for="v in state.options" :key="v.id" :label="`${v.name}`" :value="v.id">
</el-select> <div class="flex items-center">
<div class="color-primary">{{ v.name }}</div>
<div class="flex items-center just ml5">
<el-tag size="small">
{{ v.deptName }}
</el-tag>
</div>
</div>
</el-option>
</el-select>
</template> </template>
<script setup lang="ts" name="select-merchant"> <script setup lang="ts" name="select-merchant">
import { reactive, computed, defineModel, withDefaults, defineProps } from 'vue' import { reactive, computed, defineModel, withDefaults, defineProps } from 'vue';
import * as mchApi from '/@/api/wallet/mch-manage' import * as mchApi from '/@/api/wallet/mch-manage';
const selectId = defineModel() const selectId = defineModel();
export type Props = { export type Props = {
placeholder?: string, placeholder?: string;
} };
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
placeholder: "请选择", placeholder: '请选择',
}) });
const queryForm = reactive<any>({ const queryForm = reactive<any>({
name: "", name: '',
current: 1, current: 1,
size: 10, size: 10,
}) });
const state = reactive<any>({ const state = reactive<any>({
loading: true, loading: true,
selectId: selectId, selectId: selectId,
options: [] options: [],
}) });
watch(selectId, (newVal, oldValue) => { watch(
if (newVal == oldValue) return selectId,
state.selectId = newVal (newVal, oldValue) => {
getOptions() if (newVal == oldValue) return;
}, { immediate: true }) state.selectId = newVal;
getOptions();
},
{ immediate: true }
);
async function getOptions() { async function getOptions() {
try { try {
state.loading = true state.loading = true;
const _pa = { const _pa = {
...queryForm ...queryForm,
} };
const { data } = await mchApi.pageJoin(_pa) const { data } = await mchApi.pageJoin(_pa);
state.options = data.records ?? [] state.options = data.records ?? [];
} finally { } finally {
setTimeout(() => state.loading = false, 500); setTimeout(() => (state.loading = false), 500);
} }
} }
function remoteSearch(params: string) { function remoteSearch(params: string) {
if (params != queryForm.name) { if (params != queryForm.name) {
queryForm.name = params queryForm.name = params;
getOptions() getOptions();
} }
} }
function clear() { function clear() {
state.selectId = null state.selectId = null;
getOptions() getOptions();
} }
</script> </script>
src/views/canteen/boxesInfo/form.vue
+2 -28
View File
@@ -4,15 +4,7 @@
<el-row :gutter="24"> <el-row :gutter="24">
<el-col :span="12" class="mb20"> <el-col :span="12" class="mb20">
<el-form-item label="商户" prop="merchantId"> <el-form-item label="商户" prop="merchantId">
<el-select <select-mch v-model="form.merchantId" />
v-model="form.merchantId"
placeholder="请选择商户"
size="large"
style="width: 240px; display: inline-block"
:disabled="merchantStatus"
>
<el-option v-for="item in merchantInfo" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12" class="mb20"> <el-col :span="12" class="mb20">
@@ -64,16 +56,12 @@ import { useDict } from '/@/hooks/dict';
import { useMessage } from '/@/hooks/message'; import { useMessage } from '/@/hooks/message';
import { getObj, addObj, putObj } from '/@/api/canteen/boxesInfo'; import { getObj, addObj, putObj } from '/@/api/canteen/boxesInfo';
import { rule } from '/@/utils/validate'; import { rule } from '/@/utils/validate';
import { selectMerchantList } from '/@/api/canteen/merchantInfo';
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 merchantStatus = ref(true);
const merchantInfo = ref<any>([]);
// 定义字典 // 定义字典
const { boxes_status } = useDict('boxes_status'); const { boxes_status } = useDict('boxes_status');
@@ -115,8 +103,6 @@ const openDialog = (id: string) => {
form.id = id; form.id = id;
getboxesInfoData(id); getboxesInfoData(id);
} }
//初始化商户信息
merchantInit();
}; };
// 提交 // 提交
@@ -149,19 +135,7 @@ const getboxesInfoData = (id: string) => {
loading.value = false; loading.value = false;
}); });
}; };
const merchantInit = async () => {
// 获取下拉框
let res = await selectMerchantList('1');
merchantInfo.value = res.data;
//默认选中第一个
if (merchantInfo.value) {
if (merchantInfo.value.length > 1) {
merchantStatus.value = false;
} else {
form.merchantId = merchantInfo.value[0].id;
}
}
};
// 暴露变量 // 暴露变量
defineExpose({ defineExpose({
openDialog, openDialog,
src/views/canteen/canteenDailyMenu/index.vue
+7 -13
View File
@@ -1,16 +1,9 @@
<template> <template>
<div class="layout-padding"> <div class="layout-padding">
<div style="margin-left: 4.5%; margin-top: 1.5%"> <div style="margin-left: 4.5%; margin-top: 1.5%">
<el-select <el-form-item label="商户" prop="merchantId">
v-model="merchantId" <select-mch v-model="merchantId" style="width: 200px" />
placeholder="请选择商户" </el-form-item>
size="large"
style="width: 240px; display: inline-block"
:disabled="merchantStatus"
@change="merchantSelect"
>
<el-option v-for="item in merchantInfo" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
<h1 class="title">今日菜谱</h1> <h1 class="title">今日菜谱</h1>
</div> </div>
<table width="100%" class="titleTable"> <table width="100%" class="titleTable">
@@ -116,10 +109,10 @@ const addClick = async (index: number) => {
weekParams.index = weekParams.index + index; weekParams.index = weekParams.index + index;
fetchData(); fetchData();
}; };
const merchantSelect = async () => {
// getList() watch(merchantId, () => {
fetchData(); fetchData();
}; });
const fetchData = async () => { const fetchData = async () => {
let weekDataRes = await selectWeekInfo(weekParams); let weekDataRes = await selectWeekInfo(weekParams);
@@ -221,6 +214,7 @@ onMounted(() => {
merchantInit(); merchantInit();
}); });
</script> </script>
<style lang="scss"> <style lang="scss">
.title { .title {
font-size: 28px; font-size: 28px;
src/views/canteen/canteenOnlineCategory/form.vue
+1 -16
View File
@@ -4,9 +4,7 @@
<el-row :gutter="24"> <el-row :gutter="24">
<el-col :span="24" class="mb20"> <el-col :span="24" class="mb20">
<el-form-item label="商户" prop="merchantId"> <el-form-item label="商户" prop="merchantId">
<el-select v-model="form.merchantId" placeholder="请选择商户" style="width: 240px"> <select-mch v-model="form.merchantId" />
<el-option v-for="item in merchantInfo" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12" class="mb20"> <el-col :span="12" class="mb20">
@@ -45,7 +43,6 @@
<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 { selectMerchantList } from '/@/api/canteen/merchantInfo';
import { rule } from '/@/utils/validate'; import { rule } from '/@/utils/validate';
const emit = defineEmits(['refresh']); const emit = defineEmits(['refresh']);
@@ -53,7 +50,6 @@ 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 merchantInfo = ref<any>([]); // 商户信息
// 提交表单数据 // 提交表单数据
const form = reactive({ const form = reactive({
@@ -85,17 +81,6 @@ const openDialog = async (id: string) => {
// 重置表单数据 // 重置表单数据
dataFormRef.value?.resetFields(); dataFormRef.value?.resetFields();
if (merchantInfo.value.length <= 0) {
try {
// 获取商户下拉框选项
const res = await selectMerchantList('1');
merchantInfo.value = res.data;
} catch (error) {
merchantInfo.value = [];
loading.value = false;
}
}
// 获取canteenOnlineCategory信息 // 获取canteenOnlineCategory信息
if (id) { if (id) {
form.id = id; form.id = id;
src/views/canteen/canteenOnlineSpu/form.vue
+1 -16
View File
@@ -4,9 +4,7 @@
<el-row :gutter="24"> <el-row :gutter="24">
<el-col :span="12" class="mb20"> <el-col :span="12" class="mb20">
<el-form-item label="商户" prop="merchantId"> <el-form-item label="商户" prop="merchantId">
<el-select v-model="form.merchantId" placeholder="请选择商户" style="width: 240px"> <select-mch v-model="form.merchantId" />
<el-option v-for="item in merchantInfo" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12" class="mb20"> <el-col :span="12" class="mb20">
@@ -79,7 +77,6 @@
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/canteenOnlineSpu'; import { getObj, addObj, putObj } from '/@/api/canteen/canteenOnlineSpu';
import { selectMerchantList } from '/@/api/canteen/merchantInfo';
import { rule } from '/@/utils/validate'; import { rule } from '/@/utils/validate';
const emit = defineEmits(['refresh']); const emit = defineEmits(['refresh']);
@@ -89,7 +86,6 @@ const visible = ref(false);
const loading = ref(false); const loading = ref(false);
// 定义字典 // 定义字典
const { spu_status } = useDict('spu_status'); const { spu_status } = useDict('spu_status');
const merchantInfo = ref<any>([]); // 商户信息
// 提交表单数据 // 提交表单数据
const form = reactive({ const form = reactive({
@@ -132,17 +128,6 @@ const openDialog = async (id: string) => {
// 重置表单数据 // 重置表单数据
dataFormRef.value?.resetFields(); dataFormRef.value?.resetFields();
if (merchantInfo.value.length <= 0) {
try {
// 获取商户下拉框选项
const res = await selectMerchantList('1');
merchantInfo.value = res.data;
} catch (error) {
merchantInfo.value = [];
loading.value = false;
}
}
// 获取canteenOnlineSpu信息 // 获取canteenOnlineSpu信息
if (id) { if (id) {
form.id = id; form.id = id;
src/views/canteen/merchantInfo/form.vue
+130 -122
View File
@@ -1,168 +1,176 @@
<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="merchantId">
<select-mch v-model="form.merchantId" />
</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-radio-group v-model="form.merchantType">
</el-form-item> <el-radio :label="item.value" v-for="(item, index) in merchant_type" border :key="index">{{ item.label }} </el-radio>
</el-col> </el-radio-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="logo">
<el-radio-group v-model="form.merchantType"> <upload-img v-model:imageUrl="form.logo"></upload-img>
<el-radio :label="item.value" v-for="(item, index) in merchant_type" border :key="index">{{ item.label }} </el-form-item>
</el-radio> </el-col>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="24" class="mb20"> <el-col :span="24" class="mb20">
<el-form-item label="商户logo" prop="logo"> <el-form-item label="轮播图" prop="swiper">
<upload-img v-model:imageUrl="form.logo"></upload-img> <upload-imgs v-model:imageUrl="form.swiper" />
</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="swiper"> <el-form-item label="联系电话" prop="phone">
<upload-imgs v-model:imageUrl="form.swiper" /> <el-input v-model="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="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/canteen/merchantInfo' import { getObj, addObj, putObj } from '/@/api/canteen/merchantInfo';
import { rule } from '/@/utils/validate'; import { rule } from '/@/utils/validate';
import { deptTree } from "/@/api/admin/dept"; import { deptTree } from '/@/api/admin/dept';
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: '', merchantId: '',
name: '', deptId: '',
merchantType: '', name: '',
logo: '', merchantType: '',
collectMoneyCode: '', logo: '',
swiper: '', collectMoneyCode: '',
phone: '', swiper: '',
businessTime: '', phone: '',
address: '', businessTime: '',
jobStartTime: '', address: '',
rangeDate: [], jobStartTime: '',
jobEndTime: [], rangeDate: [],
jobEndTime: [],
}); });
// 定义校验规则 // 定义校验规则
const dataRules = ref({ const dataRules = ref({
name: [{ required: true, message: '商户名不能为空', trigger: 'blur' }], merchantId: [{ required: true, message: '商户不能为空', trigger: 'blur' }],
type: [{ required: true, message: '请选择商户类型', trigger: 'change' }], name: [{ required: true, message: '商户名不能为空', trigger: 'blur' }],
logo: [{ required: true, message: '请上传商户logo', trigger: 'change' }], type: [{ required: true, message: '请选择商户类型', trigger: 'change' }],
swiper: [{ required: true, message: '请上传商户轮播图', trigger: 'change' }], logo: [{ required: true, message: '请上传商户logo', trigger: 'change' }],
rangeDate: [{ required: true, message: '请选择营业时间', trigger: 'change' }], swiper: [{ required: true, message: '请上传商户轮播图', trigger: 'change' }],
deptId: [{ required: true, message: '请选择部门', trigger: 'change' }], rangeDate: [{ required: true, message: '请选择营业时间', trigger: 'change' }],
}) deptId: [{ 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 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 } const _pa = { ...form };
if (_pa.rangeDate && _pa.rangeDate.length) { if (_pa.rangeDate && _pa.rangeDate.length) {
_pa.jobStartTime = _pa.rangeDate[0] _pa.jobStartTime = _pa.rangeDate[0];
_pa.jobEndTime = _pa.rangeDate[1] _pa.jobEndTime = _pa.rangeDate[1];
} }
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 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);
loading.value = false })
}) .finally(() => {
loading.value = false;
});
}; };
// 暴露变量 // 暴露变量
defineExpose({ defineExpose({
openDialog openDialog,
}); });
</script> </script>
src/views/home/navMenu/index.vue
+1 -1
View File
@@ -76,7 +76,7 @@ onMounted(async () => {
.card { .card {
padding: 5vw; padding: 5vw;
height: 100%; height: 100%;
background-image: linear-gradient(0deg, #ffffff 0%, #f3f6ff 100%); background-image: linear-gradient(0deg, #ffffff 0%, #e4ebff 100%);
} }
.nav-menu-item-top { .nav-menu-item-top {
height: 6.5vw; height: 6.5vw;