12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091 |
- <template>
- <header class="z-40" :class="{ dark: store.state.semidark && store.state.menu === 'horizontal' }">
- <div class="shadow-sm">
- <div class="relative bg-white flex w-full items-center px-5 py-2.5 dark:bg-[#0e1726]">
- <div class="horizontal-logo flex lg:hidden justify-between items-center ltr:mr-2 rtl:ml-2">
- <router-link to="/dashboard" class="main-logo flex items-center shrink-0">
- <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="" />
- <!-- <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"
- >V3studio App</span
- > -->
- </router-link>
- <!-- 原导航 -->
- <a
- href="javascript:;"
- 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"
- @click="toggleSidebars"
- >
- <icon-menu class="w-5 h-5" />
- </a>
- </div>
- <!-- 头部中间功能--待开发 -->
- <div class="ltr:mr-2 rtl:ml-2 hidden sm:block">
- <!-- <ul class="flex items-center space-x-2 rtl:space-x-reverse dark:text-[#d0d2d6]">
- <li>
- <router-link
- to=""
- 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"
- >
- <icon-calendar />
- </router-link>
- </li>
- <li>
- <router-link
- to=""
- 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"
- >
- <icon-edit />
- </router-link>
- </li>
- <li>
- <router-link
- to=""
- 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"
- >
- <icon-chat-notification />
- </router-link>
- </li>
- </ul> -->
- </div>
- <!-- items-center -->
- <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]">
- <div class="sm:ltr:mr-auto sm:rtl:ml-auto">
- <form
- 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"
- :class="{ '!block': search }"
- @submit.prevent="search = false"
- ></form>
- <button
- type="button"
- 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"
- @click="search = !search"
- >
- <icon-search class="w-4.5 h-4.5 mx-auto dark:text-[#d0d2d6]" />
- </button>
- </div>
- <a href="javascript:;" v-if="superMenu == 'compan' && founder == '1'" @click="getBranch('super')"> 返回</a>
- <div>
- <a
- href="javascript:;"
- v-show="store.state.theme === 'light'"
- 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"
- @click="toggleTheme('dark')"
- >
- <icon-sun />
- </a>
- <a
- href="javascript:;"
- v-show="store.state.theme === 'dark'"
- 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"
- @click="toggleTheme('system')"
- >
- <icon-moon />
- </a>
- <a
- href="javascript:;"
- v-show="store.state.theme === 'system'"
- 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"
- @click="toggleTheme('dark')"
- >
- <icon-sun />
- </a>
- </div>
- <div class="dropdown shrink-0">
- <Popper :placement="store.state.rtlClass === 'rtl' ? 'bottom-end' : 'bottom-start'" offsetDistance="8">
- <button
- type="button"
- 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"
- >
- <img :src="currentFlag" alt="flag" class="w-5 h-5 object-cover rounded-full" />
- </button>
- <template #content="{ close }">
- <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]">
- <template v-for="item in store.state.languageList" :key="item.code">
- <li>
- <button
- type="button"
- class="w-full hover:text-primary"
- :class="{ 'bg-primary/10 text-primary': i18n.locale === item.code }"
- @click="changeLanguage(item), close()"
- >
- <img class="w-5 h-5 object-cover rounded-full" :src="`/assets/images/flags/${item.code.toUpperCase()}.svg`" alt="" />
- <span class="ltr:ml-3 rtl:mr-3">{{ item.name }}</span>
- </button>
- </li>
- </template>
- </ul>
- </template>
- </Popper>
- </div>
- <div class="dropdown shrink-0 mr-2">
- <Popper :placement="store.state.rtlClass === 'rtl' ? 'bottom-start' : 'bottom-end'" offsetDistance="0">
- <el-badge :value="countNot" :hidden="countNot == 0" class="item">
- <button
- type="button"
- 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"
- @click="goNotify"
- >
- <icon-mail-dot />
- </button>
- </el-badge>
- <!-- <template #content="{ close }">
- <ul class="top-11 !py-0 text-dark dark:text-white-dark w-[300px] sm:w-[375px] text-xs">
- <li class="mb-5">
- <div class="overflow-hidden relative rounded-t-md !p-5 text-white">
- <div class="absolute h-full w-full bg-[url('/assets/images/menu-heade.jpg')] bg-no-repeat bg-center bg-cover inset-0"></div>
- <h4 class="font-semibold relative z-10 text-lg">Messages</h4>
- </div>
- </li>
- <template v-for="msg in messages" :key="msg.id">
- <li>
- <div class="flex items-center py-3 px-5">
- <div v-html="msg.image"></div>
- <span class="px-3 dark:text-gray-500">
- <div class="font-semibold text-sm dark:text-white-light/90" v-text="msg.title"></div>
- <div v-text="msg.message"></div>
- </span>
- <span
- 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"
- v-text="msg.time"
- ></span>
- <button type="button" class="text-neutral-300 hover:text-danger" @click="removeMessage(msg.id)">
- <icon-x-circle />
- </button>
- </div>
- </li>
- </template>
- <template v-if="messages.length">
- <li class="border-t border-white-light text-center dark:border-white/10 mt-5">
- <div
- class="flex items-center py-4 px-5 text-primary font-semibold group dark:text-gray-400 justify-center cursor-pointer"
- @click="close()"
- >
- <span class="group-hover:underline ltr:mr-1 rtl:ml-1">VIEW ALL ACTIVITIES</span>
- <icon-arrow-left class="group-hover:translate-x-1 transition duration-300 ltr:ml-1 rtl:mr-1" />
- </div>
- </li>
- </template>
- <template v-if="!messages.length">
- <li class="mb-5">
- <div class="!grid place-content-center hover:!bg-transparent text-lg min-h-[200px]">
- <div class="mx-auto ring-4 ring-primary/30 rounded-full mb-4 text-primary">
- <icon-info-circle :fill="true" class="w-10 h-10" />
- </div>
- No data available.
- </div>
- </li>
- </template>
- </ul>
- </template> -->
- </Popper>
- </div>
- <div class="dropdown shrink-0">
- <Popper :placement="store.state.rtlClass === 'rtl' ? 'bottom-end' : 'bottom-start'" offsetDistance="8" class="!block">
- <button type="button" class="relative group block">
- <img
- class="w-9 h-9 rounded-full object-cover saturate-50 group-hover:saturate-100"
- v-if="store.state.user.user.face !== undefined"
- :src="store.state.user.user.face"
- alt=""
- />
- <img class="w-9 h-9 rounded-full object-cover saturate-50 group-hover:saturate-100" v-else src="../../assets/images/logos.png" alt="" />
- </button>
- <template #content="{ close }">
- <ul class="text-dark dark:text-white-dark !py-0 w-[230px] font-semibold dark:text-white-light/90">
- <li>
- <div class="flex items-center px-4 py-4">
- <div class="flex-none">
- <img
- class="rounded-md w-10 h-10 object-cover"
- v-if="store.state.user.user.face !== undefined"
- :src="store.state.user.user.face"
- alt=""
- />
- <img class="rounded-md w-10 h-10 object-cover" v-else src="../../assets/images/logos.png" alt="" />
- </div>
- <div class="ltr:pl-4 rtl:pr-4 truncate">
- <h4 class="text-base">
- {{ 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>
- </h4>
- <a class="text-black/60 hover:text-primary dark:text-dark-light/60 dark:hover:text-white" href="javascript:;">{{
- store.state.user.user?.company_vo?.name || '未知公司'
- }}</a>
- </div>
- </div>
- </li>
- <li>
- <a href="javascript:;" class="dark:hover:text-white" @click="goInfo">
- <icon-user class="w-4.5 h-4.5 ltr:mr-2 rtl:ml-2 shrink-0" />
- {{ $t('info') }}
- </a>
- </li>
- <li v-if="store.state.user.user.uid!=='8'||store.state.user.user.username=='admin'">
- <a href="javascript:;" class="dark:hover:text-white" @click="setPayment">
- <img src="@/assets/images/payment.svg" class="mr-2" alt="">
- <!-- <icon-user class="w-4.5 h-4.5 ltr:mr-2 rtl:ml-2 shrink-0" /> -->
- {{$t('setPayment') }}
- </a>
- </li>
- <li>
- <a href="javascript:;" class="dark:hover:text-white" @click="editPassword">
- <icon-lock-dots class="w-4.5 h-4.5 ltr:mr-2 rtl:ml-2 shrink-0" />
- {{ $t('edit_password') }}
- </a>
- </li>
- <li class="border-t border-white-light dark:border-white-light/10">
- <a class="text-danger !py-3 dark:hover:text-white" @click="handleLogoutClick">
- <icon-logout class="w-4.5 h-4.5 ltr:mr-2 rtl:ml-2 rotate-90 shrink-0" />
- {{ $t('logout') }}
- </a>
- </li>
- </ul>
- </template>
- </Popper>
- </div>
- </div>
- </div>
- <ul
- style="box-shadow: 0 0px 0px #ccc;"
- 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"
- >
- <li class="menu nav-item relative">
- <a href="javascript:;" class="nav-link">
- <div class="flex items-center">
- <icon-menu-dashboard class="shrink-0" />
- <span class="px-2">{{ $t('warehouse') }}</span>
- </div>
- <div class="right_arrow">
- <icon-caret-down />
- </div>
- </a>
- <ul class="sub-menu">
- <li>
- <router-link to="/stock/warehouseList">{{ $t('warehouseList') }}</router-link>
- </li>
- <li>
- <router-link to="/stock/warehouseLocation">{{ $t('warehouseLocation') }}</router-link>
- </li>
- <li>
- <router-link to="/stock/goodsLend">{{ $t('goodsLend') }}</router-link>
- </li>
- <li>
- <router-link to="/stock/goodsTransfer">{{ $t('goodsTransfer') }}</router-link>
- </li>
- <li>
- <router-link to="/stock/goodsExchange">{{ $t('goodsExchange') }}</router-link>
- </li>
- <li>
- <router-link to="/stock/goodsOutBound">{{ $t('goodsOutBound') }}</router-link>
- </li>
- <li>
- <router-link to="/stock/goodsInventory">{{ $t('goodsInventory') }}</router-link>
- </li>
- <li>
- <router-link to="/stock/goodsInventoryLoss">{{ $t('goodsInventoryLoss') }}</router-link>
- </li>
- <li>
- <router-link to="/stock/goodsUnderstock">{{ $t('goodsUnderstock') }}</router-link>
- </li>
- </ul>
- </li>
- <li class="menu nav-item relative">
- <a href="javascript:;" class="nav-link">
- <div class="flex items-center">
- <icon-menu-apps class="shrink-0" />
- <span class="px-2">{{ $t('goods') }}</span>
- </div>
- <div class="right_arrow">
- <icon-caret-down />
- </div>
- </a>
- <ul class="sub-menu">
- <li>
- <router-link to="/goods/SKUlist">{{ $t('SKUList') }}</router-link>
- </li>
- <!-- <li>
- <router-link to="/apps/mailbox">{{ $t('mailbox') }}</router-link>
- </li>
- <li>
- <router-link to="/apps/todolist">{{ $t('todo_list') }}</router-link>
- </li>
- <li>
- <router-link to="/apps/notes">{{ $t('notes') }}</router-link>
- </li>
- <li>
- <router-link to="/apps/scrumboard">{{ $t('scrumboard') }}</router-link>
- </li>
- <li>
- <router-link to="/apps/contacts">{{ $t('contacts') }}</router-link>
- </li>
- <li class="relative">
- <a href="javascript:;"
- >{{ $t('invoice') }}
- <div class="ltr:ml-auto rtl:mr-auto rtl:rotate-90 -rotate-90">
- <icon-caret-down />
- </div>
- </a>
- <ul
- 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"
- >
- <li>
- <router-link to="/apps/invoice/list">{{ $t('list') }}</router-link>
- </li>
- <li>
- <router-link to="/apps/invoice/preview">{{ $t('preview') }}</router-link>
- </li>
- <li>
- <router-link to="/apps/invoice/add">{{ $t('add') }}</router-link>
- </li>
- <li>
- <router-link to="/apps/invoice/edit">{{ $t('edit') }}</router-link>
- </li>
- </ul>
- </li>
- <li>
- <router-link to="/apps/calendar">{{ $t('calendar') }}</router-link>
- </li> -->
- </ul>
- </li>
- <li class="menu nav-item relative">
- <a href="javascript:;" class="nav-link">
- <div class="flex items-center">
- <icon-menu-components class="shrink-0" />
- <span class="px-2">{{ $t('companyMent') }}</span>
- </div>
- <div class="right_arrow">
- <icon-caret-down />
- </div>
- </a>
- <ul class="sub-menu">
- <li>
- <router-link to="/companyMent/administratorManage">{{ $t('administratorManage') }}</router-link>
- </li>
- <li>
- <router-link to="/setting/roleManage">{{ $t('roleManage') }}</router-link>
- </li>
- <li>
- <router-link to="/companyMent/branch">{{ $t('branch') }}</router-link>
- </li>
- <li>
- <router-link to="/companyMent/configMsg">{{ $t('configMsg') }}</router-link>
- </li>
- <li>
- <router-link to="/setting/systemLog">{{ $t('systemLog') }}</router-link>
- </li>
- <!-- <li>
- <router-link to="/components/countdown">{{ $t('countdown') }}</router-link>
- </li>
- <li>
- <router-link to="/components/counter">{{ $t('counter') }}</router-link>
- </li>
- <li>
- <router-link to="/components/sweetalert">{{ $t('sweet_alerts') }}</router-link>
- </li>
- <li>
- <router-link to="/components/timeline">{{ $t('timeline') }}</router-link>
- </li>
- <li>
- <router-link to="/components/notifications">{{ $t('notifications') }}</router-link>
- </li>
- <li>
- <router-link to="/components/media-object">{{ $t('media_object') }}</router-link>
- </li>
- <li>
- <router-link to="/components/list-group">{{ $t('list_group') }}</router-link>
- </li>
- <li>
- <router-link to="/components/pricing-table">{{ $t('pricing_tables') }}</router-link>
- </li>
- <li>
- <router-link to="/components/lightbox">{{ $t('lightbox') }}</router-link>
- </li> -->
- </ul>
- </li>
- <!-- <li class="menu nav-item relative">
- <a href="javascript:;" class="nav-link">
- <div class="flex items-center">
- <icon-menu-elements class="shrink-0" />
- <span class="px-2">{{ $t('elements') }}</span>
- </div>
- <div class="right_arrow">
- <icon-caret-down />
- </div>
- </a>
- <ul class="sub-menu">
- <li>
- <router-link to="/elements/alerts">{{ $t('alerts') }}</router-link>
- </li>
- <li>
- <router-link to="/elements/avatar">{{ $t('avatar') }}</router-link>
- </li>
- <li>
- <router-link to="/elements/badges">{{ $t('badges') }}</router-link>
- </li>
- <li>
- <router-link to="/elements/breadcrumbs">{{ $t('breadcrumbs') }}</router-link>
- </li>
- <li>
- <router-link to="/elements/buttons">{{ $t('buttons') }}</router-link>
- </li>
- <li>
- <router-link to="/elements/buttons-group">{{ $t('button_groups') }}</router-link>
- </li>
- <li>
- <router-link to="/elements/color-library">{{ $t('color_library') }}</router-link>
- </li>
- <li>
- <router-link to="/elements/dropdown">{{ $t('dropdown') }}</router-link>
- </li>
- <li>
- <router-link to="/elements/infobox">{{ $t('infobox') }}</router-link>
- </li>
- <li>
- <router-link to="/elements/jumbotron">{{ $t('jumbotron') }}</router-link>
- </li>
- <li>
- <router-link to="/elements/loader">{{ $t('loader') }}</router-link>
- </li>
- <li>
- <router-link to="/elements/pagination">{{ $t('pagination') }}</router-link>
- </li>
- <li>
- <router-link to="/elements/popovers">{{ $t('popovers') }}</router-link>
- </li>
- <li>
- <router-link to="/elements/progress-bar">{{ $t('progress_bar') }}</router-link>
- </li>
- <li>
- <router-link to="/elements/search">{{ $t('search') }}</router-link>
- </li>
- <li>
- <router-link to="/elements/tooltips">{{ $t('tooltips') }}</router-link>
- </li>
- <li>
- <router-link to="/elements/treeview">{{ $t('treeview') }}</router-link>
- </li>
- <li>
- <router-link to="/elements/typography">{{ $t('typography') }}</router-link>
- </li>
- </ul>
- </li>
- <li class="menu nav-item relative">
- <a href="javascript:;" class="nav-link">
- <div class="flex items-center">
- <icon-menu-datatables class="shrink-0" />
- <span class="px-2">{{ $t('tables') }}</span>
- </div>
- <div class="right_arrow">
- <icon-caret-down />
- </div>
- </a>
- <ul class="sub-menu">
- <li>
- <router-link to="/tables">{{ $t('tables') }}</router-link>
- </li>
- <li class="relative">
- <a href="javascript:;"
- >{{ $t('datatables') }}
- <div class="ltr:ml-auto rtl:mr-auto rtl:rotate-90 -rotate-90">
- <icon-caret-down />
- </div>
- </a>
- <ul
- 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"
- >
- <li>
- <router-link to="/datatables/basic">{{ $t('basic') }}</router-link>
- </li>
- <li>
- <router-link to="/datatables/advanced">{{ $t('advanced') }}</router-link>
- </li>
- <li>
- <router-link to="/datatables/skin">{{ $t('skin') }}</router-link>
- </li>
- <li>
- <router-link to="/datatables/order-sorting">{{ $t('order_sorting') }}</router-link>
- </li>
- <li>
- <router-link to="/datatables/columns-filter">{{ $t('columns_filter') }}</router-link>
- </li>
- <li>
- <router-link to="/datatables/multi-column">{{ $t('multi_column') }}</router-link>
- </li>
- <li>
- <router-link to="/datatables/multiple-tables">{{ $t('multiple_tables') }}</router-link>
- </li>
- <li>
- <router-link to="/datatables/alt-pagination">{{ $t('alt_pagination') }}</router-link>
- </li>
- <li>
- <router-link to="/datatables/checkbox">{{ $t('checkbox') }}</router-link>
- </li>
- <li>
- <router-link to="/datatables/range-search">{{ $t('range_search') }}</router-link>
- </li>
- <li>
- <router-link to="/datatables/export">{{ $t('export') }}</router-link>
- </li>
- <li>
- <router-link to="/datatables/sticky-header">{{ $t('sticky_header') }}</router-link>
- </li>
- <li>
- <router-link to="/datatables/clone-header">{{ $t('clone_header') }}</router-link>
- </li>
- <li>
- <router-link to="/datatables/column-chooser">{{ $t('column_chooser') }}</router-link>
- </li>
- </ul>
- </li>
- </ul>
- </li>
- <li class="menu nav-item relative">
- <a href="javascript:;" class="nav-link">
- <div class="flex items-center">
- <icon-menu-forms class="shrink-0" />
- <span class="px-2">{{ $t('forms') }}</span>
- </div>
- <div class="right_arrow">
- <icon-caret-down />
- </div>
- </a>
- <ul class="sub-menu">
- <li>
- <router-link to="/forms/basic">{{ $t('basic') }}</router-link>
- </li>
- <li>
- <router-link to="/forms/input-group">{{ $t('input_group') }}</router-link>
- </li>
- <li>
- <router-link to="/forms/layouts">{{ $t('layouts') }}</router-link>
- </li>
- <li>
- <router-link to="/forms/validation">{{ $t('validation') }}</router-link>
- </li>
- <li>
- <router-link to="/forms/input-mask">{{ $t('input_mask') }}</router-link>
- </li>
- <li>
- <router-link to="/forms/select2">{{ $t('select2') }}</router-link>
- </li>
- <li>
- <router-link to="/forms/touchspin">{{ $t('touchspin') }}</router-link>
- </li>
- <li>
- <router-link to="/forms/checkbox-radio">{{ $t('checkbox_and_radio') }}</router-link>
- </li>
- <li>
- <router-link to="/forms/switches">{{ $t('switches') }}</router-link>
- </li>
- <li>
- <router-link to="/forms/wizards">{{ $t('wizards') }}</router-link>
- </li>
- <li>
- <router-link to="/forms/file-upload">{{ $t('file_upload') }}</router-link>
- </li>
- <li>
- <router-link to="/forms/quill-editor">{{ $t('quill_editor') }}</router-link>
- </li>
- <li>
- <router-link to="/forms/markdown-editor">{{ $t('markdown_editor') }}</router-link>
- </li>
- <li>
- <router-link to="/forms/date-picker">{{ $t('date_and_range_picker') }}</router-link>
- </li>
- <li>
- <router-link to="/forms/clipboard">{{ $t('clipboard') }}</router-link>
- </li>
- </ul>
- </li>
- <li class="menu nav-item relative">
- <a href="javascript:;" class="nav-link">
- <div class="flex items-center">
- <icon-menu-pages class="shrink-0" />
- <span class="px-2">{{ $t('pages') }}</span>
- </div>
- <div class="right_arrow">
- <icon-caret-down />
- </div>
- </a>
- <ul class="sub-menu">
- <li class="relative">
- <a href="javascript:;"
- >{{ $t('users') }}
- <div class="ltr:ml-auto rtl:mr-auto rtl:rotate-90 -rotate-90">
- <icon-caret-down />
- </div>
- </a>
- <ul
- 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"
- >
- <li>
- <router-link to="/users/profile">{{ $t('profile') }}</router-link>
- </li>
- <li>
- <router-link to="/users/user-account-settings">{{ $t('account_settings') }}</router-link>
- </li>
- </ul>
- </li>
- <li>
- <router-link to="/pages/knowledge-base">{{ $t('knowledge_base') }}</router-link>
- </li>
- <li>
- <router-link to="/pages/contact-us-boxed" target="_blank">{{ $t('contact_us_boxed') }}</router-link>
- </li>
- <li>
- <router-link to="/pages/contact-us-cover" target="_blank">{{ $t('contact_us_cover') }}</router-link>
- </li>
- <li>
- <router-link to="/pages/faq">FAQ</router-link>
- </li>
- <li>
- <router-link to="/pages/coming-soon-boxed" target="_blank">{{ $t('coming_soon_boxed') }}</router-link>
- </li>
- <li>
- <router-link to="/pages/coming-soon-cover" target="_blank">{{ $t('coming_soon_cover') }}</router-link>
- </li>
- <li>
- <router-link to="/pages/maintenence" target="_blank">{{ $t('maintenence') }}</router-link>
- </li>
- <li class="relative">
- <a href="javascript:;"
- >{{ $t('error') }}
- <div class="ltr:ml-auto rtl:mr-auto rtl:rotate-90 -rotate-90">
- <icon-caret-down />
- </div>
- </a>
- <ul
- 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"
- >
- <li>
- <router-link to="/pages/error404" target="_blank">{{ $t('404') }}</router-link>
- </li>
- <li>
- <router-link to="/pages/error500" target="_blank">{{ $t('500') }}</router-link>
- </li>
- <li>
- <router-link to="/pages/error503" target="_blank">{{ $t('503') }}</router-link>
- </li>
- </ul>
- </li>
- <li class="relative">
- <a href="javascript:;"
- >{{ $t('login') }}
- <div class="ltr:ml-auto rtl:mr-auto rtl:rotate-90 -rotate-90">
- <icon-caret-down />
- </div>
- </a>
- <ul
- 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"
- >
- <li>
- <router-link to="/auth/cover-login" target="_blank">{{ $t('login_cover') }}</router-link>
- </li>
- <li>
- <router-link to="/auth/boxed-signin" target="_blank">{{ $t('login_boxed') }}</router-link>
- </li>
- </ul>
- </li>
- <li class="relative">
- <a href="javascript:;"
- >{{ $t('register') }}
- <div class="ltr:ml-auto rtl:mr-auto rtl:rotate-90 -rotate-90">
- <icon-caret-down />
- </div>
- </a>
- <ul
- 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"
- >
- <li>
- <router-link to="/auth/cover-register" target="_blank">{{ $t('register_cover') }}</router-link>
- </li>
- <li>
- <router-link to="/auth/boxed-signup" target="_blank">{{ $t('register_boxed') }}</router-link>
- </li>
- </ul>
- </li>
- <li class="relative">
- <a href="javascript:;"
- >{{ $t('password_recovery') }}
- <div class="ltr:ml-auto rtl:mr-auto rtl:rotate-90 -rotate-90">
- <icon-caret-down />
- </div>
- </a>
- <ul
- 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"
- >
- <li>
- <router-link to="/auth/cover-password-reset" target="_blank">{{ $t('recover_id_cover') }}</router-link>
- </li>
- <li>
- <router-link to="/auth/boxed-password-reset" target="_blank">{{ $t('recover_id_boxed') }}</router-link>
- </li>
- </ul>
- </li>
- <li class="relative">
- <a href="javascript:;"
- >{{ $t('lockscreen') }}
- <div class="ltr:ml-auto rtl:mr-auto rtl:rotate-90 -rotate-90">
- <icon-caret-down />
- </div>
- </a>
- <ul
- 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"
- >
- <li>
- <router-link to="/auth/cover-lockscreen" target="_blank">{{ $t('unlock_cover') }}</router-link>
- </li>
- <li>
- <router-link to="/auth/boxed-lockscreen" target="_blank">{{ $t('unlock_boxed') }}</router-link>
- </li>
- </ul>
- </li>
- </ul>
- </li>
- <li class="menu nav-item relative">
- <a href="javascript:;" class="nav-link">
- <div class="flex items-center">
- <icon-menu-more class="shrink-0" />
- <span class="px-2">{{ $t('more') }}</span>
- </div>
- <div class="right_arrow">
- <icon-caret-down />
- </div>
- </a>
- <ul class="sub-menu">
- <li>
- <router-link to="/dragndrop">{{ $t('drag_and_drop') }}</router-link>
- </li>
- <li>
- <router-link to="/charts">{{ $t('charts') }}</router-link>
- </li>
- <li>
- <router-link to="/font-icons">{{ $t('font_icons') }}</router-link>
- </li>
- <li>
- <router-link to="/widgets">{{ $t('widgets') }}</router-link>
- </li>
- <li>
- <a href="https://vristo.sbthemes.com" target="_blank">{{ $t('documentation') }}</a>
- </li>
- </ul>
- </li> -->
- </ul>
- </div>
- </header>
- <el-dialog
- :title="$t('setPayment')"
- v-model="dialogVisible"
- @open="handleDialogOpen"
- width="40%"
- :modal-append-to-body="false"
- :close-on-click-modal="false"
- :close-on-press-escape="false"
- >
- <div style="font-size: 12px;text-align: center;" v-if="PaymentForm.type == 'WX'">
- <span>tips:</span
- ><span class="center"
- >{{$t('payinfo')}}</span
- >
- </div>
- <el-form :model="PaymentForm" :rules="PaymentRules" ref="PaymentFormRef" label-width="160px">
- <el-form-item :label="$t('payment_type')+':'" prop="sn">
- <el-select v-model="PaymentForm.type">
- <el-option label="微信" value="WX" />
- <el-option label="支付宝" value="Ali" />
- </el-select>
- </el-form-item>
- <el-form-item label="AppId" prop="ali_app_id" v-if="PaymentForm.type == 'Ali'">
- <el-input v-model="PaymentForm.ali_app_id" :minlength="2" :maxlength="20" clearable placeholder="请输入"></el-input>
- </el-form-item>
- <el-form-item :label="$t('ali_private_key')+':'" prop="ali_app_private_key" v-if="PaymentForm.type == 'Ali'">
- <el-input
- v-model="PaymentForm.ali_app_private_key"
- :minlength="2"
- :maxlength="20"
- clearable
- type="textarea"
- :placeholder="$t('place')+$t('ali_private_key')"
- ></el-input>
- </el-form-item>
- <el-form-item :label="$t('ali_public_key')+':'" prop="ali_alipay_public_key" v-if="PaymentForm.type == 'Ali'">
- <el-input
- v-model="PaymentForm.ali_alipay_public_key"
- type="textarea"
- :minlength="2"
- :maxlength="20"
- clearable
- :placeholder="$t('place')+$t('ali_public_key')"
- ></el-input>
- </el-form-item>
- <el-form-item :label="$t('wx_sub_mch_id')+':'" prop="wx_sub_mch_id" v-if="PaymentForm.type == 'WX'">
- <el-input v-model="PaymentForm.wx_sub_mch_id" :placeholder="$t('place')+$t('wx_sub_mch_id')"></el-input>
- </el-form-item>
- </el-form>
- <template #footer>
- <div class="dialog-footer">
- <el-button @click="dialogVisible = false">{{ $t('cancel') }}</el-button>
- <el-button type="primary" @click="submitPaymentForm">{{ $t('submit') }}</el-button>
- </div>
- </template>
- </el-dialog>
- </template>
- <script lang="ts" setup>
- import { ref, onMounted, computed, reactive, watch } from 'vue';
- import { useI18n } from 'vue-i18n';
- import appSetting from '@/app-setting';
- import { useRouter, useRoute } from 'vue-router';
- import { useStore } from 'vuex';
- import IconMenu from '@/components/icon/icon-menu.vue';
- import IconCalendar from '@/components/icon/icon-calendar.vue';
- import IconEdit from '@/components/icon/icon-edit.vue';
- import IconChatNotification from '@/components/icon/icon-chat-notification.vue';
- import IconSearch from '@/components/icon/icon-search.vue';
- import IconXCircle from '@/components/icon/icon-x-circle.vue';
- import IconSun from '@/components/icon/icon-sun.vue';
- import IconMoon from '@/components/icon/icon-moon.vue';
- import IconLaptop from '@/components/icon/icon-laptop.vue';
- import IconMailDot from '@/components/icon/icon-mail-dot.vue';
- import IconArrowLeft from '@/components/icon/icon-arrow-left.vue';
- /* import IconInfoCircle from '@/components/icon/icon-info-circle.vue'; */
- import IconBellBing from '@/components/icon/icon-bell-bing.vue';
- import IconUser from '@/components/icon/icon-user.vue';
- /* import IconMail from '@/components/icon/icon-mail.vue'; */
- import IconLockDots from '@/components/icon/icon-lock-dots.vue';
- import IconLogout from '@/components/icon/icon-logout.vue'; /* */
- import IconMenuDashboard from '@/components/icon/menu/icon-menu-dashboard.vue';
- import IconCaretDown from '@/components/icon/icon-caret-down.vue';
- import IconMenuApps from '@/components/icon/menu/icon-menu-apps.vue';
- import IconMenuComponents from '@/components/icon/menu/icon-menu-components.vue';
- import IconMenuElements from '@/components/icon/menu/icon-menu-elements.vue';
- import IconMenuDatatables from '@/components/icon/menu/icon-menu-datatables.vue';
- import IconMenuForms from '@/components/icon/menu/icon-menu-forms.vue';
- import IconMenuPages from '@/components/icon/menu/icon-menu-pages.vue';
- import IconMenuMore from '@/components/icon/menu/icon-menu-more.vue';
- import { ElMessageBox, ElMessage } from 'element-plus';
- import * as API_Company from '@/api/company';
- import * as API_Auth from '@/api/auth';
- const { t } = useI18n();
- //ElMessageBox
- const store = useStore();
- const route = useRoute();
- const router = useRouter();
- const search = ref(false);
- // multi language
- const i18n = reactive(useI18n());
- const changeLanguage = (item: any) => {
- i18n.locale = item.code;
- appSetting.toggleLanguage(item);
- };
- const superMenu = computed(() => store.state.superMenu);
- const founder = computed(() => store.state.user.user.founder);
- const currentFlag = computed(() => {
- return `/assets/images/flags/${i18n.locale.toUpperCase()}.svg`;
- });
- const countNot = ref(0);
- /* 获取账号未读消息 */
- const GET_countNot = () => {
- API_Company.countNotReadSys().then((res) => {
- countNot.value = res;
- });
- };
- const notifications = ref([
- {
- id: 1,
- profile: 'user-profile.jpeg',
- message: '<strong class="text-sm mr-1">John Doe</strong>invite you to <strong>Prototyping</strong>',
- time: '45 min ago',
- },
- {
- id: 2,
- profile: 'profile-34.jpeg',
- message: '<strong class="text-sm mr-1">Adam Nolan</strong>mentioned you to <strong>UX Basics</strong>',
- time: '9h Ago',
- },
- {
- id: 3,
- profile: 'profile-16.jpeg',
- message: '<strong class="text-sm mr-1">Anna Morgan</strong>Upload a file',
- time: '9h Ago',
- },
- ]);
- const messages = ref([
- {
- id: 1,
- image:
- '<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>',
- title: 'Congratulations!',
- message: 'Your OS has been updated.',
- time: '1hr',
- },
- {
- id: 2,
- image:
- '<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>',
- title: 'Did you know?',
- message: 'You can switch between artboards.',
- time: '2hr',
- },
- {
- id: 3,
- image:
- '<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>',
- title: 'Something went wrong!',
- message: 'Send Reposrt',
- time: '2days',
- },
- {
- id: 4,
- image:
- '<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>',
- title: 'Warning',
- message: 'Your password strength is low.',
- time: '5days',
- },
- ]);
- onMounted(() => {
- setActiveDropdown();
- GET_countNot();
- });
- watch(route, (to, from) => {
- setActiveDropdown();
- });
- /* 支付信息表单 */
- const dialogVisible = ref(false);
- const PaymentForm = ref<any>({
- type: 'Ali',
- ali_app_id: '',
- ali_app_private_key: '',
- ali_alipay_public_key: '',
- wx_sub_mch_id: '',
- });
- const PaymentRules = ref<any>({
- ali_app_id: [{ required: true, message: t('submit')+'Appid', trigger: 'blur' }],
- ali_app_private_key: [{ required: true, message: t('submit')+t('ali_private_key'), trigger: 'blur' }],
- ali_alipay_public_key: [{ required: true, message: t('submit')+t('ali_public_key'), trigger: 'blur' }],
- wx_sub_mch_id: [{ required: true, message: t('submit')+t('wx_sub_mch_id'), trigger: 'blur' }],
- });
- const setActiveDropdown = () => {
- const selector = document.querySelector('ul.horizontal-menu a[href="' + window.location.pathname + '"]');
- if (selector) {
- selector.classList.add('active');
- const all: any = document.querySelectorAll('ul.horizontal-menu .nav-link.active');
- for (let i = 0; i < all.length; i++) {
- all[0]?.classList.remove('active');
- }
- const ul: any = selector.closest('ul.sub-menu');
- if (ul) {
- let ele: any = ul.closest('li.menu').querySelectorAll('.nav-link');
- if (ele) {
- ele = ele[0];
- setTimeout(() => {
- ele?.classList.add('active');
- });
- }
- }
- }
- };
- /* 前往消息页面 */
- const goNotify = () => {
- router.push({
- name: 'Notify',
- });
- };
- /* 修改密码 */
- const editPassword = () => {
- router.push({
- path: '/lockscreen',
- });
- };
- /* 前往个人信息页面 */
- const goInfo = () => {
- router.push({
- name: 'companyInfo',
- });
- };
- const removeNotification = (value: number) => {
- notifications.value = notifications.value.filter((d) => d.id !== value);
- };
- const removeMessage = (value: number) => {
- messages.value = messages.value.filter((d) => d.id !== value);
- };
- const toggleSidebars = () => {
- store.dispatch('toggleSidebar');
- };
- const toggleTheme = (theme) => {
- store.dispatch('toggleTheme', theme);
- };
- const closes = () => {};
- const handleLogoutClick = () => {
- ElMessageBox.confirm(t('logout_commit')+'?', t('prompt'), {
- confirmButtonText: t('submit'),
- cancelButtonText: t('cancel'),
- type: 'warning',
- })
- .then(() => {
- store.dispatch('logoutAction').then(() => {
- const route = router.resolve('/login');
- location.replace(route.href); // 为了重新实例化vue-router对象 避免bug
- });
- })
- .catch(() => {
- /* Handle cancel action if needed */
- });
- };
- const getBranch = (value) => {
- store.dispatch('toggleSuperMenu', value);
- router.push({
- name: 'dashboard',
- });
- };
- /* 设置收款信息 */
- const setPayment = () => {
- dialogVisible.value = true;
- };
- /* 提交收款信息 */
- const PaymentFormRef = ref();
- const submitPaymentForm = () => {
- PaymentFormRef.value.validate((valid: boolean) => {
- if (valid) {
- API_Auth.editAdministrator(store.state.user.user.company_vo.id, PaymentForm.value).then((res) => {
- PaymentForm.value={}
- ElMessage.success(t('payment_success'));
- });
- } else {
- ElMessage.error(t('form_erroe'));
- /* store.dispatch('showMessage', { message: '表单填写有误,请核对!', type: 'error' }); */
- return false;
- }
- });
- };
- const handleDialogOpen = () => {
- setTimeout(() => {
- PaymentFormRef.value.clearValidate();
- });
- };
- </script>
|