商户下拉选择

.env.development

@@ -10,10 +10,12 @@ ENV = 'development'
 # ADMIN 服务地址
 # 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://192.168.101.24: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://localhost:9999
 

src/components/Select/SelectMch.vue

@@ -1,73 +1,86 @@
 <template>
-    <el-select style="width: 100%;" v-model="state.selectId" :placeholder="props.placeholder" clearable
-        remote-show-suffix filterable remote :remote-method="remoteSearch" :loading="state.loading"
-        @visible-change="(e: boolean) => e && getOptions()">
-        <el-option v-for="v in state.options" :key="v.id" :label="`${v.name}`" :value="v.id">
-            <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>
+	<el-select
+		style="width: 100%"
+		v-model="state.selectId"
+		:placeholder="props.placeholder"
+		clearable
+		remote-show-suffix
+		filterable
+		remote
+		:remote-method="remoteSearch"
+		:loading="state.loading"
+		@visible-change="(e: boolean) => e && getOptions()"
+	>
+		<el-option v-for="v in state.options" :key="v.id" :label="`${v.name}`" :value="v.id">
+			<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>
 
 <script setup lang="ts" name="select-merchant">
-import { reactive, computed, defineModel, withDefaults, defineProps } from 'vue'
-import * as mchApi from '/@/api/wallet/mch-manage'
+import { reactive, computed, defineModel, withDefaults, defineProps } from 'vue';
+import * as mchApi from '/@/api/wallet/mch-manage';
 
-const selectId = defineModel()
+const selectId = defineModel();
 
 export type Props = {
-    placeholder?: string,
-}
+	placeholder?: string;
+};
 const props = withDefaults(defineProps<Props>(), {
-    placeholder: "请选择",
-})
+	placeholder: '请选择',
+});
 
 const queryForm = reactive<any>({
-    name: "",
-    current: 1,
-    size: 10,
-})
+	name: '',
+	current: 1,
+	size: 10,
+});
 
 const state = reactive<any>({
-    loading: true,
-    selectId: selectId,
-    options: []
-})
+	loading: true,
+	selectId: selectId,
+	options: [],
+});
 
-watch(selectId, (newVal, oldValue) => {
-    if (newVal == oldValue) return
-    state.selectId = newVal
-    getOptions()
-}, { immediate: true })
+watch(
+	selectId,
+	(newVal, oldValue) => {
+		if (newVal == oldValue) return;
+		state.selectId = newVal;
+		getOptions();
+	},
+	{ immediate: true }
+);
 
 async function getOptions() {
-    try {
-        state.loading = true
-        const _pa = {
-            ...queryForm
-        }
-        const { data } = await mchApi.pageJoin(_pa)
-        state.options = data.records ?? []
-    } finally {
-        setTimeout(() => state.loading = false, 500);
-    }
+	try {
+		state.loading = true;
+		const _pa = {
+			...queryForm,
+		};
+		const { data } = await mchApi.pageJoin(_pa);
+		state.options = data.records ?? [];
+	} finally {
+		setTimeout(() => (state.loading = false), 500);
+	}
 }
 
 function remoteSearch(params: string) {
-    if (params != queryForm.name) {
-        queryForm.name = params
-        getOptions()
-    }
+	if (params != queryForm.name) {
+		queryForm.name = params;
+		getOptions();
+	}
 }
 
 function clear() {
-    state.selectId = null
-    getOptions()
+	state.selectId = null;
+	getOptions();
 }
-</script>
+</script>

src/views/canteen/boxesInfo/form.vue

@@ -4,15 +4,7 @@
 			<el-row :gutter="24">
 				<el-col :span="12" class="mb20">
 					<el-form-item label="商户" prop="merchantId">
-						<el-select
-							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>
+						<select-mch v-model="form.merchantId" />
 					</el-form-item>
 				</el-col>
 				<el-col :span="12" class="mb20">
@@ -64,16 +56,12 @@ import { useDict } from '/@/hooks/dict';
 import { useMessage } from '/@/hooks/message';
 import { getObj, addObj, putObj } from '/@/api/canteen/boxesInfo';
 import { rule } from '/@/utils/validate';
-import { selectMerchantList } from '/@/api/canteen/merchantInfo';
 const emit = defineEmits(['refresh']);
 
 // 定义变量内容
 const dataFormRef = ref();
 const visible = ref(false);
 const loading = ref(false);
-//业务变量
-const merchantStatus = ref(true);
-const merchantInfo = ref<any>([]);
 // 定义字典
 const { boxes_status } = useDict('boxes_status');
 
@@ -115,8 +103,6 @@ const openDialog = (id: string) => {
 		form.id = id;
 		getboxesInfoData(id);
 	}
-	//初始化商户信息
-	merchantInit();
 };
 
 // 提交
@@ -149,19 +135,7 @@ const getboxesInfoData = (id: string) => {
 			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({
 	openDialog,

src/views/canteen/canteenDailyMenu/index.vue

@@ -1,16 +1,9 @@
 <template>
 	<div class="layout-padding">
 		<div style="margin-left: 4.5%; margin-top: 1.5%">
-			<el-select
-				v-model="merchantId"
-				placeholder="请选择商户"
-				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>
+			<el-form-item label="商户" prop="merchantId">
+				<select-mch v-model="merchantId" style="width: 200px" />
+			</el-form-item>
 			<h1 class="title">今日菜谱</h1>
 		</div>
 		<table width="100%" class="titleTable">
@@ -116,10 +109,10 @@ const addClick = async (index: number) => {
 	weekParams.index = weekParams.index + index;
 	fetchData();
 };
-const merchantSelect = async () => {
-	// getList()
+
+watch(merchantId, () => {
 	fetchData();
-};
+});
 
 const fetchData = async () => {
 	let weekDataRes = await selectWeekInfo(weekParams);
@@ -221,6 +214,7 @@ onMounted(() => {
 	merchantInit();
 });
 </script>
+
 <style lang="scss">
 .title {
 	font-size: 28px;

src/views/canteen/canteenOnlineCategory/form.vue

@@ -4,9 +4,7 @@
 			<el-row :gutter="24">
 				<el-col :span="24" class="mb20">
 					<el-form-item label="商户" prop="merchantId">
-						<el-select v-model="form.merchantId" placeholder="请选择商户" style="width: 240px">
-							<el-option v-for="item in merchantInfo" :key="item.id" :label="item.name" :value="item.id" />
-						</el-select>
+						<select-mch v-model="form.merchantId" />
 					</el-form-item>
 				</el-col>
 				<el-col :span="12" class="mb20">
@@ -45,7 +43,6 @@
 <script setup lang="ts" name="CanteenOnlineCategoryDialog">
 import { useMessage } from '/@/hooks/message';
 import { getObj, addObj, putObj } from '/@/api/canteen/canteenOnlineCategory';
-import { selectMerchantList } from '/@/api/canteen/merchantInfo';
 import { rule } from '/@/utils/validate';
 const emit = defineEmits(['refresh']);
 
@@ -53,7 +50,6 @@ const emit = defineEmits(['refresh']);
 const dataFormRef = ref();
 const visible = ref(false);
 const loading = ref(false);
-const merchantInfo = ref<any>([]); // 商户信息
 
 // 提交表单数据
 const form = reactive({
@@ -85,17 +81,6 @@ const openDialog = async (id: string) => {
 	// 重置表单数据
 	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信息
 	if (id) {
 		form.id = id;

src/views/canteen/canteenOnlineSpu/form.vue

@@ -4,9 +4,7 @@
 			<el-row :gutter="24">
 				<el-col :span="12" class="mb20">
 					<el-form-item label="商户" prop="merchantId">
-						<el-select v-model="form.merchantId" placeholder="请选择商户" style="width: 240px">
-							<el-option v-for="item in merchantInfo" :key="item.id" :label="item.name" :value="item.id" />
-						</el-select>
+						<select-mch v-model="form.merchantId" />
 					</el-form-item>
 				</el-col>
 				<el-col :span="12" class="mb20">
@@ -79,7 +77,6 @@
 import { useDict } from '/@/hooks/dict';
 import { useMessage } from '/@/hooks/message';
 import { getObj, addObj, putObj } from '/@/api/canteen/canteenOnlineSpu';
-import { selectMerchantList } from '/@/api/canteen/merchantInfo';
 import { rule } from '/@/utils/validate';
 const emit = defineEmits(['refresh']);
 
@@ -89,7 +86,6 @@ const visible = ref(false);
 const loading = ref(false);
 // 定义字典
 const { spu_status } = useDict('spu_status');
-const merchantInfo = ref<any>([]); // 商户信息
 
 // 提交表单数据
 const form = reactive({
@@ -132,17 +128,6 @@ const openDialog = async (id: string) => {
 	// 重置表单数据
 	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信息
 	if (id) {
 		form.id = id;

src/views/canteen/merchantInfo/form.vue

@@ -1,168 +1,176 @@
 <template>
-  <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-row :gutter="24">
+	<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-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-form-item label="商户名" prop="name">
-            <el-input v-model="form.name" placeholder="请输入商户名" />
-          </el-form-item>
-        </el-col>
+				<el-col :span="24" class="mb20">
+					<el-form-item label="部门" prop="deptId">
+						<select-dept v-model="form.deptId" placeholder="请选择部门" />
+					</el-form-item>
+				</el-col>
 
-        <el-col :span="24" class="mb20">
-          <el-form-item label="部门" prop="deptId">
-            <select-dept v-model="form.deptId" placeholder="请选择部门" />
-          </el-form-item>
-        </el-col>
+				<el-col :span="24" class="mb20">
+					<el-form-item label="商户类型" prop="merchantType">
+						<el-radio-group v-model="form.merchantType">
+							<el-radio :label="item.value" v-for="(item, index) in merchant_type" border :key="index">{{ item.label }} </el-radio>
+						</el-radio-group>
+					</el-form-item>
+				</el-col>
 
-        <el-col :span="24" class="mb20">
-          <el-form-item label="商户类型" prop="merchantType">
-            <el-radio-group v-model="form.merchantType">
-              <el-radio :label="item.value" v-for="(item, index) in merchant_type" border :key="index">{{ item.label }}
-              </el-radio>
-            </el-radio-group>
-          </el-form-item>
-        </el-col>
+				<el-col :span="24" class="mb20">
+					<el-form-item label="商户logo" prop="logo">
+						<upload-img v-model:imageUrl="form.logo"></upload-img>
+					</el-form-item>
+				</el-col>
 
-        <el-col :span="24" class="mb20">
-          <el-form-item label="商户logo" prop="logo">
-            <upload-img v-model:imageUrl="form.logo"></upload-img>
-          </el-form-item>
-        </el-col>
+				<el-col :span="24" class="mb20">
+					<el-form-item label="轮播图" prop="swiper">
+						<upload-imgs v-model:imageUrl="form.swiper" />
+					</el-form-item>
+				</el-col>
 
-        <el-col :span="24" class="mb20">
-          <el-form-item label="轮播图" prop="swiper">
-            <upload-imgs v-model:imageUrl="form.swiper" />
-          </el-form-item>
-        </el-col>
+				<el-col :span="24" class="mb20">
+					<el-form-item label="联系电话" prop="phone">
+						<el-input v-model="form.phone" placeholder="请输入联系电话" />
+					</el-form-item>
+				</el-col>
 
-        <el-col :span="24" class="mb20">
-          <el-form-item label="联系电话" prop="phone">
-            <el-input v-model="form.phone" placeholder="请输入联系电话" />
-          </el-form-item>
-        </el-col>
+				<el-col :span="24" class="mb20">
+					<el-form-item label="营业时间" prop="rangeDate">
+						<el-time-picker
+							v-model="form.rangeDate"
+							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-form-item label="营业时间" prop="rangeDate">
-            <el-time-picker v-model="form.rangeDate" 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-form-item label="店铺地址" prop="address">
-            <el-input type="textarea" v-model="form.address" placeholder="请输入店铺地址" />
-          </el-form-item>
-        </el-col>
-
-      </el-row>
-    </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>
+				<el-col :span="24" class="mb20">
+					<el-form-item label="店铺地址" prop="address">
+						<el-input type="textarea" v-model="form.address" placeholder="请输入店铺地址" />
+					</el-form-item>
+				</el-col>
+			</el-row>
+		</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>
 
 <script setup lang="ts" name="MerchantInfoDialog">
 import { useDict } from '/@/hooks/dict';
-import { useMessage } from "/@/hooks/message";
-import { getObj, addObj, putObj } from '/@/api/canteen/merchantInfo'
+import { useMessage } from '/@/hooks/message';
+import { getObj, addObj, putObj } from '/@/api/canteen/merchantInfo';
 import { rule } from '/@/utils/validate';
-import { deptTree } from "/@/api/admin/dept";
+import { deptTree } from '/@/api/admin/dept';
 const emit = defineEmits(['refresh']);
 
 // 定义变量内容
 const dataFormRef = ref();
-const visible = ref(false)
-const loading = ref(false)
+const visible = ref(false);
+const loading = ref(false);
 //定义业务变量内容
 
 // 定义字典
-const { merchant_type } = useDict('merchant_type')
+const { merchant_type } = useDict('merchant_type');
 
 // 提交表单数据
 const form = reactive({
-  id: '',
-  deptId: '',
-  name: '',
-  merchantType: '',
-  logo: '',
-  collectMoneyCode: '',
-  swiper: '',
-  phone: '',
-  businessTime: '',
-  address: '',
-  jobStartTime: '',
-  rangeDate: [],
-  jobEndTime: [],
+	id: '',
+	merchantId: '',
+	deptId: '',
+	name: '',
+	merchantType: '',
+	logo: '',
+	collectMoneyCode: '',
+	swiper: '',
+	phone: '',
+	businessTime: '',
+	address: '',
+	jobStartTime: '',
+	rangeDate: [],
+	jobEndTime: [],
 });
 
 // 定义校验规则
 const dataRules = ref({
-  name: [{ required: true, message: '商户名不能为空', trigger: 'blur' }],
-  type: [{ required: true, message: '请选择商户类型', trigger: 'change' }],
-  logo: [{ required: true, message: '请上传商户logo', trigger: 'change' }],
-  swiper: [{ required: true, message: '请上传商户轮播图', trigger: 'change' }],
-  rangeDate: [{ required: true, message: '请选择营业时间', trigger: 'change' }],
-  deptId: [{ required: true, message: '请选择部门', trigger: 'change' }],
-})
+	merchantId: [{ required: true, message: '商户不能为空', trigger: 'blur' }],
+	name: [{ required: true, message: '商户名不能为空', trigger: 'blur' }],
+	type: [{ required: true, message: '请选择商户类型', trigger: 'change' }],
+	logo: [{ required: true, message: '请上传商户logo', trigger: 'change' }],
+	swiper: [{ required: true, message: '请上传商户轮播图', trigger: 'change' }],
+	rangeDate: [{ required: true, message: '请选择营业时间', trigger: 'change' }],
+	deptId: [{ required: true, message: '请选择部门', trigger: 'change' }],
+});
 
 // 打开弹窗
 const openDialog = (id: string) => {
-  visible.value = true
-  form.id = ''
+	visible.value = true;
+	form.id = '';
 
-  // 重置表单数据
-  nextTick(() => {
-    dataFormRef.value?.resetFields();
-  });
+	// 重置表单数据
+	nextTick(() => {
+		dataFormRef.value?.resetFields();
+	});
 
-  // 获取merchantInfo信息
-  if (id) {
-    form.id = id
-    getmerchantInfoData(id)
-  }
+	// 获取merchantInfo信息
+	if (id) {
+		form.id = id;
+		getmerchantInfoData(id);
+	}
 };
 
 // 提交
 const onSubmit = async () => {
-  const valid = await dataFormRef.value.validate().catch(() => { });
-  if (!valid) return false;
-  const _pa = { ...form }
-  if (_pa.rangeDate && _pa.rangeDate.length) {
-    _pa.jobStartTime = _pa.rangeDate[0]
-    _pa.jobEndTime = _pa.rangeDate[1]
-  }
-  try {
-    loading.value = true;
-    form.id ? await putObj(form) : await addObj(form);
-    useMessage().success(form.id ? '修改成功' : '添加成功');
-    visible.value = false;
-    emit('refresh');
-  } catch (err: any) {
-    useMessage().error(err.msg);
-  } finally {
-    loading.value = false;
-  }
+	const valid = await dataFormRef.value.validate().catch(() => {});
+	if (!valid) return false;
+	const _pa = { ...form };
+	if (_pa.rangeDate && _pa.rangeDate.length) {
+		_pa.jobStartTime = _pa.rangeDate[0];
+		_pa.jobEndTime = _pa.rangeDate[1];
+	}
+	try {
+		loading.value = true;
+		form.id ? await putObj(form) : await addObj(form);
+		useMessage().success(form.id ? '修改成功' : '添加成功');
+		visible.value = false;
+		emit('refresh');
+	} catch (err: any) {
+		useMessage().error(err.msg);
+	} finally {
+		loading.value = false;
+	}
 };
 
-
 // 初始化表单数据
 const getmerchantInfoData = (id: string) => {
-  // 获取数据
-  loading.value = true
-  getObj(id).then((res: any) => {
-    Object.assign(form, res.data)
-  }).finally(() => {
-    loading.value = false
-  })
+	// 获取数据
+	loading.value = true;
+	getObj(id)
+		.then((res: any) => {
+			Object.assign(form, res.data);
+		})
+		.finally(() => {
+			loading.value = false;
+		});
 };
 
 // 暴露变量
 defineExpose({
-  openDialog
+	openDialog,
 });
 </script>

src/views/home/navMenu/index.vue

@@ -76,7 +76,7 @@ onMounted(async () => {
 .card {
 	padding: 5vw;
 	height: 100%;
-	background-image: linear-gradient(0deg, #ffffff 0%, #f3f6ff 100%);
+	background-image: linear-gradient(0deg, #ffffff 0%, #e4ebff 100%);
 }
 .nav-menu-item-top {
 	height: 6.5vw;