index.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286
  1. <template>
  2. <el-container class="hc-layout-box">
  3. <div class="hc-layout-bg-box" v-show="MenuBarKey === 'home-index'">
  4. <img :src="HomeTheme.bg" alt="" id="imagebox" v-if="HomeTheme.bg" crossOrigin="anonymous">
  5. </div>
  6. <el-aside :width="isCollapse?'120px':'250px'" class="hc-aside-box" :class="[isCollapse?'collapse':'', MenuBarKey]">
  7. <div class="hc-aside-logo-box" @click="logoClick">
  8. <img class="logo-img" :src="getAssetsHomeFile(`${AppColor.name}.png`)" alt="">
  9. <img class="logo-img-1" :src="MenuBarKey === 'home-index' ? NameWhite : NameDark" alt="" v-show="!isCollapse">
  10. </div>
  11. <div class="hc-aside-menu-box">
  12. <el-scrollbar>
  13. <MenuBar :datas="MenuBarData" :cur="MenuBarKey" :collapse="isCollapse" @change="MenuBarChange"/>
  14. </el-scrollbar>
  15. </div>
  16. <div class="hc-aside-bar-box">
  17. <div :class="isCollapse?'':'active'" @click="collapseChange(false)">
  18. <HcIcon name="menu-unfold"/>
  19. </div>
  20. <div :class="isCollapse?'active':''" @click="collapseChange(true)" v-show="!isCollapse">
  21. <HcIcon name="menu-fold"/>
  22. </div>
  23. </div>
  24. </el-aside>
  25. <el-container class="hc-container-view" :class="MenuBarKey === 'home-index'?'home':''">
  26. <el-header class="hc-header-view">
  27. <div class="hc-header-page-name">
  28. {{RoutesTitle}}
  29. <input multiple type="file" id="file" @change="handleChange" v-if="userInfo?.user_id == '1541381503819694081'">
  30. </div>
  31. <div class="hc-header-content">
  32. <div class="hc-header-cascader-box">
  33. <div class="project-name-box">{{projectInfo.projectAlias}} / {{contractInfo.name}}</div>
  34. <el-cascader ref="ElCascaderRef" v-model="projectValue" :options="projectContract" :props="projectProps" placeholder="请选择项目" @change="projectContractChange"/>
  35. </div>
  36. <HelpInfoBar></HelpInfoBar>
  37. <ConfigBar></ConfigBar>
  38. <UserInfoBar></UserInfoBar>
  39. </div>
  40. </el-header>
  41. <el-main class="hc-main-box" id="hc-main-box">
  42. <router-view v-slot="{ Component }" v-if="reloadRouter">
  43. <transition name="fade-transform">
  44. <keep-alive include="ProductList">
  45. <component :is="Component" />
  46. </keep-alive>
  47. </transition>
  48. </router-view>
  49. </el-main>
  50. </el-container>
  51. </el-container>
  52. </template>
  53. <script setup>
  54. import {onMounted, ref, nextTick, watch} from "vue";
  55. import {useRouter, useRoute} from 'vue-router'
  56. import {useAppStore} from "~src/store";
  57. import MenuBar from "./modules/MenuBar.vue"
  58. import HelpInfoBar from "./modules/HelpInfoBar.vue"
  59. import UserInfoBar from "./modules/UserInfoBar.vue"
  60. import ConfigBar from "./modules/ConfigBar.vue"
  61. import {initButtons,initProjectContract} from "~sto/app";
  62. import NameDark from "~src/assets/logo/name-dark.png";
  63. import NameWhite from "~src/assets/logo/name-white.png";
  64. //初始组合式
  65. const router = useRouter()
  66. const useRoutes = useRoute()
  67. const useAppState = useAppStore()
  68. //路由参数
  69. const routerQuery = useRoutes?.query;
  70. const reloadRouter = ref(true)
  71. const BarMenuKey = useRoutes?.name ?? 'home-index';
  72. const BarMenuTitle = useRoutes?.meta?.title ?? '';
  73. //主题和色调变量
  74. const HomeTheme = ref(useAppState.getHomeTheme);
  75. const AppColor = ref(useAppState.getColor);
  76. //顶部菜单数据和相关处理
  77. const MenuBarKey = ref(BarMenuKey);
  78. const RoutesName = ref(BarMenuKey);
  79. const RoutesTitle = ref(BarMenuTitle);
  80. const MenuBarData = ref(useAppState.getMenus)
  81. const isCollapse = ref(useAppState.getCollapse)
  82. const userInfo = ref(useAppState.getUserInfo);
  83. //项目合同段
  84. const projectInfo = ref({});
  85. const contractInfo = ref({});
  86. const projectContract = ref([])
  87. const projectValue = ref(null);
  88. const projectProps = ref({
  89. value: 'id',
  90. label: 'projectAlias',
  91. children: 'contractInfoList',
  92. })
  93. //渲染完成
  94. onMounted(() => {
  95. initButtons()
  96. initProjectContract()
  97. const info = useAppState.getProjectContract || []
  98. projectContractData(info);
  99. setIsCollapse(RoutesName.value)
  100. })
  101. //监听
  102. watch(() => [
  103. useAppState.getProjectContract,
  104. useAppState.getMenus,
  105. useAppState.getHomeTheme,
  106. useAppState.getColor,
  107. useRoutes?.name,
  108. useRoutes?.meta?.title,
  109. useAppState.getCollapse,
  110. ], ([projectContractArr, userMenus, theme, ColorVal, RouteName, RouteTitle, collapse]) => {
  111. MenuBarData.value = userMenus
  112. HomeTheme.value = theme
  113. AppColor.value = ColorVal
  114. RoutesName.value = RouteName ?? 'home-index'
  115. MenuBarKey.value = RouteName ?? 'home-index'
  116. RoutesTitle.value = RouteTitle ?? ''
  117. isCollapse.value = collapse
  118. setIsCollapse(RoutesName.value)
  119. projectContractData(projectContractArr || []);
  120. })
  121. //设置折叠
  122. const setIsCollapse = (key) => {
  123. if (key === 'data-fill-wbs') {
  124. isCollapse.value = true
  125. useAppState.setCollapse(true)
  126. }
  127. }
  128. //是否折叠
  129. const collapseChange = (bool) => {
  130. isCollapse.value = bool
  131. useAppState.setCollapse(bool)
  132. }
  133. //处理项目合同段数据
  134. const projectContractData = (projectContractData) => {
  135. if (projectContractData.length > 0) {
  136. //处理别名
  137. projectContractData.forEach(item => {
  138. let contractArr = item['contractInfoList'] || []
  139. contractArr.forEach(items => {
  140. items['projectAlias'] = items['name']
  141. })
  142. })
  143. //处理其他数据
  144. projectContract.value = projectContractData
  145. const projectId = useAppState.getProjectId //项目ID
  146. const contractId = useAppState.getContractId //合同段ID
  147. const UserProjectInfo = useAppState.getProjectInfo
  148. const UserContractInfo = useAppState.getContractInfo
  149. //查询缓存的选中ID是否存在
  150. const pid = projectContractData.findIndex(item => Number(item.id) === Number(projectId))
  151. const contractList = projectContractData[pid]?.contractInfoList || []
  152. const cid = contractList.findIndex(item => Number(item.id) === Number(contractId))
  153. //如果缓存的选中ID不存在
  154. if (cid === -1) {
  155. //取项目数组中的第一个数据
  156. let letProjectInfo = projectContractData[0];
  157. let contractInfoList = letProjectInfo?.contractInfoList || []
  158. let letContractInfo = contractInfoList[0] || {};
  159. projectValue.value = letContractInfo?.id
  160. projectInfo.value = letProjectInfo
  161. contractInfo.value = letContractInfo
  162. //设置缓存
  163. useAppState.setProjectInfo(letProjectInfo)
  164. useAppState.setContractInfo(letContractInfo)
  165. useAppState.setProjectId(letProjectInfo?.id)
  166. useAppState.setContractId(letContractInfo?.id)
  167. } else {
  168. projectValue.value = String(contractId)
  169. projectInfo.value = UserProjectInfo
  170. contractInfo.value = UserContractInfo
  171. }
  172. } else {
  173. projectContract.value = []
  174. projectValue.value = null
  175. projectInfo.value = {}
  176. contractInfo.value = {}
  177. }
  178. }
  179. //项目被选择
  180. const ElCascaderRef = ref(null)
  181. const projectContractChange = (val) => {
  182. const Nodes = ElCascaderRef.value.getCheckedNodes();
  183. const UserProjectInfo = Nodes[0].parent.data;
  184. const UserContractInfo = Nodes[0].data;
  185. //缓存项目数据
  186. useAppState.setProjectId(val[0])
  187. useAppState.setContractId(val[1])
  188. useAppState.setProjectInfo(UserProjectInfo)
  189. useAppState.setContractInfo(UserContractInfo)
  190. //更改界面更新
  191. projectInfo.value = UserProjectInfo
  192. contractInfo.value = UserContractInfo
  193. window.$message?.info('切换了项目,数据更新中');
  194. //刷新路由
  195. reloadRouter.value = false
  196. nextTick(()=>{
  197. reloadRouter.value = true
  198. })
  199. }
  200. //菜单被点击
  201. const MenuBarChange = (item) => {
  202. MenuBarKey.value = item?.code;
  203. setIsCollapse(item?.code)
  204. router.push({name: item?.code});
  205. }
  206. // 获取assets静态资源
  207. const getAssetsHomeFile = (url) => {
  208. const path = `../assets/icon/${url}`;
  209. const modules = import.meta.globEager("../assets/icon/*");
  210. return modules[path].default;
  211. }
  212. const handleChange = () => {
  213. let file = document.getElementById("file").files[0]; // 获取input上传的图片数据;
  214. let img = new Image();
  215. let url = window.URL.createObjectURL(file); // 得到bolb对象路径,可当成普通的文件路径一样使用,赋值给src;
  216. document.getElementById("imagebox").src = url;
  217. }
  218. //首页
  219. const logoClick = () => {
  220. router.push({name: 'home-index'});
  221. }
  222. </script>
  223. <style lang="scss" scoped>
  224. @import "./layout.scss";
  225. </style>
  226. <style lang="scss">
  227. .hc-layout-box .hc-container-view {
  228. .hc-header-view .hc-header-content .hc-header-cascader-box {
  229. .el-cascader {
  230. width: 100%;
  231. top: -10px;
  232. }
  233. .el-cascader .el-input .el-input__wrapper {
  234. padding: 4px 15px;
  235. border: 1px solid #00000000;
  236. border-radius: 100px;
  237. background: #f1f5f8;
  238. color: #202532;
  239. box-shadow: var(--hc-shadow);
  240. .el-input__inner, .el-input__suffix {
  241. color: #202532;
  242. }
  243. }
  244. .el-cascader .el-input.is-focus .el-input__wrapper {
  245. box-shadow: 4px 4px 8px 0 rgba(54,92,167,0.15), -4px -4px 8px 0px #ffffff;
  246. }
  247. .el-cascader .el-input .icon-arrow-down {
  248. font-size: 18px;
  249. font-weight: bold;
  250. }
  251. }
  252. &.home {
  253. .hc-header-view .hc-header-content .hc-header-cascader-box {
  254. .el-cascader .el-input .el-input__wrapper {
  255. background-color: #00000000;
  256. border: 1px solid white;
  257. box-shadow: initial;
  258. .el-input__inner, .el-input__suffix {
  259. color: white;
  260. }
  261. }
  262. .el-cascader .el-input.is-focus .el-input__wrapper {
  263. box-shadow: initial;
  264. }
  265. }
  266. }
  267. }
  268. </style>