出差管理页面

src/views/attendance/business-trip/index.vue

@@ -1,10 +1,162 @@
-<!--  -->
+
 <template>
-  <div ></div>
+  <HcCard>
+    <template #header>
+      <div class="w-36 ml-2">
+                <el-select v-model="searchForm.peoplename" block clearable placeholder="项目名称" size="large">
+                    <el-option v-for="item in peopleoption" :label="item.name" :value="item.key"/>
+                </el-select>
+      </div>
+     
+      <div class="ml-4">
+                <el-button type="primary" @click="searchClick" size="large">
+                    <HcIcon name="search-2"/>
+                    <span>搜索</span>
+                </el-button>
+       </div>
+      <div class="ml-2">
+                <el-button size="large" @click="resetClick">
+                    <HcIcon name="close-circle"/>
+                    <span>重置</span>
+                </el-button>
+        </div>
+    </template>
+    <template  #extra>
+        <el-button type="warning" @click="toImportTempClick" size="large">
+          <HcIcon name="delete-bin-2"/>
+                    <span>草稿箱</span>
+         </el-button>
+         <el-button type="primary" size="large" class="ml-2" @click="addinfoClick">
+                    <HcIcon name="add"/>
+                    <span>新增出差申请</span>
+         </el-button>
+    </template>
+    <HcTable :column="tableColumn" :datas="tableData" >
+      <template #action="{row, index}">
+         <el-button hc-btn type="primary" size="small">撤销</el-button>
+       </template>
+      </HcTable>
+      <template #action>
+            <HcPages :pages="searchForm" @change="pageChange"></HcPages>
+      </template>
+            <!--草稿箱弹窗-->
+            <HcDialog bgColor="#ffffff" widths="62rem" isToBody  :show="importModal" title="草稿箱" @close="importModalClose" isTable >
+              <el-alert title="3个月内未更新的草稿将被自动删除" type="info" :closable="false" show-icon/>
+              <div class="table_box">
+                <HcTable :column="drafttableColumn" :datas="drafttableData" ui="hc-test-drop-table" isRowDrop isSort @row-drop="rowDropTap" @row-sort="rowSortTap">
+                  <template #action="{row, index}">
+                    <el-button hc-btn type="primary" size="small">继续编辑</el-button>
+                    <el-button hc-btn type="primary" size="small">删除</el-button>
+                  </template>
+                </HcTable>
+              </div>
+               
+             </HcDialog>
+  </HcCard>
 </template>
 
 <script setup>
 import {ref, watch} from  'vue'
+import dayjs from "dayjs"
+import 'dayjs/locale/zh-cn'
+import {useRouter} from 'vue-router'
+import {getTokenHeader} from "~src/api/request/header";
+const router = useRouter()
+
+
+const tableColumn = [
+    {key: 'name', name: '出差事由'},
+    {key: 'key2', name: '关联项目'},
+    {key: 'key4', name: '实际出勤天数'},
+    {key: 'key5', name: '出差天数'},
+    {key: 'key6', name: '同行人'},
+    {key: 'key7', name: '审批结果'},
+    {key: 'key8', name: '审批状态'},
+    {key: 'key9', name: '创建人'},
+    {key: 'key10', name: '创建时间'},
+    {key: 'action', name: '操作',widths:120},
+
+
+]
+const tableData = ref([
+    {name: '名称1',id:1},
+    {name: '名称2', },
+    {name: '名称3', }
+])
+const searchForm = ref({
+    name: '',
+    current: 1, size: 20, total: 0
+})
+const peopleoption=ref([
+    {name: '张三', key: '1'},
+    {name: '李四', key: '2'},
+])
+//分页被点击
+const pageChange = ({current, size}) => {
+    searchForm.value.current = current
+    searchForm.value.size = size
+    getTableData()
+}
+
+const getTableData = () => {
+
+}
+
+//搜索
+const searchClick = () => {
+    searchForm.value.current = 1;
+    getTableData()
+}
+
+//重置搜索表单
+const resetClick = () => {
+    searchForm.value = {current: 1, size: 20, total: 0}
+}
+const defaultTime = ref([
+  new Date(2000, 1, 1, 0, 0, 0),
+  new Date(2000, 2, 1, 23, 59, 59),
+])
+//导入数据弹窗
+const importModal=ref(false)
+const importModalClose=()=>{
+  importModal.value=false
+}
+const drafttableColumn = [
+    {key: 'name', name: '标题'},
+    {key: 'text', name: '更新时间'},
+    {key: 'action', name: '操作',widths:120},
+]
+const drafttableData = ref([
+    {name: '名称1', text: '2023-5-23 15:21:08', },
+    {name: '名称1', text: '2023-5-23 15:21:08', },
+    
+ 
+])
+
+// 行拖拽
+const rowDropTap = (rows) => {
+    tableData.value = rows
+}
+
+// 点击排序
+const rowSortTap = (rows) => {
+    tableData.value = rows
+}
+
+const toImportTempClick=()=>{
+  importModal.value=true
+
+}
+//编辑出差申请
+
+const addinfoClick=()=>{
+  router.push({
+        name: 'attendance-business-trip-info',
+        query: {
+            type: 'add'
+        }
+    })
+}
 </script>
 <style lang='scss' scoped>
 </style>

src/views/attendance/business-trip/info.vue

@@ -1,10 +1,351 @@
-<!--  -->
 <template>
-  <div ></div>
+  <HcCard actionUi="text-center">
+      <div class="hac-card-project-box">
+          <div class="left-box">
+              <el-scrollbar>
+                  <el-form ref="formRef" :model="formModel" :rules="formRules" label-width="auto" size="large" :disabled="dataType === 'view'">
+                      <div class="project-form-top">
+                       
+                              <el-form-item label="出差事由：" prop="key">
+                                  <el-input v-model="formModel.key"/>
+                              </el-form-item>
+                              <HcCardItem :title="'行程'+ Number(index+1) " class="mt-2" v-for="(item,index) in journeyList">
+                                    <el-form-item label="交通工具" prop="key1">
+                                      <el-select v-model="formModel.key1" block clearable placeholder="请选择交通工具">
+                                          <el-option v-for="item in trafficType" :label="item.name" :value="item.key"/>
+                                      </el-select>
+                                  </el-form-item>
+                                  <el-form-item label="单程往返" prop="key1">
+                                      <el-select v-model="formModel.key1" block clearable placeholder="请选择">
+                                          <el-option v-for="item in wayType" :label="item.name" :value="item.key"/>
+                                      </el-select>
+                                  </el-form-item>
+                                  <el-form-item label="出发城市" prop="key">
+                                    <el-select v-model="formModel.key1" block clearable placeholder="请选择出发城市">
+                                          <el-option v-for="item in cityType" :label="item.name" :value="item.key"/>
+                                      </el-select>
+                                  </el-form-item>
+                                  <el-form-item label="目的城市" prop="key">
+                                    <el-select v-model="formModel.key1" block clearable placeholder="请选择目的城市">
+                                          <el-option v-for="item in cityType" :label="item.name" :value="item.key"/>
+                                      </el-select>
+                                  </el-form-item>
+                                  <el-form-item label="出发时间">
+                                    <el-date-picker
+                                        v-model="formModel.key1"
+                                        type="date"
+                                        placeholder="请选择出发时间"
+                                        style="width: 100%;"
+                                    />
+                                  </el-form-item>
+                                  <el-form-item label="结束时间">
+                                    <el-date-picker
+                                        v-model="formModel.key1"
+                                        type="date"
+                                        placeholder="请选择结束时间"
+                                        style="width: 100%;"
+                                    />
+                                  </el-form-item>
+                                  <el-form-item label="时长" prop="key">
+                                      <el-input v-model="formModel.key"/>
+                                  </el-form-item>
+                                  <span class="tip ml-8">时长将自动计入考勤统计</span>
+                                  <template #extra>
+                                        <el-button type="primary" size="small"  @click="addJourney(item,index)">
+                                            <HcIcon name="add"/>
+                                            <span>增加行程</span>
+                                        </el-button>
+                                        <el-button type="warning" size="small" @click="delJourney(item,index)" class="ml-2">
+                                            <HcIcon name="delete-bin-2"/>
+                                            <span>删除行程</span>
+                                        </el-button>
+                                    </template>
+                               
+                              </HcCardItem>
+                              <el-form-item label="出差天数：" prop="key" class="mt-4">
+                                  <el-input v-model="formModel.key" disabled/>
+                              </el-form-item>
+                              <el-form-item label="出差备注：" prop="key5" >
+                                  <el-input v-model="formModel.key" type="textarea"/>
+                              </el-form-item>
+                              <el-form-item label="同行人" prop="key5" placeholder="请选择同行人">
+                                <el-select
+                                        v-model="formModel.key"
+                                        multiple
+                                        placeholder="请选择"
+                                        style="width: 100%"
+                                        >
+                                        <el-option
+                                            v-for="item in partneroptions"
+                                            :key="item.key"
+                                            :label="item.name"
+                                            :value="item.key"
+                                        />
+                                        </el-select>
+                              </el-form-item>
+                              <el-form-item label="所属项目" prop="key" placeholder="请选择同行人">
+                                        <el-select v-model="formModel.key1" block clearable placeholder="请选择交通工具">
+                                          <el-option v-for="item in projectType" :label="item.name" :value="item.key"/>
+                                      </el-select>
+                              </el-form-item>
+                              <el-form-item label="关联预算计划" prop="key">
+                                <el-button type="primary" size="small" >
+                                            <HcIcon name="add"/>
+                                            <span>关联预算计划</span>
+                                </el-button>
+                              </el-form-item>
+                             
+                          
+                       
+                      </div>
+              
+                  </el-form>
+              </el-scrollbar>
+          </div>
+          <div class="right-box">
+              <el-scrollbar class="hc--right-15">
+                <div class="right-box-title">流程</div>
+                  <el-timeline class="p-1">
+                      <el-timeline-item v-for="(item, index) in timeLineData" :key="index" :type="item.type">
+                          <div class="hac-time-line-box">
+                              <div class="hac-time-line-title-box">
+                                  <div class="title">{{item.title}}</div>
+                              </div>
+                              <div class="hac-time-line-time">
+                                  <span class="time">{{item.time}}</span>
+                              </div>
+                          </div>
+                      </el-timeline-item>
+                  </el-timeline>
+              </el-scrollbar>
+          </div>
+      </div>
+      <template #action>
+          <el-button size="large" type="info" hc-btn @click="goBackClick">
+              <HcIcon name="arrow-go-back"/>
+              <span v-if="dataType !== 'view'">取消并返回</span>
+              <span v-else>返回</span>
+          </el-button>
+          <el-button size="large" type="primary" hc-btn @click="doubleClick" v-if="dataType !== 'view'">
+              <HcIcon name="check-double"/>
+              <span>提交出差申请</span>
+          </el-button>
+          <el-button size="large" type="warning" hc-btn @click="doubleClick" v-if="dataType !== 'view'">
+              <HcIcon name="save"/>
+              <span>暂存草稿</span>
+          </el-button>
+      </template>
+  </HcCard>
 </template>
 
 <script setup>
-import {ref, watch} from  'vue'
+import {ref, onActivated} from "vue";
+import {useRoute, useRouter} from 'vue-router'
+
+const router = useRouter()
+const useRoutes = useRoute()
+
+//初始变量
+const dataType = ref(useRoutes?.query?.type ?? 'view')
+const dataId = ref(useRoutes?.query?.id ?? '')
+
+//缓存页面被激活时
+onActivated(() => {
+  dataType.value = useRoutes?.query?.type ?? 'view'
+  dataId.value = useRoutes?.query?.id ?? ''
+})
+const journeyList=ref([
+  {},
+
+])
+//增加行程addJourney
+const addJourney=(item,index)=>{
+  journeyList.value.push({})
+}
+const delJourney=(item,index)=>{
+    console.log(index,'index');
+    journeyList.value.splice(index, 1)
+}
+//单程往返
+const wayType = ref([
+  {name: '单程', key: '1'},
+  {name: '往返', key: '2'},
+ 
+])
+//交通工具
+const trafficType=ref([
+  {name: '汽车', key: '1'},
+  {name: '动车', key: '2'},
+  {name: '飞机', key: '3'},
+  {name: '轮船', key: '4'},
+])
+//出发城市cityType
+const cityType=ref([
+  {name: '北京', key: '1'},
+  {name: '上海', key: '2'},
+  {name: '深圳', key: '3'},
+  {name: '成都', key: '4'},
+])
+//项目类型
+const projectType = ref([
+  {name: '项目1', key: '1'},
+  {name: '项目11', key: '2'},
+  {name: '项目2', key: '3'},
+  {name: '项目3+软件', key: '4'},
+  {name: '项目1+软件', key: '5'},
+])
+//同行人
+const partneroptions = ref([
+  {name: '小黄', key: '1'},
+  {name: '香兰', key: '2'},
+  {name: '小黑', key: '3'},
+])
+//合同类型
+const contractType = ref([
+  {name: '咨询服务+软件', key: '1'},
+  {name: '软件', key: '2'},
+  {name: '咨询服务', key: '3'},
+  {name: '后期服务+软件', key: '4'},
+  {name: '数字化扫描+软件', key: '5'},
+])
+
+
+
+//顶部表单数据
+const formRef = ref(null)
+const formModel = ref({
+  key1: '', key2: '', key3: '', key4: '', key5: '',
+})
+const formRules = {
+  key: {
+      required: true,
+      trigger: 'blur',
+      message: "请输入项目名称"
+  },
+  key1: {
+      required: true,
+      trigger: 'blur',
+      message: "请选择项目类型"
+  },
+  key2: {
+      required: true,
+      trigger: 'blur',
+      message: "请选择项目开始时间"
+  },
+  key3: {
+      required: true,
+      trigger: 'blur',
+      message: "项目进程异常"
+  },
+  key8: {
+      required: true,
+      trigger: 'blur',
+      message: "请输入负责人"
+  },
+  key5: {
+      required: false,
+      trigger: 'blur',
+   
+  },
+}
+
+
+//日期时间被选择
+const betweenTime = ref(null)
+const betweenTimeUpdate = ({arr, query}) => {
+  betweenTime.value = arr
+  //formModel.value.betweenTime = query
+}
+
+
+//时间线数据
+const timeLineData = ref([
+  {title: '审批人', time: '部门负责人', type: 'primary'},
+  {title: '人事审批',  time: '人事', type: 'primary'},
+  {title: '抄送人', state: '进行中', time: '总经理', type: 'primary'},
+
+])
+
+//返回
+const goBackClick = () => {
+  router.back()
+}
+
+//提交保存
+const doubleClick = () => {
+
+}
 </script>
-<style lang='scss' scoped>
-</style>
+
+<style lang="scss" scoped>
+.hac-card-project-box {
+  position: relative;
+  height: 100%;
+  display: flex;
+  .left-box, .right-box {
+    //   flex: 1;
+      position: relative;
+      height: 100%;
+  }
+  .left-box {
+    flex: 2;
+      .project-form-top {
+          margin-bottom: 24px;
+          padding-right: 24px;
+      }
+      .project-form-bottom {
+          padding-top: 24px;
+          padding-right: 24px;
+          border-top: 1px solid #e9e9e9;
+      }
+  }
+  .right-box {
+    flex: 1;
+      padding-left: 24px;
+      border-left: 1px solid #e9e9e9;
+     
+      .hac-time-line-box {
+          position: relative;
+          .hac-time-line-title-box {
+              position: relative;
+              display: flex;
+              align-items: center;
+              font-size: 16px;
+              color: black;
+              margin-bottom: 12px;
+              justify-content: space-between;
+          }
+          .hac-time-line-time {
+              position: relative;
+              display: flex;
+              align-items: center;
+              .time {
+                  color: gray;
+                  margin-right: 8px;
+              }
+              .icon {
+                  font-size: 18px;
+              }
+              &.picker .icon-box {
+                  font-size: 20px;
+                  margin-left: 10px;
+              }
+          }
+      }
+  }
+}
+.tip{
+    color: gray;
+  
+    font-size: 14px;
+}
+.right-box-title{
+    font-size: 24px;
+    font-weight: bold;
+    margin-bottom: 40px;
+}
+</style>
+
+<style lang="scss">
+
+</style>