Header.vue 45 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091
  1. <template>
  2. <header class="z-40" :class="{ dark: store.state.semidark && store.state.menu === 'horizontal' }">
  3. <div class="shadow-sm">
  4. <div class="relative bg-white flex w-full items-center px-5 py-2.5 dark:bg-[#0e1726]">
  5. <div class="horizontal-logo flex lg:hidden justify-between items-center ltr:mr-2 rtl:ml-2">
  6. <router-link to="/dashboard" class="main-logo flex items-center shrink-0">
  7. <img class="w-full h-12 ltr:-ml-1 rtl:-mr-1 inline" src="https://www.raycos.com.cn/theme/m049/images/logo.png" alt="" />
  8. <!-- <span class="text-2xl ltr:ml-1.5 rtl:mr-1.5 font-semibold align-middle hidden md:inline dark:text-white-light transition-all duration-300"
  9. >V3studio App</span
  10. > -->
  11. </router-link>
  12. <!-- 原导航 -->
  13. <a
  14. href="javascript:;"
  15. class="collapse-icon flex-none dark:text-[#d0d2d6] hover:text-primary dark:hover:text-primary flex lg:hidden ltr:ml-2 rtl:mr-2 p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:bg-white-light/90 dark:hover:bg-dark/60"
  16. @click="toggleSidebars"
  17. >
  18. <icon-menu class="w-5 h-5" />
  19. </a>
  20. </div>
  21. <!-- 头部中间功能--待开发 -->
  22. <div class="ltr:mr-2 rtl:ml-2 hidden sm:block">
  23. <!-- <ul class="flex items-center space-x-2 rtl:space-x-reverse dark:text-[#d0d2d6]">
  24. <li>
  25. <router-link
  26. to=""
  27. class="block p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:text-primary hover:bg-white-light/90 dark:hover:bg-dark/60"
  28. >
  29. <icon-calendar />
  30. </router-link>
  31. </li>
  32. <li>
  33. <router-link
  34. to=""
  35. class="block p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:text-primary hover:bg-white-light/90 dark:hover:bg-dark/60"
  36. >
  37. <icon-edit />
  38. </router-link>
  39. </li>
  40. <li>
  41. <router-link
  42. to=""
  43. class="block p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:text-primary hover:bg-white-light/90 dark:hover:bg-dark/60"
  44. >
  45. <icon-chat-notification />
  46. </router-link>
  47. </li>
  48. </ul> -->
  49. </div>
  50. <!-- items-center -->
  51. <div class="sm:flex-1 ltr:sm:ml-0 ltr:ml-auto sm:rtl:mr-0 rtl:mr-auto flex space-x-1.5 lg:space-x-2 rtl:space-x-reverse dark:text-[#d0d2d6]">
  52. <div class="sm:ltr:mr-auto sm:rtl:ml-auto">
  53. <form
  54. class="sm:relative absolute inset-x-0 sm:top-0 top-1/2 sm:translate-y-0 -translate-y-1/2 sm:mx-0 mx-4 z-10 sm:block hidden"
  55. :class="{ '!block': search }"
  56. @submit.prevent="search = false"
  57. ></form>
  58. <button
  59. type="button"
  60. class="search_btn sm:hidden p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:bg-white-light/90 dark:hover:bg-dark/60"
  61. @click="search = !search"
  62. >
  63. <icon-search class="w-4.5 h-4.5 mx-auto dark:text-[#d0d2d6]" />
  64. </button>
  65. </div>
  66. <a href="javascript:;" v-if="superMenu == 'compan' && founder == '1'" @click="getBranch('super')"> 返回</a>
  67. <div>
  68. <a
  69. href="javascript:;"
  70. v-show="store.state.theme === 'light'"
  71. class="flex items-center p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:text-primary hover:bg-white-light/90 dark:hover:bg-dark/60"
  72. @click="toggleTheme('dark')"
  73. >
  74. <icon-sun />
  75. </a>
  76. <a
  77. href="javascript:;"
  78. v-show="store.state.theme === 'dark'"
  79. class="flex items-center p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:text-primary hover:bg-white-light/90 dark:hover:bg-dark/60"
  80. @click="toggleTheme('system')"
  81. >
  82. <icon-moon />
  83. </a>
  84. <a
  85. href="javascript:;"
  86. v-show="store.state.theme === 'system'"
  87. class="flex items-center p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:text-primary hover:bg-white-light/90 dark:hover:bg-dark/60"
  88. @click="toggleTheme('dark')"
  89. >
  90. <icon-sun />
  91. </a>
  92. </div>
  93. <div class="dropdown shrink-0">
  94. <Popper :placement="store.state.rtlClass === 'rtl' ? 'bottom-end' : 'bottom-start'" offsetDistance="8">
  95. <button
  96. type="button"
  97. class="pt-2 block p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:text-primary hover:bg-white-light/90 dark:hover:bg-dark/60"
  98. >
  99. <img :src="currentFlag" alt="flag" class="w-5 h-5 object-cover rounded-full" />
  100. </button>
  101. <template #content="{ close }">
  102. <ul class="!px-2 text-dark dark:text-white-dark grid grid-cols-2 gap-2 font-semibold dark:text-white-light/90 w-[280px]">
  103. <template v-for="item in store.state.languageList" :key="item.code">
  104. <li>
  105. <button
  106. type="button"
  107. class="w-full hover:text-primary"
  108. :class="{ 'bg-primary/10 text-primary': i18n.locale === item.code }"
  109. @click="changeLanguage(item), close()"
  110. >
  111. <img class="w-5 h-5 object-cover rounded-full" :src="`/assets/images/flags/${item.code.toUpperCase()}.svg`" alt="" />
  112. <span class="ltr:ml-3 rtl:mr-3">{{ item.name }}</span>
  113. </button>
  114. </li>
  115. </template>
  116. </ul>
  117. </template>
  118. </Popper>
  119. </div>
  120. <div class="dropdown shrink-0 mr-2">
  121. <Popper :placement="store.state.rtlClass === 'rtl' ? 'bottom-start' : 'bottom-end'" offsetDistance="0">
  122. <el-badge :value="countNot" :hidden="countNot == 0" class="item">
  123. <button
  124. type="button"
  125. class="pt-2 block p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:text-primary hover:bg-white-light/90 dark:hover:bg-dark/60"
  126. @click="goNotify"
  127. >
  128. <icon-mail-dot />
  129. </button>
  130. </el-badge>
  131. <!-- <template #content="{ close }">
  132. <ul class="top-11 !py-0 text-dark dark:text-white-dark w-[300px] sm:w-[375px] text-xs">
  133. <li class="mb-5">
  134. <div class="overflow-hidden relative rounded-t-md !p-5 text-white">
  135. <div class="absolute h-full w-full bg-[url('/assets/images/menu-heade.jpg')] bg-no-repeat bg-center bg-cover inset-0"></div>
  136. <h4 class="font-semibold relative z-10 text-lg">Messages</h4>
  137. </div>
  138. </li>
  139. <template v-for="msg in messages" :key="msg.id">
  140. <li>
  141. <div class="flex items-center py-3 px-5">
  142. <div v-html="msg.image"></div>
  143. <span class="px-3 dark:text-gray-500">
  144. <div class="font-semibold text-sm dark:text-white-light/90" v-text="msg.title"></div>
  145. <div v-text="msg.message"></div>
  146. </span>
  147. <span
  148. class="font-semibold bg-white-dark/20 rounded text-dark/60 px-1 ltr:ml-auto rtl:mr-auto whitespace-pre dark:text-white-dark ltr:mr-2 rtl:ml-2"
  149. v-text="msg.time"
  150. ></span>
  151. <button type="button" class="text-neutral-300 hover:text-danger" @click="removeMessage(msg.id)">
  152. <icon-x-circle />
  153. </button>
  154. </div>
  155. </li>
  156. </template>
  157. <template v-if="messages.length">
  158. <li class="border-t border-white-light text-center dark:border-white/10 mt-5">
  159. <div
  160. class="flex items-center py-4 px-5 text-primary font-semibold group dark:text-gray-400 justify-center cursor-pointer"
  161. @click="close()"
  162. >
  163. <span class="group-hover:underline ltr:mr-1 rtl:ml-1">VIEW ALL ACTIVITIES</span>
  164. <icon-arrow-left class="group-hover:translate-x-1 transition duration-300 ltr:ml-1 rtl:mr-1" />
  165. </div>
  166. </li>
  167. </template>
  168. <template v-if="!messages.length">
  169. <li class="mb-5">
  170. <div class="!grid place-content-center hover:!bg-transparent text-lg min-h-[200px]">
  171. <div class="mx-auto ring-4 ring-primary/30 rounded-full mb-4 text-primary">
  172. <icon-info-circle :fill="true" class="w-10 h-10" />
  173. </div>
  174. No data available.
  175. </div>
  176. </li>
  177. </template>
  178. </ul>
  179. </template> -->
  180. </Popper>
  181. </div>
  182. <div class="dropdown shrink-0">
  183. <Popper :placement="store.state.rtlClass === 'rtl' ? 'bottom-end' : 'bottom-start'" offsetDistance="8" class="!block">
  184. <button type="button" class="relative group block">
  185. <img
  186. class="w-9 h-9 rounded-full object-cover saturate-50 group-hover:saturate-100"
  187. v-if="store.state.user.user.face !== undefined"
  188. :src="store.state.user.user.face"
  189. alt=""
  190. />
  191. <img class="w-9 h-9 rounded-full object-cover saturate-50 group-hover:saturate-100" v-else src="../../assets/images/logos.png" alt="" />
  192. </button>
  193. <template #content="{ close }">
  194. <ul class="text-dark dark:text-white-dark !py-0 w-[230px] font-semibold dark:text-white-light/90">
  195. <li>
  196. <div class="flex items-center px-4 py-4">
  197. <div class="flex-none">
  198. <img
  199. class="rounded-md w-10 h-10 object-cover"
  200. v-if="store.state.user.user.face !== undefined"
  201. :src="store.state.user.user.face"
  202. alt=""
  203. />
  204. <img class="rounded-md w-10 h-10 object-cover" v-else src="../../assets/images/logos.png" alt="" />
  205. </div>
  206. <div class="ltr:pl-4 rtl:pr-4 truncate">
  207. <h4 class="text-base">
  208. {{ store.state.user.user.username }}<span class="text-xs bg-success-light rounded text-success px-1 ltr:ml-2 rtl:ml-2">Pro</span>
  209. </h4>
  210. <a class="text-black/60 hover:text-primary dark:text-dark-light/60 dark:hover:text-white" href="javascript:;">{{
  211. store.state.user.user?.company_vo?.name || '未知公司'
  212. }}</a>
  213. </div>
  214. </div>
  215. </li>
  216. <li>
  217. <a href="javascript:;" class="dark:hover:text-white" @click="goInfo">
  218. <icon-user class="w-4.5 h-4.5 ltr:mr-2 rtl:ml-2 shrink-0" />
  219. {{ $t('info') }}
  220. </a>
  221. </li>
  222. <li v-if="store.state.user.user.uid!=='8'||store.state.user.user.username=='admin'">
  223. <a href="javascript:;" class="dark:hover:text-white" @click="setPayment">
  224. <img src="@/assets/images/payment.svg" class="mr-2" alt="">
  225. <!-- <icon-user class="w-4.5 h-4.5 ltr:mr-2 rtl:ml-2 shrink-0" /> -->
  226. {{$t('setPayment') }}
  227. </a>
  228. </li>
  229. <li>
  230. <a href="javascript:;" class="dark:hover:text-white" @click="editPassword">
  231. <icon-lock-dots class="w-4.5 h-4.5 ltr:mr-2 rtl:ml-2 shrink-0" />
  232. {{ $t('edit_password') }}
  233. </a>
  234. </li>
  235. <li class="border-t border-white-light dark:border-white-light/10">
  236. <a class="text-danger !py-3 dark:hover:text-white" @click="handleLogoutClick">
  237. <icon-logout class="w-4.5 h-4.5 ltr:mr-2 rtl:ml-2 rotate-90 shrink-0" />
  238. {{ $t('logout') }}
  239. </a>
  240. </li>
  241. </ul>
  242. </template>
  243. </Popper>
  244. </div>
  245. </div>
  246. </div>
  247. <ul
  248. style="box-shadow: 0 0px 0px #ccc;"
  249. class="horizontal-menu hidden py-1.5 font-semibold px-6 lg:space-x-1.5 xl:space-x-8 rtl:space-x-reverse bg-white border-t border-[#ebedf2] dark:border-[#191e3a] dark:bg-[#0e1726] text-black dark:text-white-dark"
  250. >
  251. <li class="menu nav-item relative">
  252. <a href="javascript:;" class="nav-link">
  253. <div class="flex items-center">
  254. <icon-menu-dashboard class="shrink-0" />
  255. <span class="px-2">{{ $t('warehouse') }}</span>
  256. </div>
  257. <div class="right_arrow">
  258. <icon-caret-down />
  259. </div>
  260. </a>
  261. <ul class="sub-menu">
  262. <li>
  263. <router-link to="/stock/warehouseList">{{ $t('warehouseList') }}</router-link>
  264. </li>
  265. <li>
  266. <router-link to="/stock/warehouseLocation">{{ $t('warehouseLocation') }}</router-link>
  267. </li>
  268. <li>
  269. <router-link to="/stock/goodsLend">{{ $t('goodsLend') }}</router-link>
  270. </li>
  271. <li>
  272. <router-link to="/stock/goodsTransfer">{{ $t('goodsTransfer') }}</router-link>
  273. </li>
  274. <li>
  275. <router-link to="/stock/goodsExchange">{{ $t('goodsExchange') }}</router-link>
  276. </li>
  277. <li>
  278. <router-link to="/stock/goodsOutBound">{{ $t('goodsOutBound') }}</router-link>
  279. </li>
  280. <li>
  281. <router-link to="/stock/goodsInventory">{{ $t('goodsInventory') }}</router-link>
  282. </li>
  283. <li>
  284. <router-link to="/stock/goodsInventoryLoss">{{ $t('goodsInventoryLoss') }}</router-link>
  285. </li>
  286. <li>
  287. <router-link to="/stock/goodsUnderstock">{{ $t('goodsUnderstock') }}</router-link>
  288. </li>
  289. </ul>
  290. </li>
  291. <li class="menu nav-item relative">
  292. <a href="javascript:;" class="nav-link">
  293. <div class="flex items-center">
  294. <icon-menu-apps class="shrink-0" />
  295. <span class="px-2">{{ $t('goods') }}</span>
  296. </div>
  297. <div class="right_arrow">
  298. <icon-caret-down />
  299. </div>
  300. </a>
  301. <ul class="sub-menu">
  302. <li>
  303. <router-link to="/goods/SKUlist">{{ $t('SKUList') }}</router-link>
  304. </li>
  305. <!-- <li>
  306. <router-link to="/apps/mailbox">{{ $t('mailbox') }}</router-link>
  307. </li>
  308. <li>
  309. <router-link to="/apps/todolist">{{ $t('todo_list') }}</router-link>
  310. </li>
  311. <li>
  312. <router-link to="/apps/notes">{{ $t('notes') }}</router-link>
  313. </li>
  314. <li>
  315. <router-link to="/apps/scrumboard">{{ $t('scrumboard') }}</router-link>
  316. </li>
  317. <li>
  318. <router-link to="/apps/contacts">{{ $t('contacts') }}</router-link>
  319. </li>
  320. <li class="relative">
  321. <a href="javascript:;"
  322. >{{ $t('invoice') }}
  323. <div class="ltr:ml-auto rtl:mr-auto rtl:rotate-90 -rotate-90">
  324. <icon-caret-down />
  325. </div>
  326. </a>
  327. <ul
  328. class="rounded absolute top-0 ltr:left-[95%] rtl:right-[95%] min-w-[180px] bg-white z-[10] text-dark dark:text-white-dark dark:bg-[#1b2e4b] shadow p-0 py-2 hidden"
  329. >
  330. <li>
  331. <router-link to="/apps/invoice/list">{{ $t('list') }}</router-link>
  332. </li>
  333. <li>
  334. <router-link to="/apps/invoice/preview">{{ $t('preview') }}</router-link>
  335. </li>
  336. <li>
  337. <router-link to="/apps/invoice/add">{{ $t('add') }}</router-link>
  338. </li>
  339. <li>
  340. <router-link to="/apps/invoice/edit">{{ $t('edit') }}</router-link>
  341. </li>
  342. </ul>
  343. </li>
  344. <li>
  345. <router-link to="/apps/calendar">{{ $t('calendar') }}</router-link>
  346. </li> -->
  347. </ul>
  348. </li>
  349. <li class="menu nav-item relative">
  350. <a href="javascript:;" class="nav-link">
  351. <div class="flex items-center">
  352. <icon-menu-components class="shrink-0" />
  353. <span class="px-2">{{ $t('companyMent') }}</span>
  354. </div>
  355. <div class="right_arrow">
  356. <icon-caret-down />
  357. </div>
  358. </a>
  359. <ul class="sub-menu">
  360. <li>
  361. <router-link to="/companyMent/administratorManage">{{ $t('administratorManage') }}</router-link>
  362. </li>
  363. <li>
  364. <router-link to="/setting/roleManage">{{ $t('roleManage') }}</router-link>
  365. </li>
  366. <li>
  367. <router-link to="/companyMent/branch">{{ $t('branch') }}</router-link>
  368. </li>
  369. <li>
  370. <router-link to="/companyMent/configMsg">{{ $t('configMsg') }}</router-link>
  371. </li>
  372. <li>
  373. <router-link to="/setting/systemLog">{{ $t('systemLog') }}</router-link>
  374. </li>
  375. <!-- <li>
  376. <router-link to="/components/countdown">{{ $t('countdown') }}</router-link>
  377. </li>
  378. <li>
  379. <router-link to="/components/counter">{{ $t('counter') }}</router-link>
  380. </li>
  381. <li>
  382. <router-link to="/components/sweetalert">{{ $t('sweet_alerts') }}</router-link>
  383. </li>
  384. <li>
  385. <router-link to="/components/timeline">{{ $t('timeline') }}</router-link>
  386. </li>
  387. <li>
  388. <router-link to="/components/notifications">{{ $t('notifications') }}</router-link>
  389. </li>
  390. <li>
  391. <router-link to="/components/media-object">{{ $t('media_object') }}</router-link>
  392. </li>
  393. <li>
  394. <router-link to="/components/list-group">{{ $t('list_group') }}</router-link>
  395. </li>
  396. <li>
  397. <router-link to="/components/pricing-table">{{ $t('pricing_tables') }}</router-link>
  398. </li>
  399. <li>
  400. <router-link to="/components/lightbox">{{ $t('lightbox') }}</router-link>
  401. </li> -->
  402. </ul>
  403. </li>
  404. <!-- <li class="menu nav-item relative">
  405. <a href="javascript:;" class="nav-link">
  406. <div class="flex items-center">
  407. <icon-menu-elements class="shrink-0" />
  408. <span class="px-2">{{ $t('elements') }}</span>
  409. </div>
  410. <div class="right_arrow">
  411. <icon-caret-down />
  412. </div>
  413. </a>
  414. <ul class="sub-menu">
  415. <li>
  416. <router-link to="/elements/alerts">{{ $t('alerts') }}</router-link>
  417. </li>
  418. <li>
  419. <router-link to="/elements/avatar">{{ $t('avatar') }}</router-link>
  420. </li>
  421. <li>
  422. <router-link to="/elements/badges">{{ $t('badges') }}</router-link>
  423. </li>
  424. <li>
  425. <router-link to="/elements/breadcrumbs">{{ $t('breadcrumbs') }}</router-link>
  426. </li>
  427. <li>
  428. <router-link to="/elements/buttons">{{ $t('buttons') }}</router-link>
  429. </li>
  430. <li>
  431. <router-link to="/elements/buttons-group">{{ $t('button_groups') }}</router-link>
  432. </li>
  433. <li>
  434. <router-link to="/elements/color-library">{{ $t('color_library') }}</router-link>
  435. </li>
  436. <li>
  437. <router-link to="/elements/dropdown">{{ $t('dropdown') }}</router-link>
  438. </li>
  439. <li>
  440. <router-link to="/elements/infobox">{{ $t('infobox') }}</router-link>
  441. </li>
  442. <li>
  443. <router-link to="/elements/jumbotron">{{ $t('jumbotron') }}</router-link>
  444. </li>
  445. <li>
  446. <router-link to="/elements/loader">{{ $t('loader') }}</router-link>
  447. </li>
  448. <li>
  449. <router-link to="/elements/pagination">{{ $t('pagination') }}</router-link>
  450. </li>
  451. <li>
  452. <router-link to="/elements/popovers">{{ $t('popovers') }}</router-link>
  453. </li>
  454. <li>
  455. <router-link to="/elements/progress-bar">{{ $t('progress_bar') }}</router-link>
  456. </li>
  457. <li>
  458. <router-link to="/elements/search">{{ $t('search') }}</router-link>
  459. </li>
  460. <li>
  461. <router-link to="/elements/tooltips">{{ $t('tooltips') }}</router-link>
  462. </li>
  463. <li>
  464. <router-link to="/elements/treeview">{{ $t('treeview') }}</router-link>
  465. </li>
  466. <li>
  467. <router-link to="/elements/typography">{{ $t('typography') }}</router-link>
  468. </li>
  469. </ul>
  470. </li>
  471. <li class="menu nav-item relative">
  472. <a href="javascript:;" class="nav-link">
  473. <div class="flex items-center">
  474. <icon-menu-datatables class="shrink-0" />
  475. <span class="px-2">{{ $t('tables') }}</span>
  476. </div>
  477. <div class="right_arrow">
  478. <icon-caret-down />
  479. </div>
  480. </a>
  481. <ul class="sub-menu">
  482. <li>
  483. <router-link to="/tables">{{ $t('tables') }}</router-link>
  484. </li>
  485. <li class="relative">
  486. <a href="javascript:;"
  487. >{{ $t('datatables') }}
  488. <div class="ltr:ml-auto rtl:mr-auto rtl:rotate-90 -rotate-90">
  489. <icon-caret-down />
  490. </div>
  491. </a>
  492. <ul
  493. class="rounded absolute top-0 ltr:left-[95%] rtl:right-[95%] min-w-[180px] bg-white z-[10] text-dark dark:text-white-dark dark:bg-[#1b2e4b] shadow p-0 py-2 hidden"
  494. >
  495. <li>
  496. <router-link to="/datatables/basic">{{ $t('basic') }}</router-link>
  497. </li>
  498. <li>
  499. <router-link to="/datatables/advanced">{{ $t('advanced') }}</router-link>
  500. </li>
  501. <li>
  502. <router-link to="/datatables/skin">{{ $t('skin') }}</router-link>
  503. </li>
  504. <li>
  505. <router-link to="/datatables/order-sorting">{{ $t('order_sorting') }}</router-link>
  506. </li>
  507. <li>
  508. <router-link to="/datatables/columns-filter">{{ $t('columns_filter') }}</router-link>
  509. </li>
  510. <li>
  511. <router-link to="/datatables/multi-column">{{ $t('multi_column') }}</router-link>
  512. </li>
  513. <li>
  514. <router-link to="/datatables/multiple-tables">{{ $t('multiple_tables') }}</router-link>
  515. </li>
  516. <li>
  517. <router-link to="/datatables/alt-pagination">{{ $t('alt_pagination') }}</router-link>
  518. </li>
  519. <li>
  520. <router-link to="/datatables/checkbox">{{ $t('checkbox') }}</router-link>
  521. </li>
  522. <li>
  523. <router-link to="/datatables/range-search">{{ $t('range_search') }}</router-link>
  524. </li>
  525. <li>
  526. <router-link to="/datatables/export">{{ $t('export') }}</router-link>
  527. </li>
  528. <li>
  529. <router-link to="/datatables/sticky-header">{{ $t('sticky_header') }}</router-link>
  530. </li>
  531. <li>
  532. <router-link to="/datatables/clone-header">{{ $t('clone_header') }}</router-link>
  533. </li>
  534. <li>
  535. <router-link to="/datatables/column-chooser">{{ $t('column_chooser') }}</router-link>
  536. </li>
  537. </ul>
  538. </li>
  539. </ul>
  540. </li>
  541. <li class="menu nav-item relative">
  542. <a href="javascript:;" class="nav-link">
  543. <div class="flex items-center">
  544. <icon-menu-forms class="shrink-0" />
  545. <span class="px-2">{{ $t('forms') }}</span>
  546. </div>
  547. <div class="right_arrow">
  548. <icon-caret-down />
  549. </div>
  550. </a>
  551. <ul class="sub-menu">
  552. <li>
  553. <router-link to="/forms/basic">{{ $t('basic') }}</router-link>
  554. </li>
  555. <li>
  556. <router-link to="/forms/input-group">{{ $t('input_group') }}</router-link>
  557. </li>
  558. <li>
  559. <router-link to="/forms/layouts">{{ $t('layouts') }}</router-link>
  560. </li>
  561. <li>
  562. <router-link to="/forms/validation">{{ $t('validation') }}</router-link>
  563. </li>
  564. <li>
  565. <router-link to="/forms/input-mask">{{ $t('input_mask') }}</router-link>
  566. </li>
  567. <li>
  568. <router-link to="/forms/select2">{{ $t('select2') }}</router-link>
  569. </li>
  570. <li>
  571. <router-link to="/forms/touchspin">{{ $t('touchspin') }}</router-link>
  572. </li>
  573. <li>
  574. <router-link to="/forms/checkbox-radio">{{ $t('checkbox_and_radio') }}</router-link>
  575. </li>
  576. <li>
  577. <router-link to="/forms/switches">{{ $t('switches') }}</router-link>
  578. </li>
  579. <li>
  580. <router-link to="/forms/wizards">{{ $t('wizards') }}</router-link>
  581. </li>
  582. <li>
  583. <router-link to="/forms/file-upload">{{ $t('file_upload') }}</router-link>
  584. </li>
  585. <li>
  586. <router-link to="/forms/quill-editor">{{ $t('quill_editor') }}</router-link>
  587. </li>
  588. <li>
  589. <router-link to="/forms/markdown-editor">{{ $t('markdown_editor') }}</router-link>
  590. </li>
  591. <li>
  592. <router-link to="/forms/date-picker">{{ $t('date_and_range_picker') }}</router-link>
  593. </li>
  594. <li>
  595. <router-link to="/forms/clipboard">{{ $t('clipboard') }}</router-link>
  596. </li>
  597. </ul>
  598. </li>
  599. <li class="menu nav-item relative">
  600. <a href="javascript:;" class="nav-link">
  601. <div class="flex items-center">
  602. <icon-menu-pages class="shrink-0" />
  603. <span class="px-2">{{ $t('pages') }}</span>
  604. </div>
  605. <div class="right_arrow">
  606. <icon-caret-down />
  607. </div>
  608. </a>
  609. <ul class="sub-menu">
  610. <li class="relative">
  611. <a href="javascript:;"
  612. >{{ $t('users') }}
  613. <div class="ltr:ml-auto rtl:mr-auto rtl:rotate-90 -rotate-90">
  614. <icon-caret-down />
  615. </div>
  616. </a>
  617. <ul
  618. class="rounded absolute top-0 ltr:left-[95%] rtl:right-[95%] min-w-[180px] bg-white z-[10] text-dark dark:text-white-dark dark:bg-[#1b2e4b] shadow p-0 py-2 hidden"
  619. >
  620. <li>
  621. <router-link to="/users/profile">{{ $t('profile') }}</router-link>
  622. </li>
  623. <li>
  624. <router-link to="/users/user-account-settings">{{ $t('account_settings') }}</router-link>
  625. </li>
  626. </ul>
  627. </li>
  628. <li>
  629. <router-link to="/pages/knowledge-base">{{ $t('knowledge_base') }}</router-link>
  630. </li>
  631. <li>
  632. <router-link to="/pages/contact-us-boxed" target="_blank">{{ $t('contact_us_boxed') }}</router-link>
  633. </li>
  634. <li>
  635. <router-link to="/pages/contact-us-cover" target="_blank">{{ $t('contact_us_cover') }}</router-link>
  636. </li>
  637. <li>
  638. <router-link to="/pages/faq">FAQ</router-link>
  639. </li>
  640. <li>
  641. <router-link to="/pages/coming-soon-boxed" target="_blank">{{ $t('coming_soon_boxed') }}</router-link>
  642. </li>
  643. <li>
  644. <router-link to="/pages/coming-soon-cover" target="_blank">{{ $t('coming_soon_cover') }}</router-link>
  645. </li>
  646. <li>
  647. <router-link to="/pages/maintenence" target="_blank">{{ $t('maintenence') }}</router-link>
  648. </li>
  649. <li class="relative">
  650. <a href="javascript:;"
  651. >{{ $t('error') }}
  652. <div class="ltr:ml-auto rtl:mr-auto rtl:rotate-90 -rotate-90">
  653. <icon-caret-down />
  654. </div>
  655. </a>
  656. <ul
  657. class="rounded absolute top-0 ltr:left-[95%] rtl:right-[95%] min-w-[180px] bg-white z-[10] text-dark dark:text-white-dark dark:bg-[#1b2e4b] shadow p-0 py-2 hidden"
  658. >
  659. <li>
  660. <router-link to="/pages/error404" target="_blank">{{ $t('404') }}</router-link>
  661. </li>
  662. <li>
  663. <router-link to="/pages/error500" target="_blank">{{ $t('500') }}</router-link>
  664. </li>
  665. <li>
  666. <router-link to="/pages/error503" target="_blank">{{ $t('503') }}</router-link>
  667. </li>
  668. </ul>
  669. </li>
  670. <li class="relative">
  671. <a href="javascript:;"
  672. >{{ $t('login') }}
  673. <div class="ltr:ml-auto rtl:mr-auto rtl:rotate-90 -rotate-90">
  674. <icon-caret-down />
  675. </div>
  676. </a>
  677. <ul
  678. class="rounded absolute top-0 ltr:left-[95%] rtl:right-[95%] min-w-[180px] bg-white z-[10] text-dark dark:text-white-dark dark:bg-[#1b2e4b] shadow p-0 py-2 hidden"
  679. >
  680. <li>
  681. <router-link to="/auth/cover-login" target="_blank">{{ $t('login_cover') }}</router-link>
  682. </li>
  683. <li>
  684. <router-link to="/auth/boxed-signin" target="_blank">{{ $t('login_boxed') }}</router-link>
  685. </li>
  686. </ul>
  687. </li>
  688. <li class="relative">
  689. <a href="javascript:;"
  690. >{{ $t('register') }}
  691. <div class="ltr:ml-auto rtl:mr-auto rtl:rotate-90 -rotate-90">
  692. <icon-caret-down />
  693. </div>
  694. </a>
  695. <ul
  696. class="rounded absolute top-0 ltr:left-[95%] rtl:right-[95%] min-w-[180px] bg-white z-[10] text-dark dark:text-white-dark dark:bg-[#1b2e4b] shadow p-0 py-2 hidden"
  697. >
  698. <li>
  699. <router-link to="/auth/cover-register" target="_blank">{{ $t('register_cover') }}</router-link>
  700. </li>
  701. <li>
  702. <router-link to="/auth/boxed-signup" target="_blank">{{ $t('register_boxed') }}</router-link>
  703. </li>
  704. </ul>
  705. </li>
  706. <li class="relative">
  707. <a href="javascript:;"
  708. >{{ $t('password_recovery') }}
  709. <div class="ltr:ml-auto rtl:mr-auto rtl:rotate-90 -rotate-90">
  710. <icon-caret-down />
  711. </div>
  712. </a>
  713. <ul
  714. class="rounded absolute top-0 ltr:left-[95%] rtl:right-[95%] min-w-[180px] bg-white z-[10] text-dark dark:text-white-dark dark:bg-[#1b2e4b] shadow p-0 py-2 hidden"
  715. >
  716. <li>
  717. <router-link to="/auth/cover-password-reset" target="_blank">{{ $t('recover_id_cover') }}</router-link>
  718. </li>
  719. <li>
  720. <router-link to="/auth/boxed-password-reset" target="_blank">{{ $t('recover_id_boxed') }}</router-link>
  721. </li>
  722. </ul>
  723. </li>
  724. <li class="relative">
  725. <a href="javascript:;"
  726. >{{ $t('lockscreen') }}
  727. <div class="ltr:ml-auto rtl:mr-auto rtl:rotate-90 -rotate-90">
  728. <icon-caret-down />
  729. </div>
  730. </a>
  731. <ul
  732. class="rounded absolute top-0 ltr:left-[95%] rtl:right-[95%] min-w-[180px] bg-white z-[10] text-dark dark:text-white-dark dark:bg-[#1b2e4b] shadow p-0 py-2 hidden"
  733. >
  734. <li>
  735. <router-link to="/auth/cover-lockscreen" target="_blank">{{ $t('unlock_cover') }}</router-link>
  736. </li>
  737. <li>
  738. <router-link to="/auth/boxed-lockscreen" target="_blank">{{ $t('unlock_boxed') }}</router-link>
  739. </li>
  740. </ul>
  741. </li>
  742. </ul>
  743. </li>
  744. <li class="menu nav-item relative">
  745. <a href="javascript:;" class="nav-link">
  746. <div class="flex items-center">
  747. <icon-menu-more class="shrink-0" />
  748. <span class="px-2">{{ $t('more') }}</span>
  749. </div>
  750. <div class="right_arrow">
  751. <icon-caret-down />
  752. </div>
  753. </a>
  754. <ul class="sub-menu">
  755. <li>
  756. <router-link to="/dragndrop">{{ $t('drag_and_drop') }}</router-link>
  757. </li>
  758. <li>
  759. <router-link to="/charts">{{ $t('charts') }}</router-link>
  760. </li>
  761. <li>
  762. <router-link to="/font-icons">{{ $t('font_icons') }}</router-link>
  763. </li>
  764. <li>
  765. <router-link to="/widgets">{{ $t('widgets') }}</router-link>
  766. </li>
  767. <li>
  768. <a href="https://vristo.sbthemes.com" target="_blank">{{ $t('documentation') }}</a>
  769. </li>
  770. </ul>
  771. </li> -->
  772. </ul>
  773. </div>
  774. </header>
  775. <el-dialog
  776. :title="$t('setPayment')"
  777. v-model="dialogVisible"
  778. @open="handleDialogOpen"
  779. width="40%"
  780. :modal-append-to-body="false"
  781. :close-on-click-modal="false"
  782. :close-on-press-escape="false"
  783. >
  784. <div style="font-size: 12px;text-align: center;" v-if="PaymentForm.type == 'WX'">
  785. <span>tips:</span
  786. ><span class="center"
  787. >{{$t('payinfo')}}</span
  788. >
  789. </div>
  790. <el-form :model="PaymentForm" :rules="PaymentRules" ref="PaymentFormRef" label-width="160px">
  791. <el-form-item :label="$t('payment_type')+':'" prop="sn">
  792. <el-select v-model="PaymentForm.type">
  793. <el-option label="微信" value="WX" />
  794. <el-option label="支付宝" value="Ali" />
  795. </el-select>
  796. </el-form-item>
  797. <el-form-item label="AppId" prop="ali_app_id" v-if="PaymentForm.type == 'Ali'">
  798. <el-input v-model="PaymentForm.ali_app_id" :minlength="2" :maxlength="20" clearable placeholder="请输入"></el-input>
  799. </el-form-item>
  800. <el-form-item :label="$t('ali_private_key')+':'" prop="ali_app_private_key" v-if="PaymentForm.type == 'Ali'">
  801. <el-input
  802. v-model="PaymentForm.ali_app_private_key"
  803. :minlength="2"
  804. :maxlength="20"
  805. clearable
  806. type="textarea"
  807. :placeholder="$t('place')+$t('ali_private_key')"
  808. ></el-input>
  809. </el-form-item>
  810. <el-form-item :label="$t('ali_public_key')+':'" prop="ali_alipay_public_key" v-if="PaymentForm.type == 'Ali'">
  811. <el-input
  812. v-model="PaymentForm.ali_alipay_public_key"
  813. type="textarea"
  814. :minlength="2"
  815. :maxlength="20"
  816. clearable
  817. :placeholder="$t('place')+$t('ali_public_key')"
  818. ></el-input>
  819. </el-form-item>
  820. <el-form-item :label="$t('wx_sub_mch_id')+':'" prop="wx_sub_mch_id" v-if="PaymentForm.type == 'WX'">
  821. <el-input v-model="PaymentForm.wx_sub_mch_id" :placeholder="$t('place')+$t('wx_sub_mch_id')"></el-input>
  822. </el-form-item>
  823. </el-form>
  824. <template #footer>
  825. <div class="dialog-footer">
  826. <el-button @click="dialogVisible = false">{{ $t('cancel') }}</el-button>
  827. <el-button type="primary" @click="submitPaymentForm">{{ $t('submit') }}</el-button>
  828. </div>
  829. </template>
  830. </el-dialog>
  831. </template>
  832. <script lang="ts" setup>
  833. import { ref, onMounted, computed, reactive, watch } from 'vue';
  834. import { useI18n } from 'vue-i18n';
  835. import appSetting from '@/app-setting';
  836. import { useRouter, useRoute } from 'vue-router';
  837. import { useStore } from 'vuex';
  838. import IconMenu from '@/components/icon/icon-menu.vue';
  839. import IconCalendar from '@/components/icon/icon-calendar.vue';
  840. import IconEdit from '@/components/icon/icon-edit.vue';
  841. import IconChatNotification from '@/components/icon/icon-chat-notification.vue';
  842. import IconSearch from '@/components/icon/icon-search.vue';
  843. import IconXCircle from '@/components/icon/icon-x-circle.vue';
  844. import IconSun from '@/components/icon/icon-sun.vue';
  845. import IconMoon from '@/components/icon/icon-moon.vue';
  846. import IconLaptop from '@/components/icon/icon-laptop.vue';
  847. import IconMailDot from '@/components/icon/icon-mail-dot.vue';
  848. import IconArrowLeft from '@/components/icon/icon-arrow-left.vue';
  849. /* import IconInfoCircle from '@/components/icon/icon-info-circle.vue'; */
  850. import IconBellBing from '@/components/icon/icon-bell-bing.vue';
  851. import IconUser from '@/components/icon/icon-user.vue';
  852. /* import IconMail from '@/components/icon/icon-mail.vue'; */
  853. import IconLockDots from '@/components/icon/icon-lock-dots.vue';
  854. import IconLogout from '@/components/icon/icon-logout.vue'; /* */
  855. import IconMenuDashboard from '@/components/icon/menu/icon-menu-dashboard.vue';
  856. import IconCaretDown from '@/components/icon/icon-caret-down.vue';
  857. import IconMenuApps from '@/components/icon/menu/icon-menu-apps.vue';
  858. import IconMenuComponents from '@/components/icon/menu/icon-menu-components.vue';
  859. import IconMenuElements from '@/components/icon/menu/icon-menu-elements.vue';
  860. import IconMenuDatatables from '@/components/icon/menu/icon-menu-datatables.vue';
  861. import IconMenuForms from '@/components/icon/menu/icon-menu-forms.vue';
  862. import IconMenuPages from '@/components/icon/menu/icon-menu-pages.vue';
  863. import IconMenuMore from '@/components/icon/menu/icon-menu-more.vue';
  864. import { ElMessageBox, ElMessage } from 'element-plus';
  865. import * as API_Company from '@/api/company';
  866. import * as API_Auth from '@/api/auth';
  867. const { t } = useI18n();
  868. //ElMessageBox
  869. const store = useStore();
  870. const route = useRoute();
  871. const router = useRouter();
  872. const search = ref(false);
  873. // multi language
  874. const i18n = reactive(useI18n());
  875. const changeLanguage = (item: any) => {
  876. i18n.locale = item.code;
  877. appSetting.toggleLanguage(item);
  878. };
  879. const superMenu = computed(() => store.state.superMenu);
  880. const founder = computed(() => store.state.user.user.founder);
  881. const currentFlag = computed(() => {
  882. return `/assets/images/flags/${i18n.locale.toUpperCase()}.svg`;
  883. });
  884. const countNot = ref(0);
  885. /* 获取账号未读消息 */
  886. const GET_countNot = () => {
  887. API_Company.countNotReadSys().then((res) => {
  888. countNot.value = res;
  889. });
  890. };
  891. const notifications = ref([
  892. {
  893. id: 1,
  894. profile: 'user-profile.jpeg',
  895. message: '<strong class="text-sm mr-1">John Doe</strong>invite you to <strong>Prototyping</strong>',
  896. time: '45 min ago',
  897. },
  898. {
  899. id: 2,
  900. profile: 'profile-34.jpeg',
  901. message: '<strong class="text-sm mr-1">Adam Nolan</strong>mentioned you to <strong>UX Basics</strong>',
  902. time: '9h Ago',
  903. },
  904. {
  905. id: 3,
  906. profile: 'profile-16.jpeg',
  907. message: '<strong class="text-sm mr-1">Anna Morgan</strong>Upload a file',
  908. time: '9h Ago',
  909. },
  910. ]);
  911. const messages = ref([
  912. {
  913. id: 1,
  914. image:
  915. '<span class="grid place-content-center w-9 h-9 rounded-full bg-success-light dark:bg-success text-success dark:text-success-light"><svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg></span>',
  916. title: 'Congratulations!',
  917. message: 'Your OS has been updated.',
  918. time: '1hr',
  919. },
  920. {
  921. id: 2,
  922. image:
  923. '<span class="grid place-content-center w-9 h-9 rounded-full bg-info-light dark:bg-info text-info dark:text-info-light"><svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg></span>',
  924. title: 'Did you know?',
  925. message: 'You can switch between artboards.',
  926. time: '2hr',
  927. },
  928. {
  929. id: 3,
  930. image:
  931. '<span class="grid place-content-center w-9 h-9 rounded-full bg-danger-light dark:bg-danger text-danger dark:text-danger-light"> <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></span>',
  932. title: 'Something went wrong!',
  933. message: 'Send Reposrt',
  934. time: '2days',
  935. },
  936. {
  937. id: 4,
  938. image:
  939. '<span class="grid place-content-center w-9 h-9 rounded-full bg-warning-light dark:bg-warning text-warning dark:text-warning-light"><svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <line x1="12" y1="8" x2="12" y2="12"></line> <line x1="12" y1="16" x2="12.01" y2="16"></line></svg></span>',
  940. title: 'Warning',
  941. message: 'Your password strength is low.',
  942. time: '5days',
  943. },
  944. ]);
  945. onMounted(() => {
  946. setActiveDropdown();
  947. GET_countNot();
  948. });
  949. watch(route, (to, from) => {
  950. setActiveDropdown();
  951. });
  952. /* 支付信息表单 */
  953. const dialogVisible = ref(false);
  954. const PaymentForm = ref<any>({
  955. type: 'Ali',
  956. ali_app_id: '',
  957. ali_app_private_key: '',
  958. ali_alipay_public_key: '',
  959. wx_sub_mch_id: '',
  960. });
  961. const PaymentRules = ref<any>({
  962. ali_app_id: [{ required: true, message: t('submit')+'Appid', trigger: 'blur' }],
  963. ali_app_private_key: [{ required: true, message: t('submit')+t('ali_private_key'), trigger: 'blur' }],
  964. ali_alipay_public_key: [{ required: true, message: t('submit')+t('ali_public_key'), trigger: 'blur' }],
  965. wx_sub_mch_id: [{ required: true, message: t('submit')+t('wx_sub_mch_id'), trigger: 'blur' }],
  966. });
  967. const setActiveDropdown = () => {
  968. const selector = document.querySelector('ul.horizontal-menu a[href="' + window.location.pathname + '"]');
  969. if (selector) {
  970. selector.classList.add('active');
  971. const all: any = document.querySelectorAll('ul.horizontal-menu .nav-link.active');
  972. for (let i = 0; i < all.length; i++) {
  973. all[0]?.classList.remove('active');
  974. }
  975. const ul: any = selector.closest('ul.sub-menu');
  976. if (ul) {
  977. let ele: any = ul.closest('li.menu').querySelectorAll('.nav-link');
  978. if (ele) {
  979. ele = ele[0];
  980. setTimeout(() => {
  981. ele?.classList.add('active');
  982. });
  983. }
  984. }
  985. }
  986. };
  987. /* 前往消息页面 */
  988. const goNotify = () => {
  989. router.push({
  990. name: 'Notify',
  991. });
  992. };
  993. /* 修改密码 */
  994. const editPassword = () => {
  995. router.push({
  996. path: '/lockscreen',
  997. });
  998. };
  999. /* 前往个人信息页面 */
  1000. const goInfo = () => {
  1001. router.push({
  1002. name: 'companyInfo',
  1003. });
  1004. };
  1005. const removeNotification = (value: number) => {
  1006. notifications.value = notifications.value.filter((d) => d.id !== value);
  1007. };
  1008. const removeMessage = (value: number) => {
  1009. messages.value = messages.value.filter((d) => d.id !== value);
  1010. };
  1011. const toggleSidebars = () => {
  1012. store.dispatch('toggleSidebar');
  1013. };
  1014. const toggleTheme = (theme) => {
  1015. store.dispatch('toggleTheme', theme);
  1016. };
  1017. const closes = () => {};
  1018. const handleLogoutClick = () => {
  1019. ElMessageBox.confirm(t('logout_commit')+'?', t('prompt'), {
  1020. confirmButtonText: t('submit'),
  1021. cancelButtonText: t('cancel'),
  1022. type: 'warning',
  1023. })
  1024. .then(() => {
  1025. store.dispatch('logoutAction').then(() => {
  1026. const route = router.resolve('/login');
  1027. location.replace(route.href); // 为了重新实例化vue-router对象 避免bug
  1028. });
  1029. })
  1030. .catch(() => {
  1031. /* Handle cancel action if needed */
  1032. });
  1033. };
  1034. const getBranch = (value) => {
  1035. store.dispatch('toggleSuperMenu', value);
  1036. router.push({
  1037. name: 'dashboard',
  1038. });
  1039. };
  1040. /* 设置收款信息 */
  1041. const setPayment = () => {
  1042. dialogVisible.value = true;
  1043. };
  1044. /* 提交收款信息 */
  1045. const PaymentFormRef = ref();
  1046. const submitPaymentForm = () => {
  1047. PaymentFormRef.value.validate((valid: boolean) => {
  1048. if (valid) {
  1049. API_Auth.editAdministrator(store.state.user.user.company_vo.id, PaymentForm.value).then((res) => {
  1050. PaymentForm.value={}
  1051. ElMessage.success(t('payment_success'));
  1052. });
  1053. } else {
  1054. ElMessage.error(t('form_erroe'));
  1055. /* store.dispatch('showMessage', { message: '表单填写有误,请核对!', type: 'error' }); */
  1056. return false;
  1057. }
  1058. });
  1059. };
  1060. const handleDialogOpen = () => {
  1061. setTimeout(() => {
  1062. PaymentFormRef.value.clearValidate();
  1063. });
  1064. };
  1065. </script>