124

src/views/backOfficeSystem/kaoQinGL/qxjgl/detail.vue

@@ -0,0 +1,116 @@
+<!--
+ * @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>