|
|
@@ -102,7 +102,7 @@
|
|
|
</el-form>
|
|
|
</el-scrollbar>
|
|
|
</div>
|
|
|
- <div class="right-box">
|
|
|
+ <!-- <div class="right-box">
|
|
|
<el-scrollbar class="hc--right-15">
|
|
|
<div class="right-box-title">流程</div>
|
|
|
<el-timeline class="p-1">
|
|
|
@@ -118,23 +118,34 @@
|
|
|
</el-timeline-item>
|
|
|
</el-timeline>
|
|
|
</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>
|
|
|
- <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>
|
|
|
|
|
|
@@ -260,10 +271,11 @@ const betweenTimeUpdate = ({arr, query}) => {
|
|
|
|
|
|
//时间线数据
|
|
|
const timeLineData = ref([
|
|
|
- {title: '审批人', time: '部门负责人', type: 'primary'},
|
|
|
- {title: '人事审批', time: '人事', type: 'primary'},
|
|
|
- {title: '抄送人', state: '进行中', time: '总经理', type: 'primary'},
|
|
|
+ {title: '审批人', section: '部门负责人'},
|
|
|
+ {title: '人事审批', section: '人事'},
|
|
|
|
|
|
+ {title: '抄送人', section: '总经理'},
|
|
|
+
|
|
|
])
|
|
|
|
|
|
//返回
|
|
|
@@ -302,36 +314,41 @@ const doubleClick = () => {
|
|
|
.right-box {
|
|
|
flex: 1;
|
|
|
padding-left: 24px;
|
|
|
- border-left: 1px solid #e9e9e9;
|
|
|
+ // 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;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .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{
|
