yangdr 1 день тому
батько
коміт
2eeaefd518

+ 0 - 0
js-modules.d.ts


+ 37 - 1
src/utils/confirmation.jsx

@@ -1,5 +1,5 @@
 import { ElMessage, ElMessageBox } from 'element-plus'
-
+import { ref, reactive } from 'vue'
 const defaultFunc = () => { }
 
 export function confirmDelete(msg, ok = defaultFunc, no = defaultFunc) {
@@ -41,3 +41,39 @@ export function confirmDelete(msg, ok = defaultFunc, no = defaultFunc) {
 }
 
 
+export function confirmInput(msg, ok = defaultFunc, no = defaultFunc) {
+  let inputQuery = ref("")
+  let switchQuery = true
+
+  const handleInput = (e) => {
+    console.log('handleInput', this)
+  }
+
+  ElMessageBox({
+    title: '',
+    message: (<div>
+      <div className=""><span>实体类型名称:</span> <input onInput={handleInput} vModel={inputQuery.value} placeholder="请输入" /></div>
+      <div className=""><span>是否启用:</span><el-switch vModel={switchQuery} /></div>
+    </div>),
+    showCancelButton: true,
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    showClose: false,
+    customClass: "confirm-input",
+    beforeClose: (action, instance, done) => {
+      if (action === 'confirm') {
+        done()
+      } else {
+        done()
+      }
+    },
+  }).then((action, instance, done) => {
+    if (action === 'confirm') {
+      ok(inputQuery.value)
+    } else {
+
+    }
+  }).catch(() => {
+    no()
+  })
+}

+ 1 - 0
src/utils/js-modules.d.ts

@@ -0,0 +1 @@
+declare module 'jquery'

+ 114 - 3
src/views/KMPlatform/KGBuilder/ETM/EntityTypeManagement.vue

@@ -1,7 +1,118 @@
 <template>
-  Entity type management
+  <div class="entity-type-management">
+    <header>
+      <span class="search">
+        <el-input v-model="querySearch" size="large" placeholder="搜索" :prefix-icon="Search" />
+      </span>
+      <span class="newly-added" @click="handleNewlyAdd">
+        新增
+      </span>
+    </header>
+    <main>
+      <div class="table-area">
+        <el-table :data="[]" ref="elTableRef" class="elTable" style="width: 100%;min-width: 0px; max-width: 100%;"
+          size="large">
+          <el-table-column type="selection" width="30" />
+          <el-table-column label="#" prop="index" width="60" />
+          <el-table-column prop="name" min-width="150" label="实体类型名称">
+          </el-table-column>
+          <el-table-column prop="operator" label="操作人" />
+          <el-table-column prop="date" label="操作时间" />
+          <el-table-column fixed="right" label="操作" width="120">
+            <template #default="{ row }">
+              <div class="operation">
+                <el-switch v-model="switchValue" />
+                <el-button link type="primary">启用</el-button>
+                <el-button link type="primary">修改</el-button>
+                <el-button link type="primary">删除</el-button>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </main>
+    <footer></footer>
+  </div>
 </template>
 
-<script setup></script>
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import $ from 'jquery'
+import { Search } from '@element-plus/icons-vue'
+import { confirmInput } from "@/utils/confirmation"
+let querySearch = ref<string>("")
+let switchValue = ref<boolean>(true)
+const elTableRef = ref<any>(null)
 
-<style lang="less" scoped></style>
+function handleNewlyAdd() {
+}
+
+// onMounted(() => {
+//   $(window).resize(() => {
+//     elTableRef.value.doLayout()
+//   })
+// })
+</script>
+
+<style lang="less" scoped>
+.search {
+  padding: 10px 20px;
+  // margin: 5px;
+  background: white;
+
+  /deep/ .el-input__wrapper {
+    background-color: #EFF1F5;
+    border-radius: 10px;
+  }
+
+  .el-input {
+    width: 300px;
+  }
+}
+
+.newly-added {
+  float: right;
+  background-color: #169BD5;
+  color: white;
+  padding: 15px 50px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.entity-type-management {
+  width: 100%;
+  box-sizing: border-box;
+  padding-left: 20px;
+
+  header {
+    clear: both;
+  }
+
+  main {
+    width: 100%;
+
+    .table-area {
+      width: 1000px;
+    }
+  }
+
+  footer {}
+
+
+  .elTable /deep/ .el-table__header-wrapper table,
+  .elTable /deep/ .el-table__body-wrapper table {
+    width: 100% !important;
+  }
+
+  .elTable /deep/ .el-table__body,
+  .elTable /deep/ .el-table__footer,
+  .elTable /deep/ .el-table__header {
+    table-layout: auto;
+  }
+
+  .elTable /deep/ .el-table__empty-block,
+  .elTable /deep/ .el-table__body {
+    width: 100% !important;
+  }
+}
+</style>

+ 3 - 2
src/views/KMPlatform/KGBuilder/KGBuilder.vue

@@ -68,8 +68,8 @@ function handleMenuClick(data) {
 
         &:is(.active) {
           // color: #0A61F7;
-          color:#40a1ff;
-           background: #eef6ff;
+          color: #40a1ff;
+          background: #eef6ff;
         }
 
         &:hover {
@@ -82,6 +82,7 @@ function handleMenuClick(data) {
 
   .content {
     flex: 1 1 auto;
+    min-width: 0px;
   }
 }
 </style>

+ 3 - 1
tsconfig.app.json

@@ -3,7 +3,9 @@
   "include": [
     "env.d.ts",
     "src/**/*",
-    "src/**/*.vue"
+    "src/**/*.vue",
+    "js-modules.d.ts",
+    "js-modules.d.ts"
   ],
   "exclude": [
     "src/**/__tests__/*"