工作台

src/assets/styles/common.css

@@ -533,6 +533,9 @@ page {
 .inline .el-statistic__content{
 	line-height: 0;
 }
+.text-weight-bold700{
+	font-weight: 700;
+}
 .text-weight-bold{
 	font-weight: bold !important;
 }

src/router/router.ts

@@ -397,6 +397,29 @@ const routes: RouteRecordRaw[] = [
       title:'工作台'
     },
   },
+  {
+    path: '/project',
+    component: () => import('@/views/project/Layout.vue'),
+    meta:{
+      title:'工作台'
+    },
+    children:[
+      {
+        path: '/project',
+        component: () => import('@/views/project/Index.vue'),
+        meta:{
+          title:'概览'
+        }
+      },
+      {
+        path: '/project/create/trip',
+        component: () => import('@/views/project/trip.vue'),
+        meta:{
+          title:'行程制作'
+        }
+      },
+    ]
+  },
   {
     path: '/p/show',
     component: () => import('@/views/Product/Show.vue'),

src/store/menu.ts

@@ -7,7 +7,7 @@ export interface Menu{
     url:string,
     children?:Menu[]
 }
-export type MenuOwner = '*'|'F'|'V'|'A'|'E'|'M'
+export type MenuOwner = '*'|'F'|'V'|'A'|'E'|'M'|'C'
 export interface MenuState {
     userMenu:Menu[]
     temMenu: Menu[]
@@ -31,6 +31,8 @@ const menus:{menu:Menu,owner:MenuOwner}[] = [
     {menu:{name:'云盘空间',icon:'IconCloudStorage',url:'/a/c'},owner:'A'},
     {menu:{name:'LOGO设置',icon:'IconPicture',url:'/a/l'},owner:'A'},
     {menu:{name:'订单/发票',icon:'IconCurrency',url:'/a/order'},owner:'E'},
+    {menu:{name:'概览',icon:'IconCurrency',url:'/project'},owner:'C'},
+    {menu:{name:'行程制作',icon:'IconCurrency',url:'/project/create/trip'},owner:'C'},
     {
         menu:{
             name:'更多设置 ',
@@ -95,6 +97,14 @@ export const useMenuStore = defineStore('menu', {
                 return finds.map(x=>x.menu)
             }
             return new Array<Menu>()
+        },
+        getCreateMenu:(state)=>{
+            let userPermissions:MenuOwner[] = ['C']
+            const findFreeMenu = menus.filter(x=>userPermissions.includes(x.owner))
+            if(findFreeMenu){
+                state.temMenu = findFreeMenu.map(x=>x.menu)
+            }
+            return state.temMenu
         }
     },
     // actions:{

src/views/TeamCenter/Layout.vue

@@ -13,7 +13,7 @@
         <div class="col row">
             <div class="user-center-menu column ">
                 
-                <el-menu :default-active="activeIndex" class="no-border md-menu col" router>
+                <el-menu :default-active="`${activeIndex}`" class="no-border md-menu col" router>
                     <template v-for="(x,i) in menus" :key="i">
                         <el-sub-menu :index="`${i}`" v-if="x.children && x.children.length>0">
                             <template #title>

src/views/TemplateCenter/Layout.vue

@@ -15,7 +15,7 @@
         </div>
         <div class="col row">
             <div class="user-center-menu column ">
-                <el-menu :default-active="activeIndex" class="no-border md-menu col" router>
+                <el-menu :default-active="`${activeIndex}`" class="no-border md-menu col" router>
                     <el-menu-item :index="`${i}`" v-for="(x,i) in menus" :key="i" :route="x.url">
                         <component :is="x.icon" style="font-size: 20px;"></component>
                         <span class="q-ml-lg">{{ x.name }}</span>

src/views/Workbench/components/NewProject.vue

@@ -2,15 +2,21 @@
     <el-form :model="form" :rules="rules" ref="ruleFormRef" class="NewProjectForm">
         <div class="fz16 text-weight-bold microsoft q-mb-md">项目标题：</div>
         <el-form-item label="" prop="Name">
-            <el-input v-model="form.Name" autocomplete="off" />
+            <el-input v-model="form.Name" autocomplete="off" placeholder="项目标题"/>
         </el-form-item>
     </el-form>
     <div class="column q-pt-lg">
         <div class="row">
-            <el-button class="col" type="info" plain size="large">记录项目需求</el-button>
+            <el-tooltip
+                class="box-item"
+                effect="dark"
+                content="此为TD云高级版/定制版功能"
+                placement="left">
+                <el-button class="col" type="info" plain size="large" disabled>记录项目需求</el-button>
+            </el-tooltip>
         </div>
         <div class="row q-pt-sm">
-          <el-button class="col" size="large">规划行程路线</el-button>  
+          <el-button class="col" size="large"@click="router.push('/project/create/trip')">规划行程路线</el-button>  
         </div>
     </div>
 </template>
@@ -18,9 +24,14 @@
     import { ElMessage, FormInstance, FormRules } from 'element-plus';
     import { ref, reactive, watch, inject, onMounted } from "vue";
     import { injectKeyPublic } from '@/types/injectKey';
+    import { useRouter } from "vue-router";
 
-    const WorkProject = ref({} as any)
-    WorkProject.value = inject(injectKeyPublic)
+    const router = useRouter()
+    const search = ref({} as any)
+    search.value = inject(injectKeyPublic)
+
+    const form = ref({} as any)
+    form.value = search.value.form
 
     const props = defineProps({
         addDialogFormVisible: {
@@ -36,19 +47,14 @@
             { min: 1, max: 500, message: '', trigger: 'blur' },
         ]
     })
-    const form = ref({} as any)
-    WorkProject.value.form = {
-        Name: ''
-    }
-    form.value = WorkProject.value.form
     const close = () => {
 
     }
-    const closed = () => {
+    const confirmator = () => {
         
     }
     watch(()=>form.value,(o,n)=>{
-        WorkProject.value.form = form.value
+        search.value.form = form.value
     })
     watch(()=>props.addDialogFormVisible,(o,n)=>{
         ruleFormRef.value.clearValidate()

src/views/Workbench/components/header.vue

+<template>
+    <div>
+        <div class="bg-white WorkbenchInTabBox">
+            <div class="q-px-lg row flex-between">
+                <div class="row WorkbenchInTab fz14 text-weight-bolder microsoft" @click="queryObj.Current=1">
+                    <div class="cusor-pointer"
+                    :class="[queryObj.Current==1?'active':'']">全部</div>
+                </div>
+                <div class="WorkbenchInDel fz14 microsoft cusor-pointer q-pr-lg" @click="queryObj.Current=2">
+                    <div class="WorkbenchInTab">
+                        <div :class="[queryObj.Current==2?'active':'']">回收站</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    
+        <div class="q-px-lg">
+            <div class="col row flex-between q-px-lg q-py-md">
+                <div class="row items-center wrap WorkbenchInSea">
+                  <div class="row items-center q-mb-sm">
+                    <el-input class="microsoft" style="max-width:150px" 
+                    v-model="queryObj.Title" placeholder="搜索关键字"
+                    clearable>
+                        <template #prefix>
+                            <el-icon class="el-input__icon"><Search /></el-icon>
+                        </template>
+                    </el-input>
+                  </div>
+                  <div class="row items-center bg-white q-ml-lg q-mb-sm" style="border-radius: 5px;height: 34px;">
+                    <div class="row items-center">
+                        <el-input class="microsoft" style="max-width:150px" 
+                        v-model="queryObj.Title" placeholder="出行地点"
+                        clearable>
+                        <template #prefix>
+                            <el-icon class="el-input__icon"><Location /></el-icon>
+                        </template>
+                      </el-input>
+                    </div>
+                    <div class="WorkbenchInSeaLin"></div>
+                    <div class="row items-center">
+                        <el-input class="microsoft" style="max-width:150px" 
+                        v-model="queryObj.Day" placeholder="出行天数"
+                        clearable>
+                            <template #prefix>
+                                <el-icon class="el-input__icon"><Sunny /></el-icon>
+                            </template>
+                        </el-input>
+                    </div>
+                    <div class="WorkbenchInSeaLin"></div>
+                    <div class="row items-center">
+                        <el-date-picker style="max-width:300px" @change="getTime"
+                            v-model="dateTime"
+                            type="daterange"
+                            start-placeholder="开始"
+                            end-placeholder="结束"
+                            format="YYYY-MM-DD"
+                            date-format="YYYY-MM-DD"
+                            value-format="YYYY-MM-DD">
+                        </el-date-picker>
+                    </div>
+                  </div>
+                  <div class="row items-center q-ml-lg q-mb-sm">
+                    <el-input class="microsoft" style="max-width:150px" 
+                    v-model="queryObj.Title" placeholder="相关POI"
+                    clearable>
+                        <template #prefix>
+                            <el-icon class="el-input__icon"><Fries /></el-icon>
+                        </template>
+                    </el-input>
+                  </div>
+                  <div class="row items-center q-ml-lg q-mb-sm">
+                    <el-checkbox v-model="queryObj.Star" label="星标" size="large" />
+                  </div>
+                </div>
+                <div class="row nowrap" style="flex-shrink: 0;">
+                    <el-button class="q-pl-lg microsoft"
+                    size="Default" type="primary" icon="plus" @click="addCreateProject"
+                    > 新建</el-button>
+                </div>
+            </div>
+            
+        </div>
+
+        <el-dialog v-model="addDialogFormVisible" title="" width="420">
+            <template #header>
+                <div class="text-title text-left fz16 PingFangSC">创建出行项目</div>
+            </template>
+            <NewProject v-if="!addSharer" :addDialogFormVisible="addDialogFormVisible"></NewProject>
+            <NewSharer v-else></NewSharer>
+            <template #footer>
+                <div class="dialog-footer row flex-between">
+                    <template v-if="!addSharer">
+                        <div class="row items-center pointer" @click="addSharer=true">
+                            <el-icon><User /></el-icon>
+                            <span class="fz14 microsoft q-pl-md">添加分享人</span>
+                        </div>
+                        <el-button link type="primary" @click="addDialogFormVisible = false">跳过</el-button>
+                    </template>
+                    <template v-else>
+                        <div class="">
+                        
+                        </div>
+                        <div>
+                            <el-button @click="addSharer = false">取消</el-button>
+                            <el-button type="primary" @click="confirmator">确认</el-button>
+                        </div>
+                    </template>
+                    
+                </div>
+            </template>
+        </el-dialog>
+    </div>
+    
+</template>
+
+<script lang="ts" setup>
+    import { storeToRefs } from 'pinia'
+    import { ref, reactive, watch, inject } from "vue";
+    import { useUserStore } from "@/store/user"
+    import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
+    import { injectKeyPublic } from '@/types/injectKey';
+    import NewProject from './NewProject'
+    import NewSharer from './NewSharer'
+
+    const search = ref({} as any)
+    search.value = inject(injectKeyPublic)
+
+    const queryObj = ref({} as any)
+    queryObj.value = search.value.queryObj
+
+    const addDialogFormVisible = ref(false)
+    const addSharer = ref(false)
+    const dateTime = ref('')
+
+    const confirmator = () => {
+        addSharer.value = false
+    }
+    const getTime = () => {
+        console.log(dateTime.value)
+        if(dateTime.value.length>0){
+            queryObj.value.star = dateTime.value[0]
+            queryObj.value.end = dateTime.value[1]
+        }else{
+            queryObj.value.star = ''
+            queryObj.value.end = ''
+        }
+    }
+    const addCreateProject = () => {
+        addDialogFormVisible.value = true
+    }
+
+    watch(()=>queryObj.value,(o,n)=>{
+        search.value.queryObj = queryObj.value
+    },{deep:true})
+
+</script>
+
+<style lang="scss" scoped>
+.user-center-header {
+    padding: 0 40px 0 28px;
+    border-bottom: 1px solid #efefef;
+    height: 56px;
+    color: #000;
+}
+
+.user-center-menu {
+    width: 90px;
+    padding: 20px 0 20px 16px;
+    font-family: microsoft yahei;
+}
+
+.user-center-body {
+    padding: 20px 40px 40px 40px;
+}
+.WorkbenchInTabBox{
+    padding: 8px 20px;
+}
+.WorkbenchInTab div{
+    color: $themeColor
+}
+.WorkbenchInTab div.active{
+    position: relative;
+}
+.WorkbenchInTab div.active::after{
+    content: "";
+    display: block;
+    position: absolute;
+    width: 24px;
+    height: 4px;
+    background: $themeColor;
+    border-radius: 2px;
+    bottom: -9px;
+    left: 50%;
+    transform: translateX(-50%) translateY(0);
+    
+}
+.WorkbenchInDel{
+    padding-left: 16px;
+    margin-right: -16px;
+    border-left: 1px solid #e6e7e8;
+}
+.WorkbenchInDel span{
+    display: inline-block;
+    padding: 0 16px;
+    position: relative;
+    color: #666e76;
+    transition: color .3s;
+}
+.WorkbenchInDel:hover span{
+    color: $themeColor;
+}
+.WorkbenchInSea::v-deep(.el-input__wrapper),.WorkbenchInSea::v-deep(.el-date-editor.el-input__wrapper) {
+    box-shadow: 0 0 0 0px var(--el-input-border-color,var(--el-border-color)) inset;
+    border: 1px solid #fff;
+}
+.WorkbenchInSea::v-deep(.el-input__wrapper:hover),.WorkbenchInSea::v-deep(.el-date-editor.el-input__wrapper:hover) {
+    border: 1px solid $themeColor;
+}
+.WorkbenchInSeaLin{
+    margin: 7px 0;
+    width: 1px;
+    background: #dedede;
+}
+</style>

src/views/Workbench/components/personnel.vue

+<template>
+    <div class="full-height" style="position: relative;">
+        <el-input 
+        style="position: absolute;left: 0;top: 0;right: 0;z-index: 2;"
+        class="microsoft q-mb-md" size="large"
+        v-model="keyword" placeholder="搜索成员"
+        clearable
+        @keyup.enter="filtrationData" @change="filtrationData">
+            <template #prefix>
+                <el-icon class="el-input__icon"><Search /></el-icon>
+            </template>
+        </el-input>
+        <!-- height="300px" -->
+        <el-scrollbar class="col full-height user-center-body" style="padding-top: 50px;">
+            <div class="row col flex-between items-center q-pb-md pointer" 
+            v-for="(item,index) in allPeoples" :key="index"
+            @click="clickLine(item,index,1)">
+                <div>
+                    <el-button size="large" color="#599DFA" circle class="q-mr-lg">
+                        <span class="colorF">{{item.name.slice(0,2)}}</span>
+                    </el-button>
+                    <span class="color0 fz14 microsoft">{{item.name}}</span>
+                </div>
+                <div>
+                    <el-checkbox v-model="item.checked" label="" size="large" @change="clickLine(item,index)" @click.stop=""/>
+                </div>
+            </div>
+        </el-scrollbar>
+    </div>
+</template>
+<script lang="ts" setup>
+    
+    import { ElMessage, FormInstance, FormRules } from 'element-plus';
+    import { ref, reactive, watch, inject, onMounted } from "vue";
+    import { injectKeyPublic } from '@/types/injectKey';
+    import { Search } from '@element-plus/icons-vue';
+
+    const search = ref({} as any)
+    search.value = inject(injectKeyPublic)
+
+    const queryObj = ref({} as any)
+    queryObj.value = search.value.queryObj
+
+    const msg = ref({} as any)
+    msg.value = search.value.msg
+
+    const form = ref({} as any)
+    form.value = search.value.form
+
+    const allPeoples = ref([] as ay)
+    allPeoples.value = JSON.parse(JSON.stringify(msg.value.allPeoples))
+    
+    const keyword = ref('')
+    
+    const props = defineProps({
+        
+    })
+ 
+    const filtrationData = () => {
+        if(keyword.value)allPeoples.value = msg.value.allPeoples.filter(x=>{ return x.name.toLowerCase().includes(keyword.value.toLowerCase())})
+        else allPeoples.value = msg.value.allPeoples
+    }
+   
+    const clickLine = (item:any,index:Number,type:any) => {
+        if(type){
+            item.checked = !item.checked
+        }
+        if(item.checked==true) {
+            let filter
+            if(msg.value.personnelType==1)  filter = msg.value.personnelList1.filter(x=>{ return x.empId==item.empId})
+            if(msg.value.personnelType==2)  filter = msg.value.personnelList2.filter(x=>{ return x.empId==item.empId})
+            if(msg.value.personnelType==3)  filter = msg.value.personnelList3.filter(x=>{ return x.empId==item.empId})
+            if(msg.value.personnelType==4)  filter = msg.value.personnelList4.filter(x=>{ return x.empId==item.empId})
+            if(msg.value.personnelType==5)  filter = msg.value.personnelList5.filter(x=>{ return x.empId==item.empId})
+            if(filter.length==0) {
+                if(msg.value.personnelType==1) msg.value.personnelList1.push(item)
+                if(msg.value.personnelType==2) msg.value.personnelList2.push(item)
+                if(msg.value.personnelType==3) msg.value.personnelList3.push(item)
+                if(msg.value.personnelType==4) msg.value.personnelList4.push(item)
+                if(msg.value.personnelType==5) msg.value.personnelList5.push(item)
+            }
+        }else {
+            if(msg.value.personnelType==1) msg.value.personnelList1 = msg.value.personnelList1.filter(x=>{ return x.empId!=item.empId})
+            if(msg.value.personnelType==2) msg.value.personnelList2 = msg.value.personnelList2.filter(x=>{ return x.empId!=item.empId})
+            if(msg.value.personnelType==3) msg.value.personnelList3 = msg.value.personnelList3.filter(x=>{ return x.empId!=item.empId})
+            if(msg.value.personnelType==4) msg.value.personnelList4 = msg.value.personnelList4.filter(x=>{ return x.empId!=item.empId})
+            if(msg.value.personnelType==5) msg.value.personnelList5 = msg.value.personnelList5.filter(x=>{ return x.empId!=item.empId})
+        }
+    }
+    
+    watch(()=>msg.value,(o,n)=>{
+        search.value.msg = msg.value
+        allPeoples.value.forEach(x=>{
+            let filter
+            if(msg.value.personnelType==1) filter = msg.value.personnelList1.filter(y=>{return y.empId==x.empId})
+            if(msg.value.personnelType==2) filter = msg.value.personnelList2.filter(y=>{return y.empId==x.empId})
+            if(msg.value.personnelType==3) filter = msg.value.personnelList3.filter(y=>{return y.empId==x.empId})
+            if(msg.value.personnelType==4) filter = msg.value.personnelList4.filter(y=>{return y.empId==x.empId})
+            if(msg.value.personnelType==5) filter = msg.value.personnelList5.filter(y=>{return y.empId==x.empId})
+            if(filter.length>0) x.checked = true
+            else x.checked = false
+        })
+    },{deep:true})
+    watch(()=>msg.value.personnelType,(o,n)=>{
+        allPeoples.value.forEach(x=>{
+            let filter
+            if(msg.value.personnelType==1) filter = msg.value.personnelList1.filter(y=>{return y.empId==x.empId})
+            if(msg.value.personnelType==2) filter = msg.value.personnelList2.filter(y=>{return y.empId==x.empId})
+            if(msg.value.personnelType==3) filter = msg.value.personnelList3.filter(y=>{return y.empId==x.empId})
+            if(msg.value.personnelType==4) filter = msg.value.personnelList4.filter(y=>{return y.empId==x.empId})
+            if(msg.value.personnelType==5) filter = msg.value.personnelList5.filter(y=>{return y.empId==x.empId})
+            if(filter.length>0) x.checked = true
+            else x.checked = false
+        })
+    },{deep:true})
+    onMounted(()=>{
+        
+    })
+</script>
+<style lang="scss" scoped>
+
+
+
+</style>
\ No newline at end of file

src/views/project/Index.vue

+<template>
+    
+</template>
+  
+<script setup lang="ts">
+  import { reactive, ref, inject, onMounted, watch} from "vue";
+  import LineService from '@/services/LineService'
+  import ConfigService from '@/services/ConfigService'
+  import { useUserStore } from "@/store/user";
+  import { useSellTemplateStore,useSlidesStore } from '@/store'
+  import { useScreenStore } from "@/store/screen";
+  import { storeToRefs } from "pinia";
+  import { injectKeyTemplate } from '@/types/injectKey'
+  import { createOpEditorLink, createSaleCreateLink, managerTemplateLink, noDataImg, openNewBlank } from '@/utils/common'
+  import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
+  import { useRouter } from "vue-router";
+  import UserCard from "@/components/User/UserCard.vue";
+  import temDetails from "@/components/home/temDetails.vue";
+  import { Edit,Delete,View,Search } from '@element-plus/icons-vue';
+  import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '@/configs/canvas'
+
+</script>
+
+<style lang="scss" scoped>
+    
+</style>
\ No newline at end of file

src/views/project/Layout.vue

+<template>
+    <div class="window-height column">
+        <div class="user-center-header row items-center">
+            <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/pptTD.png"
+                style="height: 24px" />
+            <div class="q-ml-lg text-weight-bold" style="font-size: 20px">
+                工作台
+            </div>
+            <div class="user-center-menuB column ">
+                <el-button class="full-width pingfangr text-weight-bolder" 
+                @click="forwardSpace" 
+                style="font-size: 14px !important;" icon="arrow-left">返回</el-button>
+            </div>
+            <div class="col"></div>
+
+            <UserCard :size="33"></UserCard>
+        </div>
+        <div class="col column q-px-lg">
+            <div class="user-center-menu row">
+                <el-menu :default-active="`${activeIndex}`" class="el-menu-demo col row q-px-lg"
+                 router>
+                    <template v-for="(x,i) in menus">
+                        <el-menu-item :index="`${i}`" :key="i" :route="x.url" v-if="i==0">
+                            <span class="microsoft">{{ x.name }}</span>
+                        </el-menu-item>
+                    </template>
+                    <div class="row items-center q-pr-lg">
+                       <div class="q-pl-md q-pr-lg color0 fz12">》</div>
+                        <el-divider  class="q-ml-lg" direction="vertical" style="height: 60%;"/> 
+                    </div>
+                    <template v-for="(x,i) in menus">
+                        <el-menu-item :index="`${i}`" :key="i" :route="x.url" v-if="i!=0">
+                            <span class="microsoft">{{ x.name }}</span>
+                        </el-menu-item>
+                    </template>
+                    
+                </el-menu>
+            </div>
+            <el-scrollbar class="col full-height user-center-body" wrap-style="overflow-x:unset;">
+                <router-view />
+            </el-scrollbar>
+        </div>
+    </div>
+    
+</template>
+
+<script lang="ts" setup>
+import { storeToRefs } from 'pinia'
+import UserCard from "@/components/User/UserCard.vue";
+import { useMenuStore,useScreenStore } from "@/store";
+import { ref, watch } from "vue";
+import { useRouter } from "vue-router";
+import { useUserStore } from "@/store/user"
+
+const router = useRouter()
+const useMenu = useMenuStore();
+const menus = ref(useMenu.getCreateMenu);
+const { model } = storeToRefs(useScreenStore())
+const activeIndex = ref(0)
+
+const userStore= useUserStore()
+const userInfo = userStore.getUser
+if(!userInfo.isTemplate && !userInfo.iv && !userInfo.ic && !userInfo.ia) router.push('/notfound')
+
+const forwardSpace = () => router.push('/space')
+
+watch(() => router.currentRoute.value.path, (toPath) => {
+    // if(!userInfo.isTemplate && !userInfo.iv && !userInfo.ic && !userInfo.ia) return router.push('/notfound')
+
+    menus.value = useMenu.getCreateMenu
+    if(!menus.value) return
+    activeIndex.value = menus.value.findIndex(x=>x.url==router.currentRoute.value.path)
+},{immediate: true,deep: true})
+</script>
+
+<style lang="scss" scoped>
+.user-center-header {
+    padding: 0 40px 0 28px;
+    border-bottom: 1px solid #efefef;
+    height: 56px;
+    color: #000;
+}
+.user-center-menuB {
+    width: 90px;
+    padding: 20px 0 20px 16px;
+    font-family: microsoft yahei;
+}
+.el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-menu-item{
+    padding-left: 0;
+}
+.el-menu{
+    border: 0;
+}
+.user-center-menu {
+    padding: 0 20px;
+    font-family: microsoft yahei;
+}
+.el-menu-demo .el-menu-item{
+    padding: 0;
+    position: relative;
+}
+.el-menu-demo .el-menu-item.is-active::after{
+    content: "";
+    display: block;
+    position: absolute;
+    width: 24px;
+    height: 4px;
+    background: $themeColor;
+    border-radius: 2px;
+    bottom: 0px;
+    left: 50%;
+    transform: translateX(-50%) translateY(0);
+
+}
+.el-menu-demo .el-menu-item:hover{
+    background: #fff !important;
+}
+.el-menu-demo .el-menu-item:hover span{
+    color: $themeColor !important;
+}
+
+.user-center-body {
+    padding: 20px 40px 40px 40px;
+}
+</style>

src/views/project/components/NewJourney.vue

+<template>
+    <el-form :model="form" :rules="rules" ref="ruleFormRef" class="NewProjectForm">
+        <div class="row items-center text-weight-bold microsoft q-mb-md">
+            <span class="text-negative q-pr-sm">*</span>
+            <span class="fz16">行程标题</span>
+        </div>
+        <el-form-item label="" prop="Name">
+            <el-input v-model="form.Name" autocomplete="off" placeholder="行程标题"/>
+        </el-form-item>
+        <div class="row items-center text-weight-bold microsoft q-mb-md q-pt-lg">
+            <span class="text-negative q-pr-sm"></span>
+            <span class="fz16">出行日期</span>
+        </div>
+        <el-form-item>
+            <el-date-picker @change="getTime"
+                v-model="dateTime"
+                type="daterange"
+                start-placeholder="开始"
+                end-placeholder="结束"
+                format="YYYY-MM-DD"
+                date-format="YYYY-MM-DD"
+                value-format="YYYY-MM-DD">
+            </el-date-picker>
+        </el-form-item>
+        <div class="row items-center text-weight-bold microsoft q-mb-md q-pt-lg">
+            <span class="text-negative q-pr-sm"></span>
+            <span class="fz16">出发与返回（城市）</span>
+        </div>
+        <el-form-item>
+            <div class="row col flex-between">
+                <el-select
+                    v-model="form.qscs"
+                    multiple
+                    filterable
+                    remote
+                    reserve-keyword
+                    placeholder="出发城市"
+                    :remote-method="remoteMethod"
+                    :loading="loading"
+                    style="width: 174px;"
+                >
+                    <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                    />
+                </el-select>
+                <div>
+                    <el-divider direction="vertical" style="height: 80%;"/>
+                </div>
+                <el-select
+                    v-model="form.qscs"
+                    multiple
+                    filterable
+                    remote
+                    reserve-keyword
+                    placeholder="返回城市"
+                    :remote-method="remoteMethod"
+                    :loading="loading"
+                    style="width: 174px;"
+                >
+                    <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                    />
+                </el-select>
+            </div>
+            
+        </el-form-item>
+    </el-form>
+</template>
+<script lang="ts" setup>
+    import { ElMessage, FormInstance, FormRules } from 'element-plus';
+    import { ref, reactive, watch, inject, onMounted } from "vue";
+    import { injectKeyPublic } from '@/types/injectKey';
+    import { useRouter } from "vue-router";
+
+    const router = useRouter()
+    // const search = ref({} as any)
+    // search.value = inject(injectKeyPublic)
+    const dateTime = ref('')
+    const options = ref([])
+    const loading = ref(false)
+    const form = reactive({
+        Name: '',
+        qscs: ''
+    } as any)
+
+    const props = defineProps({
+        addDialogFormVisible: {
+            type: Boolean,
+            default: false,
+        },
+    })
+
+    const ruleFormRef = ref<FormInstance>()
+    const rules = reactive<FormRules<RuleForm>>({
+        Name: [
+            { required: true, message: '请输入行程标题', trigger: 'blur' },
+            { min: 1, max: 500, message: '', trigger: 'blur' },
+        ]
+    })
+    const close = () => {
+
+    }
+    
+    const confirmator = () => {
+        
+    }
+    const getTime = () => {
+        console.log(dateTime.value)
+        if(dateTime.value.length>0){
+            // queryObj.value.star = dateTime.value[0]
+            // queryObj.value.end = dateTime.value[1]
+        }else{
+            // queryObj.value.star = ''
+            // queryObj.value.end = ''
+        }
+    }
+    const remoteMethod = (query: string) => {
+        if (query) {
+            loading.value = true
+            setTimeout(() => {
+            loading.value = false
+            options.value = list.value.filter((item) => {
+                return item.label.toLowerCase().includes(query.toLowerCase())
+            })
+            }, 200)
+        } else {
+            options.value = []
+        }
+    }
+    // watch(()=>form.value,(o,n)=>{
+    //     search.value.form = form.value
+    // })
+    watch(()=>props.addDialogFormVisible,(o,n)=>{
+        ruleFormRef.value.clearValidate()
+        ruleFormRef.value.resetFields()
+   })
+    onMounted(()=>{
+        
+    })
+</script>
+<style lang="scss" scoped>
+.NewProjectForm::v-deep(.el-input__wrapper){
+    box-shadow: 0 0 0 0px var(--el-input-border-color,var(--el-border-color)) inset;
+    border-radius: 0;
+    border: 1px solid #fff;
+    border-bottom-color: #e8eaec;
+}
+.NewProjectForm::v-deep(.el-input__wrapper:hover){
+    border-bottom-color: $themeColor; 
+    box-shadow: 0 0 0 0px var(--el-input-border-color,var(--el-border-color)) inset !important;
+}
+::v-deep(.el-form-item.is-error .el-input__wrapper.is-focus){
+    box-shadow: 0 0 0 0px var(--el-input-border-color,var(--el-border-color)) inset !important;
+}
+.NewProjectForm::v-deep(.el-select:hover){
+    border: 0!important;;
+    box-shadow: 0 0 0 0px var(--el-input-border-color,var(--el-border-color)) inset !important;
+}
+.NewProjectForm::v-deep(.select-trigger:hover){
+    border: 0!important;;
+    box-shadow: 0 0 0 0px var(--el-input-border-color,var(--el-border-color)) inset !important;
+}
+.NewProjectForm::v-deep(.el-tooltip__trigger:hover){
+    border: 0!important;;
+    box-shadow: 0 0 0 0px var(--el-input-border-color,var(--el-border-color)) inset !important;
+}
+.NewProjectForm::v-deep(.el-tooltip__trigger:hover){
+    border: 0!important;;
+    box-shadow: 0 0 0 0px var(--el-input-border-color,var(--el-border-color)) inset !important;
+}
+.NewProjectForm::v-deep(.el-select__tags:hover){
+    border: 0!important;;
+    box-shadow: 0 0 0 0px var(--el-input-border-color,var(--el-border-color)) inset !important;
+}
+
+
+</style>
\ No newline at end of file

src/views/project/trip.vue

+<template>
+    <div>
+        <el-dialog v-model="addDialogFormVisible" title="" width="420">
+            <template #header>
+                <div class="text-title text-left fz16 PingFangSC">新建行程</div>
+            </template>
+            <NewJourney :addDialogFormVisible="addDialogFormVisible"></NewJourney>
+            <template #footer>
+                <div class="dialog-footer row flex-between">
+                    <div class="">
+                        
+                    </div>
+                    <div>
+                        <el-button type="primary" @click="confirmator">创建</el-button>
+                    </div>
+                    
+                </div>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+<script lang="ts" setup>
+    import { ref, reactive, watch, inject } from "vue";
+    import NewJourney from './components/NewJourney'
+    const addDialogFormVisible = ref(true)
+
+    const confirmator = () => {
+
+    }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file