feat: 新增 弹窗通用组件

client/src/components/Modal/ModalBtn.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { ref, withDefaults } from 'vue'
+
+interface Props {
+  title: string
+  width?: string | number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: '',
+  width: 800
+})
+const { title, width } = toRefs(props)
+const { beforeClose } = reactive(props)
+const dialogVisible = ref(false)
+const handleOpen = () => {
+  console.log('handleOpen')
+  dialogVisible.value = true
+}
+</script>
+
+<template>
+  <div class="modal-open-btn" @click="handleOpen">
+    <slot name="btn"></slot>
+  </div>
+
+  <el-dialog v-model="dialogVisible" :title="title" :width="width">
+    <slot name="content"></slot>
+  </el-dialog>
+</template>
+
+<style scoped lang="scss"></style>

client/src/views/OaSystem/projectCenter/projectDetail/components/xmcb/index.vue

@@ -20,7 +20,14 @@
             <p class="title">差旅费用（元）</p>
           </li>
           <li>
-            <p class="value">{{ projectCostCalculate['reimbursementCost'] }}</p>
+            <ModalBtn title="普通报销成本">
+              <template #btn>
+                <p class="value">{{ projectCostCalculate['reimbursementCost'] }}</p>
+              </template>
+
+              <template #content> 内容</template>
+            </ModalBtn>
+
             <p class="title">普通报销（元）</p>
           </li>
           <li>
@@ -77,6 +84,7 @@
 <script setup lang="ts">
 import { useRoute } from 'vue-router'
 import request from '@/config/axios'
+import ModalBtn from '@/components/Modal/ModalBtn.vue'
 
 defineOptions({ name: 'XmcbComp' })
 const route = useRoute()