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

<template>
  <HcCard actionUi="text-center">
    <template #header>
        <div class="hc-expense-total-title">出差天数:0.5</div>
    </template>
      <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 hc-card-item-box" v-for="(item,index) in journeyList" ui="hac-bg-grey">
                                    <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>
                              <div  class="mt-16" style="margin-bottom: 40px;">
                                <el-divider content-position="right" border-style="dashed">
                                      <el-button type="primary" hc-btn   @click="addJourney(item,index)">
                                          <HcIcon name="add"/>
                                          <span>添加行程</span>
                                      </el-button>
                               </el-divider>
                              </div>
                            
                              <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"  @click="budgetModalShow">
                                            <HcIcon name="add"/>
                                            <span>关联预算计划</span>
                                </el-button>
                              </el-form-item>
                             
                          
                       
                      </div>
              
                  </el-form>
              </el-scrollbar>
          </div>
          <div class="right-box">
            <div class="record-flow-box">
                <div class="title">流程</div>
                <div class="content">
                    <el-scrollbar>
                        <el-timeline>
                            <el-timeline-item v-for="(item, index) in timeLineData" :key="index">
                                <div class="timeline-title">{{item.title}}</div>
                                <div class="timeline-section">{{item.section}}</div>
                            </el-timeline-item>
                        </el-timeline>
                    </el-scrollbar>
                </div>
                <div class="action">
                    <el-button type="warning" hc-btn>
                        <HcIcon name="draft"/>
                        <span>暂存草稿</span>
                    </el-button>
                    <el-button type="primary" hc-btn>
                        <HcIcon name="check-double"/>
                        <span>提交出差申请</span>
                    </el-button>
                </div>
            </div>
          </div>
      </div>
      <!--关联预算计划-->
      <HcDialog bgColor="#ffffff" isToBody isTable
                  title="关联预算计划" widths="80%" saveText="保存"
                  :show="budgetModal"
                  @close="budgetCloseClick"
                  @save="budgetSaveClick"
        >
            <HcTable :column="tableBudgetColumn" :datas="tableBudgetData">
                <template #action="{row,index}">
                    <el-button size="small" type="danger" @click="row.relevance = false" v-if="row.relevance">取消关联</el-button>
                    <el-button size="small" type="primary" @click="row.relevance = true" v-else>关联</el-button>
                </template>
            </HcTable>
      </HcDialog>
  </HcCard>
</template>

<script setup>
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: '审批人', section: '部门负责人'},
    {title: '人事审批', section: '人事'},

    {title: '抄送人', section: '总经理'},
  
])

//返回
const goBackClick = () => {
  router.back()
}

//提交保存
const doubleClick = () => {

}

//关联预算计划
const budgetModal = ref(false)
const budgetModalShow = () => {
    budgetModal.value = true
}
const budgetCloseClick = () => {
    budgetModal.value = false
}
const budgetSaveClick = () => {

}

//关联预算计划表格
const tableBudgetColumn = [
    {key: 'key1', name: '任务所属项目'},
    {key: 'key2', name: '状态',  width: '120', align: 'center'},
    {key: 'key3', name: '任务描述'},
    {key: 'key4', name: '完成指标', width: '120', align: 'center'},
    {key: 'action', name: '操作', width: '100', align: 'center'},
]
const tableBudgetData = ref([
    {id: 1, key1: 'xxxx'},
    {id: 2, key1: 'xxxx'},
    {id: 3, key1: 'xxxx'},
    {id: 4, key1: 'xxxx'},
])

</script>

<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;
     
      .record-flow-box {
        position: relative;
        height: 100%;
        width: 380px;
        padding-left: 24px;
        border-left: 1px solid #e9e9e9;
        .title {
            position: relative;
            font-size: 20px;
            color: #101010;
            font-weight: bold;
            margin-bottom: 20px;
        }
        .content {
            position: relative;
            height: calc(100% - 60px - 43px);
            .timeline-title {
                font-size: 20px;
                color: #101010;
            }
            .timeline-section {
                margin-top: 10px;
                color: #1784FC;
                font-size: 16px;
            }
        }
        .action {
            position: relative;
            padding: 10px 0;
            display: flex;
            justify-content: space-around;
        }
    }
  }
}
.tip{
    color: gray;
  
    font-size: 14px;
}
.right-box-title{
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 40px;
}
.hc-expense-total-title {
    color: #101010;
    font-size: 20px;
}
.hac-card-project-box .left-box .hc-card-item-box.hac-bg-grey {
    background: #f7f7f7;
}
</style>

<style lang="scss">

</style>