116 lines
4.5 KiB
Vue
116 lines
4.5 KiB
Vue
<!--
|
||
* @Author: your name
|
||
* @Date: 2024-05-09 19:17:34
|
||
* @LastEditTime: 2024-05-10 20:07:01
|
||
* @LastEditors: Please set LastEditors
|
||
* @Description: In User Settings Edit
|
||
* @FilePath: \zg_web_new\src\views\backOfficeSystem\kqManagement\qxjsp\editAddForm.vue
|
||
-->
|
||
<template>
|
||
<div class="dialog" v-if="dialogForm">
|
||
<div class="head_box">
|
||
<span class="title">详情</span>
|
||
<div>
|
||
<el-button size="small" @click="close">关闭</el-button>
|
||
</div>
|
||
</div>
|
||
<div class="description pd20" v-loading="loading">
|
||
<el-descriptions :column="4" border>
|
||
<el-descriptions-item class-name="my-content" label-class-name="my-label" :span="2" label="申请人">{{data.detail.sqrXm}}</el-descriptions-item>
|
||
<el-descriptions-item class-name="my-content" label-class-name="my-label" :span="2" label="请假类型"><dict-tag :options="D_BZ_QXJLX" :value="data.detail.qjlx" :tag="false" /></el-descriptions-item>
|
||
<el-descriptions-item class-name="my-content" label-class-name="my-label" :span="2" label="审核状态"><dict-tag :options="D_QW_KQ_SHZT" :value="data.detail.kqShzt" :tag="false" /></el-descriptions-item>
|
||
<el-descriptions-item class-name="my-content" label-class-name="my-label" :span="2" label="起止时间">{{data.detail.kssj + ' ~ ' + data.detail.jssj}}</el-descriptions-item>
|
||
<el-descriptions-item class-name="my-content" label-class-name="my-label" :span="4" label="请假原因">{{data.detail.qjyy}}</el-descriptions-item>
|
||
<el-descriptions-item class-name="my-content" label-class-name="my-label" :span="4" label="备注">{{data.detail.bz}}</el-descriptions-item>
|
||
<el-descriptions-item class-name="my-content" label-class-name="my-label" :span="4" label="审批人">
|
||
<div class="flex align-center">
|
||
<div v-for="(item,index) in data.detail.kqShryList" :key="index" class="flex align-center">
|
||
<span>{{item.scryXm}}</span>
|
||
<span class="ml10 flex">(<dict-tag :options="D_QW_KQ_SHZT" :value="item.kqShzt" :tag="false" />)</span>
|
||
<span v-show="item.kqShyj && item.kqShyj !=''">审核意见：({{item.kqShyj}})</span>
|
||
<span class="ml10 mr10" v-show="index < data.detail.kqShryList.length-1">|</span>
|
||
</div>
|
||
</div>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item class-name="my-content" label-class-name="my-label" :span="4" label="抄送人">
|
||
<div class="flex align-center flex-warp">
|
||
<div v-for="(item,index) in data.detail.kqCsryList" :key="index" class="flex align-center">
|
||
<span>{{item.scryXm}}</span>
|
||
<span class="ml10 mr10" v-show="index < data.detail.kqCsryList.length-1">、</span>
|
||
</div>
|
||
</div>
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import * as MOSTY from "@/components/MyComponents/index";
|
||
import { serviceGet, serviceDelete, servicePost } from "@/api/serviceApi.js";
|
||
import { ref,defineExpose, reactive,getCurrentInstance} from 'vue';
|
||
const { proxy } = getCurrentInstance();
|
||
const { D_BZ_QXJLX, D_QW_KQ_SHZT } = proxy.$dict("D_BZ_QXJLX", "D_QW_KQ_SHZT");
|
||
const emits = defineEmits(['updateDate'])
|
||
const props = defineProps({
|
||
dic:{ type:Object, default:{} }
|
||
})
|
||
const title = ref('新增');
|
||
const elform = ref();
|
||
const dialogForm = ref(false); //弹窗显示隐藏
|
||
const loading = ref(false);
|
||
const data = reactive({
|
||
detail:{},
|
||
});
|
||
// 初始化数据
|
||
const init = (type,id)=> {
|
||
dialogForm.value = true;
|
||
getDataById(id) //根据id查询详情
|
||
}
|
||
// 根据id查询详情
|
||
const getDataById = (id)=>{
|
||
loading.value = true;
|
||
serviceGet({},`/mosty-qwzx//tbQwQxj/queryVOById/${id}`).then(res=>{
|
||
data.detail = res;
|
||
loading.value = false;
|
||
})
|
||
}
|
||
// 关闭
|
||
const close = ()=>{
|
||
data.detail={};
|
||
dialogForm.value = false;
|
||
}
|
||
defineExpose({init});
|
||
</script>
|
||
|
||
<style lang='scss' scoped>
|
||
@import "~@/assets/css/layout.scss";
|
||
@import "~@/assets/css/element-plus.scss";
|
||
::v-deep .el-descriptions__table{
|
||
width: 70%;
|
||
margin: 0 auto;
|
||
}
|
||
.description {
|
||
:deep(.my-label) {
|
||
width: 140px;
|
||
height: 40px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
background-color: #fff;
|
||
color: #aaa;
|
||
border-color: #ccc !important;
|
||
}
|
||
:deep(.my-content) {
|
||
font-size: 14px;
|
||
// background-color: #061b33;
|
||
color: #000;
|
||
border-color: #ccc !important;
|
||
}
|
||
.tab-red {
|
||
box-shadow: inset 0 0 10px #ff2323;
|
||
border: 1px solid #ff2323;
|
||
border-radius: 4px;
|
||
margin-right: 6px;
|
||
}
|
||
}
|
||
</style> |