|
|
@@ -4,7 +4,7 @@
|
|
|
<div slot="header" class="clearfix">
|
|
|
<span>Test</span>
|
|
|
</div>
|
|
|
- <el-radio-group v-model="formData.appType">
|
|
|
+ <el-radio-group v-model="formData.appType" @input="searchTable">
|
|
|
<el-radio-button label="">All</el-radio-button>
|
|
|
<el-radio-button v-for="item in typeData" :key="item.id" :label="item.value">{{ item.label }}</el-radio-button>
|
|
|
</el-radio-group>
|
|
|
@@ -20,39 +20,73 @@
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
<el-button type="primary" @click="searchTable">Search</el-button>
|
|
|
- <el-button type="danger" @click="resetTable('filterForm')">Reset</el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
- <div>
|
|
|
- <div class="item-button">
|
|
|
- <el-button type="primary">Add</el-button>
|
|
|
- <el-button type="primary">Upload</el-button>
|
|
|
- </div>
|
|
|
- <div class="system-item-box">
|
|
|
- <div v-for="item in tableData" :key="item.id" class="system-item">
|
|
|
- <div>
|
|
|
- <span>{{ item.appType }}</span>
|
|
|
- <el-button type="text">detail</el-button>
|
|
|
- <el-button type="text">Edit</el-button>
|
|
|
+ <div class="list-button">
|
|
|
+ <el-button type="primary" @click="showEdit('ADD')">Add</el-button>
|
|
|
+ <!-- <el-button type="primary">Upload</el-button> -->
|
|
|
+ <!-- <el-upload
|
|
|
+ :action="uploadExcel"
|
|
|
+ :headers="uploadHeader"
|
|
|
+ :show-file-list="false"
|
|
|
+ :before-upload="beforeUploadExcel"
|
|
|
+ :on-success="fetchTableDetil"
|
|
|
+ :on-error="uploadError"
|
|
|
+ class="upload-btn"
|
|
|
+ > -->
|
|
|
+ <el-upload action="" class="upload-btn">
|
|
|
+ <el-button>Upload</el-button>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+ <!-- <el-scrollbar> -->
|
|
|
+ <div class="system-item-box">
|
|
|
+ <div v-for="item in tableData" :key="item.id" class="system-item">
|
|
|
+ <div class="item-header">
|
|
|
+ <div class="item-type">{{ formatDictData(item.appType) }}</div>
|
|
|
+ <div class="item-btn">
|
|
|
+ <el-button type="text" @click="showEdit('VIEW', item)">Detail</el-button>
|
|
|
+ <el-button type="text" @click="showEdit('EDIT', item)">Edit</el-button>
|
|
|
<el-button type="text">Delete</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="item-content">
|
|
|
+ <div class="item-content-left">
|
|
|
+ <el-avatar :size="43" :src="item.icon" />
|
|
|
+ <span class="item-name">{{ item.systemName }}</span>
|
|
|
+ </div>
|
|
|
+ <el-button class="item-link" @click="jumpTo(item.url)">Open</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="item-footer">{{ item.deptName }}</div>
|
|
|
</div>
|
|
|
-
|
|
|
+ </div>
|
|
|
+ <!-- </el-scrollbar> -->
|
|
|
+ <div v-if="total > 0" class="page">
|
|
|
+ <el-pagination
|
|
|
+ layout="total, prev, pager, next, jumper"
|
|
|
+ :current-page="current"
|
|
|
+ :total="total"
|
|
|
+ :page-sizes="pageSizeAll"
|
|
|
+ :page-size="size"
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
+ <system-detail ref="systemDetail" />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import SystemDetail from './components/SystemDetail'
|
|
|
+
|
|
|
import { fetchDictData } from '@/api/dict'
|
|
|
import { fetchAllSystemList } from '@/api/system'
|
|
|
|
|
|
-import { hasValidRecords } from '@/utils/convert'
|
|
|
+import { hasValidRecords, formatDictData } from '@/utils/convert'
|
|
|
|
|
|
export default {
|
|
|
+ components: { SystemDetail },
|
|
|
data() {
|
|
|
return {
|
|
|
// type
|
|
|
@@ -60,7 +94,7 @@ export default {
|
|
|
typeData: [],
|
|
|
// table
|
|
|
current: 1,
|
|
|
- size: 20,
|
|
|
+ size: 12,
|
|
|
total: 0,
|
|
|
pageSizeAll: [10, 20, 50, 100, 200, 500],
|
|
|
tableData: [],
|
|
|
@@ -108,6 +142,7 @@ export default {
|
|
|
size: this.size,
|
|
|
params: {
|
|
|
delFlag: 0,
|
|
|
+ appType: this.formData.appType,
|
|
|
systemName: this.formData.systemName,
|
|
|
deptName: this.formData.deptName
|
|
|
}
|
|
|
@@ -148,19 +183,28 @@ export default {
|
|
|
message: ': ' + error.message
|
|
|
})
|
|
|
})
|
|
|
+ },
|
|
|
+ showEdit(type, data) {
|
|
|
+ this.$refs.systemDetail.open(type, data)
|
|
|
+ },
|
|
|
+ jumpTo(link) {
|
|
|
+ window.open(link, '_blank')
|
|
|
+ },
|
|
|
+ formatDictData(type) {
|
|
|
+ return formatDictData(this.typeData, type)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+@import "~@/styles/variables.scss";
|
|
|
+
|
|
|
.system-container {
|
|
|
display: flex;
|
|
|
|
|
|
- .type-box, .system-box {
|
|
|
- }
|
|
|
.type-box {
|
|
|
- width: 300px;
|
|
|
+ width: 250px;
|
|
|
margin-right: 5px;
|
|
|
|
|
|
.el-radio-group {
|
|
|
@@ -188,13 +232,41 @@ export default {
|
|
|
}
|
|
|
.system-box {
|
|
|
width: 100%;
|
|
|
+ min-height: calc(100vh - #{$headerHeight} - 34px - #{$footerHeight} - 10px);
|
|
|
padding-left: 20px;
|
|
|
background-color: #fff;
|
|
|
+
|
|
|
+ .upload-btn {
|
|
|
+ display: inline-block;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .page {
|
|
|
+ margin-right: 20px;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep {
|
|
|
+ .el-scrollbar__wrap{
|
|
|
+ max-height: 520px;
|
|
|
+ // overflow-x: hidden;
|
|
|
+ }
|
|
|
+ .el-scrollbar__bar.is-horizontal {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
+ .list-button {
|
|
|
+ margin-top: -8px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
.system-item-box {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
}
|
|
|
+
|
|
|
.system-item {
|
|
|
width: 380px;
|
|
|
height: 150px;
|
|
|
@@ -202,6 +274,66 @@ export default {
|
|
|
border-radius: 4px;
|
|
|
margin-right: 16px;
|
|
|
margin-bottom: 16px;
|
|
|
+ padding: 0 10px 10px 10px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .item-header {
|
|
|
+ height: 35px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-type, .item-btn {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-type {
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 35px;
|
|
|
+ color: rgba(0,0,0,0.65);
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-btn {
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-content {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-content-left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-name {
|
|
|
+ font-size: 14px;
|
|
|
+ color: rgba(0,0,0,0.85);
|
|
|
+ margin-left: 10px;
|
|
|
+ display: inline-block;
|
|
|
+ width: 230px;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-link {
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-footer {
|
|
|
+ font-size: 12px;
|
|
|
+ color: rgba(0,0,0,0.65);
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep {
|
|
|
+ .el-button--small {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
}
|
caiaa1