单独构建大屏ui库,避免引入混乱

ui/dv/AiDvDialog.vue

@@ -0,0 +1,64 @@
+<script>
+import AiDrag from "./AiDrag.vue";
+import AiDvSvg from "./layout/AiDvSvg/AiDvSvg.vue";
+
+export default {
+  name: "AiDvDialog",
+  components: {AiDvSvg, AiDrag},
+  props: {
+    title: {default: "弹窗"},
+    tableData: {default: () => []},
+    columns: {type: [Array, Object]}
+  },
+  data() {
+    return {
+      dialog: false,
+      detail: {}
+    }
+  },
+  computed: {
+    colConfigs() {
+      let config = []
+      if (!Array.isArray(this.columns)) {
+        config = Object.entries(this.columns).map(([key, value]) => {
+          return {...value, prop: key}
+        })
+      } else config = this.columns
+      return config
+    }
+  },
+  methods: {
+    show() {
+      this.dialog = true
+    },
+    close() {
+      this.dialog = false
+    }
+  }
+}
+</script>
+
+<template>
+  <section class="AiDvDialog">
+    <ai-drag v-if="dialog" :resizable="false">
+      <ai-dv-svg :title="title" @close="dialog=false">
+        <slot v-if="$slots.default"/>
+        <el-table v-else class="simple" :data="tableData">
+          <el-table-column v-for="item in colConfigs" :key="item.prop" :prop="item.prop" :label="item.label"/>
+        </el-table>
+      </ai-dv-svg>
+    </ai-drag>
+  </section>
+</template>
+
+<style scoped lang="scss">
+@import "dv";
+
+.AiDvDialog {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 999;
+  transform: translate(-50%, -50%);
+}
+</style>