|
|
@@ -1,58 +1,91 @@
|
|
|
<template>
|
|
|
- <el-dialog class="le-dialog" v-model="visibleDialog" title="查看详情" @close="handleCancel">
|
|
|
- <div>
|
|
|
- <!--title-->
|
|
|
- <div>
|
|
|
- <div class="content-title">{{ formOptions.title }}</div>
|
|
|
- <span>发布人：{{ formOptions.createBy }} 发布时间： {{ formOptions.createTime }}</span>
|
|
|
-
|
|
|
- <div class="content-title mbt20">
|
|
|
- <el-tag v-if="formOptions.category === 0" size="small" effect="plain">通知公告</el-tag>
|
|
|
- <el-tag v-if="formOptions.category === 1" size="small" type="info" effect="plain">系统消息</el-tag>
|
|
|
- <el-tag v-if="formOptions.category === 2" size="small" type="warning" effect="plain">待办通知</el-tag>
|
|
|
+ <el-drawer v-model="visibleDialog" class="custom-adrawer" :direction="direction" size="900" @close="handleCancel">
|
|
|
+ <template #title>
|
|
|
+ <div class="flow-header-box">
|
|
|
+ <div class="flow-no">编号：1719564992673533954</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="flow-detail-container">
|
|
|
+ <div class="flow-status-stamp">
|
|
|
+ <div class="flow-stamp-container">
|
|
|
+ <!-- https://49.235.72.105/assets/canceled-80d7fb9b.svg 撤销-->
|
|
|
+ <!--https://49.235.72.105/assets/rejected-38bd0a45.svg 不通过-->
|
|
|
+ <!--https://49.235.72.105/assets/underway-d1b2e7de.svg 审批中-->
|
|
|
+ <img src="https://49.235.72.105/assets/approved-9bb47e1a.svg" alt="" style="width: 120px; height: 120px" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flow-detail-box">
|
|
|
+ <!--头部-->
|
|
|
+ <div class="header-box">
|
|
|
+ <div class="summary-info">
|
|
|
+ <div class="title">名片申请</div>
|
|
|
+ <div class="status">
|
|
|
+ <el-tag type="success">已通过</el-tag>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="initiator-info">
|
|
|
+ <el-avatar size="16"> 艾斯 </el-avatar>
|
|
|
+ <div class="begin-time">2023-11-01 12:00:17 提交</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <span>通知时间： - </span>
|
|
|
- <br />
|
|
|
- <br />
|
|
|
- <span>通知内容：{{ formOptions.content }}</span>
|
|
|
+ <div class="area-divider"></div>
|
|
|
+
|
|
|
+ <!-- 表单 -->
|
|
|
+ <el-descriptions :column="1" :size="'default'">
|
|
|
+ <el-descriptions-item label="申请人">kooriookami</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="日期">18100000000</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="员工">Suzhou</el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+
|
|
|
+ <div class="area-divider"></div>
|
|
|
+
|
|
|
+ <!--审批流-->
|
|
|
+ <el-steps direction="vertical" :active="1">
|
|
|
+ <el-step>
|
|
|
+ <template #icon>icon</template>
|
|
|
+ <template #title>title</template>
|
|
|
+ <template #description>description</template>
|
|
|
+ </el-step>
|
|
|
+ </el-steps>
|
|
|
+ </div>
|
|
|
+ <div class="flow-actions">
|
|
|
+ <el-button :icon="ChatLineSquare">评论</el-button>
|
|
|
</div>
|
|
|
- <!--content-->
|
|
|
</div>
|
|
|
- </el-dialog>
|
|
|
+ </el-drawer>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { computed, ref } from 'vue'
|
|
|
-import { getMessageInfoById } from '@/api/system/message'
|
|
|
+import { computed, nextTick, ref } from 'vue'
|
|
|
+import { ChatLineSquare } from '@element-plus/icons-vue'
|
|
|
|
|
|
-// 同步值
|
|
|
-const $myEmit = defineEmits(['update:modelValue'])
|
|
|
+const direction = ref('rtl')
|
|
|
|
|
|
const myProps = defineProps({
|
|
|
modelValue: {
|
|
|
type: Boolean,
|
|
|
default: false
|
|
|
},
|
|
|
- messageId: {
|
|
|
- type: String,
|
|
|
- default: null
|
|
|
+ userIds: {
|
|
|
+ type: Array,
|
|
|
+ default: () => []
|
|
|
}
|
|
|
})
|
|
|
|
|
|
-const formOptions = ref({})
|
|
|
-const handleCancel = () => {
|
|
|
+// 同步值
|
|
|
+const $myEmit = defineEmits(['update:modelValue', 'successFn'])
|
|
|
+
|
|
|
+// 关闭按钮
|
|
|
+const closeDrawer = () => {
|
|
|
+ $myEmit('successFn')
|
|
|
$myEmit('update:modelValue', false)
|
|
|
}
|
|
|
|
|
|
-const getMessageInfoDetail = async () => {
|
|
|
- const { messageId } = myProps
|
|
|
- const res = await getMessageInfoById(messageId)
|
|
|
- formOptions.value = res
|
|
|
+const handleCancel = () => {
|
|
|
+ closeDrawer()
|
|
|
}
|
|
|
|
|
|
-getMessageInfoDetail()
|
|
|
-
|
|
|
-// computed
|
|
|
const visibleDialog = computed({
|
|
|
get() {
|
|
|
return myProps.modelValue
|
|
|
@@ -64,16 +97,89 @@ const visibleDialog = computed({
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
-.content-title {
|
|
|
+.custom-adrawer {
|
|
|
+ :deep(.el-drawer__header) {
|
|
|
+ padding: 0px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.flow-detail-container {
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.flow-status-stamp {
|
|
|
+ position: absolute;
|
|
|
+ right: 50px;
|
|
|
+ top: 30px;
|
|
|
+ .flow-stamp-container {
|
|
|
+ img {
|
|
|
+ overflow: hidden;
|
|
|
+ background-color: transparent;
|
|
|
+ z-index: 999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.flow-header-box {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 13px;
|
|
|
+ border-bottom: 1px solid #e5e6ec;
|
|
|
+ padding: 0 20px;
|
|
|
+ height: 39px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ color: #86909c;
|
|
|
+}
|
|
|
+.flow-detail-box {
|
|
|
+ height: calc(100% - 92px);
|
|
|
overflow: hidden;
|
|
|
- color: #000000d9;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 16px;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- margin-bottom: 20px;
|
|
|
- &.mbt20 {
|
|
|
- margin-top: 20px;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 0 30px;
|
|
|
+ .header-box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ padding-top: 20px;
|
|
|
+ .summary-info {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .title {
|
|
|
+ font-size: 24px;
|
|
|
+ font-family: PingFangSC-Semibold, PingFang SC;
|
|
|
+ color: #1d2129;
|
|
|
+ }
|
|
|
+ .status {
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .initiator-info {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 16px;
|
|
|
+ .begin-time {
|
|
|
+ margin-left: 20px;
|
|
|
+ font-weight: 350;
|
|
|
+ color: #86909c;
|
|
|
+ font-size: 13px;
|
|
|
+ -webkit-user-select: none;
|
|
|
+ user-select: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
+ .area-divider {
|
|
|
+ border-bottom: 1px solid rgba(229, 230, 235, 1);
|
|
|
+ margin: 20px 0;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.flow-actions {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: end;
|
|
|
+ height: 52px;
|
|
|
+ border-top: 1px solid var(--color-neutral-3);
|
|
|
+ padding: 0 20px;
|
|
|
}
|
|
|
</style>
|
luoyali