Merge branch 'master' of https://gitea.zianxin.com/zax/biz-pc-cloud
This commit is contained in:
commit
2b8a1f0755
20 files changed
+1362
-486
No files matched your search
@@ -0,0 +1,41 @@
|
||||
import request from "/@/utils/request"
|
||||
|
||||
export function fetchList(query?: Object) {
|
||||
return request({
|
||||
url: '/canteen/timeSlotConfig/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
export function addObj(obj?: Object) {
|
||||
return request({
|
||||
url: '/canteen/timeSlotConfig',
|
||||
method: 'post',
|
||||
data: obj
|
||||
})
|
||||
}
|
||||
|
||||
export function getObj(id?: string) {
|
||||
return request({
|
||||
url: '/canteen/timeSlotConfig/' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function delObjs(ids?: Object) {
|
||||
return request({
|
||||
url: '/canteen/timeSlotConfig',
|
||||
method: 'delete',
|
||||
data: ids
|
||||
})
|
||||
}
|
||||
|
||||
export function putObj(obj?: Object) {
|
||||
return request({
|
||||
url: '/canteen/timeSlotConfig',
|
||||
method: 'put',
|
||||
data: obj
|
||||
})
|
||||
}
|
||||
|
||||
@@ -3,7 +3,9 @@
|
||||
<div v-loading="mainLoading" class="msg-main">
|
||||
<div id="msg-div" class="msg-div">
|
||||
<div v-if="!tableLoading">
|
||||
<div v-if="loadMore" class="el-table__empty-block" @click="loadingMore"><span class="el-table__empty-text">点击加载更多</span></div>
|
||||
<div v-if="loadMore" class="el-table__empty-block" @click="loadingMore">
|
||||
<span class="el-table__empty-text">点击加载更多</span>
|
||||
</div>
|
||||
<div v-if="!loadMore" class="el-table__empty-block"><span class="el-table__empty-text">没有更多了</span></div>
|
||||
</div>
|
||||
<div v-for="item in tableData" :key="item.id" class="execution" id="msgTable">
|
||||
@@ -109,125 +111,125 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="wx-msg">
|
||||
import { fetchList, addObj } from '/@/api/mp/wx-fans-msg';
|
||||
import { useMessage } from '/@/hooks/message';
|
||||
import { getMaterialVideo } from '/@/api/mp/wx-material';
|
||||
import { fetchList, addObj } from "/@/api/mp/wx-fans-msg"
|
||||
import { useMessage } from "/@/hooks/message"
|
||||
import { getMaterialVideo } from "/@/api/mp/wx-material"
|
||||
|
||||
const WxReply = defineAsyncComponent(() => import('../wx-reply/index.vue'));
|
||||
const WxNews = defineAsyncComponent(() => import('../wx-news/index.vue'));
|
||||
const WxReply = defineAsyncComponent(() => import("../wx-reply/index.vue"))
|
||||
const WxNews = defineAsyncComponent(() => import("../wx-news/index.vue"))
|
||||
|
||||
const NameAvatar = defineAsyncComponent(() => import('/@/components/NameAvatar/index.vue'));
|
||||
const NameAvatar = defineAsyncComponent(() => import("/@/components/NameAvatar/index.vue"))
|
||||
|
||||
const visible = ref(false);
|
||||
const visible = ref(false)
|
||||
|
||||
// 各种loading
|
||||
const mainLoading = ref(false);
|
||||
const sendLoading = ref(false);
|
||||
const mainLoading = ref(false)
|
||||
const sendLoading = ref(false)
|
||||
|
||||
const loadMore = ref(false);
|
||||
const loadMore = ref(false)
|
||||
|
||||
const objData = ref({
|
||||
repType: 'text',
|
||||
appId: '',
|
||||
}) as any;
|
||||
repType: "text",
|
||||
appId: "",
|
||||
}) as any
|
||||
|
||||
const page = reactive({
|
||||
total: 0, // 总页数
|
||||
currentPage: 1, // 当前页数
|
||||
pageSize: 10, // 每页显示多少条
|
||||
ascs: [], //升序字段
|
||||
descs: 'create_time', //降序字段
|
||||
});
|
||||
descs: "create_time", //降序字段
|
||||
})
|
||||
|
||||
const wxData = reactive({
|
||||
appId: '',
|
||||
wxUserId: '',
|
||||
});
|
||||
appId: "",
|
||||
wxUserId: "",
|
||||
})
|
||||
|
||||
const sendMsg = () => {
|
||||
if (objData.value) {
|
||||
if (objData.value.repType === 'news') {
|
||||
if (objData.value.repType === "news") {
|
||||
if (JSON.parse(objData.value.content).length > 1) {
|
||||
useMessage().error('图文消息条数限制在1条以内,已默认发送第一条');
|
||||
objData.value.content = JSON.parse(objData.value.content)[0];
|
||||
useMessage().error("图文消息条数限制在1条以内,已默认发送第一条")
|
||||
objData.value.content = JSON.parse(objData.value.content)[0]
|
||||
}
|
||||
}
|
||||
sendLoading.value = true;
|
||||
sendLoading.value = true
|
||||
addObj(
|
||||
Object.assign(
|
||||
{
|
||||
wxUserId: wxData.wxUserId,
|
||||
appId: wxData.appId,
|
||||
},
|
||||
objData.value
|
||||
)
|
||||
objData.value,
|
||||
),
|
||||
)
|
||||
.then(() => {
|
||||
tableData.value = [];
|
||||
tableData.value = []
|
||||
getData().then(() => {
|
||||
//box-container是添加overflow的父div,也就是出现滚动条的div
|
||||
var scrollTarget = document.getElementById('msg-div');
|
||||
var scrollTarget = document.getElementById("msg-div")
|
||||
//scrollTarget.scrollHeight是获取dom元素的高度,然后设置scrollTop
|
||||
scrollTarget.scrollTop = scrollTarget.scrollHeight;
|
||||
});
|
||||
scrollTarget.scrollTop = scrollTarget.scrollHeight
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
sendLoading.value = false;
|
||||
});
|
||||
sendLoading.value = false
|
||||
})
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const tableData = ref([] as any);
|
||||
const tableLoading = ref(false);
|
||||
const tableData = ref([] as any)
|
||||
const tableLoading = ref(false)
|
||||
|
||||
const openDialog = (data: any) => {
|
||||
wxData.wxUserId = data.wxUserId;
|
||||
wxData.appId = data.appId;
|
||||
objData.value.appId = data.appId;
|
||||
getData();
|
||||
visible.value = true;
|
||||
};
|
||||
wxData.wxUserId = data.wxUserId
|
||||
wxData.appId = data.appId
|
||||
objData.value.appId = data.appId
|
||||
getData()
|
||||
visible.value = true
|
||||
}
|
||||
|
||||
const getData = () => {
|
||||
tableLoading.value = true;
|
||||
tableLoading.value = true
|
||||
return fetchList({
|
||||
...page,
|
||||
...wxData,
|
||||
}).then((res) => {
|
||||
const data = res.data.records.reverse();
|
||||
tableData.value = [...data, ...tableData.value];
|
||||
page.total = res.data.total;
|
||||
tableLoading.value = false;
|
||||
const data = res.data.records.reverse()
|
||||
tableData.value = [...data, ...tableData.value]
|
||||
page.total = res.data.total
|
||||
tableLoading.value = false
|
||||
if (data.length < page.pageSize || data.length === 0) {
|
||||
loadMore.value = false;
|
||||
loadMore.value = false
|
||||
}
|
||||
});
|
||||
};
|
||||
})
|
||||
}
|
||||
|
||||
const loadVideo = (item) => {
|
||||
getMaterialVideo({
|
||||
mediaId: item.repMediaId,
|
||||
appId: item.appId,
|
||||
}).then((response) => {
|
||||
const data = response.data;
|
||||
window.open(data.downUrl, 'target', '');
|
||||
});
|
||||
};
|
||||
// const data = response.data
|
||||
// window.open(data.downUrl, 'target', '');
|
||||
})
|
||||
}
|
||||
|
||||
const loadingMore = () => {
|
||||
page.currentPage = page.currentPage + 1;
|
||||
getData();
|
||||
};
|
||||
page.currentPage = page.currentPage + 1
|
||||
getData()
|
||||
}
|
||||
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './comment.scss';
|
||||
@import './card.scss';
|
||||
@import "./comment.scss";
|
||||
@import "./card.scss";
|
||||
|
||||
.msg-main {
|
||||
margin-top: -30px;
|
||||
|
||||
@@ -99,136 +99,136 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="wx-reply">
|
||||
import { getMaterialVideo } from '/@/api/mp/wx-material';
|
||||
import { useMessage } from '/@/hooks/message';
|
||||
const WxMaterialSelect = defineAsyncComponent(() => import('/@/components/Wechat/wx-material-select/main.vue'));
|
||||
import { getMaterialVideo } from "/@/api/mp/wx-material"
|
||||
import { useMessage } from "/@/hooks/message"
|
||||
const WxMaterialSelect = defineAsyncComponent(() => import("/@/components/Wechat/wx-material-select/main.vue"))
|
||||
|
||||
const WxFileUpload = defineAsyncComponent(() => import('/@/components/Wechat/fileUpload/index.vue'));
|
||||
const WxFileUpload = defineAsyncComponent(() => import("/@/components/Wechat/fileUpload/index.vue"))
|
||||
|
||||
const WxNews = defineAsyncComponent(() => import('/@/components/Wechat/wx-news/index.vue'));
|
||||
const WxNews = defineAsyncComponent(() => import("/@/components/Wechat/wx-news/index.vue"))
|
||||
|
||||
const props = defineProps({
|
||||
objData: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
repType: '',
|
||||
repContent: '',
|
||||
repName: '',
|
||||
repDesc: '',
|
||||
repUrl: '',
|
||||
};
|
||||
repType: "",
|
||||
repContent: "",
|
||||
repName: "",
|
||||
repDesc: "",
|
||||
repUrl: "",
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
const uploadData = reactive({
|
||||
mediaType: props.objData.repType,
|
||||
title: '',
|
||||
introduction: '',
|
||||
title: "",
|
||||
introduction: "",
|
||||
appId: props.objData.appId,
|
||||
});
|
||||
})
|
||||
|
||||
const tempObj = ref({}) as any;
|
||||
const tempObj = ref({}) as any
|
||||
|
||||
const handleClick = (tab) => {
|
||||
uploadData.mediaType = tab.paneName;
|
||||
uploadData.appId = props.objData.appId;
|
||||
uploadData.mediaType = tab.paneName
|
||||
uploadData.appId = props.objData.appId
|
||||
|
||||
const tempObjItem = tempObj.value[tab.paneName];
|
||||
const tempObjItem = tempObj.value[tab.paneName]
|
||||
if (tempObjItem) {
|
||||
props.objData.repName = tempObjItem.repName ? tempObjItem.repName : null;
|
||||
props.objData.repMediaId = tempObjItem.repMediaId ? tempObjItem.repMediaId : null;
|
||||
props.objData.media_id = tempObjItem.media_id ? tempObjItem.media_id : null;
|
||||
props.objData.repUrl = tempObjItem.repUrl ? tempObjItem.repUrl : null;
|
||||
props.objData.content = tempObjItem.content ? tempObjItem.content : null;
|
||||
props.objData.repDesc = tempObjItem.repDesc ? tempObjItem.repDesc : null;
|
||||
props.objData.repName = tempObjItem.repName ? tempObjItem.repName : null
|
||||
props.objData.repMediaId = tempObjItem.repMediaId ? tempObjItem.repMediaId : null
|
||||
props.objData.media_id = tempObjItem.media_id ? tempObjItem.media_id : null
|
||||
props.objData.repUrl = tempObjItem.repUrl ? tempObjItem.repUrl : null
|
||||
props.objData.content = tempObjItem.content ? tempObjItem.content : null
|
||||
props.objData.repDesc = tempObjItem.repDesc ? tempObjItem.repDesc : null
|
||||
} else {
|
||||
props.objData.repName = '';
|
||||
props.objData.repMediaId = '';
|
||||
props.objData.media_id = '';
|
||||
props.objData.repUrl = '';
|
||||
props.objData.content = '';
|
||||
props.objData.repDesc = '';
|
||||
props.objData.repName = ""
|
||||
props.objData.repMediaId = ""
|
||||
props.objData.media_id = ""
|
||||
props.objData.repUrl = ""
|
||||
props.objData.content = ""
|
||||
props.objData.repDesc = ""
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const deleteObj = () => {
|
||||
props.objData.repName = '';
|
||||
props.objData.repUrl = '';
|
||||
props.objData.content = '';
|
||||
};
|
||||
props.objData.repName = ""
|
||||
props.objData.repUrl = ""
|
||||
props.objData.content = ""
|
||||
}
|
||||
|
||||
const openMaterial = (data: any) => {
|
||||
dialogNewsRef.value.openDialog(data);
|
||||
};
|
||||
dialogNewsRef.value.openDialog(data)
|
||||
}
|
||||
|
||||
const dialogNewsRef = ref();
|
||||
const dialogNewsRef = ref()
|
||||
|
||||
const selectMaterial = (item, appId) => {
|
||||
let tempObjItem = {
|
||||
repType: '',
|
||||
repMediaId: '',
|
||||
media_id: '',
|
||||
content: '',
|
||||
} as any;
|
||||
repType: "",
|
||||
repMediaId: "",
|
||||
media_id: "",
|
||||
content: "",
|
||||
} as any
|
||||
|
||||
tempObjItem.repType = props.objData.repType;
|
||||
tempObjItem.repMediaId = item.mediaId;
|
||||
tempObjItem.media_id = item.mediaId;
|
||||
tempObjItem.content = item.content;
|
||||
tempObjItem.repType = props.objData.repType
|
||||
tempObjItem.repMediaId = item.mediaId
|
||||
tempObjItem.media_id = item.mediaId
|
||||
tempObjItem.content = item.content
|
||||
|
||||
props.objData.repMediaId = item.mediaId;
|
||||
props.objData.media_id = item.mediaId;
|
||||
props.objData.content = item.content;
|
||||
if (props.objData.repType === 'music') {
|
||||
tempObjItem.repThumbMediaId = item.mediaId;
|
||||
tempObjItem.repThumbUrl = item.url;
|
||||
props.objData.repThumbMediaId = item.mediaId;
|
||||
props.objData.repThumbUrl = item.url;
|
||||
props.objData.repMediaId = item.mediaId
|
||||
props.objData.media_id = item.mediaId
|
||||
props.objData.content = item.content
|
||||
if (props.objData.repType === "music") {
|
||||
tempObjItem.repThumbMediaId = item.mediaId
|
||||
tempObjItem.repThumbUrl = item.url
|
||||
props.objData.repThumbMediaId = item.mediaId
|
||||
props.objData.repThumbUrl = item.url
|
||||
} else {
|
||||
tempObjItem.repName = item.name;
|
||||
tempObjItem.repUrl = item.url;
|
||||
props.objData.repName = item.name;
|
||||
props.objData.repUrl = item.url;
|
||||
tempObjItem.repName = item.name
|
||||
tempObjItem.repUrl = item.url
|
||||
props.objData.repName = item.name
|
||||
props.objData.repUrl = item.url
|
||||
}
|
||||
if (props.objData.repType === 'video') {
|
||||
if (props.objData.repType === "video") {
|
||||
getMaterialVideo({
|
||||
mediaId: item.mediaId,
|
||||
appId: appId,
|
||||
}).then((response) => {
|
||||
const data = response.data;
|
||||
tempObjItem.repDesc = data.description || '';
|
||||
tempObjItem.repUrl = data.downUrl;
|
||||
props.objData.repName = data.title;
|
||||
props.objData.repDesc = data.description || '';
|
||||
props.objData.repUrl = data.downUrl;
|
||||
});
|
||||
const data = response.data
|
||||
tempObjItem.repDesc = data.description || ""
|
||||
tempObjItem.repUrl = data.downUrl
|
||||
props.objData.repName = data.title
|
||||
props.objData.repDesc = data.description || ""
|
||||
props.objData.repUrl = data.downUrl
|
||||
})
|
||||
}
|
||||
if (props.objData.repType === 'news') {
|
||||
props.objData.content = JSON.stringify(item.content.newsItem);
|
||||
if (props.objData.repType === "news") {
|
||||
props.objData.content = JSON.stringify(item.content.newsItem)
|
||||
}
|
||||
tempObj.value[props.objData.repType] = tempObjItem;
|
||||
};
|
||||
tempObj.value[props.objData.repType] = tempObjItem
|
||||
}
|
||||
|
||||
const handelUpload = (response) => {
|
||||
if (response.code === 0) {
|
||||
const item = response.data;
|
||||
selectMaterial(item, props.objData.appId);
|
||||
const item = response.data
|
||||
selectMaterial(item, props.objData.appId)
|
||||
} else {
|
||||
useMessage().error('上传错误' + response.msg);
|
||||
useMessage().error("上传错误" + response.msg)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const loadVideo = (item) => {
|
||||
getMaterialVideo({
|
||||
mediaId: item.repMediaId,
|
||||
appId: item.appId,
|
||||
}).then((response) => {
|
||||
const data = response.data;
|
||||
window.open(data.downUrl, 'target', '');
|
||||
});
|
||||
};
|
||||
// const data = response.data
|
||||
// window.open(data.downUrl, 'target', '');
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@@ -28,74 +28,77 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="layoutBreadcrumbSearch">
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
|
||||
import { useI18n } from "vue-i18n"
|
||||
import { useTagsViewRoutes } from "/@/stores/tagsViewRoutes"
|
||||
|
||||
// 定义变量内容
|
||||
const storesTagsViewRoutes = useTagsViewRoutes();
|
||||
const { tagsViewRoutes } = storeToRefs(storesTagsViewRoutes);
|
||||
const layoutMenuAutocompleteRef = ref();
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
const storesTagsViewRoutes = useTagsViewRoutes()
|
||||
const { tagsViewRoutes } = storeToRefs(storesTagsViewRoutes)
|
||||
const layoutMenuAutocompleteRef = ref()
|
||||
const { t } = useI18n()
|
||||
const router = useRouter()
|
||||
const state = reactive<SearchState>({
|
||||
isShowSearch: false,
|
||||
menuQuery: '',
|
||||
menuQuery: "",
|
||||
tagsViewList: [],
|
||||
});
|
||||
})
|
||||
|
||||
// 搜索弹窗打开
|
||||
const openSearch = () => {
|
||||
state.menuQuery = '';
|
||||
state.isShowSearch = true;
|
||||
initTageView();
|
||||
state.menuQuery = ""
|
||||
state.isShowSearch = true
|
||||
initTageView()
|
||||
nextTick(() => {
|
||||
setTimeout(() => {
|
||||
layoutMenuAutocompleteRef.value.focus();
|
||||
});
|
||||
});
|
||||
};
|
||||
layoutMenuAutocompleteRef.value.focus()
|
||||
})
|
||||
})
|
||||
}
|
||||
// 搜索弹窗关闭
|
||||
const closeSearch = () => {
|
||||
state.isShowSearch = false;
|
||||
};
|
||||
state.isShowSearch = false
|
||||
}
|
||||
// 菜单搜索数据过滤
|
||||
const menuSearch = (queryString: string, cb: Function) => {
|
||||
let results = queryString ? state.tagsViewList.filter(createFilter(queryString)) : state.tagsViewList;
|
||||
cb(results);
|
||||
};
|
||||
let results = queryString ? state.tagsViewList.filter(createFilter(queryString)) : state.tagsViewList
|
||||
cb(results)
|
||||
}
|
||||
// 菜单搜索过滤
|
||||
const createFilter = (queryString: string) => {
|
||||
return (restaurant: RouteItem) => {
|
||||
return restaurant.path.toLowerCase().indexOf(queryString.toLowerCase()) > -1 || t(restaurant!.name!).indexOf(queryString.toLowerCase()) > -1;
|
||||
};
|
||||
};
|
||||
return (
|
||||
restaurant.path.toLowerCase().indexOf(queryString.toLowerCase()) > -1 || t(restaurant!.name!).indexOf(queryString.toLowerCase()) > -1
|
||||
)
|
||||
}
|
||||
}
|
||||
// 初始化菜单数据
|
||||
const initTageView = () => {
|
||||
if (state.tagsViewList.length > 0) return false;
|
||||
if (state.tagsViewList.length > 0) return false
|
||||
tagsViewRoutes.value.map((v: RouteItem) => {
|
||||
if (!v.meta?.isHide) state.tagsViewList.push({ ...v });
|
||||
});
|
||||
};
|
||||
if (!v.meta?.isHide) state.tagsViewList.push({ ...v })
|
||||
})
|
||||
}
|
||||
// 当前菜单选中时
|
||||
const onHandleSelect = (item: RouteItem) => {
|
||||
let { path, redirect } = item;
|
||||
if (item.meta?.isLink && !item.meta?.isIframe) window.open(item.meta?.isLink);
|
||||
else if (redirect) router.push(redirect);
|
||||
else router.push(path);
|
||||
closeSearch();
|
||||
};
|
||||
let { path, redirect } = item
|
||||
if (item.meta?.isLink && !item.meta?.isIframe) {
|
||||
// window.open(item.meta?.isLink)
|
||||
} else if (redirect) router.push(redirect)
|
||||
else router.push(path)
|
||||
closeSearch()
|
||||
}
|
||||
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openSearch,
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.layout-search-dialog {
|
||||
position: relative;
|
||||
:deep(.el-dialog) {
|
||||
width: 560px;
|
||||
width: 560px;
|
||||
.el-dialog__header,
|
||||
.el-dialog__body {
|
||||
display: none;
|
||||
@@ -108,8 +111,8 @@ defineExpose({
|
||||
}
|
||||
}
|
||||
:deep(.el-autocomplete) {
|
||||
position: absolute;
|
||||
width: 560px;
|
||||
position: absolute;
|
||||
width: 560px;
|
||||
top: 53vh;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
@@ -14,31 +14,34 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="layoutLinkView">
|
||||
import { verifyUrl } from '/@/utils/toolsValidate';
|
||||
import { verifyUrl } from "/@/utils/toolsValidate"
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute();
|
||||
const route = useRoute()
|
||||
const state = reactive<LinkViewState>({
|
||||
title: '',
|
||||
isLink: '',
|
||||
});
|
||||
title: "",
|
||||
isLink: "",
|
||||
})
|
||||
|
||||
// 立即前往
|
||||
const onGotoFullPage = () => {
|
||||
if (verifyUrl(<string>state.isLink)) window.open(state.isLink);
|
||||
else window.open(`${state.isLink}`);
|
||||
};
|
||||
if (verifyUrl(<string>state.isLink)) {
|
||||
window.open(state.isLink)
|
||||
} else {
|
||||
window.open(`${state.isLink}`)
|
||||
}
|
||||
}
|
||||
// 监听路由的变化,设置内容
|
||||
watch(
|
||||
() => route.path,
|
||||
() => {
|
||||
state.title = <string>route.name;
|
||||
state.isLink = <string>route.meta.isLink;
|
||||
state.title = <string>route.name
|
||||
state.isLink = <string>route.meta.isLink
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
},
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@@ -56,7 +59,7 @@ watch(
|
||||
color: var(--el-color-primary);
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50px;
|
||||
top: 0;
|
||||
|
||||
+93
-25
@@ -167,13 +167,13 @@ export const openWindow = (url: string, title: string, w: number, h: number) =>
|
||||
const width = window.innerWidth
|
||||
? window.innerWidth
|
||||
: document.documentElement.clientWidth
|
||||
? document.documentElement.clientWidth
|
||||
: screen.width
|
||||
? document.documentElement.clientWidth
|
||||
: screen.width
|
||||
const height = window.innerHeight
|
||||
? window.innerHeight
|
||||
: document.documentElement.clientHeight
|
||||
? document.documentElement.clientHeight
|
||||
: screen.height
|
||||
? document.documentElement.clientHeight
|
||||
: screen.height
|
||||
|
||||
const left = width / 2 - w / 2 + dualScreenLeft
|
||||
const top = height / 2 - h / 2 + dualScreenTop
|
||||
@@ -181,13 +181,13 @@ export const openWindow = (url: string, title: string, w: number, h: number) =>
|
||||
url,
|
||||
title,
|
||||
"toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, copyhistory=no, width=" +
|
||||
w +
|
||||
", height=" +
|
||||
h +
|
||||
", top=" +
|
||||
top +
|
||||
", left=" +
|
||||
left,
|
||||
w +
|
||||
", height=" +
|
||||
h +
|
||||
", top=" +
|
||||
top +
|
||||
", left=" +
|
||||
left,
|
||||
)
|
||||
}
|
||||
|
||||
@@ -290,25 +290,93 @@ export function postDownBlobFile(url: any, data: any, fileName: string) {
|
||||
*/
|
||||
export function handleBlobFile(response: any, fileName: string) {
|
||||
// 处理返回的文件流
|
||||
const blob = response
|
||||
if (blob && blob.size === 0) {
|
||||
useMessage().error("内容为空,无法下载")
|
||||
// const blob = response
|
||||
// if (blob && blob.size === 0) {
|
||||
// useMessage().error("内容为空,无法下载")
|
||||
// return
|
||||
// }
|
||||
// const link = document.createElement("a")
|
||||
|
||||
// // 兼容一下 入参不是 File Blob 类型情况
|
||||
// var binaryData = [] as any
|
||||
// binaryData.push(response)
|
||||
// link.href = window.URL.createObjectURL(new Blob(binaryData))
|
||||
// link.download = fileName
|
||||
// document.body.appendChild(link)
|
||||
// link.click()
|
||||
// window.setTimeout(function () {
|
||||
// // @ts-ignore
|
||||
// URL.revokeObjectURL(blob)
|
||||
// document.body.removeChild(link)
|
||||
// }, 0)
|
||||
|
||||
// 1. 验证response类型和结构
|
||||
if (!response || typeof response !== "object" || response.size === 0) {
|
||||
useMessage().error("无效的响应数据")
|
||||
return
|
||||
}
|
||||
const link = document.createElement("a")
|
||||
|
||||
// 兼容一下 入参不是 File Blob 类型情况
|
||||
var binaryData = [] as any
|
||||
binaryData.push(response)
|
||||
link.href = window.URL.createObjectURL(new Blob(binaryData))
|
||||
link.download = fileName
|
||||
// 2. 验证blob类型
|
||||
let blob: Blob
|
||||
try {
|
||||
if (response instanceof Blob) {
|
||||
blob = response
|
||||
} else if (response instanceof File) {
|
||||
blob = response
|
||||
} else if (response.data && response.data instanceof Blob) {
|
||||
blob = response.data
|
||||
} else {
|
||||
// 尝试构造安全的blob
|
||||
const safeData = Array.isArray(response) ? response : [response]
|
||||
blob = new Blob(safeData, { type: "application/octet-stream" })
|
||||
}
|
||||
} catch (error) {
|
||||
useMessage().error("文件数据格式错误")
|
||||
return
|
||||
}
|
||||
|
||||
// 3. 验证文件大小 (防止过大文件)
|
||||
const MAX_FILE_SIZE = 100 * 1024 * 1024 // 100MB限制
|
||||
if (blob.size > MAX_FILE_SIZE) {
|
||||
useMessage().error("文件过大,无法下载")
|
||||
return
|
||||
}
|
||||
|
||||
// 4. 验证文件类型 (白名单)
|
||||
const allowedTypes = [
|
||||
"application/pdf",
|
||||
"application/msword",
|
||||
"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
|
||||
"application/vnd.ms-excel",
|
||||
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
|
||||
"text/plain",
|
||||
"image/jpeg",
|
||||
"image/png",
|
||||
]
|
||||
|
||||
if (!allowedTypes.includes(blob.type) && blob.type !== "") {
|
||||
useMessage().error("不支持的文件类型")
|
||||
return
|
||||
}
|
||||
|
||||
// 5. 安全的文件下载
|
||||
const link = document.createElement("a")
|
||||
link.href = window.URL.createObjectURL(blob)
|
||||
link.download = fileName.replace(/[<>:"/\\|?*]/g, "_").substring(0, 255) // 文件名清理,移除危险字符
|
||||
link.style.display = "none" // 隐藏链接
|
||||
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
window.setTimeout(function () {
|
||||
// @ts-ignore
|
||||
URL.revokeObjectURL(blob)
|
||||
document.body.removeChild(link)
|
||||
}, 0)
|
||||
|
||||
// 6. 安全的清理操作
|
||||
setTimeout(() => {
|
||||
try {
|
||||
window.URL.revokeObjectURL(link.href)
|
||||
document.body.removeChild(link)
|
||||
} catch (error) {
|
||||
// 静默处理清理错误
|
||||
}
|
||||
}, 10)
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -133,117 +133,117 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="wx-material">
|
||||
import {fetchAccountList} from '/@/api/mp/wx-account';
|
||||
import {useMessage, useMessageBox} from '/@/hooks/message';
|
||||
import {BasicTableProps, useTable} from '/@/hooks/table';
|
||||
import {delObj, getMaterialOther, getMaterialVideo, getPage} from '/@/api/mp/wx-material';
|
||||
import { fetchAccountList } from "/@/api/mp/wx-account"
|
||||
import { useMessage, useMessageBox } from "/@/hooks/message"
|
||||
import { BasicTableProps, useTable } from "/@/hooks/table"
|
||||
import { delObj, getMaterialOther, getMaterialVideo, getPage } from "/@/api/mp/wx-material"
|
||||
|
||||
const QueryTree = defineAsyncComponent(() => import('/@/components/QueryTree/index.vue'));
|
||||
const NewsForm = defineAsyncComponent(() => import('./components/news-form.vue'));
|
||||
const WxFileUpload = defineAsyncComponent(() => import('/@/components/Wechat/fileUpload/index.vue'));
|
||||
const WxNews = defineAsyncComponent(() => import('/@/components/Wechat/wx-news/index.vue'));
|
||||
const QueryTree = defineAsyncComponent(() => import("/@/components/QueryTree/index.vue"))
|
||||
const NewsForm = defineAsyncComponent(() => import("./components/news-form.vue"))
|
||||
const WxFileUpload = defineAsyncComponent(() => import("/@/components/Wechat/fileUpload/index.vue"))
|
||||
const WxNews = defineAsyncComponent(() => import("/@/components/Wechat/wx-news/index.vue"))
|
||||
|
||||
const deptData = reactive({
|
||||
queryList: (name?: string) => {
|
||||
return fetchAccountList({
|
||||
name: name,
|
||||
});
|
||||
})
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
const checkAppId = ref();
|
||||
const checkAppId = ref()
|
||||
|
||||
const uploadData = ref({
|
||||
appId: '',
|
||||
mediaType: 'image',
|
||||
title: '',
|
||||
introduction: '',
|
||||
});
|
||||
appId: "",
|
||||
mediaType: "image",
|
||||
title: "",
|
||||
introduction: "",
|
||||
})
|
||||
|
||||
const materialType = ref('image');
|
||||
const materialType = ref("image")
|
||||
|
||||
// 点击树
|
||||
const handleNodeClick = (data: any) => {
|
||||
checkAppId.value = data.appid;
|
||||
uploadData.value.appId = data.appid;
|
||||
state.queryForm.appId = data.appid;
|
||||
state.queryForm.type = materialType.value;
|
||||
getDataList();
|
||||
};
|
||||
checkAppId.value = data.appid
|
||||
uploadData.value.appId = data.appid
|
||||
state.queryForm.appId = data.appid
|
||||
state.queryForm.type = materialType.value
|
||||
getDataList()
|
||||
}
|
||||
|
||||
const handleClick = (tab) => {
|
||||
if (checkAppId.value) {
|
||||
// getPage(this.page)
|
||||
} else {
|
||||
useMessage().error('请选择公众号');
|
||||
useMessage().error("请选择公众号")
|
||||
}
|
||||
materialType.value = tab.paneName;
|
||||
uploadData.value.mediaType = tab.paneName;
|
||||
state.queryForm.type = materialType.value;
|
||||
getDataList();
|
||||
};
|
||||
materialType.value = tab.paneName
|
||||
uploadData.value.mediaType = tab.paneName
|
||||
state.queryForm.type = materialType.value
|
||||
getDataList()
|
||||
}
|
||||
|
||||
const state: BasicTableProps = reactive<BasicTableProps>({
|
||||
queryForm: {
|
||||
appId: '',
|
||||
type: '',
|
||||
appId: "",
|
||||
type: "",
|
||||
},
|
||||
pageList: getPage,
|
||||
createdIsNeed: false,
|
||||
props: {
|
||||
item: 'items',
|
||||
totalCount: 'totalCount',
|
||||
item: "items",
|
||||
totalCount: "totalCount",
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state);
|
||||
const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state)
|
||||
|
||||
const delMaterial = (item: any) => {
|
||||
useMessageBox()
|
||||
.confirm('此操作将永久删除该文件, 是否继续?')
|
||||
.confirm("此操作将永久删除该文件, 是否继续?")
|
||||
.then(() => {
|
||||
delObj({
|
||||
id: item.mediaId,
|
||||
appId: checkAppId.value,
|
||||
})
|
||||
.then(() => {
|
||||
getDataList();
|
||||
getDataList()
|
||||
})
|
||||
.catch((err) => {
|
||||
useMessage().error(err.msg);
|
||||
});
|
||||
});
|
||||
};
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 视频
|
||||
|
||||
const dialogVideoVisible = ref(false);
|
||||
const dialogVideoVisible = ref(false)
|
||||
|
||||
const addMaterialLoading = ref(false);
|
||||
const addMaterialLoading = ref(false)
|
||||
|
||||
const handleAddVideo = () => {
|
||||
dialogVideoVisible.value = true;
|
||||
};
|
||||
dialogVideoVisible.value = true
|
||||
}
|
||||
|
||||
const uploadRules = reactive({
|
||||
title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
|
||||
introduction: [{ required: true, message: '请输入描述', trigger: 'blur' }],
|
||||
});
|
||||
title: [{ required: true, message: "请输入标题", trigger: "blur" }],
|
||||
introduction: [{ required: true, message: "请输入描述", trigger: "blur" }],
|
||||
})
|
||||
|
||||
const uploadForm = ref();
|
||||
const uploadForm = ref()
|
||||
|
||||
const uploadFileVideo = ref();
|
||||
const uploadFileVideo = ref()
|
||||
|
||||
const subVideo = () => {
|
||||
uploadForm.value.validate((valid: boolean) => {
|
||||
if (!valid) {
|
||||
return false;
|
||||
return false
|
||||
}
|
||||
uploadFileVideo.value.submit().then(() => {
|
||||
dialogVideoVisible.value = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
dialogVideoVisible.value = false
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const handleDown = (row: any) => {
|
||||
getMaterialOther({
|
||||
@@ -251,25 +251,25 @@ const handleDown = (row: any) => {
|
||||
fileName: row.name,
|
||||
appId: checkAppId.value,
|
||||
}).then((response) => {
|
||||
const url = window.URL.createObjectURL(new Blob([response.data]));
|
||||
const link = document.createElement('a');
|
||||
link.style.display = 'none';
|
||||
link.href = url;
|
||||
link.setAttribute('download', row.name);
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
});
|
||||
};
|
||||
const url = window.URL.createObjectURL(new Blob([response.data]))
|
||||
const link = document.createElement("a")
|
||||
link.style.display = "none"
|
||||
link.href = url
|
||||
link.setAttribute("download", row.name)
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
})
|
||||
}
|
||||
|
||||
// 图文
|
||||
|
||||
const dialogNewsRef = ref();
|
||||
const dialogNewsRef = ref()
|
||||
|
||||
const handleAddNews = () => {
|
||||
dialogNewsRef.value.openDialog({
|
||||
accountId: checkAppId.value,
|
||||
});
|
||||
};
|
||||
})
|
||||
}
|
||||
|
||||
const handleEditNews = (item) => {
|
||||
dialogNewsRef.value.openDialog(
|
||||
@@ -278,9 +278,9 @@ const handleEditNews = (item) => {
|
||||
},
|
||||
JSON.parse(JSON.stringify(item.content.newsItem)),
|
||||
item.mediaId,
|
||||
'edit'
|
||||
);
|
||||
};
|
||||
"edit",
|
||||
)
|
||||
}
|
||||
|
||||
const handleInfo = (row) => {
|
||||
getMaterialVideo({
|
||||
@@ -288,21 +288,21 @@ const handleInfo = (row) => {
|
||||
appId: checkAppId.value,
|
||||
})
|
||||
.then((response) => {
|
||||
const downUrl = response.data.downUrl;
|
||||
window.open(downUrl, '_blank');
|
||||
// const downUrl = response.data.downUrl
|
||||
// window.open(downUrl, '_blank');
|
||||
})
|
||||
.catch((err) => {
|
||||
useMessage().error(err.msg);
|
||||
});
|
||||
};
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
}
|
||||
|
||||
// 默认选择第一个公众号
|
||||
onMounted(async () => {
|
||||
const { data } = await deptData.queryList();
|
||||
if (data?.length > 0) {
|
||||
handleNodeClick(data[0]);
|
||||
}
|
||||
});
|
||||
const { data } = await deptData.queryList()
|
||||
if (data?.length > 0) {
|
||||
handleNodeClick(data[0])
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -1,46 +1,80 @@
|
||||
<template>
|
||||
<el-dialog :title="form.id ? '编辑' : '新增'" 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-dialog :title="form.id ? '编辑' : '新增'" v-model="visible" :close-on-click-modal="false" draggable width="700px">
|
||||
<el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="120px" v-loading="loading">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="包厢Id" prop="boxesId">
|
||||
<el-input v-model="form.boxesId" placeholder="请输入包厢Id" />
|
||||
<el-form-item label="商户" prop="merchantId">
|
||||
<select-mch v-model="form.merchantId" @change="onMerchantChange" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="预约id" prop="bookingId">
|
||||
<el-input v-model="form.bookingId" placeholder="请输入预约id" />
|
||||
<el-form-item label="餐桌" prop="boxesId">
|
||||
<el-select v-model="form.boxesId" placeholder="请选择餐桌" clearable>
|
||||
<el-option
|
||||
v-for="item in tableList"
|
||||
:key="item.id"
|
||||
:label="`${item.tableNumber} - ${item.name}`"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="状态 0空闲 1已使用" prop="status">
|
||||
<el-input v-model="form.status" placeholder="请输入状态 0空闲 1已使用" />
|
||||
<el-form-item label="餐次类型" prop="mealType">
|
||||
<el-select v-model="form.mealType" placeholder="请选择餐次类型" @change="onMealTypeChange">
|
||||
<el-option label="早餐" value="1" />
|
||||
<el-option label="中餐" value="2" />
|
||||
<el-option label="晚餐" value="3" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="用户id" prop="userId">
|
||||
<el-input v-model="form.userId" placeholder="请输入用户id" />
|
||||
<el-form-item label="日期" prop="bxDate">
|
||||
<el-date-picker
|
||||
v-model="form.bxDate"
|
||||
type="date"
|
||||
placeholder="请选择日期"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
:disabled-date="disabledDate"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="格式为 YYYY-MM-DD" prop="bxDate">
|
||||
<el-input v-model="form.bxDate" placeholder="请输入格式为 YYYY-MM-DD" />
|
||||
<el-form-item label="开始时间" prop="startTime">
|
||||
<el-time-select
|
||||
v-model="form.startTime"
|
||||
placeholder="请选择开始时间"
|
||||
:selectable-range="getSelectableTimeRange()"
|
||||
:step="30"
|
||||
format="HH:mm"
|
||||
value-format="HH:mm"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="时间" prop="hour">
|
||||
<el-date-picker type="datetime" placeholder="请选择时间" v-model="form.hour" :value-format="dateTimeStr"></el-date-picker>
|
||||
<el-form-item label="结束时间" prop="endTime">
|
||||
<el-time-select
|
||||
v-model="form.endTime"
|
||||
placeholder="请选择结束时间"
|
||||
:selectable-range="getSelectableTimeRange()"
|
||||
:step="30"
|
||||
format="HH:mm"
|
||||
value-format="HH:mm"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="时间索引(0-24)" prop="hourIndex">
|
||||
<el-input v-model="form.hourIndex" placeholder="请输入时间索引(0-24)" />
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio :label="0">空闲</el-radio>
|
||||
<el-radio :label="1">已使用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input type="textarea" v-model="form.remark" placeholder="请输入备注信息" :rows="3" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -58,6 +92,7 @@
|
||||
import { useDict } from '/@/hooks/dict';
|
||||
import { useMessage } from '/@/hooks/message';
|
||||
import { getObj, addObj, putObj } from '/@/api/canteen/boxesAvailability';
|
||||
import { fetchList as fetchTableList } from '/@/api/canteen/boxesInfo';
|
||||
import { rule } from '/@/utils/validate';
|
||||
const emit = defineEmits(['refresh']);
|
||||
|
||||
@@ -65,35 +100,88 @@ const emit = defineEmits(['refresh']);
|
||||
const dataFormRef = ref();
|
||||
const visible = ref(false);
|
||||
const loading = ref(false);
|
||||
// 定义字典
|
||||
const { booking_status } = useDict('booking_status');
|
||||
const tableList = ref<any[]>([]);
|
||||
|
||||
// 提交表单数据
|
||||
const form = reactive({
|
||||
id: '',
|
||||
merchantId: '',
|
||||
boxesId: '',
|
||||
bookingId: '',
|
||||
status: '',
|
||||
userId: '',
|
||||
mealType: '',
|
||||
bxDate: '',
|
||||
hour: '',
|
||||
hourIndex: '',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
status: 0,
|
||||
remark: '',
|
||||
});
|
||||
|
||||
// 定义校验规则
|
||||
const dataRules = ref({});
|
||||
const dataRules = ref({
|
||||
merchantId: [{ required: true, message: '商户不能为空', trigger: 'change' }],
|
||||
boxesId: [{ required: true, message: '餐桌不能为空', trigger: 'change' }],
|
||||
mealType: [{ required: true, message: '餐次类型不能为空', trigger: 'change' }],
|
||||
bxDate: [{ required: true, message: '日期不能为空', trigger: 'change' }],
|
||||
startTime: [{ required: true, message: '开始时间不能为空', trigger: 'change' }],
|
||||
endTime: [{ required: true, message: '结束时间不能为空', trigger: 'change' }],
|
||||
status: [{ required: true, message: '状态不能为空', trigger: 'change' }],
|
||||
});
|
||||
|
||||
// 禁用过去的日期
|
||||
const disabledDate = (time: Date) => {
|
||||
return time.getTime() < Date.now() - 8.64e7;
|
||||
};
|
||||
|
||||
// 获取可选时间范围
|
||||
const getSelectableTimeRange = () => {
|
||||
switch (form.mealType) {
|
||||
case '1': return '07:00:00,09:00:00'; // 早餐
|
||||
case '2': return '11:30:00,13:30:00'; // 中餐
|
||||
case '3': return '17:30:00,19:30:00'; // 晚餐
|
||||
default: return '00:00:00,23:59:59';
|
||||
}
|
||||
};
|
||||
|
||||
// 商户变化时加载餐桌列表
|
||||
const onMerchantChange = async (merchantId: string) => {
|
||||
if (merchantId) {
|
||||
try {
|
||||
const res = await fetchTableList({ merchantId, status: '0' });
|
||||
tableList.value = res.data?.records || [];
|
||||
} catch (error) {
|
||||
console.error('加载餐桌列表失败:', error);
|
||||
}
|
||||
} else {
|
||||
tableList.value = [];
|
||||
}
|
||||
form.boxesId = '';
|
||||
};
|
||||
|
||||
// 餐次类型变化时重置时间
|
||||
const onMealTypeChange = () => {
|
||||
form.startTime = '';
|
||||
form.endTime = '';
|
||||
};
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = (id: string) => {
|
||||
visible.value = true;
|
||||
form.id = '';
|
||||
form.merchantId = '';
|
||||
form.boxesId = '';
|
||||
form.mealType = '';
|
||||
form.bxDate = '';
|
||||
form.startTime = '';
|
||||
form.endTime = '';
|
||||
form.status = 0;
|
||||
form.remark = '';
|
||||
tableList.value = [];
|
||||
|
||||
// 重置表单数据
|
||||
nextTick(() => {
|
||||
dataFormRef.value?.resetFields();
|
||||
});
|
||||
|
||||
// 获取boxesAvailability信息
|
||||
// 获取可用时间段信息
|
||||
if (id) {
|
||||
form.id = id;
|
||||
getboxesAvailabilityData(id);
|
||||
@@ -120,11 +208,14 @@ const onSubmit = async () => {
|
||||
|
||||
// 初始化表单数据
|
||||
const getboxesAvailabilityData = (id: string) => {
|
||||
// 获取数据
|
||||
loading.value = true;
|
||||
getObj(id)
|
||||
.then((res: any) => {
|
||||
Object.assign(form, res.data);
|
||||
// 加载餐桌列表
|
||||
if (form.merchantId) {
|
||||
onMerchantChange(form.merchantId);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
|
||||
@@ -1,84 +1,101 @@
|
||||
<template>
|
||||
<el-dialog :title="form.id ? '编辑' : '新增'" 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-dialog :title="form.id ? '编辑' : '新增'" v-model="visible" :close-on-click-modal="false" draggable width="800px">
|
||||
<el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="120px" v-loading="loading">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="包厢" prop="boxesId">
|
||||
<el-input v-model="form.boxesId" placeholder="请输入包厢Id" />
|
||||
<el-form-item label="商户" prop="merchantId">
|
||||
<select-mch v-model="form.merchantId" @change="onMerchantChange" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="开始时间" prop="startTime">
|
||||
<el-input v-model="form.startTime" placeholder="请输入开始时间" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="结束时间" prop="endTime">
|
||||
<el-input v-model="form.endTime" placeholder="请输入结束时间" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="审核人id" prop="checkUserId">
|
||||
<el-input v-model="form.checkUserId" placeholder="请输入审核人id" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="1审核中 2通过 3驳回 4" prop="checkStatus">
|
||||
<el-select v-model="form.checkStatus" placeholder="请选择1审核中 2通过 3驳回 4">
|
||||
<el-option :value="item.value" :label="item.label" v-for="(item, index) in check_status" :key="index"></el-option>
|
||||
<el-form-item label="餐桌" prop="boxesId">
|
||||
<el-select v-model="form.boxesId" placeholder="请选择餐桌" clearable>
|
||||
<el-option
|
||||
v-for="item in tableList"
|
||||
:key="item.id"
|
||||
:label="`${item.tableNumber} - ${item.name} (${item.capacity}人)`"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="创建人" prop="creator">
|
||||
<el-input v-model="form.creator" placeholder="请输入创建人" />
|
||||
<el-form-item label="餐次类型" prop="mealType">
|
||||
<el-select v-model="form.mealType" placeholder="请选择餐次类型" @change="onMealTypeChange">
|
||||
<el-option label="早餐(07:00-09:00)" value="1" />
|
||||
<el-option label="中餐(11:30-13:30)" value="2" />
|
||||
<el-option label="晚餐(17:30-19:30)" value="3" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="更新人" prop="updater">
|
||||
<el-input v-model="form.updater" placeholder="请输入更新人" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="是否删除" prop="deleted">
|
||||
<el-input v-model="form.deleted" placeholder="请输入是否删除" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="预约日期" prop="bookingDate">
|
||||
<el-input v-model="form.bookingDate" placeholder="请输入预约日期" />
|
||||
<el-date-picker
|
||||
v-model="form.bookingDate"
|
||||
type="date"
|
||||
placeholder="请选择预约日期"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
:disabled-date="disabledDate"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="用户id" prop="userId">
|
||||
<el-input v-model="form.userId" placeholder="请输入用户id" />
|
||||
<el-form-item label="预约人数" prop="bookingPeople">
|
||||
<el-input-number v-model="form.bookingPeople" :min="1" :max="20" placeholder="请输入预约人数" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="预约状态(0 预约成功,1预约失败 2取消预约 )" prop="status">
|
||||
<el-select v-model="form.status" placeholder="请选择预约状态(0 预约成功,1预约失败 2取消预约 )">
|
||||
<el-option label="??" :value="0" />
|
||||
<el-option label="??" :value="1" />
|
||||
</el-select>
|
||||
<el-form-item label="开始时间" prop="startTime">
|
||||
<el-time-select
|
||||
v-model="form.startTime"
|
||||
placeholder="请选择开始时间"
|
||||
:disabled="!form.mealType || !form.bookingDate"
|
||||
:selectable-range="getSelectableTimeRange()"
|
||||
:step="30"
|
||||
format="HH:mm"
|
||||
value-format="HH:mm"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="总价单位分" prop="totalPrice">
|
||||
<el-input v-model="form.totalPrice" placeholder="请输入总价单位分" />
|
||||
<el-form-item label="结束时间" prop="endTime">
|
||||
<el-time-select
|
||||
v-model="form.endTime"
|
||||
placeholder="请选择结束时间"
|
||||
:disabled="!form.startTime"
|
||||
:selectable-range="getSelectableTimeRange()"
|
||||
:step="30"
|
||||
format="HH:mm"
|
||||
value-format="HH:mm"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input type="textarea" v-model="form.remark" placeholder="请输入备注信息" :rows="3" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 时间段选择区域 -->
|
||||
<div v-if="form.boxesId && form.mealType && form.bookingDate" class="time-slot-section">
|
||||
<el-divider content-position="left">可用时间段</el-divider>
|
||||
<div class="time-slots">
|
||||
<div v-for="slot in availableTimeSlots" :key="slot.startTime" class="time-slot-item">
|
||||
<el-button
|
||||
:type="isTimeSlotSelected(slot) ? 'success' : 'primary'"
|
||||
:plain="!isTimeSlotSelected(slot)"
|
||||
size="small"
|
||||
@click="toggleTimeSlot(slot)"
|
||||
:disabled="slot.status === 'booked'"
|
||||
>
|
||||
{{ slot.startTime }} - {{ slot.endTime }}
|
||||
<el-tag v-if="slot.status === 'booked'" type="danger" size="small">已预约</el-tag>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
@@ -93,6 +110,7 @@
|
||||
import { useDict } from '/@/hooks/dict';
|
||||
import { useMessage } from '/@/hooks/message';
|
||||
import { getObj, addObj, putObj } from '/@/api/canteen/boxesBooking';
|
||||
import { fetchList as fetchTableList } from '/@/api/canteen/boxesInfo';
|
||||
import { rule } from '/@/utils/validate';
|
||||
const emit = defineEmits(['refresh']);
|
||||
|
||||
@@ -100,40 +118,170 @@ const emit = defineEmits(['refresh']);
|
||||
const dataFormRef = ref();
|
||||
const visible = ref(false);
|
||||
const loading = ref(false);
|
||||
// 定义字典
|
||||
const { check_status } = useDict('check_status');
|
||||
const tableList = ref<any[]>([]);
|
||||
const availableTimeSlots = ref<any[]>([]);
|
||||
const selectedTimeSlots = ref<any[]>([]);
|
||||
|
||||
// 提交表单数据
|
||||
const form = reactive({
|
||||
id: '',
|
||||
merchantId: '',
|
||||
boxesId: '',
|
||||
mealType: '',
|
||||
bookingDate: '',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
checkUserId: '',
|
||||
checkStatus: '',
|
||||
creator: '',
|
||||
updater: '',
|
||||
deleted: '',
|
||||
bookingDate: '',
|
||||
userId: '',
|
||||
status: '',
|
||||
totalPrice: '',
|
||||
bookingPeople: 1,
|
||||
remark: '',
|
||||
status: '0',
|
||||
});
|
||||
|
||||
// 定义校验规则
|
||||
const dataRules = ref({});
|
||||
const dataRules = ref({
|
||||
merchantId: [{ required: true, message: '商户不能为空', trigger: 'change' }],
|
||||
boxesId: [{ required: true, message: '餐桌不能为空', trigger: 'change' }],
|
||||
mealType: [{ required: true, message: '餐次类型不能为空', trigger: 'change' }],
|
||||
bookingDate: [{ required: true, message: '预约日期不能为空', trigger: 'change' }],
|
||||
startTime: [{ required: true, message: '开始时间不能为空', trigger: 'change' }],
|
||||
endTime: [{ required: true, message: '结束时间不能为空', trigger: 'change' }],
|
||||
bookingPeople: [{ required: true, message: '预约人数不能为空', trigger: 'blur' }],
|
||||
});
|
||||
|
||||
// 禁用过去的日期
|
||||
const disabledDate = (time: Date) => {
|
||||
return time.getTime() < Date.now() - 8.64e7;
|
||||
};
|
||||
|
||||
// 获取可选时间范围
|
||||
const getSelectableTimeRange = () => {
|
||||
switch (form.mealType) {
|
||||
case '1': return '07:00:00,09:00:00'; // 早餐
|
||||
case '2': return '11:30:00,13:30:00'; // 中餐
|
||||
case '3': return '17:30:00,19:30:00'; // 晚餐
|
||||
default: return '00:00:00,23:59:59';
|
||||
}
|
||||
};
|
||||
|
||||
// 商户变化时加载餐桌列表
|
||||
const onMerchantChange = async (merchantId: string) => {
|
||||
if (merchantId) {
|
||||
try {
|
||||
const res = await fetchTableList({ merchantId, status: '0' });
|
||||
tableList.value = res.data?.records || [];
|
||||
} catch (error) {
|
||||
console.error('加载餐桌列表失败:', error);
|
||||
}
|
||||
} else {
|
||||
tableList.value = [];
|
||||
}
|
||||
form.boxesId = '';
|
||||
};
|
||||
|
||||
// 餐次类型变化时重置时间
|
||||
const onMealTypeChange = () => {
|
||||
form.startTime = '';
|
||||
form.endTime = '';
|
||||
selectedTimeSlots.value = [];
|
||||
};
|
||||
|
||||
// 检查时间段是否被选中
|
||||
const isTimeSlotSelected = (slot: any) => {
|
||||
return selectedTimeSlots.value.some(selected =>
|
||||
selected.startTime === slot.startTime && selected.endTime === slot.endTime
|
||||
);
|
||||
};
|
||||
|
||||
// 切换时间段选择
|
||||
const toggleTimeSlot = (slot: any) => {
|
||||
if (slot.status === 'booked') return;
|
||||
|
||||
const isSelected = isTimeSlotSelected(slot);
|
||||
if (isSelected) {
|
||||
selectedTimeSlots.value = selectedTimeSlots.value.filter(selected =>
|
||||
!(selected.startTime === slot.startTime && selected.endTime === slot.endTime)
|
||||
);
|
||||
} else {
|
||||
selectedTimeSlots.value.push(slot);
|
||||
}
|
||||
|
||||
// 自动填充开始和结束时间
|
||||
if (selectedTimeSlots.value.length > 0) {
|
||||
const sortedSlots = selectedTimeSlots.value.sort((a, b) => a.startTime.localeCompare(b.startTime));
|
||||
form.startTime = sortedSlots[0].startTime;
|
||||
form.endTime = sortedSlots[sortedSlots.value.length - 1].endTime;
|
||||
} else {
|
||||
form.startTime = '';
|
||||
form.endTime = '';
|
||||
}
|
||||
};
|
||||
|
||||
// 生成可用时间段
|
||||
const generateTimeSlots = () => {
|
||||
const slots = [];
|
||||
let startHour, endHour;
|
||||
|
||||
switch (form.mealType) {
|
||||
case '1': // 早餐
|
||||
startHour = 7;
|
||||
endHour = 9;
|
||||
break;
|
||||
case '2': // 中餐
|
||||
startHour = 11.5;
|
||||
endHour = 13.5;
|
||||
break;
|
||||
case '3': // 晚餐
|
||||
startHour = 17.5;
|
||||
endHour = 19.5;
|
||||
break;
|
||||
default:
|
||||
return [];
|
||||
}
|
||||
|
||||
for (let hour = startHour; hour < endHour; hour += 0.5) {
|
||||
const startTime = `${Math.floor(hour).toString().padStart(2, '0')}:${(hour % 1 === 0.5 ? '30' : '00')}`;
|
||||
const endTime = `${Math.floor(hour + 0.5).toString().padStart(2, '0')}:${((hour + 0.5) % 1 === 0.5 ? '30' : '00')}`;
|
||||
|
||||
slots.push({
|
||||
startTime,
|
||||
endTime,
|
||||
status: 'available'
|
||||
});
|
||||
}
|
||||
|
||||
availableTimeSlots.value = slots;
|
||||
};
|
||||
|
||||
// 监听表单变化
|
||||
watch([() => form.boxesId, () => form.mealType, () => form.bookingDate], () => {
|
||||
if (form.boxesId && form.mealType && form.bookingDate) {
|
||||
generateTimeSlots();
|
||||
// 这里可以调用API获取实际的时间段状态
|
||||
// fetchTimeSlotStatus();
|
||||
}
|
||||
});
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = (id: string) => {
|
||||
visible.value = true;
|
||||
form.id = '';
|
||||
form.merchantId = '';
|
||||
form.boxesId = '';
|
||||
form.mealType = '';
|
||||
form.bookingDate = '';
|
||||
form.startTime = '';
|
||||
form.endTime = '';
|
||||
form.bookingPeople = 1;
|
||||
form.remark = '';
|
||||
selectedTimeSlots.value = [];
|
||||
availableTimeSlots.value = [];
|
||||
tableList.value = [];
|
||||
|
||||
// 重置表单数据
|
||||
nextTick(() => {
|
||||
dataFormRef.value?.resetFields();
|
||||
});
|
||||
|
||||
// 获取boxesBooking信息
|
||||
// 获取预约信息
|
||||
if (id) {
|
||||
form.id = id;
|
||||
getboxesBookingData(id);
|
||||
@@ -160,11 +308,14 @@ const onSubmit = async () => {
|
||||
|
||||
// 初始化表单数据
|
||||
const getboxesBookingData = (id: string) => {
|
||||
// 获取数据
|
||||
loading.value = true;
|
||||
getObj(id)
|
||||
.then((res: any) => {
|
||||
Object.assign(form, res.data);
|
||||
// 加载餐桌列表
|
||||
if (form.merchantId) {
|
||||
onMerchantChange(form.merchantId);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
@@ -176,3 +327,22 @@ defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.time-slot-section {
|
||||
margin-top: 20px;
|
||||
padding: 20px;
|
||||
background: #f5f7fa;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.time-slots {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.time-slot-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -3,11 +3,31 @@
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
|
||||
<el-form-item label="餐桌" prop="boxesName">
|
||||
<el-input placeholder="请输入餐桌" v-model="state.queryForm.boxesName" />
|
||||
<el-form-item label="餐桌名称" prop="tableName">
|
||||
<el-input placeholder="请输入餐桌名称" v-model="state.queryForm.tableName" />
|
||||
</el-form-item>
|
||||
<el-form-item label="用户" prop="userId">
|
||||
<el-input placeholder="请输入用户" v-model="state.queryForm.userName" />
|
||||
<el-form-item label="餐次类型" prop="mealType">
|
||||
<el-select v-model="state.queryForm.mealType" placeholder="请选择餐次类型" clearable>
|
||||
<el-option label="早餐" value="1" />
|
||||
<el-option label="中餐" value="2" />
|
||||
<el-option label="晚餐" value="3" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="预约日期" prop="bookingDate">
|
||||
<el-date-picker
|
||||
v-model="state.queryForm.bookingDate"
|
||||
type="date"
|
||||
placeholder="请选择预约日期"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="预约状态" prop="status">
|
||||
<el-select v-model="state.queryForm.status" placeholder="请选择预约状态" clearable>
|
||||
<el-option label="预约成功" value="0" />
|
||||
<el-option label="预约失败" value="1" />
|
||||
<el-option label="取消预约" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button icon="search" type="primary" @click="getDataList">查询</el-button>
|
||||
@@ -52,32 +72,48 @@
|
||||
<el-table-column type="selection" width="40" align="center" />
|
||||
<el-table-column type="index" label="#" width="50" />
|
||||
<el-table-column prop="boxesName" label="餐桌名称" show-overflow-tooltip />
|
||||
<el-table-column prop="startTime" label="开始时间" show-overflow-tooltip min-width="160" />
|
||||
<el-table-column prop="endTime" label="结束时间" show-overflow-tooltip min-width="160" />
|
||||
<el-table-column prop="checkStatus" label="审核状态" show-overflow-tooltip min-width="160">
|
||||
<el-table-column prop="mealName" label="餐次类型" show-overflow-tooltip>
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column prop="userName" label="预约人" show-overflow-tooltip />
|
||||
<!-- <el-table-column prop="mealType" label="餐次类型" show-overflow-tooltip>-->
|
||||
<!-- <template #default="scope">-->
|
||||
<!-- <el-tag v-if="scope.row.mealType === '1'" type="success">早餐</el-tag>-->
|
||||
<!-- <el-tag v-else-if="scope.row.mealType === '2'" type="warning">中餐</el-tag>-->
|
||||
<!-- <el-tag v-else-if="scope.row.mealType === '3'" type="info">晚餐</el-tag>-->
|
||||
<!-- <el-tag v-else type="info">-</el-tag>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<el-table-column prop="bookingDate" label="预约日期" show-overflow-tooltip />
|
||||
<el-table-column prop="createTime" label="预约时间" show-overflow-tooltip />
|
||||
<!-- <el-table-column prop="startTime" label="开始时间" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column prop="endTime" label="结束时间" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column prop="bookingPeople" label="预约人数" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column prop="remark" label="备注" show-overflow-tooltip />-->
|
||||
<el-table-column prop="status" label="预约状态" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<dict-tag :options="check_status" :value="scope.row.checkStatus"></dict-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="bookingDate" label="预约日期" show-overflow-tooltip min-width="160" />
|
||||
<el-table-column prop="userName" label="用户" show-overflow-tooltip min-width="100" />
|
||||
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip min-width="160" />
|
||||
<el-table-column label="操作" width="150" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="edit-pen"
|
||||
text
|
||||
type="primary"
|
||||
v-auth="'canteen_boxesBooking_edit'"
|
||||
@click="formDialogRef.openDialog(scope.row.id)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button icon="delete" text type="primary" v-auth="'canteen_boxesBooking_del'" @click="handleDelete([scope.row.id])"
|
||||
>删除</el-button
|
||||
>
|
||||
<el-tag v-if="scope.row.status === 0" type="success">预约成功</el-tag>
|
||||
<el-tag v-else-if="scope.row.status === 1" type="danger">预约失败</el-tag>
|
||||
<el-tag v-else-if="scope.row.status === 2" type="info">取消预约</el-tag>
|
||||
<el-tag v-else type="info">-</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column label="操作" width="150" fixed="right">-->
|
||||
<!-- <template #default="scope">-->
|
||||
<!-- <el-button-->
|
||||
<!-- icon="edit-pen"-->
|
||||
<!-- text-->
|
||||
<!-- type="primary"-->
|
||||
<!-- v-auth="'canteen_boxesBooking_edit'"-->
|
||||
<!-- @click="formDialogRef.openDialog(scope.row.id)"-->
|
||||
<!-- >-->
|
||||
<!-- 编辑-->
|
||||
<!-- </el-button>-->
|
||||
<!-- <el-button icon="delete" text type="primary" v-auth="'canteen_boxesBooking_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>
|
||||
|
||||
@@ -1,45 +1,59 @@
|
||||
<template>
|
||||
<el-dialog :title="form.id ? '编辑' : '新增'" 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" label-width="90px" v-loading="loading">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="14" class="mb20">
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="商户" prop="merchantId">
|
||||
<select-mch v-model="form.merchantId" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="14" class="mb20">
|
||||
<el-form-item label="包厢名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入包厢名称" />
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="餐桌编号" prop="tableNumber">
|
||||
<el-input v-model="form.tableNumber" placeholder="请输入餐桌编号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="餐桌名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入餐桌名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="餐桌类型" prop="tableType">
|
||||
<el-select v-model="form.tableType" placeholder="请选择餐桌类型">
|
||||
<el-option label="小桌(2-4人)" value="1" />
|
||||
<el-option label="中桌(4-6人)" value="2" />
|
||||
<el-option label="大桌(6-8人)" value="3" />
|
||||
<el-option label="包间(8人以上)" value="4" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item label="包厢图片" prop="images">
|
||||
<el-form-item label="餐桌图片" prop="images">
|
||||
<upload-img v-model:imageUrl="form.images"></upload-img>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="14" class="mb20">
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="容纳人数" prop="capacity">
|
||||
<el-input v-model="form.capacity" placeholder="请输入容纳人数" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item label="包厢状态" prop="status">
|
||||
<el-form-item label="餐桌状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio :label="item.value" v-for="(item, index) in boxes_status" 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="address">
|
||||
<el-input type="textarea" v-model="form.address" placeholder="请输入包厢地址" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item label="包厢描述" prop="description">
|
||||
<editor v-if="visible" v-model:get-html="form.description" placeholder="请输入包厢描述"></editor>
|
||||
<el-form-item label="餐桌摆放形式" prop="address">
|
||||
<el-input type="textarea" v-model="form.address" placeholder="请输入餐桌摆放形式" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :span="24" class="mb20">-->
|
||||
<!-- <el-form-item label="餐桌描述" prop="description">-->
|
||||
<!-- <editor v-if="visible" v-model:get-html="form.description" placeholder="请输入餐桌描述"></editor>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-col>-->
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
@@ -52,6 +66,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="BoxesInfoDialog">
|
||||
import { ref, reactive, nextTick } from 'vue';
|
||||
import { useDict } from '/@/hooks/dict';
|
||||
import { useMessage } from '/@/hooks/message';
|
||||
import { getObj, addObj, putObj } from '/@/api/canteen/boxesInfo';
|
||||
@@ -68,7 +83,9 @@ const { boxes_status } = useDict('boxes_status');
|
||||
// 提交表单数据
|
||||
const form = reactive({
|
||||
id: '',
|
||||
tableNumber: '',
|
||||
name: '',
|
||||
tableType: '',
|
||||
capacity: '',
|
||||
description: '',
|
||||
address: '',
|
||||
@@ -80,23 +97,32 @@ const form = reactive({
|
||||
// 定义校验规则
|
||||
const dataRules = ref({
|
||||
merchantId: [{ required: true, message: '商户不能为空', trigger: 'blur' }],
|
||||
name: [{ required: true, message: '包厢名称不能为空', trigger: 'blur' }],
|
||||
tableNumber: [{ required: true, message: '餐桌编号不能为空', trigger: 'blur' }],
|
||||
name: [{ required: true, message: '餐桌名称不能为空', trigger: 'blur' }],
|
||||
tableType: [{ required: true, message: '餐桌类型不能为空', trigger: 'change' }],
|
||||
capacity: [
|
||||
{ required: true, message: '容纳人数不能为空', trigger: 'blur' },
|
||||
{ validator: rule.number, trigger: 'blur' },
|
||||
],
|
||||
images: [{ required: true, message: '包厢图片不能为空', trigger: 'blur' }],
|
||||
// 图片字段暂时不设为必填,方便测试
|
||||
// images: [{ required: true, message: '餐桌图片不能为空', trigger: 'blur' }],
|
||||
});
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = (id: string) => {
|
||||
visible.value = true;
|
||||
form.id = '';
|
||||
|
||||
|
||||
// 重置表单数据
|
||||
nextTick(() => {
|
||||
dataFormRef.value?.resetFields();
|
||||
});
|
||||
form.id = '';
|
||||
form.tableNumber = '';
|
||||
form.name = '';
|
||||
form.tableType = '';
|
||||
form.capacity = '';
|
||||
form.description = '';
|
||||
form.address = '';
|
||||
form.images = '';
|
||||
form.status = '0';
|
||||
form.merchantId = '';
|
||||
|
||||
// 获取boxesInfo信息
|
||||
if (id) {
|
||||
@@ -112,12 +138,23 @@ const onSubmit = async () => {
|
||||
|
||||
try {
|
||||
loading.value = true;
|
||||
form.id ? await putObj(form) : await addObj(form);
|
||||
|
||||
// 准备提交数据
|
||||
const submitData = {
|
||||
...form,
|
||||
// 确保数据类型正确
|
||||
tableType: form.tableType ? Number(form.tableType) : undefined,
|
||||
capacity: form.capacity ? Number(form.capacity) : undefined,
|
||||
status: form.status ? Number(form.status) : 0
|
||||
};
|
||||
|
||||
const result = form.id ? await putObj(submitData) : await addObj(submitData);
|
||||
|
||||
useMessage().success(form.id ? '修改成功' : '添加成功');
|
||||
visible.value = false;
|
||||
emit('refresh');
|
||||
} catch (err: any) {
|
||||
useMessage().error(err.msg);
|
||||
useMessage().error(err.msg || err.message || '操作失败');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
@@ -129,9 +166,19 @@ const getboxesInfoData = (id: string) => {
|
||||
loading.value = true;
|
||||
getObj(id)
|
||||
.then((res: any) => {
|
||||
Object.assign(form, res.data, {
|
||||
status: '' + res.data.status,
|
||||
});
|
||||
if (res.data) {
|
||||
// 确保数据类型正确
|
||||
form.id = res.data.id || '';
|
||||
form.tableNumber = res.data.tableNumber || '';
|
||||
form.name = res.data.name || '';
|
||||
form.tableType = res.data.tableType ? String(res.data.tableType) : '';
|
||||
form.capacity = res.data.capacity || '';
|
||||
form.description = res.data.description || '';
|
||||
form.address = res.data.address || '';
|
||||
form.images = res.data.images || '';
|
||||
form.status = res.data.status ? String(res.data.status) : '0';
|
||||
form.merchantId = res.data.merchantId || '';
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
|
||||
@@ -3,9 +3,20 @@
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
|
||||
<el-form-item label="餐桌编号" prop="tableNumber">
|
||||
<el-input placeholder="请输入餐桌编号" v-model="state.queryForm.tableNumber" />
|
||||
</el-form-item>
|
||||
<el-form-item label="餐桌名称" prop="name">
|
||||
<el-input placeholder="请输入餐桌名称" v-model="state.queryForm.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="餐桌类型" prop="tableType">
|
||||
<el-select v-model="state.queryForm.tableType" placeholder="请选择餐桌类型" clearable>
|
||||
<el-option label="小桌(2-4人)" value="1" />
|
||||
<el-option label="中桌(4-6人)" value="2" />
|
||||
<el-option label="大桌(6-8人)" value="3" />
|
||||
<el-option label="包间(8人以上)" value="4" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button icon="search" type="primary" @click="getDataList">查询</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
@@ -14,7 +25,7 @@
|
||||
</el-row>
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()" v-auth="'canteen_boxesInfo_add'">
|
||||
<el-button icon="folder-add" type="primary" class="ml10" @click="handleAdd" v-auth="'canteen_boxesInfo_add'">
|
||||
新 增
|
||||
</el-button>
|
||||
<el-button
|
||||
@@ -27,7 +38,7 @@
|
||||
>
|
||||
删 除
|
||||
</el-button>
|
||||
<el-button plain type="primary" @click="showList = false">排期详情</el-button>
|
||||
<!-- <el-button plain type="primary" @click="showList = false">排期详情</el-button>-->
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
:export="'canteen_boxesInfo_export'"
|
||||
@@ -38,6 +49,7 @@
|
||||
></right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
@@ -49,7 +61,17 @@
|
||||
>
|
||||
<el-table-column type="selection" width="40" align="center" />
|
||||
<el-table-column type="index" label="#" width="50" />
|
||||
<el-table-column prop="tableNumber" label="餐桌编号" show-overflow-tooltip />
|
||||
<el-table-column prop="name" label="餐桌名称" show-overflow-tooltip />
|
||||
<el-table-column prop="tableType" label="餐桌类型" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-tag v-if="scope.row.tableType === '1' || scope.row.tableType === 1" type="success">小桌(2-4人)</el-tag>
|
||||
<el-tag v-else-if="scope.row.tableType === '2' || scope.row.tableType === 2" type="warning">中桌(4-6人)</el-tag>
|
||||
<el-tag v-else-if="scope.row.tableType === '3' || scope.row.tableType === 3" type="info">大桌(6-8人)</el-tag>
|
||||
<el-tag v-else-if="scope.row.tableType === '4' || scope.row.tableType === 4" type="danger">包间(8人以上)</el-tag>
|
||||
<el-tag v-else type="info">{{ scope.row.tableType || '-' }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="capacity" label="容纳人数" show-overflow-tooltip />
|
||||
<el-table-column prop="description" label="餐桌描述" show-overflow-tooltip />
|
||||
<el-table-column prop="address" label="餐桌摆放样式" show-overflow-tooltip />
|
||||
@@ -156,4 +178,9 @@ const handleDelete = async (ids: string[]) => {
|
||||
useMessage().error(err.msg)
|
||||
}
|
||||
}
|
||||
|
||||
// 新增操作
|
||||
const handleAdd = () => {
|
||||
formDialogRef.value?.openDialog();
|
||||
}
|
||||
</script>
|
||||
@@ -62,6 +62,7 @@
|
||||
<el-form-item>
|
||||
<el-button icon="search" type="primary" @click="getDataList">查询</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
<el-button icon="Refresh" @click="foodMultipleTableRef.clearSelection()">取消所有勾选</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
|
||||
@@ -22,11 +22,11 @@
|
||||
<el-input-number v-model="form.price" :min="0" :precision="2" placeholder="请输入商品价格" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :span="14" class="mb20">-->
|
||||
<!-- <el-form-item label="市场价" prop="marketPrice">-->
|
||||
<!-- <el-input-number v-model="form.marketPrice" :min="0" :precision="2" placeholder="请输入市场价" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- <el-col :span="14" class="mb20">-->
|
||||
<!-- <el-form-item label="市场价" prop="marketPrice">-->
|
||||
<!-- <el-input-number v-model="form.marketPrice" :min="0" :precision="2" placeholder="请输入市场价" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-col>-->
|
||||
<el-col :span="14" class="mb20">
|
||||
<el-form-item label="库存" prop="stock">
|
||||
<el-input-number v-model="form.stock" :min="0" :precision="0" placeholder="请输入库存" />
|
||||
@@ -164,6 +164,7 @@ const getcanteenOnlineSpuData = (id: string) => {
|
||||
price: Number(displayPrice(res.data.price, "")),
|
||||
marketPrice: Number(displayPrice(res.data.marketPrice, "")),
|
||||
status: "" + res.data.status,
|
||||
description: res.data.description ?? "",
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
|
||||
@@ -83,6 +83,12 @@
|
||||
<dict-tag :options="spu_status" :value="scope.row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="dishTypeName" label="上架类型" show-overflow-tooltip min-width="100">
|
||||
<template #default="scope">
|
||||
<el-tag v-show="scope.row.dishType == 1" type="success">{{ scope.row.dishTypeName}}</el-tag>
|
||||
<el-tag v-show="scope.row.dishType == 2" type="primary">{{ scope.row.dishTypeName}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="price" label="商品价格" show-overflow-tooltip min-width="100">
|
||||
<template #default="scope">
|
||||
{{ displayPrice(scope.row.price) }}
|
||||
@@ -118,8 +124,8 @@
|
||||
|
||||
<!-- 编辑、新增 -->
|
||||
<form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
|
||||
<!-- 关联每日菜品 -->
|
||||
<export-form-dialog ref="exportFormDialogRef" @refresh="getDataList(false)" />
|
||||
<!-- 导入每日菜品 -->
|
||||
<export-form-dialog ref="exportFormDialogRef" @refresh="exportRefresh" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -151,13 +157,17 @@ const state: BasicTableProps = reactive<BasicTableProps>({
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
await getCanteenOnlineCategoryAll()
|
||||
})
|
||||
|
||||
const getCanteenOnlineCategoryAll = async () => {
|
||||
try {
|
||||
const res = await getCanteenOnlineCategory()
|
||||
categoryOptions.value = res.data.records
|
||||
} catch (error) {
|
||||
categoryOptions.value = []
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state)
|
||||
|
||||
@@ -197,4 +207,10 @@ const handleDelete = async (ids: string[]) => {
|
||||
useMessage().error(err.msg)
|
||||
}
|
||||
}
|
||||
|
||||
// 导入每日菜品成功刷新
|
||||
const exportRefresh = () => {
|
||||
getDataList(false)
|
||||
getCanteenOnlineCategoryAll()
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible"
|
||||
:close-on-click-modal="false" draggable>
|
||||
<el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="120px" v-loading="loading">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="餐次类型" prop="mealType">
|
||||
<el-select v-model="form.mealType" placeholder="请选择餐次类型" @change="onMealTypeChange">
|
||||
<el-option label="早餐" value="1" />
|
||||
<el-option label="中餐" value="2" />
|
||||
<el-option label="晚餐" value="3" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="餐次名称" prop="mealName">
|
||||
<el-input v-model="form.mealName" placeholder="请输入餐次名称"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="开始时间" prop="startTime">
|
||||
<el-time-select
|
||||
v-model="form.startTime"
|
||||
placeholder="请选择开始时间"
|
||||
:selectable-range="getTimeRange()"
|
||||
:step="30"
|
||||
format="HH:mm"
|
||||
value-format="HH:mm"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="结束时间" prop="endTime">
|
||||
<el-time-select
|
||||
v-model="form.endTime"
|
||||
placeholder="请选择结束时间"
|
||||
:selectable-range="getTimeRange()"
|
||||
:step="30"
|
||||
format="HH:mm"
|
||||
value-format="HH:mm"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="时间段名称" prop="timeSlotName">
|
||||
<el-input v-model="form.timeSlotName" placeholder="请输入时间段名称"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="是否启用" prop="isEnabled">
|
||||
<el-radio-group v-model="form.isEnabled">
|
||||
<el-radio :label="1">启用</el-radio>
|
||||
<el-radio :label="0">禁用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input-number v-model="form.sort" :min="0" :max="999" placeholder="请输入排序"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input type="textarea" v-model="form.remark" placeholder="请输入备注" :rows="3"/>
|
||||
</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="TimeSlotConfigDialog">
|
||||
import { useDict } from '/@/hooks/dict';
|
||||
import { useMessage } from "/@/hooks/message";
|
||||
import { getObj, addObj, putObj } from '/@/api/canteen/timeSlotConfig'
|
||||
import { rule } from '/@/utils/validate';
|
||||
const emit = defineEmits(['refresh']);
|
||||
|
||||
// 定义变量内容
|
||||
const dataFormRef = ref();
|
||||
const visible = ref(false)
|
||||
const loading = ref(false)
|
||||
|
||||
// 提交表单数据
|
||||
const form = reactive({
|
||||
id:'',
|
||||
mealType: '',
|
||||
mealName: '',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
timeSlotName: '',
|
||||
isEnabled: 1,
|
||||
sort: 0,
|
||||
remark: '',
|
||||
deptId: '',
|
||||
});
|
||||
|
||||
// 定义校验规则
|
||||
const dataRules = ref({
|
||||
mealType: [{ required: true, message: '餐次类型不能为空', trigger: 'change' }],
|
||||
mealName: [{ required: true, message: '餐次名称不能为空', trigger: 'blur' }],
|
||||
startTime: [{ required: true, message: '开始时间不能为空', trigger: 'change' }],
|
||||
endTime: [{ required: true, message: '结束时间不能为空', trigger: 'change' }],
|
||||
timeSlotName: [{ required: true, message: '时间段名称不能为空', trigger: 'blur' }],
|
||||
isEnabled: [{ required: true, message: '是否启用不能为空', trigger: 'change' }],
|
||||
sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
|
||||
})
|
||||
|
||||
// 获取时间范围
|
||||
const getTimeRange = () => {
|
||||
return '00:00:00,23:59:59';
|
||||
};
|
||||
|
||||
// 餐次类型变化时自动填充餐次名称
|
||||
const onMealTypeChange = () => {
|
||||
switch (form.mealType) {
|
||||
case '1':
|
||||
form.mealName = '早餐';
|
||||
form.startTime = '07:00';
|
||||
form.endTime = '09:00';
|
||||
break;
|
||||
case '2':
|
||||
form.mealName = '中餐';
|
||||
form.startTime = '11:30';
|
||||
form.endTime = '13:30';
|
||||
break;
|
||||
case '3':
|
||||
form.mealName = '晚餐';
|
||||
form.startTime = '17:30';
|
||||
form.endTime = '19:30';
|
||||
break;
|
||||
default:
|
||||
form.mealName = '';
|
||||
form.startTime = '';
|
||||
form.endTime = '';
|
||||
}
|
||||
};
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = (id: string) => {
|
||||
visible.value = true
|
||||
form.id = ''
|
||||
form.mealType = ''
|
||||
form.mealName = ''
|
||||
form.startTime = ''
|
||||
form.endTime = ''
|
||||
form.timeSlotName = ''
|
||||
form.isEnabled = 1
|
||||
form.sort = 0
|
||||
form.remark = ''
|
||||
form.deptId = ''
|
||||
|
||||
// 重置表单数据
|
||||
nextTick(() => {
|
||||
dataFormRef.value?.resetFields();
|
||||
});
|
||||
|
||||
// 获取timeSlotConfig信息
|
||||
if (id) {
|
||||
form.id = id
|
||||
gettimeSlotConfigData(id)
|
||||
}
|
||||
};
|
||||
|
||||
// 提交
|
||||
const onSubmit = async () => {
|
||||
const valid = await dataFormRef.value.validate().catch(() => {});
|
||||
if (!valid) return false;
|
||||
|
||||
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 gettimeSlotConfigData = (id: string) => {
|
||||
// 获取数据
|
||||
loading.value = true
|
||||
getObj(id).then((res: any) => {
|
||||
Object.assign(form, res.data)
|
||||
}).finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
};
|
||||
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()"
|
||||
v-auth="'canteen_timeSlotConfig_add'">
|
||||
新 增
|
||||
</el-button>
|
||||
<el-button plain :disabled="multiple" icon="Delete" type="primary"
|
||||
v-auth="'canteen_timeSlotConfig_del'" @click="handleDelete(selectObjs)">
|
||||
删除
|
||||
</el-button>
|
||||
<right-toolbar v-model:showSearch="showSearch" :export="'canteen_timeSlotConfig_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="mealType" label="餐次类型 1-早餐 2-中餐 3-晚餐" show-overflow-tooltip/>
|
||||
<el-table-column prop="mealName" label="餐次名称" show-overflow-tooltip/>
|
||||
<el-table-column prop="startTime" label="开始时间" show-overflow-tooltip/>
|
||||
<el-table-column prop="endTime" label="结束时间" show-overflow-tooltip/>
|
||||
<el-table-column prop="timeSlotName" label="时间段名称" show-overflow-tooltip/>
|
||||
<el-table-column prop="isEnabled" label="是否启用 0-禁用 1-启用" show-overflow-tooltip/>
|
||||
<el-table-column prop="sort" label="排序" show-overflow-tooltip/>
|
||||
<el-table-column prop="remark" label="备注" show-overflow-tooltip/>
|
||||
<!-- <el-table-column prop="deptId" label="部门id" show-overflow-tooltip/>-->
|
||||
<el-table-column label="操作" width="150">
|
||||
<template #default="scope">
|
||||
<el-button icon="edit-pen" text type="primary" v-auth="'canteen_timeSlotConfig_edit'"
|
||||
@click="formDialogRef.openDialog(scope.row.id)">编辑</el-button>
|
||||
<el-button icon="delete" text type="primary" v-auth="'canteen_timeSlotConfig_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)" />
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="systemTimeSlotConfig">
|
||||
import { BasicTableProps, useTable } from "/src/hooks/table";
|
||||
import { fetchList, delObjs } from "/src/api/canteen/timeSlotConfig";
|
||||
import { useMessage, useMessageBox } from "/src/hooks/message";
|
||||
import { useDict } from '/src/hooks/dict';
|
||||
|
||||
// 引入组件
|
||||
const FormDialog = defineAsyncComponent(() => import('./form.vue'));
|
||||
// 定义查询字典
|
||||
|
||||
// 定义变量内容
|
||||
const formDialogRef = ref()
|
||||
// 搜索变量
|
||||
const queryRef = ref()
|
||||
const showSearch = ref(true)
|
||||
// 多选变量
|
||||
const selectObjs = ref([]) as any
|
||||
const multiple = ref(true)
|
||||
|
||||
const state: BasicTableProps = reactive<BasicTableProps>({
|
||||
queryForm: {},
|
||||
pageList: fetchList
|
||||
})
|
||||
|
||||
// table hook
|
||||
const {
|
||||
getDataList,
|
||||
currentChangeHandle,
|
||||
sizeChangeHandle,
|
||||
sortChangeHandle,
|
||||
downBlobFile,
|
||||
tableStyle
|
||||
} = useTable(state)
|
||||
|
||||
// 清空搜索条件
|
||||
const resetQuery = () => {
|
||||
// 清空搜索条件
|
||||
queryRef.value?.resetFields()
|
||||
// 清空多选
|
||||
selectObjs.value = []
|
||||
getDataList()
|
||||
}
|
||||
|
||||
// 导出excel
|
||||
const exportExcel = () => {
|
||||
downBlobFile('/canteen/timeSlotConfig/export', Object.assign(state.queryForm, { ids: selectObjs }), 'timeSlotConfig.xlsx')
|
||||
}
|
||||
|
||||
// 多选事件
|
||||
const selectionChangHandle = (objs: { id: string }[]) => {
|
||||
selectObjs.value = objs.map(({ id }) => id);
|
||||
multiple.value = !objs.length;
|
||||
};
|
||||
|
||||
// 删除操作
|
||||
const handleDelete = async (ids: string[]) => {
|
||||
try {
|
||||
await useMessageBox().confirm('此操作将永久删除');
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await delObjs(ids);
|
||||
getDataList();
|
||||
useMessage().success('删除成功');
|
||||
} catch (err: any) {
|
||||
useMessage().error(err.msg);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -69,8 +69,16 @@
|
||||
:data="vxeTableData"
|
||||
:edit-rules="validRules"
|
||||
show-footer
|
||||
:footer-data="[{ seq: '合计', totalAmount }]"
|
||||
:merge-footer-items="[{ row: 0, col: 2, rowspan: 1, colspan: 7 }]"
|
||||
:footer-data="[
|
||||
{
|
||||
seq: '合计',
|
||||
quantity: total.quantity,
|
||||
purchasePrice: total.purchasePrice,
|
||||
realPrice: `${total.realPrice}元`,
|
||||
totalAmount: total.totalAmount,
|
||||
},
|
||||
]"
|
||||
:merge-footer-items="[{ row: 0, col: 2, rowspan: 1, colspan: 4 }]"
|
||||
@checkbox-all=""
|
||||
@checkbox-change=""
|
||||
size="mini"
|
||||
@@ -148,7 +156,7 @@
|
||||
<el-input-number v-if="row.selectedUnitObj" v-model="row.selectedUnitObj.totalAmount" :min="0" :precision="2" />
|
||||
</template>
|
||||
<template #footer="{ row }">
|
||||
<span style="color: #2e5cf6; font-weight: bold">{{ totalAmount }} 元</span>
|
||||
<span style="color: #2e5cf6; font-weight: bold">{{ total.totalAmount }}元</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="remark" title="备注" :edit-render="{ autoFocus: 'input', placeholder: '请输入' }">
|
||||
@@ -235,9 +243,15 @@ const validRules = ref<VxeTablePropTypes.EditRules<any>>({
|
||||
})
|
||||
|
||||
// 合计总金额
|
||||
const totalAmount = computed(() =>
|
||||
vxeTableData.value.reduce((sum: any, row: any) => sum + Number(row.selectedUnitObj?.totalAmount || 0), 0).toFixed(2),
|
||||
)
|
||||
const total = computed(() => {
|
||||
const quantity = vxeTableData.value.reduce((sum: any, row: any) => sum + Number(row.quantity || 0), 0).toFixed(2)
|
||||
const purchasePrice = displayPrice(
|
||||
vxeTableData.value.reduce((sum: any, row: any) => sum + Number(row.selectedUnitObj?.purchasePrice || 0), 0),
|
||||
)
|
||||
const realPrice = vxeTableData.value.reduce((sum: any, row: any) => sum + Number(row.selectedUnitObj?.realPrice || 0), 0)
|
||||
const totalAmount = vxeTableData.value.reduce((sum: any, row: any) => sum + Number(row.selectedUnitObj?.totalAmount || 0), 0).toFixed(2)
|
||||
return { quantity, purchasePrice, realPrice, totalAmount }
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
await getInitData()
|
||||
|
||||
@@ -97,8 +97,16 @@
|
||||
:data="vxeTableData"
|
||||
:edit-rules="validRules"
|
||||
show-footer
|
||||
:footer-data="[{ seq: '合计', totalAmount }]"
|
||||
:merge-footer-items="[{ row: 0, col: 2, rowspan: 1, colspan: 7 }]"
|
||||
:footer-data="[
|
||||
{
|
||||
seq: '合计',
|
||||
quantity: total.quantity,
|
||||
purchasePrice: total.purchasePrice,
|
||||
realPrice: `${total.realPrice}元`,
|
||||
totalAmount: total.totalAmount,
|
||||
},
|
||||
]"
|
||||
:merge-footer-items="[{ row: 0, col: 2, rowspan: 1, colspan: 4 }]"
|
||||
@checkbox-all=""
|
||||
@checkbox-change=""
|
||||
size="mini"
|
||||
@@ -144,9 +152,9 @@
|
||||
v-model="row.quantity"
|
||||
:min="0"
|
||||
:precision="0"
|
||||
@change="onRowValueChange(row, $rowIndex)"
|
||||
@change="onQuantityChange(row, $rowIndex)"
|
||||
/>
|
||||
<el-input-number v-else v-model="row.quantity" :min="0" :precision="2" @change="onRowValueChange(row, $rowIndex)" />
|
||||
<el-input-number v-else v-model="row.quantity" :min="0" :precision="2" @change="onQuantityChange(row, $rowIndex)" />
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="purchasePrice" title="原进价">
|
||||
@@ -154,11 +162,11 @@
|
||||
{{ displayPrice(row.selectedUnitObj?.purchasePrice || 0) }}
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="realPrice" title="实际进价" :edit-render="{ autoFocus: 'input', placeholder: '请输入' }">
|
||||
<vxe-column field="realPrice" title="实际进价">
|
||||
<template #default="{ row }">
|
||||
{{ row?.selectedUnitObj?.realPrice || 0 }}
|
||||
</template>
|
||||
<template #edit="{ row, $rowIndex }">
|
||||
<!-- <template #edit="{ row, $rowIndex }">
|
||||
<el-input-number
|
||||
v-if="row.selectedUnitObj"
|
||||
v-model="row.selectedUnitObj.realPrice"
|
||||
@@ -166,17 +174,23 @@
|
||||
:precision="2"
|
||||
@change="onRowValueChange(row, $rowIndex)"
|
||||
/>
|
||||
</template>
|
||||
</template> -->
|
||||
</vxe-column>
|
||||
<vxe-column field="totalAmount" title="累计总金额" :edit-render="{ autoFocus: 'input', placeholder: '请输入' }">
|
||||
<template #default="{ row }">
|
||||
{{ row?.selectedUnitObj?.totalAmount }}
|
||||
</template>
|
||||
<template #edit="{ row, $rowIndex }">
|
||||
<el-input-number v-if="row.selectedUnitObj" v-model="row.selectedUnitObj.totalAmount" :min="0" :precision="2" />
|
||||
<el-input-number
|
||||
v-if="row.selectedUnitObj"
|
||||
v-model="row.selectedUnitObj.totalAmount"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
@change="onTotalAmountChange(row, $rowIndex)"
|
||||
/>
|
||||
</template>
|
||||
<template #footer="{ row }">
|
||||
<span style="color: #2e5cf6; font-weight: bold">{{ totalAmount }} 元</span>
|
||||
<span style="color: #2e5cf6; font-weight: bold">{{ total.totalAmount }}元</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="remark" title="备注" :edit-render="{ autoFocus: 'input', placeholder: '请输入' }">
|
||||
@@ -263,9 +277,15 @@ const validRules = ref<VxeTablePropTypes.EditRules<any>>({
|
||||
})
|
||||
|
||||
// 合计总金额
|
||||
const totalAmount = computed(() =>
|
||||
vxeTableData.value.reduce((sum: any, row: any) => sum + Number(row.selectedUnitObj?.totalAmount || 0), 0).toFixed(2),
|
||||
)
|
||||
const total = computed(() => {
|
||||
const quantity = vxeTableData.value.reduce((sum: any, row: any) => sum + Number(row.quantity || 0), 0).toFixed(2)
|
||||
const purchasePrice = displayPrice(
|
||||
vxeTableData.value.reduce((sum: any, row: any) => sum + Number(row.selectedUnitObj?.purchasePrice || 0), 0),
|
||||
)
|
||||
const realPrice = vxeTableData.value.reduce((sum: any, row: any) => sum + Number(row.selectedUnitObj?.realPrice || 0), 0).toFixed(2)
|
||||
const totalAmount = vxeTableData.value.reduce((sum: any, row: any) => sum + Number(row.selectedUnitObj?.totalAmount || 0), 0).toFixed(2)
|
||||
return { quantity, purchasePrice, realPrice, totalAmount }
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
await getInitData()
|
||||
@@ -364,9 +384,15 @@ const onUnitChange = (row: any) => {
|
||||
row.selectedUnitObj.totalAmount = Number((row.quantity * Number(row.selectedUnitObj.realPrice || 0)).toFixed(2))
|
||||
}
|
||||
|
||||
// 数量、进价变动联动
|
||||
const onRowValueChange = (row: any, $rowIndex: number) => {
|
||||
row.selectedUnitObj.totalAmount = Number((row.quantity * Number(row.selectedUnitObj.realPrice || 0)).toFixed(2))
|
||||
// 数量变动
|
||||
const onQuantityChange = (row: any, $rowIndex: number) => {
|
||||
row.selectedUnitObj.totalAmount = Number(displayPrice(row.quantity * Number(row.selectedUnitObj.purchasePrice || 0), ""))
|
||||
row.selectedUnitObj.realPrice = row.selectedUnitObj.totalAmount / row.quantity
|
||||
}
|
||||
|
||||
// 累计总金额变动
|
||||
const onTotalAmountChange = (row: any, $rowIndex: number) => {
|
||||
row.selectedUnitObj.realPrice = (row.selectedUnitObj.totalAmount / row.quantity).toFixed(2)
|
||||
}
|
||||
|
||||
// 整理table数据
|
||||
|
||||
@@ -15,9 +15,6 @@
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="经办人" prop="handlerUserId">
|
||||
<SelectHandlerUser v-model.trim="state.queryForm.handlerUserId" placeholder="请选择经办人" style="width: 200px" />
|
||||
</el-form-item> -->
|
||||
<el-form-item>
|
||||
<el-button icon="search" type="primary" @click="getDataList">查询</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
@@ -51,8 +48,7 @@
|
||||
<el-table-column type="index" label="#" width="50" />
|
||||
<el-table-column prop="inventoryCode" label="单据编号" show-overflow-tooltip />
|
||||
<el-table-column prop="inventoryDate" label="单据日期" show-overflow-tooltip />
|
||||
<!-- <el-table-column prop="productName" label="入库商品" show-overflow-tooltip /> -->
|
||||
<!-- <el-table-column prop="handlerUserName" label="经办人" show-overflow-tooltip /> -->
|
||||
<el-table-column prop="productName" label="入库商品" show-overflow-tooltip />
|
||||
<el-table-column prop="supplierId" label="货商" show-overflow-tooltip />
|
||||
<el-table-column prop="remark" label="备注" show-overflow-tooltip />
|
||||
<el-table-column label="操作" width="150">
|
||||
|
||||
Reference in new issue
Block a user