From c466b7f253a93d3a9b58c658adf6ec75574f5bd8 Mon Sep 17 00:00:00 2001 From: spring <2396852758@qq.com> Date: 星期二, 17 六月 2025 09:06:38 +0800 Subject: [PATCH] 公司logo动态切换,整体样式修改 --- src/views/index.vue | 150 +++-- src/assets/logo/芯导软件(江苏)有限公司.png | 0 src/assets/styles/sidebar.scss | 51 +- src/assets/logo/南通云从工业互联网有限公司.png | 0 src/layout/components/Navbar.vue | 29 src/views/inventoryManagement/issueManagement/index.vue | 359 ++++++++++++++ src/views/salesManagement/salesLedger/index.vue | 267 ++++------ src/assets/styles/variables.module.scss | 56 +- src/components/Breadcrumb/index.vue | 5 src/assets/logo/上海郢昱网络科技有限公司.png | 0 src/assets/logo/新缆(江苏)数字科技有限公司.png | 0 src/layout/components/Sidebar/Logo.vue | 74 ++ src/views/inventoryManagement/receiptManagement/index.vue | 359 ++++++++++++++ src/layout/components/Sidebar/index.vue | 32 14 files changed, 1,045 insertions(+), 337 deletions(-) diff --git "a/src/assets/logo/\344\270\212\346\265\267\351\203\242\346\230\261\347\275\221\347\273\234\347\247\221\346\212\200\346\234\211\351\231\220\345\205\254\345\217\270.png" "b/src/assets/logo/\344\270\212\346\265\267\351\203\242\346\230\261\347\275\221\347\273\234\347\247\221\346\212\200\346\234\211\351\231\220\345\205\254\345\217\270.png" new file mode 100644 index 0000000..f469ba7 --- /dev/null +++ "b/src/assets/logo/\344\270\212\346\265\267\351\203\242\346\230\261\347\275\221\347\273\234\347\247\221\346\212\200\346\234\211\351\231\220\345\205\254\345\217\270.png" Binary files differ diff --git "a/src/assets/logo/\345\215\227\351\200\232\344\272\221\344\273\216\345\267\245\344\270\232\344\272\222\350\201\224\347\275\221\346\234\211\351\231\220\345\205\254\345\217\270.png" "b/src/assets/logo/\345\215\227\351\200\232\344\272\221\344\273\216\345\267\245\344\270\232\344\272\222\350\201\224\347\275\221\346\234\211\351\231\220\345\205\254\345\217\270.png" new file mode 100644 index 0000000..d7ecf59 --- /dev/null +++ "b/src/assets/logo/\345\215\227\351\200\232\344\272\221\344\273\216\345\267\245\344\270\232\344\272\222\350\201\224\347\275\221\346\234\211\351\231\220\345\205\254\345\217\270.png" Binary files differ diff --git "a/src/assets/logo/\346\226\260\347\274\206\357\274\210\346\261\237\350\213\217\357\274\211\346\225\260\345\255\227\347\247\221\346\212\200\346\234\211\351\231\220\345\205\254\345\217\270.png" "b/src/assets/logo/\346\226\260\347\274\206\357\274\210\346\261\237\350\213\217\357\274\211\346\225\260\345\255\227\347\247\221\346\212\200\346\234\211\351\231\220\345\205\254\345\217\270.png" new file mode 100644 index 0000000..4481de2 --- /dev/null +++ "b/src/assets/logo/\346\226\260\347\274\206\357\274\210\346\261\237\350\213\217\357\274\211\346\225\260\345\255\227\347\247\221\346\212\200\346\234\211\351\231\220\345\205\254\345\217\270.png" Binary files differ diff --git "a/src/assets/logo/\350\212\257\345\257\274\350\275\257\344\273\266\357\274\210\346\261\237\350\213\217\357\274\211\346\234\211\351\231\220\345\205\254\345\217\270.png" "b/src/assets/logo/\350\212\257\345\257\274\350\275\257\344\273\266\357\274\210\346\261\237\350\213\217\357\274\211\346\234\211\351\231\220\345\205\254\345\217\270.png" new file mode 100644 index 0000000..c19a7e5 --- /dev/null +++ "b/src/assets/logo/\350\212\257\345\257\274\350\275\257\344\273\266\357\274\210\346\261\237\350\213\217\357\274\211\346\234\211\351\231\220\345\205\254\345\217\270.png" Binary files differ diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss index 7b035a2..8534448 100644 --- a/src/assets/styles/sidebar.scss +++ b/src/assets/styles/sidebar.scss @@ -1,15 +1,14 @@ #app { - .main-container { min-height: 100%; - transition: margin-left .28s; + transition: margin-left 0.28s; margin-left: $base-sidebar-width; position: relative; - background: #F5F7FB; + background: #f5f7fb; } .sidebarHide { - margin-left: 0!important; + margin-left: 0 !important; } .sidebar-container { @@ -23,12 +22,13 @@ left: 0; z-index: 1001; overflow: hidden; - -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35); + -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35); box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1); // reset element-ui css .horizontal-collapse-transition { - transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out; + transition: 0s width ease-in-out, 0s padding-left ease-in-out, + 0s padding-right ease-in-out; } .scrollbar-wrapper { @@ -69,7 +69,8 @@ width: 100% !important; } - .el-menu-item, .menu-title { + .el-menu-item, + .menu-title { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; @@ -83,31 +84,31 @@ .sub-menu-title-noDropdown, .el-sub-menu__title { &:hover { - background-color: rgba(212,221,255,0.56) !important; + background-color: rgba(212, 221, 255, 0.8) !important; } } & .theme-light .is-active > .el-sub-menu__title { - color: #000000 !important; + color: #fff !important; } - & .nest-menu .el-sub-menu>.el-sub-menu__title, + & .nest-menu .el-sub-menu > .el-sub-menu__title, & .el-sub-menu .el-menu-item { min-width: $base-sidebar-width !important; &:hover { - background-color: rgba(212,221,255,0.56) !important; + background-color: rgba(212, 221, 255, 0.8) !important; } &.is-active { - background-color: rgba(212,221,255,0.56) !important; + background-color: #fff !important; } } - & .theme-light .nest-menu .el-sub-menu>.el-sub-menu__title, + & .theme-light .nest-menu .el-sub-menu > .el-sub-menu__title, & .theme-light .el-sub-menu .el-menu-item { //background-color: transparent; &:hover { - background-color: rgba(212,221,255,0.56) !important; + background-color: rgba(212, 221, 255, 0.8) !important; } } } @@ -136,27 +137,26 @@ .el-sub-menu { overflow: hidden; - &>.el-sub-menu__title { + & > .el-sub-menu__title { padding: 0 !important; .svg-icon { margin-left: 20px; } - } } .el-menu--collapse { .el-sub-menu { - &>.el-sub-menu__title { - &>span { + & > .el-sub-menu__title { + & > span { height: 0; width: 0; overflow: hidden; visibility: hidden; display: inline-block; } - &>i { + & > i { height: 0; width: 0; overflow: hidden; @@ -179,7 +179,7 @@ } .sidebar-container { - transition: transform .28s; + transition: transform 0.28s; width: $base-sidebar-width !important; } @@ -193,7 +193,6 @@ } .withoutAnimation { - .main-container, .sidebar-container { transition: none; @@ -203,25 +202,25 @@ // when menu collapsed .el-menu--vertical { - &>.el-menu { + & > .el-menu { .svg-icon { margin-right: 16px; } } - .nest-menu .el-sub-menu>.el-sub-menu__title, + .nest-menu .el-sub-menu > .el-sub-menu__title, .el-menu-item { &:hover { // you can use $sub-menuHover - background-color: rgba(212,221,255,0.56) !important; + background-color: rgba(212, 221, 255, 0.56) !important; } &.is-active { - background-color: rgba(212,221,255,0.56) !important; + background-color: rgba(212, 221, 255, 0.56) !important; } } // the scroll bar appears when the sub-menu is too long - >.el-menu--popup { + > .el-menu--popup { max-height: 100vh; overflow-y: auto; diff --git a/src/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss index d748fc0..3194051 100644 --- a/src/assets/styles/variables.module.scss +++ b/src/assets/styles/variables.module.scss @@ -1,12 +1,12 @@ // base color $blue: #324157; $light-blue: #333c46; -$red: #C03639; -$pink: #E65D6E; -$green: #30B08F; -$tiffany: #4AB7BD; -$yellow: #FEC171; -$panGreen: #30B08F; +$red: #c03639; +$pink: #e65d6e; +$green: #30b08f; +$tiffany: #4ab7bd; +$yellow: #fec171; +$panGreen: #30b08f; // 榛樿涓婚鍙橀噺 $menuText: #bfcbd9; @@ -15,10 +15,10 @@ $menuHover: #263445; // 娴呰壊涓婚theme-light -$menuLightBg: #ffffff; +$menuLightBg: #002fa7; $menuLightHover: #f0f1f5; -$menuLightText: #303133; -$menuLightActiveText: #409EFF; +$menuLightText: #fff; +$menuLightActiveText: #002fa7; // 鍩虹鍙橀噺 $base-sidebar-width: 200px; @@ -29,13 +29,13 @@ $base-menu-color-active: #f4f4f5; $base-menu-background: #304156; $base-sub-menu-background: #1f2d3d; -$base-sub-menu-hover: #001528; +$base-sub-menu-hover: #fff; // 缁勪欢鍙橀噺 -$--color-primary: #409EFF; -$--color-success: #67C23A; -$--color-warning: #E6A23C; -$--color-danger: #F56C6C; +$--color-primary: #409eff; +$--color-success: #67c23a; +$--color-warning: #e6a23c; +$--color-danger: #f56c6c; $--color-info: #909399; :export { @@ -71,13 +71,12 @@ --sidebar-bg: #{$menuBg}; --sidebar-text: #{$menuText}; --menu-hover: #{$menuHover}; - + --navbar-bg: #ffffff; --navbar-text: #303133; - + /* splitpanes default-theme 鍙橀噺 */ --splitpanes-default-bg: #ffffff; - } // 鏆楅粦妯″紡鍙橀噺 @@ -119,7 +118,7 @@ --blockquote-bg: #1d1e1f; --blockquote-border: #303030; --blockquote-text: #d0d0d0; - + /* Cron 鏃堕棿琛ㄨ揪寮� 妯″紡鍙橀噺 */ --cron-border: #303030; @@ -127,11 +126,12 @@ --splitpanes-default-bg: #141414; /* 渚ц竟鏍忚彍鍗曡鐩� */ - .sidebar-container { - .el-menu-item, .menu-title { + .sidebar-container { + .el-menu-item, + .menu-title { color: var(--el-text-color-regular); } - & .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title, + & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title, & .theme-dark .el-sub-menu .el-menu-item { background-color: var(--el-bg-color) !important; } @@ -180,9 +180,10 @@ --el-table-border-color: var(--el-border-color-light) !important; --el-table-row-hover-bg-color: var(--el-bg-color-overlay) !important; - .el-table__header-wrapper, .el-table__fixed-header-wrapper { + .el-table__header-wrapper, + .el-table__fixed-header-wrapper { th { - background-color: var(--el-bg-color-overlay, #F0F1F5) !important; + background-color: var(--el-bg-color-overlay, #f0f1f5) !important; color: var(--el-text-color-regular, #515a6e); } } @@ -199,9 +200,10 @@ background-color: var(--el-bg-color-overlay); } } - + /* 涓嬫媺鑿滃崟鏍峰紡瑕嗙洊 */ - .el-dropdown-menu__item:not(.is-disabled):focus, .el-dropdown-menu__item:not(.is-disabled):hover{ + .el-dropdown-menu__item:not(.is-disabled):focus, + .el-dropdown-menu__item:not(.is-disabled):hover { background-color: var(--navbar-hover) !important; } @@ -211,11 +213,9 @@ border-left-color: var(--blockquote-border) !important; color: var(--blockquote-text) !important; } - + /* 鏃堕棿琛ㄨ揪寮忔爣棰樻牱寮忚鐩� */ .popup-result .title { background: var(--cron-border); } - } - diff --git a/src/components/Breadcrumb/index.vue b/src/components/Breadcrumb/index.vue index eb5df96..5385ec4 100644 --- a/src/components/Breadcrumb/index.vue +++ b/src/components/Breadcrumb/index.vue @@ -2,7 +2,8 @@ <el-breadcrumb class="app-breadcrumb" separator="/"> <transition-group name="breadcrumb"> <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path"> - <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{ item.meta.title }}</span> + <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{ + item.meta.title }}</span> <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a> </el-breadcrumb-item> </transition-group> @@ -91,7 +92,7 @@ margin-left: 8px; .no-redirect { - color: #97a8be; + color: #002FA7; cursor: text; } } diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index a8e08a9..1f0d385 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -1,23 +1,22 @@ <template> <div class="navbar"> <div> - <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> + <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" + @toggleClick="toggleSideBar" /> <breadcrumb v-if="!settingsStore.topNav" id="breadcrumb-container" class="breadcrumb-container" /> </div> -<!-- <top-nav v-if="settingsStore.topNav" id="topmenu-container" class="topmenu-container" />--> + <!-- <top-nav v-if="settingsStore.topNav" id="topmenu-container" class="topmenu-container" />--> <div class="center-menu"> - <span class="label">{{userStore.currentFactoryName}}</span> + <span class="label">{{ userStore.currentFactoryName }}</span> <el-dropdown @command="handleFactoryChange" class="right-menu-item hover-effect" trigger="click"> <div> - <el-icon size="20"><Switch /></el-icon> + <el-icon size="20"> + <Switch /> + </el-icon> </div> <template #dropdown> - <el-dropdown-menu > - <el-dropdown-item - v-for="item in factoryList" - :key="item.deptId" - :command="item" - > + <el-dropdown-menu> + <el-dropdown-item v-for="item in factoryList" :key="item.deptId" :command="item"> {{ item.deptName }} </el-dropdown-item> </el-dropdown-menu> @@ -114,12 +113,12 @@ } function getUserLoginFacotryList() { - if(userStore.id){ - userLoginFacotryList({userId:userStore.id}).then(res => { + if (userStore.id) { + userLoginFacotryList({ userId: userStore.id }).then(res => { console.log('res', res) factoryList.value = res.data }) - }else { + } else { factoryList.value = [] } } @@ -129,7 +128,7 @@ handleLogin(command.deptId); } -function handleLogin(currentFatoryId){ +function handleLogin(currentFatoryId) { const loginForm = { username: Cookies.get("username"), password: Cookies.get("password") === undefined ? null : decrypt(Cookies.get("password")), @@ -157,6 +156,7 @@ position: relative; background: var(--navbar-bg); box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); + .center-menu { line-height: 50px; position: absolute; @@ -164,6 +164,7 @@ transform: translateX(-50%); display: flex; align-items: center; + .label { font-weight: bold; font-size: 18px; diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue index 90146ae..824ed6f 100644 --- a/src/layout/components/Sidebar/Logo.vue +++ b/src/layout/components/Sidebar/Logo.vue @@ -2,21 +2,21 @@ <div class="sidebar-logo-container" :class="{ 'collapse': collapse }"> <transition name="sidebarLogoFade"> <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/"> - <img v-if="logo" :src="logo" class="sidebar-logo" /> + <img v-if="logoUrl" :src="logoUrl" class="sidebar-logo" @error="handleImageError" alt="鍏徃Logo" /> <h1 v-else class="sidebar-title">{{ title }}</h1> </router-link> <router-link v-else key="expand" class="sidebar-logo-link" to="/"> - <img v-if="logo" :src="logo" class="sidebar-logo" /> - <h1 class="sidebar-title">{{ title }}</h1> + <img v-if="logoUrl" :src="logoUrl" class="sidebar-logo" @error="handleImageError" alt="鍏徃Logo" /> + <h1 v-else class="sidebar-title">{{ title }}</h1> </router-link> </transition> </div> </template> <script setup> -import logo from '@/assets/logo/logo.png' -import useSettingsStore from '@/store/modules/settings' -import variables from '@/assets/styles/variables.module.scss' +import { ref, computed, onMounted, watch } from 'vue' +import useUserStore from '@/store/modules/user' +import defaultLogo from '@/assets/logo/logo.png' // 瀵煎叆榛樿logo defineProps({ collapse: { @@ -26,24 +26,53 @@ }) const title = import.meta.env.VITE_APP_TITLE -const settingsStore = useSettingsStore() -const sideTheme = computed(() => settingsStore.sideTheme) +const userStore = useUserStore() -// 鑾峰彇Logo鑳屾櫙鑹� -const getLogoBackground = computed(() => { - if (settingsStore.isDark) { - return 'var(--sidebar-bg)' - } - return sideTheme.value === 'theme-dark' ? variables.menuBg : variables.menuLightBg +// 澶勭悊宸ュ巶鍚嶇О锛岀敓鎴愬悎娉曠殑鏂囦欢鍚� +const cleanFactoryName = computed(() => { + if (!userStore.currentFactoryName) return '' + return userStore.currentFactoryName.trim() }) -// 鑾峰彇Logo鏂囧瓧棰滆壊 -const getLogoTextColor = computed(() => { - if (settingsStore.isDark) { - return 'var(--sidebar-text)' +// 鍔ㄦ�乴ogo璺緞 +const logoUrl = ref('') + +// 妫�鏌ogo鏄惁瀛樺湪骞惰缃畊rl +const updateLogoUrl = () => { + if (!cleanFactoryName.value) { + logoUrl.value = defaultLogo + return } - return sideTheme.value === 'theme-dark' ? '#fff' : variables.menuLightText + + // 浣跨敤Vite鐨勫姩鎬佸鍏� + try { + const dynamicLogo = import.meta.glob('/src/assets/logo/*.png', { eager: true }) + const logoPath = `/src/assets/logo/${cleanFactoryName.value}.png` + + if (dynamicLogo[logoPath]) { + logoUrl.value = dynamicLogo[logoPath].default + } else { + logoUrl.value = defaultLogo + } + } catch (error) { + console.error('鍔犺浇宸ュ巶Logo澶辫触:', error) + logoUrl.value = defaultLogo + } +} + +// 鍒濆鍖栧拰鐩戝惉鍙樺寲 +onMounted(() => { + updateLogoUrl() + + // 鐩戝惉宸ュ巶鍚嶇О鍙樺寲 + watch(() => userStore.currentFactoryName, updateLogoUrl) }) + +// 鍥剧墖鍔犺浇閿欒澶勭悊 +const handleImageError = (event) => { + console.warn('Logo鍔犺浇澶辫触锛屼娇鐢ㄩ粯璁ogo') + logoUrl.value = defaultLogo +} </script> <style lang="scss" scoped> @@ -63,7 +92,7 @@ width: 100%; height: 50px; line-height: 50px; - background: v-bind(getLogoBackground); + background: #fff; text-align: center; overflow: hidden; @@ -72,8 +101,9 @@ width: 100%; & .sidebar-logo { - width: 32px; - height: 32px; + width: 100%; + height: 100%; + // height: 32px; vertical-align: middle; margin-right: 12px; } diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue index f746f2d..0732505 100644 --- a/src/layout/components/Sidebar/index.vue +++ b/src/layout/components/Sidebar/index.vue @@ -2,23 +2,11 @@ <div :class="{ 'has-logo': showLogo }" class="sidebar-container"> <logo v-if="showLogo" :collapse="isCollapse" /> <el-scrollbar wrap-class="scrollbar-wrapper"> - <el-menu - :default-active="activeMenu" - :collapse="isCollapse" - :background-color="getMenuBackground" - :text-color="getMenuTextColor" - :unique-opened="true" - :active-text-color="theme" - :collapse-transition="false" - mode="vertical" - :class="sideTheme" - > - <sidebar-item - v-for="(route, index) in sidebarRouters" - :key="route.path + index" - :item="route" - :base-path="route.path" - /> + <el-menu :default-active="activeMenu" :collapse="isCollapse" :background-color="getMenuBackground" + :text-color="getMenuTextColor" :unique-opened="true" :active-text-color="theme" :collapse-transition="false" + mode="vertical" :class="sideTheme"> + <sidebar-item v-for="(route, index) in sidebarRouters" :key="route.path + index" :item="route" + :base-path="route.path" /> </el-menu> </el-scrollbar> </div> @@ -42,6 +30,7 @@ const sideTheme = computed(() => settingsStore.sideTheme) const theme = computed(() => settingsStore.theme) const isCollapse = computed(() => !appStore.sidebar.opened) +console.log(44444, settingsStore.isDark, sideTheme.value) // 鑾峰彇鑿滃崟鑳屾櫙鑹� const getMenuBackground = computed(() => { @@ -71,7 +60,7 @@ <style lang="scss" scoped> .sidebar-container { background-color: v-bind(getMenuBackground); - + .scrollbar-wrapper { background-color: v-bind(getMenuBackground); } @@ -80,8 +69,9 @@ border: none; height: 100%; width: 100% !important; - - .el-menu-item, .el-sub-menu__title { + + .el-menu-item, + .el-sub-menu__title { &:hover { background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important; } @@ -89,7 +79,7 @@ .el-menu-item { color: v-bind(getMenuTextColor); - + &.is-active { color: var(--menu-active-text, #409eff); background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important; diff --git a/src/views/index.vue b/src/views/index.vue index 06de745..f6ae965 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -9,21 +9,21 @@ <div class="card-group"> <div class="info-card"> <div class="info-message"> - <div class="info-number">{{contractAmount}}</div> + <div class="info-number">{{ contractAmount }}</div> <div class="info-title">鍚堝悓閲戦(鍏�)</div> </div> <img src="@/assets/images/icon1.png" alt="" style="width: 63px;height: 63px"> </div> <div class="info-card1"> <div class="info-message"> - <div class="info-number">{{invoiceAmount}}</div> + <div class="info-number">{{ invoiceAmount }}</div> <div class="info-title">寮�绁ㄩ噾棰�(鍏�)</div> </div> <img src="@/assets/images/icon2.png" alt="" style="width: 63px;height: 63px"> </div> <div class="info-card2"> <div class="info-message"> - <div class="info-number">{{receiptAmount}}</div> + <div class="info-number">{{ receiptAmount }}</div> <div class="info-title">鍥炴閲戦(鍏�)</div> </div> <img src="@/assets/images/icon%203.png" alt="" style="width: 63px;height: 63px"> @@ -38,20 +38,18 @@ <div class="card-group"> <div class="pie-group"> <div style="margin-right: 80px"> - <Echarts ref="chart" - :legend="pieLegend" - :chartStyle="chartStyle" - :series="materialPieSeries" - :tooltip="pieTooltip"></Echarts> + <Echarts ref="chart" :legend="pieLegend" :chartStyle="chartStyle" :series="materialPieSeries" + :tooltip="pieTooltip"></Echarts> </div> <div class="info-message2"> <div class="info-message1"> <div class="pie-title">鏈湀鍥炴閲戦</div> - <div class="pie-info"><span class="pie-number">{{receiveAmount}}</span>鍏� <span class="pie-number">{{receiveAmountPercentage}}</span>%</div> + <div class="pie-info"><span class="pie-number">{{ receiveAmount }}</span>鍏� <span + class="pie-number">{{ receiveAmountPercentage }}</span>%</div> </div> <div class="info-message1"> <div class="pie-title">搴旀敹娆鹃噾棰�</div> - <div class="pie-info"><span class="pie-number">{{contractAmountMonth}}</span>鍏�</div> + <div class="pie-info"><span class="pie-number">{{ contractAmountMonth }}</span>鍏�</div> </div> </div> </div> @@ -59,21 +57,18 @@ <div class="card-group"> <div class="pie-group"> <div style="margin-right: 80px"> - <Echarts ref="chart" - :options="options" - :legend="pieLegend" - :chartStyle="chartStyle" - :series="materialPieSeries1" - :tooltip="pieTooltip1"></Echarts> + <Echarts ref="chart" :options="options" :legend="pieLegend" :chartStyle="chartStyle" + :series="materialPieSeries1" :tooltip="pieTooltip1"></Echarts> </div> <div class="info-message2"> <div class="info-message1"> <div class="pie-title1">鏈湀浠樻閲戦</div> - <div class="pie-info"><span class="pie-number1">{{paymentAmount}}</span>鍏� <span class="pie-number1">{{payableAmountPercentage}}</span>%</div> + <div class="pie-info"><span class="pie-number1">{{ paymentAmount }}</span>鍏� <span + class="pie-number1">{{ payableAmountPercentage }}</span>%</div> </div> <div class="info-message1"> <div class="pie-title1">搴斾粯娆鹃噾棰�</div> - <div class="pie-info"><span class="pie-number1">{{payableAmount}}</span>鍏�</div> + <div class="pie-info"><span class="pie-number1">{{ payableAmount }}</span>鍏�</div> </div> </div> </div> @@ -87,15 +82,8 @@ <span style="font-weight: bold">瀹㈡埛鍚堝悓閲戦TOP5缁熻</span> </div> <div> - <Echarts ref="chart" - :chartStyle="chartStyle1" - :grid="grid" - :legend="barLegend" - :series="barSeries" - :tooltip="tooltip" - :xAxis="xAxis1" - :yAxis="yAxis1" - style="height: 42vh;"></Echarts> + <Echarts ref="chart" :chartStyle="chartStyle1" :grid="grid" :legend="barLegend" :series="barSeries" + :tooltip="tooltip" :xAxis="xAxis1" :yAxis="yAxis1" style="height: 42vh;"></Echarts> </div> </div> </div> @@ -107,15 +95,8 @@ <span style="font-weight: bold">鍥炴銆佸紑绁ㄨ繎鍗婂勾璧板娍鍥�</span> </div> <div> - <Echarts ref="chart" - :chartStyle="chartStyle1" - :grid="grid" - :legend="barLegend" - :series="lineSeries" - :tooltip="tooltipLine" - :xAxis="xAxis2" - :yAxis="yAxis2" - style="height: 27vh;"></Echarts> + <Echarts ref="chart" :chartStyle="chartStyle1" :grid="grid" :legend="barLegend" :series="lineSeries" + :tooltip="tooltipLine" :xAxis="xAxis2" :yAxis="yAxis2" style="height: 27vh;"></Echarts> </div> </div> </div> @@ -190,10 +171,10 @@ borderWidth: 2 }, label: { - show:false + show: false }, data: [ - { value: 0, name: '鏈湀鍥炴閲戦', itemStyle: { color: '#2D99FF' } }, + { value: 0, name: '鏈湀鍥炴閲戦', itemStyle: { color: '#2D99FF' } }, { value: 0, name: '搴旀敹娆鹃噾棰�', itemStyle: { color: '#D4DDFF' } }, ] } @@ -208,10 +189,10 @@ borderWidth: 2 }, label: { - show:false + show: false }, data: [ - { value: 0, name: '鏈湀浠樻閲戦', itemStyle: { color: '#1EBFAC' } }, + { value: 0, name: '鏈湀浠樻閲戦', itemStyle: { color: '#1EBFAC' } }, { value: 0, name: '搴斾粯娆鹃噾棰�', itemStyle: { color: '#D0EFE1' } }, ] } @@ -264,22 +245,22 @@ ]) const barLegend = reactive({}) const barSeries = ref([ - { - type: 'bar', - data: [], - label: { - show: true - }, + { + type: 'bar', + data: [], + label: { + show: true }, + }, ]) const lineSeries = ref([ - { - type: 'line', - data: [], - label: { - show: true - }, + { + type: 'line', + data: [], + label: { + show: true }, + }, ]) // 鍚堝悓閲戦 const getContractAmountNum = () => { @@ -330,7 +311,7 @@ customerName.push(item.customerName) totalAmount.push(item.totalAmount) }) -// 姝g‘鍝嶅簲寮忚祴鍊硷細鍒涘缓鏂扮殑 xAxis 鍜� series 瀵硅薄 + // 姝g‘鍝嶅簲寮忚祴鍊硷細鍒涘缓鏂扮殑 xAxis 鍜� series 瀵硅薄 xAxis1.value = [ { type: 'category', @@ -369,7 +350,7 @@ receiptAmount.push(item.receiptAmount) invoiceAmount.push(item.invoiceAmount) }) -// 姝g‘鍝嶅簲寮忚祴鍊硷細鍒涘缓鏂扮殑 xAxis 鍜� series 瀵硅薄 + // 姝g‘鍝嶅簲寮忚祴鍊硷細鍒涘缓鏂扮殑 xAxis 鍜� series 瀵硅薄 xAxis2.value = [ { type: 'category', @@ -458,6 +439,7 @@ width: 56vw; margin-bottom: 20px; } + .card-top-right { padding: 16px; background: #fff; @@ -466,6 +448,7 @@ margin-bottom: 20px; margin-left: 20px; } + .card-bottom { padding: 16px; background: #fff; @@ -473,6 +456,7 @@ width: 85.2vw; margin-bottom: 20px; } + .title { position: relative; font-size: 18px; @@ -481,6 +465,7 @@ padding-left: 10px; margin-bottom: 26px; } + .title::before { position: absolute; left: 0; @@ -488,12 +473,14 @@ content: ''; width: 4px; height: 18px; - background-color: #3A7BFA; + background-color: #002FA7; border-radius: 2px; } + .card-group { display: flex; } + .info-card { width: 300px; height: 126px; @@ -503,6 +490,7 @@ justify-content: space-around; align-items: center; } + .info-card1 { width: 300px; height: 126px; @@ -513,6 +501,7 @@ justify-content: space-around; align-items: center; } + .info-card2 { width: 300px; height: 126px; @@ -522,12 +511,14 @@ justify-content: space-around; align-items: center; } + .info-message { display: flex; flex-direction: column; justify-content: center; align-items: center; } + .info-message1 { font-weight: bold; display: flex; @@ -535,6 +526,7 @@ justify-content: center; align-items: flex-start; } + .info-message2 { font-weight: bold; display: flex; @@ -542,25 +534,30 @@ align-items: center; justify-content: space-around; } + .info-number { font-weight: bold; font-size: 32px; color: #FFFFFF; margin-bottom: 10px; } + .info-title { font-weight: bold; font-size: 18px; color: #FFFFFF; } + .pie { display: flex; flex-direction: row; justify-content: space-around; } + .pie-group { display: flex; } + .pie-title { font-size: 14px; line-height: 24px; @@ -568,16 +565,24 @@ padding-left: 16px; position: relative; } + .pie-title::before { content: ''; - width: 6px; /* 钃濈偣鐨勫搴� */ - height: 6px; /* 钃濈偣鐨勯珮搴� */ - background-color: #2853FD; /* 钃濈偣鐨勯鑹� */ - border-radius: 50%; /* 灏嗘鏂瑰舰鍙樹负鍦嗗舰 */ + width: 6px; + /* 钃濈偣鐨勫搴� */ + height: 6px; + /* 钃濈偣鐨勯珮搴� */ + background-color: #2853FD; + /* 钃濈偣鐨勯鑹� */ + border-radius: 50%; + /* 灏嗘鏂瑰舰鍙樹负鍦嗗舰 */ position: absolute; - left: 0; /* 瀹氫綅鍒板乏杈� */ - top: 9px; /* 鍨傜洿灞呬腑瀵归綈锛屾牴鎹楂樿皟鏁� */ + left: 0; + /* 瀹氫綅鍒板乏杈� */ + top: 9px; + /* 鍨傜洿灞呬腑瀵归綈锛屾牴鎹楂樿皟鏁� */ } + .pie-title1 { font-size: 14px; line-height: 24px; @@ -585,26 +590,35 @@ padding-left: 16px; position: relative; } + .pie-title1::before { content: ''; - width: 6px; /* 钃濈偣鐨勫搴� */ - height: 6px; /* 钃濈偣鐨勯珮搴� */ - background-color: #1EBFAC; /* 钃濈偣鐨勯鑹� */ - border-radius: 50%; /* 灏嗘鏂瑰舰鍙樹负鍦嗗舰 */ + width: 6px; + /* 钃濈偣鐨勫搴� */ + height: 6px; + /* 钃濈偣鐨勯珮搴� */ + background-color: #1EBFAC; + /* 钃濈偣鐨勯鑹� */ + border-radius: 50%; + /* 灏嗘鏂瑰舰鍙樹负鍦嗗舰 */ position: absolute; - left: 0; /* 瀹氫綅鍒板乏杈� */ - top: 9px; /* 鍨傜洿灞呬腑瀵归綈锛屾牴鎹楂樿皟鏁� */ + left: 0; + /* 瀹氫綅鍒板乏杈� */ + top: 9px; + /* 鍨傜洿灞呬腑瀵归綈锛屾牴鎹楂樿皟鏁� */ } + .pie-info { padding-left: 16px; font-size: 14px; line-height: 24px; } + .pie-number { color: #2853FD; } + .pie-number1 { color: #1EBFAC; } </style> - diff --git a/src/views/inventoryManagement/issueManagement/index.vue b/src/views/inventoryManagement/issueManagement/index.vue new file mode 100644 index 0000000..d5b7335 --- /dev/null +++ b/src/views/inventoryManagement/issueManagement/index.vue @@ -0,0 +1,359 @@ +<template> + <div class="app-container"> + <div class="search_form"> + <div> + <span class="search_title">渚涘簲鍟嗗悕绉帮細</span> + <el-input v-model="searchForm.customerName" style="width: 240px" placeholder="璇疯緭鍏�" @change="handleQuery" + clearable prefix-icon="Search" /> + <el-button type="primary" @click="handleQuery" style="margin-left: 10px">鎼滅储</el-button> + </div> + <div> + <el-button type="primary" @click="openForm('add')">鏂板</el-button> + <el-button @click="handleOut">瀵煎嚭</el-button> + <el-button type="danger" plain @click="handleDelete">鍒犻櫎</el-button> + </div> + </div> + <div class="table_list"> + <el-table :data="tableData" border v-loading="tableLoading" @selection-change="handleSelectionChange" + :expand-row-keys="expandedRowKeys" :row-key="row => row.id" show-summary style="width: 100%" + :summary-method="summarizeMainTable" height="calc(100vh - 18.5em)"> + <el-table-column align="center" type="selection" width="55" /> + <el-table-column align="center" label="搴忓彿" type="index" width="60" /> + <el-table-column label="鍑哄簱鏃堕棿" prop="salesContractNo" width="180" show-overflow-tooltip /> + <el-table-column label="鍑哄簱鎵规" prop="customerContractNo" width="180" show-overflow-tooltip /> + <el-table-column label="渚涘簲鍟嗗悕绉�" prop="customerName" width="300" show-overflow-tooltip /> + <el-table-column label="浜у搧澶х被" prop="salesman" width="100" show-overflow-tooltip /> + <el-table-column label="瑙勬牸鍨嬪彿" prop="projectName" width="180" show-overflow-tooltip /> + <el-table-column label="鍗曚綅" prop="contractAmount" width="180" show-overflow-tooltip /> + <el-table-column label="鍑哄簱鏁伴噺" prop="entryPersonName" width="100" show-overflow-tooltip /> + <el-table-column label="鍚◣鍗曚环" prop="entryDate" width="120" show-overflow-tooltip /> + <el-table-column label="鍚◣鎬讳环" prop="executionDate" width="120" show-overflow-tooltip /> + <el-table-column label="绋庣巼" prop="executionDate" width="120" show-overflow-tooltip /> + <el-table-column label="涓嶅惈绋庢�讳环" prop="executionDate" width="120" show-overflow-tooltip /> + <el-table-column label="鍑哄簱浜�" prop="executionDate" width="120" show-overflow-tooltip /> + <el-table-column fixed="right" label="鎿嶄綔" min-width="60" align="center"> + <template #default="scope"> + <el-button link type="primary" size="small" @click="openForm('edit', scope.row);">缂栬緫</el-button> + </template> + </el-table-column> + </el-table> + <pagination v-show="total > 0" :total="total" layout="total, sizes, prev, pager, next, jumper" + :page="page.current" :limit="page.size" @pagination="paginationChange" /> + </div> + <el-dialog v-model="dialogFormVisible" :title="operationType === 'add' ? '鏂板鍏ュ簱' : '缂栬緫鍏ュ簱'" width="70%" + @close="closeDia"> + <el-form :model="form" label-width="140px" label-position="top" :rules="rules" ref="formRef"> + <el-row :gutter="30"> + <el-col :span="12"> + <el-form-item label="渚涘簲鍟嗗悕绉帮細" prop="salesContractNo"> + <el-input v-model="form.salesContractNo" placeholder="璇疯緭鍏�" clearable /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="浜у搧澶х被锛�" prop="salesman"> + <el-select v-model="form.salesman" placeholder="璇烽�夋嫨" clearable> + <el-option v-for="item in userList" :key="item.nickName" :label="item.nickName" + :value="item.nickName" /> + </el-select> + </el-form-item> + </el-col> + </el-row> + <el-row :gutter="30"> + <el-col :span="12"> + <el-form-item label="瑙勬牸鍨嬪彿锛�" prop="customerContractNo"> + <el-input v-model="form.customerContractNo" placeholder="璇疯緭鍏�" clearable /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="鍗曚綅锛�" prop="customerId"> + <el-input v-model="form.customerContractNo" placeholder="璇疯緭鍏�" clearable /> + </el-form-item> + </el-col> + </el-row> + <el-row :gutter="30"> + <el-col :span="12"> + <el-form-item label="鍏ュ簱鏃堕棿锛�" prop="projectName"> + <el-date-picker style="width: 100%" v-model="form.entryDate" value-format="YYYY-MM-DD" format="YYYY-MM-DD" + type="date" placeholder="璇烽�夋嫨" clearable /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="鍏ュ簱鎵规锛�" prop="entryPerson"> + <el-input v-model="form.customerContractNo" placeholder="璇疯緭鍏�" clearable /> + </el-form-item> + </el-col> + </el-row> + <el-row :gutter="30"> + <el-col :span="12"> + <el-form-item label="鍏ュ簱鏁伴噺锛�" prop="customerContractNo"> + <el-input v-model="form.customerContractNo" placeholder="璇疯緭鍏�" clearable /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="鍚◣鍗曚环锛�" prop="customerId"> + <el-input v-model="form.customerContractNo" placeholder="璇疯緭鍏�" clearable /> + </el-form-item> + </el-col> + </el-row> + <el-row :gutter="30"> + <el-col :span="12"> + <el-form-item label="鍚◣鎬讳环锛�" prop="customerContractNo"> + <el-input v-model="form.customerContractNo" placeholder="璇疯緭鍏�" clearable /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="绋庣巼锛�" prop="customerId"> + <el-input v-model="form.customerContractNo" placeholder="璇疯緭鍏�" clearable /> + </el-form-item> + </el-col> + </el-row> + <el-row :gutter="30"> + <el-col :span="12"> + <el-form-item label="涓嶅惈绋庢�讳环锛�" prop="entryDate"> + <el-input v-model="form.customerContractNo" placeholder="璇疯緭鍏�" clearable /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="鍏ュ簱浜猴細" prop="entryPerson"> + <el-select v-model="form.entryPerson" placeholder="璇烽�夋嫨" clearable> + <el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId" /> + </el-select> + </el-form-item> + </el-col> + </el-row> + </el-form> + <template #footer> + <div class="dialog-footer"> + <el-button type="primary" @click="submitForm">纭</el-button> + <el-button @click="closeDia">鍙栨秷</el-button> + </div> + </template> + </el-dialog> + </div> +</template> + +<script setup> +import pagination from '@/components/PIMTable/Pagination.vue' +import { ref } from 'vue' +import { ElMessageBox } from "element-plus"; +import useUserStore from '@/store/modules/user' +import { userListNoPage } from "@/api/system/user.js"; +import { + ledgerListPage, + customerList, + addOrUpdateSalesLedger, + getSalesLedgerWithProducts, delLedger +} from "@/api/salesManagement/salesLedger.js"; +const userStore = useUserStore() +const { proxy } = getCurrentInstance() +const tableData = ref([]) +const productData = ref([]) +const selectedRows = ref([]) +const userList = ref([]) +const customerOption = ref([]) +const tableLoading = ref(false) +const page = reactive({ + current: 1, + size: 100, +}) +const total = ref(0) +const fileList = ref([]) + +// 鐢ㄦ埛淇℃伅琛ㄥ崟寮规鏁版嵁 +const operationType = ref('') +const dialogFormVisible = ref(false) +const data = reactive({ + searchForm: { + customerName: '', + }, + form: { + salesContractNo: '', + salesman: '', + customerContractNo: '', + customerId: '', + projectName: '', + entryPerson: '', + entryDate: '', + maintenanceTime: '', + productData: [], + executionDate: '' + }, + rules: { + salesman: [{ required: true, message: "璇烽�夋嫨", trigger: "change" }], + customerContractNo: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }], + customerId: [{ required: true, message: "璇烽�夋嫨", trigger: "change" }], + projectName: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }], + entryPerson: [{ required: true, message: "璇烽�夋嫨", trigger: "change" }], + entryDate: [{ required: true, message: "璇烽�夋嫨", trigger: "change" }], + executionDate: [{ required: true, message: "璇烽�夋嫨", trigger: "change" }], + } +}) +const { searchForm, form, rules } = toRefs(data) + +// 鏌ヨ鍒楄〃 +/** 鎼滅储鎸夐挳鎿嶄綔 */ +const handleQuery = () => { + page.current = 1 + getList() +} +const paginationChange = (obj) => { + page.current = obj.page; + page.size = obj.limit; + getList() +} +const getList = () => { + tableLoading.value = true + ledgerListPage({ ...searchForm.value, ...page }).then(res => { + tableLoading.value = false + tableData.value = res.records + tableData.value.map(item => { + item.children = [] + }) + total.value = res.total + }).catch(() => { + tableLoading.value = false + }) +} +const findNodeById = (nodes, productId) => { + for (let i = 0; i < nodes.length; i++) { + if (nodes[i].value === productId) { + return nodes[i].label; // 鎵惧埌鑺傜偣锛岃繑鍥炶鑺傜偣 + } + if (nodes[i].children && nodes[i].children.length > 0) { + const foundNode = findNodeById(nodes[i].children, productId); + if (foundNode) { + return foundNode.label; // 鍦ㄥ瓙鑺傜偣涓壘鍒帮紝杩斿洖璇ヨ妭鐐� + } + } + } + return null; // 娌℃湁鎵惧埌鑺傜偣锛岃繑鍥瀗ull +}; +// 琛ㄦ牸閫夋嫨鏁版嵁 +const handleSelectionChange = (selection) => { + + // 杩囨护鎺夊瓙鏁版嵁 + selectedRows.value = selection.filter(item => item.children !== undefined); + console.log('selection', selectedRows.value) +} +const expandedRowKeys = ref([]) + +// 涓昏〃鍚堣鏂规硶 +const summarizeMainTable = (param) => { + return proxy.summarizeTable(param, ['contractAmount', 'taxInclusiveTotalPrice', 'taxExclusiveTotalPrice']); +}; + +// 鎵撳紑寮规 +const openForm = async (type, row) => { + operationType.value = type + form.value = {} + productData.value = [] + let userLists = await userListNoPage() + userList.value = userLists.data + customerList().then(res => { + customerOption.value = res + }) + console.log('userStore.id', userStore.id) + form.value.entryPerson = userStore.id + if (type === 'edit') { + currentId.value = row.id; + getSalesLedgerWithProducts({ id: row.id, type: 1 }).then(res => { + form.value = { ...res } + form.value.entryPerson = Number(res.entryPerson) + productData.value = form.value.productData + fileList.value = form.value.salesLedgerFiles + }) + } + // let userAll = await userStore.getInfo() + // userList.value.forEach(element => { + // if(userAll.user.nickName === element.nickName && userAll.user.userName === element.userName) { + // form.value.entryPerson = userAll.user.userId // 璁剧疆榛樿涓氬姟鍛樹负褰撳墠鐢ㄦ埛 + // } + // }); + form.value.entryDate = getCurrentDate() // 璁剧疆榛樿褰曞叆鏃ユ湡涓哄綋鍓嶆棩鏈� + dialogFormVisible.value = true +} + +// 鎻愪氦琛ㄥ崟 +const submitForm = () => { + proxy.$refs["formRef"].validate(valid => { + if (valid) { + if (productData.value.length > 0) { + form.value.productData = proxy.HaveJson(productData.value) + } else { + proxy.$modal.msgWarning('璇锋坊鍔犱骇鍝佷俊鎭�') + return + } + let tempFileIds = [] + if (fileList.value.length > 0) { + tempFileIds = fileList.value.map(item => item.tempId) + } + form.value.tempFileIds = tempFileIds + form.value.type = 1 + addOrUpdateSalesLedger(form.value).then(res => { + proxy.$modal.msgSuccess("鎻愪氦鎴愬姛") + closeDia() + getList() + }) + } + }) +} +// 鍏抽棴寮规 +const closeDia = () => { + proxy.resetForm("formRef") + dialogFormVisible.value = false +} + +// 瀵煎嚭 +const handleOut = () => { + ElMessageBox.confirm( + '閫変腑鐨勫唴瀹瑰皢琚鍑猴紝鏄惁纭瀵煎嚭锛�', + '瀵煎嚭', { + confirmButtonText: '纭', + cancelButtonText: '鍙栨秷', + type: 'warning', + } + ).then(() => { + proxy.download("/sales/ledger/export", {}, '鍏ュ簱鍙拌处.xlsx') + }).catch(() => { + proxy.$modal.msg("宸插彇娑�") + }) +} +// 鍒犻櫎 +const handleDelete = () => { + let ids = [] + if (selectedRows.value.length > 0) { + ids = selectedRows.value.map(item => item.id); + } else { + proxy.$modal.msgWarning('璇烽�夋嫨鏁版嵁') + return + } + ElMessageBox.confirm( + '閫変腑鐨勫唴瀹瑰皢琚垹闄わ紝鏄惁纭鍒犻櫎锛�', + '瀵煎嚭', { + confirmButtonText: '纭', + cancelButtonText: '鍙栨秷', + type: 'warning', + } + ).then(() => { + delLedger(ids).then(res => { + proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛") + getList() + }) + }).catch(() => { + proxy.$modal.msg("宸插彇娑�") + }) +} +// 鑾峰彇褰撳墠鏃ユ湡骞舵牸寮忓寲涓� YYYY-MM-DD +function getCurrentDate() { + const today = new Date(); + const year = today.getFullYear(); + const month = String(today.getMonth() + 1).padStart(2, '0'); // 鏈堜唤浠�0寮�濮� + const day = String(today.getDate()).padStart(2, '0'); + return `${year}-${month}-${day}`; +} +onMounted(() => { + getList() +}) +</script> + +<style scoped lang="scss"></style> diff --git a/src/views/inventoryManagement/receiptManagement/index.vue b/src/views/inventoryManagement/receiptManagement/index.vue new file mode 100644 index 0000000..6444e7d --- /dev/null +++ b/src/views/inventoryManagement/receiptManagement/index.vue @@ -0,0 +1,359 @@ +<template> + <div class="app-container"> + <div class="search_form"> + <div> + <span class="search_title">渚涘簲鍟嗗悕绉帮細</span> + <el-input v-model="searchForm.customerName" style="width: 240px" placeholder="璇疯緭鍏�" @change="handleQuery" + clearable prefix-icon="Search" /> + <el-button type="primary" @click="handleQuery" style="margin-left: 10px">鎼滅储</el-button> + </div> + <div> + <el-button type="primary" @click="openForm('add')">鏂板</el-button> + <el-button @click="handleOut">瀵煎嚭</el-button> + <el-button type="danger" plain @click="handleDelete">鍒犻櫎</el-button> + </div> + </div> + <div class="table_list"> + <el-table :data="tableData" border v-loading="tableLoading" @selection-change="handleSelectionChange" + :expand-row-keys="expandedRowKeys" :row-key="row => row.id" show-summary style="width: 100%" + :summary-method="summarizeMainTable" height="calc(100vh - 18.5em)"> + <el-table-column align="center" type="selection" width="55" /> + <el-table-column align="center" label="搴忓彿" type="index" width="60" /> + <el-table-column label="鍏ュ簱鏃堕棿" prop="salesContractNo" width="180" show-overflow-tooltip /> + <el-table-column label="鍏ュ簱鎵规" prop="customerContractNo" width="180" show-overflow-tooltip /> + <el-table-column label="渚涘簲鍟嗗悕绉�" prop="customerName" width="300" show-overflow-tooltip /> + <el-table-column label="浜у搧澶х被" prop="salesman" width="100" show-overflow-tooltip /> + <el-table-column label="瑙勬牸鍨嬪彿" prop="projectName" width="180" show-overflow-tooltip /> + <el-table-column label="鍗曚綅" prop="contractAmount" width="180" show-overflow-tooltip /> + <el-table-column label="鍏ュ簱鏁伴噺" prop="entryPersonName" width="100" show-overflow-tooltip /> + <el-table-column label="鍚◣鍗曚环" prop="entryDate" width="120" show-overflow-tooltip /> + <el-table-column label="鍚◣鎬讳环" prop="executionDate" width="120" show-overflow-tooltip /> + <el-table-column label="绋庣巼" prop="executionDate" width="120" show-overflow-tooltip /> + <el-table-column label="涓嶅惈绋庢�讳环" prop="executionDate" width="120" show-overflow-tooltip /> + <el-table-column label="鍏ュ簱浜�" prop="executionDate" width="120" show-overflow-tooltip /> + <el-table-column fixed="right" label="鎿嶄綔" min-width="60" align="center"> + <template #default="scope"> + <el-button link type="primary" size="small" @click="openForm('edit', scope.row);">缂栬緫</el-button> + </template> + </el-table-column> + </el-table> + <pagination v-show="total > 0" :total="total" layout="total, sizes, prev, pager, next, jumper" + :page="page.current" :limit="page.size" @pagination="paginationChange" /> + </div> + <el-dialog v-model="dialogFormVisible" :title="operationType === 'add' ? '鏂板鍏ュ簱' : '缂栬緫鍏ュ簱'" width="70%" + @close="closeDia"> + <el-form :model="form" label-width="140px" label-position="top" :rules="rules" ref="formRef"> + <el-row :gutter="30"> + <el-col :span="12"> + <el-form-item label="渚涘簲鍟嗗悕绉帮細" prop="salesContractNo"> + <el-input v-model="form.salesContractNo" placeholder="璇疯緭鍏�" clearable /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="浜у搧澶х被锛�" prop="salesman"> + <el-select v-model="form.salesman" placeholder="璇烽�夋嫨" clearable> + <el-option v-for="item in userList" :key="item.nickName" :label="item.nickName" + :value="item.nickName" /> + </el-select> + </el-form-item> + </el-col> + </el-row> + <el-row :gutter="30"> + <el-col :span="12"> + <el-form-item label="瑙勬牸鍨嬪彿锛�" prop="customerContractNo"> + <el-input v-model="form.customerContractNo" placeholder="璇疯緭鍏�" clearable /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="鍗曚綅锛�" prop="customerId"> + <el-input v-model="form.customerContractNo" placeholder="璇疯緭鍏�" clearable /> + </el-form-item> + </el-col> + </el-row> + <el-row :gutter="30"> + <el-col :span="12"> + <el-form-item label="鍏ュ簱鏃堕棿锛�" prop="projectName"> + <el-date-picker style="width: 100%" v-model="form.entryDate" value-format="YYYY-MM-DD" format="YYYY-MM-DD" + type="date" placeholder="璇烽�夋嫨" clearable /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="鍏ュ簱鎵规锛�" prop="entryPerson"> + <el-input v-model="form.customerContractNo" placeholder="璇疯緭鍏�" clearable /> + </el-form-item> + </el-col> + </el-row> + <el-row :gutter="30"> + <el-col :span="12"> + <el-form-item label="鍏ュ簱鏁伴噺锛�" prop="customerContractNo"> + <el-input v-model="form.customerContractNo" placeholder="璇疯緭鍏�" clearable /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="鍚◣鍗曚环锛�" prop="customerId"> + <el-input v-model="form.customerContractNo" placeholder="璇疯緭鍏�" clearable /> + </el-form-item> + </el-col> + </el-row> + <el-row :gutter="30"> + <el-col :span="12"> + <el-form-item label="鍚◣鎬讳环锛�" prop="customerContractNo"> + <el-input v-model="form.customerContractNo" placeholder="璇疯緭鍏�" clearable /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="绋庣巼锛�" prop="customerId"> + <el-input v-model="form.customerContractNo" placeholder="璇疯緭鍏�" clearable /> + </el-form-item> + </el-col> + </el-row> + <el-row :gutter="30"> + <el-col :span="12"> + <el-form-item label="涓嶅惈绋庢�讳环锛�" prop="entryDate"> + <el-input v-model="form.customerContractNo" placeholder="璇疯緭鍏�" clearable /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="鍏ュ簱浜猴細" prop="entryPerson"> + <el-select v-model="form.entryPerson" placeholder="璇烽�夋嫨" clearable> + <el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId" /> + </el-select> + </el-form-item> + </el-col> + </el-row> + </el-form> + <template #footer> + <div class="dialog-footer"> + <el-button type="primary" @click="submitForm">纭</el-button> + <el-button @click="closeDia">鍙栨秷</el-button> + </div> + </template> + </el-dialog> + </div> +</template> + +<script setup> +import pagination from '@/components/PIMTable/Pagination.vue' +import { ref } from 'vue' +import { ElMessageBox } from "element-plus"; +import useUserStore from '@/store/modules/user' +import { userListNoPage } from "@/api/system/user.js"; +import { + ledgerListPage, + customerList, + addOrUpdateSalesLedger, + getSalesLedgerWithProducts, delLedger +} from "@/api/salesManagement/salesLedger.js"; +const userStore = useUserStore() +const { proxy } = getCurrentInstance() +const tableData = ref([]) +const productData = ref([]) +const selectedRows = ref([]) +const userList = ref([]) +const customerOption = ref([]) +const tableLoading = ref(false) +const page = reactive({ + current: 1, + size: 100, +}) +const total = ref(0) +const fileList = ref([]) + +// 鐢ㄦ埛淇℃伅琛ㄥ崟寮规鏁版嵁 +const operationType = ref('') +const dialogFormVisible = ref(false) +const data = reactive({ + searchForm: { + customerName: '', + }, + form: { + salesContractNo: '', + salesman: '', + customerContractNo: '', + customerId: '', + projectName: '', + entryPerson: '', + entryDate: '', + maintenanceTime: '', + productData: [], + executionDate: '' + }, + rules: { + salesman: [{ required: true, message: "璇烽�夋嫨", trigger: "change" }], + customerContractNo: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }], + customerId: [{ required: true, message: "璇烽�夋嫨", trigger: "change" }], + projectName: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }], + entryPerson: [{ required: true, message: "璇烽�夋嫨", trigger: "change" }], + entryDate: [{ required: true, message: "璇烽�夋嫨", trigger: "change" }], + executionDate: [{ required: true, message: "璇烽�夋嫨", trigger: "change" }], + } +}) +const { searchForm, form, rules } = toRefs(data) + +// 鏌ヨ鍒楄〃 +/** 鎼滅储鎸夐挳鎿嶄綔 */ +const handleQuery = () => { + page.current = 1 + getList() +} +const paginationChange = (obj) => { + page.current = obj.page; + page.size = obj.limit; + getList() +} +const getList = () => { + tableLoading.value = true + ledgerListPage({ ...searchForm.value, ...page }).then(res => { + tableLoading.value = false + tableData.value = res.records + tableData.value.map(item => { + item.children = [] + }) + total.value = res.total + }).catch(() => { + tableLoading.value = false + }) +} +const findNodeById = (nodes, productId) => { + for (let i = 0; i < nodes.length; i++) { + if (nodes[i].value === productId) { + return nodes[i].label; // 鎵惧埌鑺傜偣锛岃繑鍥炶鑺傜偣 + } + if (nodes[i].children && nodes[i].children.length > 0) { + const foundNode = findNodeById(nodes[i].children, productId); + if (foundNode) { + return foundNode.label; // 鍦ㄥ瓙鑺傜偣涓壘鍒帮紝杩斿洖璇ヨ妭鐐� + } + } + } + return null; // 娌℃湁鎵惧埌鑺傜偣锛岃繑鍥瀗ull +}; +// 琛ㄦ牸閫夋嫨鏁版嵁 +const handleSelectionChange = (selection) => { + + // 杩囨护鎺夊瓙鏁版嵁 + selectedRows.value = selection.filter(item => item.children !== undefined); + console.log('selection', selectedRows.value) +} +const expandedRowKeys = ref([]) + +// 涓昏〃鍚堣鏂规硶 +const summarizeMainTable = (param) => { + return proxy.summarizeTable(param, ['contractAmount', 'taxInclusiveTotalPrice', 'taxExclusiveTotalPrice']); +}; + +// 鎵撳紑寮规 +const openForm = async (type, row) => { + operationType.value = type + form.value = {} + productData.value = [] + let userLists = await userListNoPage() + userList.value = userLists.data + customerList().then(res => { + customerOption.value = res + }) + console.log('userStore.id', userStore.id) + form.value.entryPerson = userStore.id + if (type === 'edit') { + currentId.value = row.id; + getSalesLedgerWithProducts({ id: row.id, type: 1 }).then(res => { + form.value = { ...res } + form.value.entryPerson = Number(res.entryPerson) + productData.value = form.value.productData + fileList.value = form.value.salesLedgerFiles + }) + } + // let userAll = await userStore.getInfo() + // userList.value.forEach(element => { + // if(userAll.user.nickName === element.nickName && userAll.user.userName === element.userName) { + // form.value.entryPerson = userAll.user.userId // 璁剧疆榛樿涓氬姟鍛樹负褰撳墠鐢ㄦ埛 + // } + // }); + form.value.entryDate = getCurrentDate() // 璁剧疆榛樿褰曞叆鏃ユ湡涓哄綋鍓嶆棩鏈� + dialogFormVisible.value = true +} + +// 鎻愪氦琛ㄥ崟 +const submitForm = () => { + proxy.$refs["formRef"].validate(valid => { + if (valid) { + if (productData.value.length > 0) { + form.value.productData = proxy.HaveJson(productData.value) + } else { + proxy.$modal.msgWarning('璇锋坊鍔犱骇鍝佷俊鎭�') + return + } + let tempFileIds = [] + if (fileList.value.length > 0) { + tempFileIds = fileList.value.map(item => item.tempId) + } + form.value.tempFileIds = tempFileIds + form.value.type = 1 + addOrUpdateSalesLedger(form.value).then(res => { + proxy.$modal.msgSuccess("鎻愪氦鎴愬姛") + closeDia() + getList() + }) + } + }) +} +// 鍏抽棴寮规 +const closeDia = () => { + proxy.resetForm("formRef") + dialogFormVisible.value = false +} + +// 瀵煎嚭 +const handleOut = () => { + ElMessageBox.confirm( + '閫変腑鐨勫唴瀹瑰皢琚鍑猴紝鏄惁纭瀵煎嚭锛�', + '瀵煎嚭', { + confirmButtonText: '纭', + cancelButtonText: '鍙栨秷', + type: 'warning', + } + ).then(() => { + proxy.download("/sales/ledger/export", {}, '鍏ュ簱鍙拌处.xlsx') + }).catch(() => { + proxy.$modal.msg("宸插彇娑�") + }) +} +// 鍒犻櫎 +const handleDelete = () => { + let ids = [] + if (selectedRows.value.length > 0) { + ids = selectedRows.value.map(item => item.id); + } else { + proxy.$modal.msgWarning('璇烽�夋嫨鏁版嵁') + return + } + ElMessageBox.confirm( + '閫変腑鐨勫唴瀹瑰皢琚垹闄わ紝鏄惁纭鍒犻櫎锛�', + '瀵煎嚭', { + confirmButtonText: '纭', + cancelButtonText: '鍙栨秷', + type: 'warning', + } + ).then(() => { + delLedger(ids).then(res => { + proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛") + getList() + }) + }).catch(() => { + proxy.$modal.msg("宸插彇娑�") + }) +} +// 鑾峰彇褰撳墠鏃ユ湡骞舵牸寮忓寲涓� YYYY-MM-DD +function getCurrentDate() { + const today = new Date(); + const year = today.getFullYear(); + const month = String(today.getMonth() + 1).padStart(2, '0'); // 鏈堜唤浠�0寮�濮� + const day = String(today.getDate()).padStart(2, '0'); + return `${year}-${month}-${day}`; +} +onMounted(() => { + getList() +}) +</script> + +<style scoped lang="scss"></style> diff --git a/src/views/salesManagement/salesLedger/index.vue b/src/views/salesManagement/salesLedger/index.vue index d9e5747..0e0a1fe 100644 --- a/src/views/salesManagement/salesLedger/index.vue +++ b/src/views/salesManagement/salesLedger/index.vue @@ -3,14 +3,8 @@ <div class="search_form"> <div> <span class="search_title">瀹㈡埛鍚嶇О锛�</span> - <el-input - v-model="searchForm.customerName" - style="width: 240px" - placeholder="璇疯緭鍏�" - @change="handleQuery" - clearable - prefix-icon="Search" - /> + <el-input v-model="searchForm.customerName" style="width: 240px" placeholder="璇疯緭鍏�" @change="handleQuery" + clearable prefix-icon="Search" /> <el-button type="primary" @click="handleQuery" style="margin-left: 10px">鎼滅储</el-button> </div> <div> @@ -20,64 +14,59 @@ </div> </div> <div class="table_list"> - <el-table :data="tableData" border v-loading="tableLoading" - @selection-change="handleSelectionChange" - :expand-row-keys="expandedRowKeys" - :row-key="row => row.id" - show-summary - style="width: 100%" - :summary-method="summarizeMainTable" - @expand-change="expandChange" - height="calc(100vh - 18.5em)"> + <el-table :data="tableData" border v-loading="tableLoading" @selection-change="handleSelectionChange" + :expand-row-keys="expandedRowKeys" :row-key="row => row.id" show-summary style="width: 100%" + :summary-method="summarizeMainTable" @expand-change="expandChange" height="calc(100vh - 18.5em)"> <el-table-column align="center" type="selection" width="55" /> <el-table-column type="expand"> <template #default="props"> - <el-table :data="props.row.children" border - show-summary - :summary-method="summarizeChildrenTable"> + <el-table :data="props.row.children" border show-summary :summary-method="summarizeChildrenTable"> <el-table-column align="center" label="搴忓彿" type="index" width="60" /> - <el-table-column label="浜у搧澶х被" prop="productCategory" /> - <el-table-column label="瑙勬牸鍨嬪彿" prop="specificationModel" /> + <el-table-column label="浜у搧澶х被" prop="productCategory" /> + <el-table-column label="瑙勬牸鍨嬪彿" prop="specificationModel" /> <el-table-column label="鍗曚綅" prop="unit" /> - <el-table-column label="鏁伴噺" prop="quantity" /> - <el-table-column label="绋庣巼(%)" prop="taxRate" /> - <el-table-column label="鍚◣鍗曚环(鍏�)" prop="taxInclusiveUnitPrice" :formatter="formattedNumber"/> - <el-table-column label="鍚◣鎬讳环(鍏�)" prop="taxInclusiveTotalPrice" :formatter="formattedNumber"/> - <el-table-column label="涓嶅惈绋庢�讳环(鍏�)" prop="taxExclusiveTotalPrice" :formatter="formattedNumber"/> + <el-table-column label="鏁伴噺" prop="quantity" /> + <el-table-column label="绋庣巼(%)" prop="taxRate" /> + <el-table-column label="鍚◣鍗曚环(鍏�)" prop="taxInclusiveUnitPrice" :formatter="formattedNumber" /> + <el-table-column label="鍚◣鎬讳环(鍏�)" prop="taxInclusiveTotalPrice" :formatter="formattedNumber" /> + <el-table-column label="涓嶅惈绋庢�讳环(鍏�)" prop="taxExclusiveTotalPrice" :formatter="formattedNumber" /> </el-table> </template> </el-table-column> <el-table-column align="center" label="搴忓彿" type="index" width="60" /> - <el-table-column label="閿�鍞悎鍚屽彿" prop="salesContractNo" width="180" show-overflow-tooltip/> - <el-table-column label="瀹㈡埛鍚堝悓鍙�" prop="customerContractNo" width="180" show-overflow-tooltip/> - <el-table-column label="瀹㈡埛鍚嶇О" prop="customerName" width="300" show-overflow-tooltip/> - <el-table-column label="涓氬姟鍛�" prop="salesman" width="100" show-overflow-tooltip/> - <el-table-column label="椤圭洰鍚嶇О" prop="projectName" width="180" show-overflow-tooltip/> - <el-table-column label="鍚堝悓閲戦(鍏�)" prop="contractAmount" width="180" show-overflow-tooltip :formatter="formattedNumber"/> - <el-table-column label="褰曞叆浜�" prop="entryPersonName" width="100" show-overflow-tooltip/> - <el-table-column label="褰曞叆鏃ユ湡" prop="entryDate" width="120" show-overflow-tooltip/> - <el-table-column label="绛捐鏃ユ湡" prop="executionDate" width="120" show-overflow-tooltip/> + <el-table-column label="閿�鍞悎鍚屽彿" prop="salesContractNo" width="180" show-overflow-tooltip /> + <el-table-column label="瀹㈡埛鍚堝悓鍙�" prop="customerContractNo" width="180" show-overflow-tooltip /> + <el-table-column label="瀹㈡埛鍚嶇О" prop="customerName" width="300" show-overflow-tooltip /> + <el-table-column label="涓氬姟鍛�" prop="salesman" width="100" show-overflow-tooltip /> + <el-table-column label="椤圭洰鍚嶇О" prop="projectName" width="180" show-overflow-tooltip /> + <el-table-column label="鍚堝悓閲戦(鍏�)" prop="contractAmount" width="180" show-overflow-tooltip + :formatter="formattedNumber" /> + <el-table-column label="褰曞叆浜�" prop="entryPersonName" width="100" show-overflow-tooltip /> + <el-table-column label="褰曞叆鏃ユ湡" prop="entryDate" width="120" show-overflow-tooltip /> + <el-table-column label="绛捐鏃ユ湡" prop="executionDate" width="120" show-overflow-tooltip /> <el-table-column fixed="right" label="鎿嶄綔" min-width="60" align="center"> <template #default="scope"> <el-button link type="primary" size="small" @click="openForm('edit', scope.row);">缂栬緫</el-button> </template> </el-table-column> </el-table> - <pagination v-show="total > 0" :total="total" layout="total, sizes, prev, pager, next, jumper" :page="page.current" - :limit="page.size" @pagination="paginationChange" /> + <pagination v-show="total > 0" :total="total" layout="total, sizes, prev, pager, next, jumper" + :page="page.current" :limit="page.size" @pagination="paginationChange" /> </div> - <el-dialog v-model="dialogFormVisible" :title="operationType === 'add' ? '鏂板閿�鍞彴璐﹂〉闈�' : '缂栬緫閿�鍞彴璐﹂〉闈�'" width="70%" @close="closeDia"> + <el-dialog v-model="dialogFormVisible" :title="operationType === 'add' ? '鏂板閿�鍞彴璐﹂〉闈�' : '缂栬緫閿�鍞彴璐﹂〉闈�'" width="70%" + @close="closeDia"> <el-form :model="form" label-width="140px" label-position="top" :rules="rules" ref="formRef"> <el-row :gutter="30"> <el-col :span="12"> <el-form-item label="閿�鍞悎鍚屽彿锛�" prop="salesContractNo"> - <el-input v-model="form.salesContractNo" placeholder="鑷姩鐢熸垚" clearable disabled/> + <el-input v-model="form.salesContractNo" placeholder="鑷姩鐢熸垚" clearable disabled /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="涓氬姟鍛橈細" prop="salesman"> <el-select v-model="form.salesman" placeholder="璇烽�夋嫨" clearable> - <el-option v-for="item in userList" :key="item.nickName" :label="item.nickName" :value="item.nickName"/> + <el-option v-for="item in userList" :key="item.nickName" :label="item.nickName" + :value="item.nickName" /> </el-select> </el-form-item> </el-col> @@ -85,14 +74,14 @@ <el-row :gutter="30"> <el-col :span="12"> <el-form-item label="瀹㈡埛鍚堝悓鍙凤細" prop="customerContractNo"> - <el-input v-model="form.customerContractNo" placeholder="璇疯緭鍏�" clearable/> + <el-input v-model="form.customerContractNo" placeholder="璇疯緭鍏�" clearable /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="瀹㈡埛鍚嶇О锛�" prop="customerId"> <el-select v-model="form.customerId" placeholder="璇烽�夋嫨" clearable> <el-option v-for="item in customerOption" :key="item.id" :label="item.customerName" :value="item.id"> - {{item.customerName + '鈥斺��' + item.taxpayerIdentificationNumber}} + {{ item.customerName + '鈥斺��' + item.taxpayerIdentificationNumber }} </el-option> </el-select> </el-form-item> @@ -101,13 +90,13 @@ <el-row :gutter="30"> <el-col :span="12"> <el-form-item label="椤圭洰鍚嶇О锛�" prop="projectName"> - <el-input v-model="form.projectName" placeholder="璇疯緭鍏�" clearable/> + <el-input v-model="form.projectName" placeholder="璇疯緭鍏�" clearable /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="褰曞叆浜猴細" prop="entryPerson"> <el-select v-model="form.entryPerson" placeholder="璇烽�夋嫨" clearable @change="changs" disabled> - <el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId"/> + <el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId" /> </el-select> </el-form-item> </el-col> @@ -115,29 +104,14 @@ <el-row :gutter="30"> <el-col :span="12"> <el-form-item label="褰曞叆鏃ユ湡锛�" prop="entryDate"> - <el-date-picker - style="width: 100%" - v-model="form.entryDate" - value-format="YYYY-MM-DD" - format="YYYY-MM-DD" - type="date" - placeholder="璇烽�夋嫨" - clearable - disabled - /> + <el-date-picker style="width: 100%" v-model="form.entryDate" value-format="YYYY-MM-DD" format="YYYY-MM-DD" + type="date" placeholder="璇烽�夋嫨" clearable disabled /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="绛捐鏃ユ湡锛�" prop="executionDate"> - <el-date-picker - style="width: 100%" - v-model="form.executionDate" - value-format="YYYY-MM-DD" - format="YYYY-MM-DD" - type="date" - placeholder="璇烽�夋嫨" - clearable - /> + <el-date-picker style="width: 100%" v-model="form.executionDate" value-format="YYYY-MM-DD" + format="YYYY-MM-DD" type="date" placeholder="璇烽�夋嫨" clearable /> </el-form-item> </el-col> </el-row> @@ -147,7 +121,8 @@ <el-button plain type="danger" @click="deleteProduct">鍒犻櫎</el-button> </el-form-item> </el-row> - <el-table :data="productData" border @selection-change="productSelected" show-summary :summary-method="summarizeMainTable"> + <el-table :data="productData" border @selection-change="productSelected" show-summary + :summary-method="summarizeMainTable"> <el-table-column align="center" type="selection" width="55" /> <el-table-column align="center" label="搴忓彿" type="index" width="60" /> <el-table-column label="浜у搧澶х被" prop="productCategory" /> @@ -155,9 +130,9 @@ <el-table-column label="鍗曚綅" prop="unit" /> <el-table-column label="鏁伴噺" prop="quantity" /> <el-table-column label="绋庣巼(%)" prop="taxRate" /> - <el-table-column label="鍚◣鍗曚环(鍏�)" prop="taxInclusiveUnitPrice" :formatter="formattedNumber"/> - <el-table-column label="鍚◣鎬讳环(鍏�)" prop="taxInclusiveTotalPrice" :formatter="formattedNumber"/> - <el-table-column label="涓嶅惈绋庢�讳环(鍏�)" prop="taxExclusiveTotalPrice" :formatter="formattedNumber"/> + <el-table-column label="鍚◣鍗曚环(鍏�)" prop="taxInclusiveUnitPrice" :formatter="formattedNumber" /> + <el-table-column label="鍚◣鎬讳环(鍏�)" prop="taxInclusiveTotalPrice" :formatter="formattedNumber" /> + <el-table-column label="涓嶅惈绋庢�讳环(鍏�)" prop="taxExclusiveTotalPrice" :formatter="formattedNumber" /> <el-table-column fixed="right" label="鎿嶄綔" min-width="60" align="center"> <template #default="scope"> <el-button link type="primary" size="small" @click="openProductForm('edit', scope.row);">缂栬緫</el-button> @@ -167,25 +142,16 @@ <el-row :gutter="30"> <el-col :span="24"> <el-form-item label="澶囨敞路锛�" prop="remark"> - <el-input v-model="form.remark" placeholder="璇疯緭鍏�" clearable type="textarea" :rows="2"/> + <el-input v-model="form.remark" placeholder="璇疯緭鍏�" clearable type="textarea" :rows="2" /> </el-form-item> </el-col> </el-row> <el-row :gutter="30"> <el-col :span="24"> <el-form-item label="闄勪欢鏉愭枡锛�" prop="remark"> - <el-upload - v-model:file-list="fileList" - :action="upload.url" - multiple - ref="fileUpload" - auto-upload - :headers="upload.headers" - :before-upload="handleBeforeUpload" - :on-error="handleUploadError" - :on-success="handleUploadSuccess" - :on-remove="handleRemove" - > + <el-upload v-model:file-list="fileList" :action="upload.url" multiple ref="fileUpload" auto-upload + :headers="upload.headers" :before-upload="handleBeforeUpload" :on-error="handleUploadError" + :on-success="handleUploadSuccess" :on-remove="handleRemove"> <el-button type="primary">涓婁紶</el-button> <template #tip> <div class="el-upload__tip"> @@ -204,27 +170,17 @@ </div> </template> </el-dialog> - <el-dialog v-model="productFormVisible" :title="productOperationType === 'add' ? '鏂板浜у搧' : '缂栬緫浜у搧'" width="40%" @close="closeProductDia"> - <el-form :model="productForm" - label-width="140px" - label-position="top" - :rules="productRules" - ref="productFormRef"> + <el-dialog v-model="productFormVisible" :title="productOperationType === 'add' ? '鏂板浜у搧' : '缂栬緫浜у搧'" width="40%" + @close="closeProductDia"> + <el-form :model="productForm" label-width="140px" label-position="top" :rules="productRules" ref="productFormRef"> <el-row :gutter="30"> <el-col :span="24"> <el-form-item label="浜у搧澶х被锛�" prop="productCategory"> <!-- <el-select v-model="productForm.productCategory" placeholder="璇烽�夋嫨" clearable> <el-option v-for="item in userList" :key="item.nickName" :label="item.nickName" :value="item.nickName"/> </el-select> --> - <el-tree-select - v-model="productForm.productCategory" - placeholder="璇烽�夋嫨" clearable - check-strictly - @change="getModels" - :data="productOptions" - :render-after-expand="false" - style="width: 100%" - /> + <el-tree-select v-model="productForm.productCategory" placeholder="璇烽�夋嫨" clearable check-strictly + @change="getModels" :data="productOptions" :render-after-expand="false" style="width: 100%" /> </el-form-item> </el-col> @@ -233,7 +189,7 @@ <el-col :span="24"> <el-form-item label="瑙勬牸鍨嬪彿锛�" prop="productModelId"> <el-select v-model="productForm.productModelId" placeholder="璇烽�夋嫨" clearable @change="getProductModel"> - <el-option v-for="item in modelOptions" :key="item.id" :label="item.model" :value="item.id"/> + <el-option v-for="item in modelOptions" :key="item.id" :label="item.model" :value="item.id" /> </el-select> </el-form-item> </el-col> @@ -241,12 +197,13 @@ <el-row :gutter="30"> <el-col :span="12"> <el-form-item label="鍗曚綅锛�" prop="unit"> - <el-input v-model="productForm.unit" placeholder="璇疯緭鍏�" clearable/> + <el-input v-model="productForm.unit" placeholder="璇疯緭鍏�" clearable /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="鏁伴噺锛�" prop="quantity"> - <el-input type="number" :step="0.1" :min="0" v-model="productForm.quantity" placeholder="璇疯緭鍏�" clearable @change="mathNum" /> + <el-input type="number" :step="0.1" :min="0" v-model="productForm.quantity" placeholder="璇疯緭鍏�" clearable + @change="mathNum" /> </el-form-item> </el-col> </el-row> @@ -258,10 +215,10 @@ </el-col> <el-col :span="12"> <el-form-item label="绋庣巼(%)锛�" prop="taxRate"> - <el-select v-model="productForm.taxRate" placeholder="璇烽�夋嫨" clearable @change="mathNum"> - <el-option label="1" value="1"/> - <el-option label="6" value="6"/> - <el-option label="13" value="13"/> + <el-select v-model="productForm.taxRate" placeholder="璇烽�夋嫨" clearable @change="mathNum"> + <el-option label="1" value="1" /> + <el-option label="6" value="6" /> + <el-option label="13" value="13" /> </el-select> </el-form-item> </el-col> @@ -282,8 +239,8 @@ <el-col :span="12"> <el-form-item label="鍙戠エ绫诲瀷锛�" prop="invoiceType"> <el-select v-model="productForm.invoiceType" placeholder="璇烽�夋嫨" clearable> - <el-option label="澧炴櫘绁�" value="澧炴櫘绁�"/> - <el-option label="澧炰笓绁�" value="澧炰笓绁�"/> + <el-option label="澧炴櫘绁�" value="澧炴櫘绁�" /> + <el-option label="澧炰笓绁�" value="澧炰笓绁�" /> </el-select> </el-form-item> </el-col> @@ -303,9 +260,9 @@ import { getToken } from "@/utils/auth" import pagination from '@/components/PIMTable/Pagination.vue' import { ref } from 'vue' -import {ElMessageBox } from "element-plus"; +import { ElMessageBox } from "element-plus"; import useUserStore from '@/store/modules/user' -import {userListNoPage} from "@/api/system/user.js"; +import { userListNoPage } from "@/api/system/user.js"; import { ledgerListPage, productList, @@ -313,7 +270,7 @@ addOrUpdateSalesLedger, getSalesLedgerWithProducts, delLedger, addOrUpdateSalesLedgerProduct, delProduct, delLedgerFile } from "@/api/salesManagement/salesLedger.js"; -import {modelList, productTreeList} from "@/api/basicData/product.js"; +import { modelList, productTreeList } from "@/api/basicData/product.js"; const userStore = useUserStore() const { proxy } = getCurrentInstance() const tableData = ref([]) @@ -349,7 +306,7 @@ entryDate: '', maintenanceTime: '', productData: [], - executionDate:'' + executionDate: '' }, rules: { salesman: [{ required: true, message: "璇烽�夋嫨", trigger: "change" }], @@ -411,7 +368,7 @@ } const getList = () => { tableLoading.value = true - ledgerListPage({...searchForm.value, ...page}).then(res => { + ledgerListPage({ ...searchForm.value, ...page }).then(res => { tableLoading.value = false tableData.value = res.records tableData.value.map(item => { @@ -432,13 +389,13 @@ return parseFloat(cellValue).toFixed(2); }; // 鑾峰彇tree瀛愭暟鎹� -const getModels =(value) => { +const getModels = (value) => { productForm.value.productCategory = findNodeById(productOptions.value, value) - modelList({id: value}).then(res => { + modelList({ id: value }).then(res => { modelOptions.value = res }) } -const getProductModel =(value) => { +const getProductModel = (value) => { console.log('value', value) const index = modelOptions.value.findIndex(item => item.id === value); if (index !== -1) { @@ -482,7 +439,7 @@ // 杩囨护鎺夊瓙鏁版嵁 selectedRows.value = selection.filter(item => item.children !== undefined); - console.log('selection',selectedRows.value) + console.log('selection', selectedRows.value) } const productSelected = (selectedRows) => { productSelectedRows.value = selectedRows @@ -493,13 +450,13 @@ if (expandedRows.length > 0) { expandedRowKeys.value = [] try { - productList({salesLedgerId: row.id, type: 1}).then(res => { - const index = tableData.value.findIndex(item => item.id === row.id); - if (index > -1) { - tableData.value[index].children = res; - } - expandedRowKeys.value.push(row.id) - }) + productList({ salesLedgerId: row.id, type: 1 }).then(res => { + const index = tableData.value.findIndex(item => item.id === row.id); + if (index > -1) { + tableData.value[index].children = res; + } + expandedRowKeys.value.push(row.id) + }) } catch (error) { console.log(error) } @@ -509,7 +466,7 @@ } // 涓昏〃鍚堣鏂规硶 const summarizeMainTable = (param) => { - return proxy.summarizeTable(param, ['contractAmount','taxInclusiveTotalPrice','taxExclusiveTotalPrice']); + return proxy.summarizeTable(param, ['contractAmount', 'taxInclusiveTotalPrice', 'taxExclusiveTotalPrice']); }; // 瀛愯〃鍚堣鏂规硶 const summarizeChildrenTable = (param) => { @@ -525,12 +482,12 @@ customerList().then(res => { customerOption.value = res }) - console.log('userStore.id',userStore.id) + console.log('userStore.id', userStore.id) form.value.entryPerson = userStore.id if (type === 'edit') { currentId.value = row.id; - getSalesLedgerWithProducts({id: row.id, type: 1}).then(res => { - form.value = {...res} + getSalesLedgerWithProducts({ id: row.id, type: 1 }).then(res => { + form.value = { ...res } form.value.entryPerson = Number(res.entryPerson) productData.value = form.value.productData fileList.value = form.value.salesLedgerFiles @@ -545,7 +502,7 @@ form.value.entryDate = getCurrentDate() // 璁剧疆榛樿褰曞叆鏃ユ湡涓哄綋鍓嶆棩鏈� dialogFormVisible.value = true } -function changs(val){ +function changs(val) { console.log(val); } // 涓婁紶鍓嶆牎妫� @@ -575,7 +532,7 @@ } } // 绉婚櫎鏂囦欢 -function handleRemove (file) { +function handleRemove(file) { if (operationType.value === 'edit') { let ids = [] ids.push(file.id) @@ -619,7 +576,7 @@ productForm.value = {} proxy.resetForm("productFormRef") if (type === 'edit') { - productForm.value = {...row} + productForm.value = { ...row } } productFormVisible.value = true getProductOptions() @@ -631,7 +588,7 @@ if (operationType.value === "edit") { submitProductEdit() } else { - productData.value.push({...productForm.value}) + productData.value.push({ ...productForm.value }) closeProductDia() } } @@ -642,7 +599,7 @@ addOrUpdateSalesLedgerProduct(productForm.value).then(res => { proxy.$modal.msgSuccess("鎻愪氦鎴愬姛") closeProductDia() - getSalesLedgerWithProducts({id: currentId.value, type: 1}).then(res => { + getSalesLedgerWithProducts({ id: currentId.value, type: 1 }).then(res => { productData.value = res.productData }) }) @@ -666,17 +623,17 @@ ids = productSelectedRows.value.map(item => item.id); } ElMessageBox.confirm( - '閫変腑鐨勫唴瀹瑰皢琚垹闄わ紝鏄惁纭鍒犻櫎锛�', - '瀵煎嚭', { - confirmButtonText: '纭', - cancelButtonText: '鍙栨秷', - type: 'warning', - } + '閫変腑鐨勫唴瀹瑰皢琚垹闄わ紝鏄惁纭鍒犻櫎锛�', + '瀵煎嚭', { + confirmButtonText: '纭', + cancelButtonText: '鍙栨秷', + type: 'warning', + } ).then(() => { delProduct(ids).then(res => { proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛") closeProductDia() - getSalesLedgerWithProducts({id: currentId.value, type: 1}).then(res => { + getSalesLedgerWithProducts({ id: currentId.value, type: 1 }).then(res => { productData.value = res.productData }) }) @@ -694,12 +651,12 @@ // 瀵煎嚭 const handleOut = () => { ElMessageBox.confirm( - '閫変腑鐨勫唴瀹瑰皢琚鍑猴紝鏄惁纭瀵煎嚭锛�', - '瀵煎嚭', { - confirmButtonText: '纭', - cancelButtonText: '鍙栨秷', - type: 'warning', - } + '閫変腑鐨勫唴瀹瑰皢琚鍑猴紝鏄惁纭瀵煎嚭锛�', + '瀵煎嚭', { + confirmButtonText: '纭', + cancelButtonText: '鍙栨秷', + type: 'warning', + } ).then(() => { proxy.download("/sales/ledger/export", {}, '閿�鍞彴璐�.xlsx') }).catch(() => { @@ -716,12 +673,12 @@ return } ElMessageBox.confirm( - '閫変腑鐨勫唴瀹瑰皢琚垹闄わ紝鏄惁纭鍒犻櫎锛�', - '瀵煎嚭', { - confirmButtonText: '纭', - cancelButtonText: '鍙栨秷', - type: 'warning', - } + '閫変腑鐨勫唴瀹瑰皢琚垹闄わ紝鏄惁纭鍒犻櫎锛�', + '瀵煎嚭', { + confirmButtonText: '纭', + cancelButtonText: '鍙栨秷', + type: 'warning', + } ).then(() => { delLedger(ids).then(res => { proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛") @@ -741,16 +698,16 @@ } const mathNum = () => { - console.log('productForm.value',productForm.value) - if(!productForm.value.taxInclusiveUnitPrice){ + console.log('productForm.value', productForm.value) + if (!productForm.value.taxInclusiveUnitPrice) { return } - if(!productForm.value.quantity){ + if (!productForm.value.quantity) { return } // 鍚◣鎬讳环璁$畻 productForm.value.taxInclusiveTotalPrice = proxy.calculateTaxIncludeTotalPrice(productForm.value.taxInclusiveUnitPrice, productForm.value.quantity) - if(productForm.value.taxRate){ + if (productForm.value.taxRate) { // 涓嶅惈绋庢�讳环璁$畻 productForm.value.taxExclusiveTotalPrice = proxy.calculateTaxExclusiveTotalPrice(productForm.value.taxInclusiveTotalPrice, productForm.value.taxRate) } @@ -758,6 +715,4 @@ getList() </script> -<style scoped lang="scss"> - -</style> +<style scoped lang="scss"></style> -- Gitblit v1.9.3