拟态框组件上传

src/components/Modal/index.vue

+<script setup lang="ts" name="Modal">
+const props = defineProps<{
+  modelValue: boolean;
+  text?: string;
+  icon?: string; // 图标 '' 'success' 'error'
+  width?: string;
+  cancel?: string;
+}>();
+
+const emit = defineEmits(["update:modelValue", "confirm", "cancel"]);
+
+const closeModal = () => {
+  emit("update:modelValue", false);
+  emit("cancel");
+};
+
+const confirm = () => {
+  emit("confirm");
+};
+</script>
+
+<template>
+  <teleport to="body">
+    <!-- @click.self="closeModal" -->
+    <div v-if="modelValue" class="modal-overlay">
+      <div class="modal-container" :style="{ width }">
+        <div class="modal-header">
+          <div>提示</div>
+          <button class="close-btn" @click="closeModal">×</button>
+        </div>
+        <div class="modal-body">
+          <div class="slot-warpper">
+            <div v-if="icon">
+              <el-icon :size="85" color="rgb(253, 84, 81)" class="icon" v-if="icon === 'error'">
+                <Warning />
+              </el-icon>
+              <el-icon :size="85" color="rgb(253, 84, 81)" class="icon" v-if="icon === 'success'">
+                <Warning />
+              </el-icon>
+            </div>
+            <div class="text">{{ text }}</div>
+            <div style="padding: 20px; display: flex; justify-content: center;">
+              <div class="button cancel" v-if="cancel" @click="closeModal">取消</div>
+              <div class="button error" v-if="icon === 'error'" @click="confirm">确定</div>
+              <div class="button success" v-if="icon === 'success'" @click="confirm">确定</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </teleport>
+</template>
+
+<style lang="scss" scoped>
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 999;
+  .modal-container {
+    background: #f3f5fa;
+    border: 0;
+    border-radius: 4px;
+    background-clip: padding-box;
+    border-radius: 8px;
+    min-width: 600px;
+    .modal-header {
+      padding: 16px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 40px;
+      font-size: 16px;
+      font-weight: bold;
+      color: #7a8495;
+      .close-btn {
+        background: none;
+        border: none;
+        cursor: pointer;
+        font-size: 31px;
+        color: #bcc3cb !important;
+      }
+    }
+  }
+
+  .modal-body {
+    padding: 0 8px 8px !important;
+    background: #f3f5fa;
+    border-radius: 4px;
+    .slot-warpper {
+      border: 1px solid #dce5eb;
+      background: #fff;
+      padding: 30px;
+      border-radius: 4px;
+      overflow: auto;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-content: center;
+      align-items: center;
+      .icon{
+        margin: 20px 0;
+      }
+
+      .text{
+        font-size: 18px;
+        font-weight: 700;
+        color: #7a8495;
+        word-break: break-word;
+        display: block;
+        overflow: hidden;
+        padding: 0 30px;
+      }
+      .button{
+        margin-right: 20px;
+        cursor: pointer;
+        width: 150px;
+        height: 34px;
+        line-height: 34px;
+        text-align: center;
+        color: #fff;
+        border-radius: 4px;
+        vertical-align: middle;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+      }
+      .cancel{
+        background: #bcc3cb;
+      }
+      .error{
+        background: rgb(253, 84, 81);
+      }
+      .success{
+        background: #2c9ef7;
+      }
+      .button:last-child{
+        margin-right: 0;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

src/main.js

@@ -45,6 +45,8 @@ import ImagePreview from "@/components/ImagePreview"
 import DictTag from '@/components/DictTag'
 // PageTitle组件
 import PageTitle from './components/PageTitle/index.vue'
+// Modal组件
+import Modal from './components/Modal/index.vue';
 
 const app = createApp(App)
 
@@ -68,6 +70,7 @@ app.component('ImagePreview', ImagePreview)
 app.component('RightToolbar', RightToolbar)
 app.component('Editor', Editor)
 app.component('PageTitle', PageTitle)
+app.component('Modal', Modal)
 
 app.use(router)
 app.use(store)

src/views/assetLibrary/list.vue

@@ -2,8 +2,12 @@
 import { ref, toRefs, reactive, getCurrentInstance } from 'vue'
 import QueryForm from './QueryForm.vue'
 
+const { proxy } = getCurrentInstance()
+
 const data = reactive({
-  form: {},
+  form: {
+    name: ''
+  },
   queryParams: {
     customerName: null
   },
@@ -13,6 +17,12 @@ const data = reactive({
 
 const { queryParams, form, rules } = toRefs(data)
 
+const modalData = reactive({
+  show: false,
+  text: ''
+})
+
+// 筛选查询
 const onQuery = () => {
   console.log('onQuery')
   // handleQuery()
@@ -22,6 +32,23 @@ const onReset = (formQuery) => {
   console.log('onReset')
   formQuery.resetFields()
 }
+
+// 预览
+const onPreview = () => {
+  console.log('onPreview')
+}
+
+// 删除
+const onDelete = () => {
+  console.log('onPreview')
+  modalData.show = true
+  modalData.text = '删除后无法恢复，是否确认删除[若依配测系统]？'
+}
+
+// 确认删除回调
+const modalConfirm = () => {
+  modalData.show = false
+}
 </script>
 
 <template>
@@ -34,60 +61,207 @@ const onReset = (formQuery) => {
         </span>
       </template>
       <template #buttons>
-        <el-button
-          type="primary"
-          icon="Plus"
-        >新增数据源</el-button>
+        <el-button type="primary" icon="Plus">新增数据源</el-button>
       </template>
     </PageTitle>
     <div class="app-container__body">
-      <query-form
-        ref="QueryFormRef"
-        v-model="queryParams"
-        @query="onQuery"
-        @reset="onReset" />
+      <query-form ref="QueryFormRef" v-model="queryParams" @query="onQuery" @reset="onReset" />
       <el-scrollbar>
         <div class="flex-content">
           <el-card class="box-card" :body-style="{ padding: '0px !important' }">
             <img class="img" src="https://172.19.1.166:9005/static/img/MYSQL.535270a.png" alt="">
             <div class="title">
-                <div class="title-content"></div>
+              <div class="title-content">若依配测系统</div>
+            </div>
+            <div class="mask">
+              <div class="maskbutton">
+                <div class="maskbutton-item" @click="onDelete">
+                  <el-icon :size="18">
+                    <delete />
+                  </el-icon>
+                  <br>
+                  <span>删除</span>
+                </div>
+                <div class="maskbutton-item" @click="onPreview">
+                  <el-icon :size="18">
+                    <View />
+                  </el-icon>
+                  <br>
+                  <span>预览</span>
+                </div>
+              </div>
             </div>
           </el-card>
         </div>
       </el-scrollbar>
+      <div class="mt20 dataList">
+        <div class="mb20">数据源明细：{{ form.name }}</div>
+        <el-form ref="formRef" :model="form" label-width="150px">
+          <el-form-item label="数据源名称" required>
+            <div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
+              <el-input v-model="form.name"></el-input>
+            </div>
+          </el-form-item>
+          <el-form-item label="IP地址" required>
+            <div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
+              <el-input v-model="form.name"></el-input>
+            </div>
+          </el-form-item>
+          <el-form-item label="端口号" required>
+            <div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
+              <el-input v-model="form.name"></el-input>
+            </div>
+          </el-form-item>
+          <el-form-item label="数据库名" required>
+            <div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
+              <el-input v-model="form.name"></el-input>
+            </div>
+          </el-form-item>
+          <el-form-item label="用户名" required>
+            <div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
+              <el-input v-model="form.name"></el-input>
+            </div>
+          </el-form-item>
+          <el-form-item label="密码" required>
+            <div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
+              <el-input v-model="form.name"></el-input>
             </div>
+          </el-form-item>
+          <el-form-item label="数据库版本" required>
+            <div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
+              <el-input v-model="form.name"></el-input>
+            </div>
+          </el-form-item>
+          <el-form-item label="字符编码" required>
+            <div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
+              <el-input v-model="form.name"></el-input>
+            </div>
+          </el-form-item>
+          <el-form-item label="授权用户">
+            <div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
+              <el-input v-model="form.name"></el-input>
+            </div>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <Modal v-model="modalData.show" icon="error" :cancel="true" :text="modalData.text" @confirm="modalConfirm"></Modal>
   </div>
 </template>
 
 <style lang="scss" scoped>
-.flex-content{
+.flex-content {
   display: flex;
-  .box-card{
+  height: 190px;
+  .box-card {
+    position: relative;
     flex-shrink: 0;
     margin-right: 20px;
     height: 138px;
     width: 188px;
     border-radius: 10px;
-    .img{
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+    -webkit-transition: all 0.1s;
+    transition: all 0.1s;
+    :deep(.el-card__body) {
       width: 100%;
-      border-radius: 10px 10px 0 0;
-    }
-    :deep(.el-card__body){
+      height: 100%;
       display: flex;
       flex-direction: column;
     }
-    .title{
-      &-content{
+    .img {
+      width: 100%;
+      border-radius: 10px 10px 0 0;
+    }
+
+    .title {
+      width: 100%;
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #7a8495;
+      &-content {
         padding-left: 16px;
         padding-right: 16px;
+        font-size: 14px;
+        white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
       }
     }
+    .mask {
+      position: absolute;
+      z-index: -1;
+      opacity: 0;
+      -webkit-transition: all 0.1s;
+      transition: all 0.1s;
+      width: 100%;
+      height: 104px;
+      left: 0;
+      top: 0;
+      background: #191919;
+      display: flex;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+      justify-content: center;
+      border-radius: 10px 10px 0 0;
+      .maskbutton {
+        color: #fff;
+        width: 100%;
+        position: absolute;
+        top: 50%;
+        -webkit-transform: translateY(-50%);
+        transform: translateY(-50%);
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -ms-flex-pack: distribute;
+        justify-content: space-around;
+        &-item {
+          width: 70px;
+          font-size: 14px;
+          cursor: pointer;
+          text-align: center;
+          color: #fff;
+        }
+      }
+    }
+  }
+  .box-card:hover {
+    width: 250px;
+    height: 190px;
+    margin: 0 16px;
+    .mask {
+      opacity: 1;
+      width: 100%;
+      height: 140px;
+      display: block;
+      position: absolute;
+      z-index: 50;
+    }
+    .title {
+      &-content {
+        font-size: 18px;
+      }
+    }
   }
-  .box-card:last-child{
+  .box-card:last-child {
     margin-right: 0;
   }
 }
+.dataList {
+  :deep(.el-form-item__label) {
+    background: #f0f0f0;
+  }
+  :deep(.el-input__wrapper) {
+    background: rgba(255, 255, 255, 0);
+    box-shadow: none;
+  }
+  :deep(.el-form-item) {
+    margin-bottom: 5px;
+  }
+}
 </style>
\ No newline at end of file