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

src/components/Select/SelectMch.vue
+64 -51
View File
@@ -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
+2 -28
View File
@@ -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
+7 -13
View File
@@ -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
+1 -16
View File
@@ -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
+1 -16
View File
@@ -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
+130 -122
View File
@@ -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
+1 -1
View File
@@ -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;