<template>
|
<el-dialog v-model="dialogVisible" title="作业记录" width="45%" center>
|
<!-- <el-steps :active="data.length" direction="vertical" finish-status="success">-->
|
<!-- <el-step v-for="item in data" :title="item.operationTitle" :icon="Edit">-->
|
<!-- <template #description>-->
|
<!-- <div>{{item.content}}</div>-->
|
<!-- <div>{{item.operationUtype}}:{{item.operationUname}}</div>-->
|
<!-- <div>{{item.operationTime}}</div>-->
|
<!-- </template>-->
|
<!-- </el-step>-->
|
<!-- </el-steps>-->
|
<div class="item" v-for="(item,index) in data" :key="index">
|
<div class="marker">
|
<div class="dot"></div>
|
<div class="line"></div>
|
</div>
|
<div class="content">
|
<div class="tit">{{item.operationTitle}}<span>{{index == data.length - 1 ? '[进行中]': '[已完成]'}}</span></div>
|
<div>{{item.operationUtype}}：{{item.operationUname}}</div>
|
<div>操作时间：{{item.operationTime}}</div>
|
<div>操作内容：{{item.content}}</div>
|
<div>操作意见：{{item.approvalOpinions}}</div>
|
<div v-if="item.fileUrl" style="display: flex;align-items: flex-start">附件内容：
|
<el-image style="width: 150px; height: 150px;margin-right: 50px;margin-bottom: 20px" :src="item.fileUrl" fit="cover" />
|
</div>
|
<div v-if="item.signUrl" style="display: flex;align-items: flex-start">签字图片：
|
<el-image style="width: 150px; height: 150px;margin-right: 50px;margin-bottom: 20px" :src="item.signUrl" fit="cover" />
|
</div>
|
</div>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script lang="ts">
|
import { toRefs, reactive, defineComponent, ref, defineAsyncComponent } from 'vue';
|
import { storeToRefs } from 'pinia';
|
import {useUserInfo} from "/@/stores/userInfo";
|
import { Search, Edit } from '@element-plus/icons-vue'
|
import {teamManageApi} from "/@/api/systemManage/basicDateManage/personShiftManage/teamManage";
|
import {ElMessage} from "element-plus/es";
|
import {specialIndexApi} from "/@/api/specialWorkSystem/specialIndex";
|
|
|
interface stateType {
|
dialogVisible: boolean
|
}
|
export default defineComponent({
|
name: 'workRecord',
|
components: {},
|
props:[],
|
setup() {
|
const userInfo = useUserInfo()
|
const { userInfos } = storeToRefs(userInfo);
|
const state = reactive({
|
dialogVisible: false,
|
data: []
|
})
|
const openDialog = (id: string | null)=>{
|
getWorkRecord(id)
|
state.dialogVisible = true
|
}
|
|
const getWorkRecord = async (id: string | null) => {
|
let res = await specialIndexApi().getWorkRecord({id:id});
|
if (res.data.code === '200') {
|
state.data = res.data.data
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
}
|
|
return {
|
openDialog,
|
...toRefs(state),
|
Search,
|
Edit
|
};
|
},
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.home-container {
|
height: 100%;
|
overflow: hidden;
|
position: relative;
|
.el-row{
|
margin-bottom: 20px;
|
}
|
.el-row:last-child {
|
margin-bottom: 0;
|
}
|
.el-input{
|
width: 100% !important;
|
}
|
.el-date-editor::v-deep{
|
width: 100%;
|
}
|
.el-select{
|
width: 100%;
|
}
|
.el-cascader{
|
width: 100% !important;
|
}
|
.item{
|
display: flex;
|
align-items: stretch; /* 使 marker 和 content 高度一致 */
|
width: 100%;
|
padding-left: 50px;
|
margin-bottom: 10px;
|
position: relative;
|
|
.marker{
|
position: absolute;
|
left: 0;
|
top: 0;
|
bottom: 0;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
height: 100%; /* 使 marker 高度自适应父元素 */
|
|
.dot{
|
width: 28px;
|
height: 28px;
|
border-radius: 50%;
|
margin-bottom: 10px;
|
background: #13ce66;
|
}
|
.line{
|
width: 1px;
|
flex-grow: 1; /* 自动适应剩余高度 */
|
background: #13ce66;
|
}
|
}
|
.content{
|
|
div{
|
margin-bottom: 6px;
|
}
|
.tit{
|
line-height: 28px;
|
font-size: 20px;
|
font-weight: bolder;
|
|
span{
|
display: inline-block;
|
margin-left: 6px;
|
font-size: 16px;
|
color: #13ce66;
|
line-height: 28px;
|
}
|
}
|
}
|
&:last-of-type{
|
.dot{
|
background: #409eff;
|
}
|
.line{
|
display: none;
|
}
|
.tit{
|
span{
|
color: #409eff;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
