lz_web_qwgl/src/views/backOfficeSystem/kaoQinGL/qxjgl/detail.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>