|
@@ -1,23 +1,120 @@
|
|
<template>
|
|
<template>
|
|
- <div>
|
|
|
|
- 我是系统图
|
|
|
|
|
|
+ <div class="container">
|
|
|
|
+ <div class="header">
|
|
|
|
+ <div class="searchInputDiv">
|
|
|
|
+ <el-input
|
|
|
|
+ placeholder="搜索系统实例"
|
|
|
|
+ prefix-icon="el-icon-search"
|
|
|
|
+ v-model="searchVal"
|
|
|
|
+ >
|
|
|
|
+ </el-input>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="addDiv">
|
|
|
|
+ <el-button type="primary" @click="createSystemGraph"
|
|
|
|
+ >新建系统图</el-button
|
|
|
|
+ >
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="content">
|
|
|
|
+ <el-table :data="tableData" border style="width: 100%">
|
|
|
|
+ <el-table-column prop="name" label="系统图名称"> </el-table-column>
|
|
|
|
+ <el-table-column prop="type" label="系统类"> </el-table-column>
|
|
|
|
+ <el-table-column prop="instanceName" label="系统实例名称">
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column prop="templateName" label="系统图模版">
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column prop="state" label="状态"> </el-table-column>
|
|
|
|
+ <el-table-column prop="createTime" label="创建时间"> </el-table-column>
|
|
|
|
+ <el-table-column label="操作" width="100">
|
|
|
|
+ <template>
|
|
|
|
+ <el-button type="text" size="small">预览</el-button>
|
|
|
|
+ <el-button type="text" size="small">编辑</el-button>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ </el-table>
|
|
|
|
+ <el-pagination
|
|
|
|
+ v-if="dataCount > 0"
|
|
|
|
+ @size-change="handlePageSizeChange"
|
|
|
|
+ @current-change="handleCurrentPageChange"
|
|
|
|
+ :current-page="currentPage"
|
|
|
|
+ :page-sizes="[20, 30, 50, 100]"
|
|
|
|
+ :page-size="pageSize"
|
|
|
|
+ layout="total, prev, pager, next, sizes"
|
|
|
|
+ :total="dataCount"
|
|
|
|
+ >
|
|
|
|
+ </el-pagination>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<script>
|
|
<script>
|
|
|
|
+import { mapState } from "vuex";
|
|
|
|
+import { logicConfig } from "@/logicConfig";
|
|
|
|
+import packageConfig from "../../../package.json";
|
|
|
|
+
|
|
export default {
|
|
export default {
|
|
props: [],
|
|
props: [],
|
|
data() {
|
|
data() {
|
|
- return {};
|
|
|
|
|
|
+ return {
|
|
|
|
+ //搜索关键字
|
|
|
|
+ searchVal: "",
|
|
|
|
+ tableData: [],
|
|
|
|
+ //当前页码
|
|
|
|
+ currentPage: 1,
|
|
|
|
+ //每页条数
|
|
|
|
+ pageSize: 20,
|
|
|
|
+ //总条数
|
|
|
|
+ dataCount: 0,
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ computed: {
|
|
|
|
+ ...mapState(["selectProject"]),
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ //每页条数改变
|
|
|
|
+ handlePageSizeChange: function () {},
|
|
|
|
+ //页码改变
|
|
|
|
+ handleCurrentPageChange: function () {},
|
|
|
|
+ //新建系统图
|
|
|
|
+ createSystemGraph: function () {
|
|
|
|
+ window.open(
|
|
|
|
+ "/" +
|
|
|
|
+ packageConfig.name +
|
|
|
|
+ logicConfig.routerNameConfig.systemGraphEditName
|
|
|
|
+ );
|
|
|
|
+ },
|
|
},
|
|
},
|
|
- computed: {},
|
|
|
|
- methods: {},
|
|
|
|
created() {},
|
|
created() {},
|
|
|
|
|
|
mounted() {},
|
|
mounted() {},
|
|
- components: {
|
|
|
|
- },
|
|
|
|
|
|
+ components: {},
|
|
};
|
|
};
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
<style scoped>
|
|
|
|
+.container {
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.header {
|
|
|
|
+ height: 70px;
|
|
|
|
+ line-height: 70px;
|
|
|
|
+ text-align: right;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.content {
|
|
|
|
+ flex: 1;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.searchInputDiv {
|
|
|
|
+ width: 150px;
|
|
|
|
+ height: 100%;
|
|
|
|
+ display: inline-block;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.addDiv {
|
|
|
|
+ width: 100px;
|
|
|
|
+ height: 100%;
|
|
|
|
+ display: inline-block;
|
|
|
|
+}
|
|
</style>
|
|
</style>
|