|
@@ -1,7 +1,118 @@
|
|
<template>
|
|
<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>
|
|
</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>
|