Merge branch 'main' of git.zdool.com:xs/ggfwjsc

src/view/dialog/dialog.vue

@@ -0,0 +1,131 @@
+<template>
+    <div class="dialogPage">
+        <el-dialog v-model="dialogShow" width="80vw" :show-close="false" center :close-on-click-modal="false" :close-on-press-escape="false">
+            <template #header="{ close, titleId, titleClass }">
+                <div class="my-header">
+                    <el-icon size="26" color="#fff" @click="closeDialog">
+                        <CircleCloseFilled />
+                    </el-icon>
+                </div>
+            </template>
+            <div class="tabelPart">
+                <el-table :data="data.tableData " height='calc(100% - 40px)' :header-cell-style="{ background: '#008FCD' }">
+                    <el-table-column v-for="(item,index) in data.columns" :key="index" :property="item.property" :label="item.label" :width="item.width" align="center" />
+                </el-table>
+                <div class="pagePart">
+                    <el-pagination background layout="prev, pager, next" :total="1000" prev-text="上一页"
+                        next-text="下一页" />
+                </div>
+            </div>
+
+        </el-dialog>
+    </div>
+</template>
+<script setup>
+import { onMounted, reactive, ref, onBeforeMount, defineProps, watch } from "vue";
+import { CircleCloseFilled } from '@element-plus/icons-vue'
+
+const props = defineProps({
+    dialogShow: {
+        type: Boolean,
+        default: () => {
+            return false;
+        },
+    },
+    columns: {
+        type: Array,
+        default: () => {
+            return [];
+        },
+    },
+    tableData: {
+        type: Array,
+        default: () => {
+            return [];
+        },
+    },
+    title: {
+        type: String,
+        default: () => {
+            return '';
+        },
+    },
+});
+const emit = defineEmits([
+  "close",
+]);
+
+// 详情弹框
+const dialogShow = ref()
+const data = reactive ({
+    title: '',
+    columns: [],
+    tableData: [],
+})
+
+const gridData = [
+]
+
+watch(() => props.dialogShow, (newVal, oldVal) => {
+    dialogShow.value = newVal
+})
+
+// 使用生命钩子
+onMounted(() => {
+    dialogShow.value = props.dialogShow
+    data.columns = props.columns
+    data.title = props.title
+    data.tableData = props.tableData
+});
+
+const closeDialog = () => {
+    dialogShow.value = false
+    emit("close");
+}
+</script>
+<style lang="scss" scoped>
+:deep(.el-dialog) {
+  --el-dialog-bg-color: none;
+}
+
+.my-header {
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.tabelPart {
+  height: 60vh;
+  padding: 16px;
+  background: linear-gradient(270deg, rgba(0, 77, 131, 0.69) 0%, rgba(0, 51, 83, 0.77) 50%, rgba(0, 77, 131, 0.74) 100%), radial-gradient(66% 40% at 50% 0%, rgba(1, 150, 243, 0.55) 0%, rgba(0, 116, 255, 0) 100%);
+  box-shadow: inset 0px 0px 56px 0px rgba(100, 191, 255, 0.5);
+  border: 2px solid;
+  border-image: linear-gradient(180deg, rgba(21, 150, 255, 1), rgba(0, 157, 227, 0)) 2 2;
+
+  :deep(.el-table) {
+    --el-table-bg-color: none;
+    --el-table-tr-bg-color: none;
+    --el-table-header-bg-color: none;
+    background: none;
+    border: none;
+    --el-table-text-color: #fff;
+    --el-table-header-text-color: #fff;
+  }
+}
+
+.pagePart {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  :deep(.el-pagination){
+    --el-pagination-button-disabled-bg-color: none;
+    --el-pagination-bg-color: none;
+    --el-pagination-button-bg-color: none;
+    --el-pagination-button-color: #fff;
+    color: #fff;
+  }
+  :deep(.el-pagination button:disabled){
+    background-color: rgba(0, 116, 255, 0) !important;
+  }
+}
+</style>