feat(待办): 我的审批

.prettierrc.cjs

@@ -2,7 +2,7 @@ module.exports = {
     // 超过80就换行
     printWidth: 80,
     // tab缩进大小，默认为2
-    tabWidth: 2,
+    tabWidth: 4,
     // 使用tab缩进，默认false
     useTabs: false,
     // 使用分号，默认true

src/assets/styles/btn.scss

@@ -123,6 +123,12 @@
   font-weight: 400;
   font-size: 13px;
   color: #536387;
+
+  &:hover{
+    background-color: var(--el-button-hover-bg-color);
+    border: 1px solid #0062FF;
+    color: #0062FF;
+  }
 }
 .el-button-primary-pain{
   width: 120px;

src/assets/styles/element-ui.scss

@@ -119,3 +119,20 @@ $base-font-size: 16px;
 .el-date-editor .el-range-input{
   font-size: 14px;
 }
+.el-tabs__active-bar {
+  background-color: #0062FF;
+  height: 4px;
+  min-width: 60px;
+}
+.el-tabs__item.is-active {
+  font-weight: 500;
+  font-size: 18px;
+  color: #0D162A;
+}
+.el-tabs__item {
+  font-size: 18px;
+}
+.el-tabs__item:hover {
+  color: #0062FF;
+  cursor: pointer;
+}

src/layout/components/Navbar.vue

@@ -7,7 +7,7 @@
     <div class="right-menu">
 <!--      <template v-if="appStore.device !== 'mobile'">-->
 <!--        <div class="todo">-->
-          <div class="todo hover-effect">
+          <div class="todo hover-effect" @click="goMYTodoList">
             <div  class="todo-logo"><img :src="todo" class="img-logo"/></div>
             <div class="todo-title">待办</div>
           </div>
@@ -75,6 +75,7 @@
 </template>
 
 <script setup>
+const router = useRouter();
 import { ElMessageBox } from 'element-plus'
 import Breadcrumb from '@/components/Breadcrumb'
 import TopNav from '@/components/TopNav'
@@ -132,6 +133,9 @@ function setLayout() {
 function toggleTheme() {
   settingsStore.toggleTheme()
 }
+const goMYTodoList= () => {
+  router.push({ path: '/myTodoLIst'});
+}
 </script>
 
 <style lang='scss' scoped>

src/views/handle/index.vue

+<template>
+  <div>处理</div>
+</template>
+<script setup></script>
+<style scoped lang="scss"></style>

src/views/initiated/index.vue

+<template>
+  <div>发起</div>
+</template>
+<script setup></script>
+<style scoped lang="scss"></style>

src/views/makeCopy/index.vue

+<template>
+  <div>抄送</div>
+</template>
+<script setup></script>
+<style scoped lang="scss"></style>

src/views/myTodoList/index.vue

+<template>
+  <div class="app-container">
+    <div class="formSearch">
+      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+        <el-tab-pane label="日常报销" name="daily"></el-tab-pane>
+        <el-tab-pane label="项目费用" name="projectCost"></el-tab-pane>
+        <el-tab-pane label="差旅报销" name="travel"></el-tab-pane>
+        <el-tab-pane label="工时审批" name="workHours"></el-tab-pane>
+      </el-tabs>
+
+      <el-form :inline="true" :model="formQuery" class="demo-form-inline">
+        <el-form-item label="项目名称">
+          <el-input
+            v-model="formQuery.user"
+            placeholder="Approved by"
+            clearable
+            style="width: 220px"
+          />
+        </el-form-item>
+        <el-form-item label="申请人">
+          <el-select
+            v-model="formQuery.region"
+            placeholder="Activity zone"
+            clearable
+            style="width: 220px"
+          >
+            <el-option label="Zone one" value="shanghai" />
+            <el-option label="Zone two" value="beijing" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="申请时间">
+          <el-date-picker
+            v-model="formQuery.date"
+            type="date"
+            placeholder="Pick a date"
+            clearable
+            style="width: 220px"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" class="el-button-primary" icon="search"
+            >搜索</el-button
+          >
+          <el-button type="defalut" class="el-button-defalut" icon="Refresh"
+            >重置</el-button
+          >
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="contentTable">
+      <component
+        :is="dialogComponents[activeName]"
+        :key="activeName"
+      ></component>
+    </div>
+  </div>
+</template>
+<script setup>
+import { daily, projectCost, travel, workHours } from '../tab/tabComponent.js'
+const dialogComponents = ref({
+    daily: daily,
+    projectCost: projectCost,
+    travel: travel,
+    workHours: workHours
+})
+const activeName = ref('daily')
+const formQuery = reactive({})
+const handleClick = value => {
+    console.log(activeName.value)
+}
+</script>
+<style scoped lang="scss"></style>

src/views/tab/daily.vue

+<script setup></script>
+
+<template>
+  <div>1</div>
+</template>
+
+<style scoped lang="scss"></style>

src/views/tab/projectCost.vue

+<script setup></script>
+
+<template><div>2</div></template>
+
+<style scoped lang="scss"></style>

src/views/tab/tabComponent.js

+import daily from './daily.vue'
+import projectCost from './projectCost.vue'
+import travel from './travel.vue'
+import workHours from './workHours.vue'
+
+export{daily,projectCost,travel,workHours}

src/views/tab/travel.vue

+<script setup></script>
+
+<template><div>3</div></template>
+
+<style scoped lang="scss"></style>

src/views/tab/workHours.vue

+<script setup></script>
+
+<template><div>4</div></template>
+
+<style scoped lang="scss"></style>