|
|
@@ -1,93 +1,388 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <el-button type="primary" @click="showEdit">Click</el-button>
|
|
|
- <el-button type="primary" @click="showEdit2">Click</el-button>
|
|
|
- <el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" />
|
|
|
-
|
|
|
- <el-tree
|
|
|
- ref="tree2"
|
|
|
- :data="data2"
|
|
|
- :props="defaultProps"
|
|
|
- :filter-node-method="filterNode"
|
|
|
- default-expand-all
|
|
|
- />
|
|
|
-
|
|
|
- <business-edit ref="businessEdit" />
|
|
|
- <system-edit ref="systemEdit" />
|
|
|
+ <div class="business-container">
|
|
|
+ <el-card class="type-box">
|
|
|
+ <div slot="header" class="clearfix card-title">
|
|
|
+ <span>Test</span>
|
|
|
+ </div>
|
|
|
+ <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>
|
|
|
+ </el-card>
|
|
|
+ <div class="business-box">
|
|
|
+ <div class="list-filter">
|
|
|
+ <el-form ref="filterForm" :model="formData" inline>
|
|
|
+ <el-form-item label="name">
|
|
|
+ <el-input v-model="formData.businessmName" class="filter-item" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="name2">
|
|
|
+ <el-input v-model="formData.appName" class="filter-item" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="searchTable">Search</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="list-button">
|
|
|
+ <el-button type="primary" @click="showEdit('ADD')">Add</el-button>
|
|
|
+ <el-upload action="" class="upload-btn">
|
|
|
+ <el-button>Upload</el-button>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+ <div v-loading="loading" class="list-box">
|
|
|
+ <el-scrollbar class="list-scrollbar">
|
|
|
+ <div class="business-item-box">
|
|
|
+ <div v-for="item in tableData" :key="item.id" class="business-item">
|
|
|
+ <div class="item-header">
|
|
|
+ <div class="item-type">{{ formatDictData(item.businessType) }}</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" @click="deleteItem(item.id)">Delete</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item-content">
|
|
|
+ <div class="item-content-left">
|
|
|
+ <el-avatar :size="56" :src="item.icon" />
|
|
|
+ <div class="item-title">
|
|
|
+ <div class="item-name">{{ item.businessName }}</div>
|
|
|
+ <div class="item-system">{{ item.appName }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-button class="item-link" size="small" @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>
|
|
|
+ </div>
|
|
|
+ <system-detail ref="systemDetail" :type-data="typeData" />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import BusinessEdit from '../home/components/BusinessEdit'
|
|
|
-import SystemEdit from '../home/components/SystemEdit'
|
|
|
+import SystemDetail from './components/SystemDetail'
|
|
|
+
|
|
|
+import { fetchDictData } from '@/api/dict'
|
|
|
+import { fetchAllBizList, pushdeleteItem } from '@/api/biz'
|
|
|
+
|
|
|
+import { hasValidRecords, formatDictData, isNull } from '@/utils/convert'
|
|
|
|
|
|
export default {
|
|
|
- components: {
|
|
|
- BusinessEdit,
|
|
|
- SystemEdit
|
|
|
- },
|
|
|
+ components: { SystemDetail },
|
|
|
data() {
|
|
|
return {
|
|
|
- filterText: '',
|
|
|
- data2: [{
|
|
|
- id: 1,
|
|
|
- label: 'Level one 1',
|
|
|
- children: [{
|
|
|
- id: 4,
|
|
|
- label: 'Level two 1-1',
|
|
|
- children: [{
|
|
|
- id: 9,
|
|
|
- label: 'Level three 1-1-1'
|
|
|
- }, {
|
|
|
- id: 10,
|
|
|
- label: 'Level three 1-1-2'
|
|
|
- }]
|
|
|
- }]
|
|
|
- }, {
|
|
|
- id: 2,
|
|
|
- label: 'Level one 2',
|
|
|
- children: [{
|
|
|
- id: 5,
|
|
|
- label: 'Level two 2-1'
|
|
|
- }, {
|
|
|
- id: 6,
|
|
|
- label: 'Level two 2-2'
|
|
|
- }]
|
|
|
- }, {
|
|
|
- id: 3,
|
|
|
- label: 'Level one 3',
|
|
|
- children: [{
|
|
|
- id: 7,
|
|
|
- label: 'Level two 3-1'
|
|
|
- }, {
|
|
|
- id: 8,
|
|
|
- label: 'Level two 3-2'
|
|
|
- }]
|
|
|
- }],
|
|
|
- defaultProps: {
|
|
|
- children: 'children',
|
|
|
- label: 'label'
|
|
|
- }
|
|
|
+ // type
|
|
|
+ dictType: 'bisiness_type',
|
|
|
+ typeData: [],
|
|
|
+ // table
|
|
|
+ current: 1,
|
|
|
+ size: 16,
|
|
|
+ total: 0,
|
|
|
+ pageSizeAll: [10, 20, 50, 100, 200, 500],
|
|
|
+ tableData: [],
|
|
|
+ // filter
|
|
|
+ formData: {
|
|
|
+ businessType: '',
|
|
|
+ businessmName: '',
|
|
|
+ appName: ''
|
|
|
+ },
|
|
|
+ // others
|
|
|
+ loading: false
|
|
|
}
|
|
|
},
|
|
|
- watch: {
|
|
|
- filterText(val) {
|
|
|
- this.$refs.tree2.filter(val)
|
|
|
- }
|
|
|
+ created() {
|
|
|
+ this.getTypeData()
|
|
|
+ this.searchTable()
|
|
|
},
|
|
|
-
|
|
|
methods: {
|
|
|
- filterNode(value, data) {
|
|
|
- if (!value) return true
|
|
|
- return data.label.indexOf(value) !== -1
|
|
|
+ // 改变每页显示条数
|
|
|
+ handleSizeChange(val) {
|
|
|
+ this.current = 1
|
|
|
+ this.size = val
|
|
|
+ this.getTablelist()
|
|
|
+ },
|
|
|
+ // 切换第几页
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.current = val
|
|
|
+ this.getTablelist()
|
|
|
+ },
|
|
|
+ // 重置搜索项
|
|
|
+ resetTable(formName) {
|
|
|
+ this.$refs[formName].resetFields()
|
|
|
+ this.getTablelist()
|
|
|
+ },
|
|
|
+ // 点击搜索按钮
|
|
|
+ searchTable() {
|
|
|
+ this.current = 1
|
|
|
+ this.getTablelist()
|
|
|
+ },
|
|
|
+ // 获取table数据
|
|
|
+ getTablelist() {
|
|
|
+ const params = {
|
|
|
+ page: this.current,
|
|
|
+ size: this.size,
|
|
|
+ params: {
|
|
|
+ delFlag: 0,
|
|
|
+ businessType: this.formData.businessType,
|
|
|
+ businessmName: this.formData.businessmName,
|
|
|
+ appName: this.formData.appName
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.loading = true
|
|
|
+ fetchAllBizList(params).then(response => {
|
|
|
+ debugger
|
|
|
+ if (hasValidRecords(response)) {
|
|
|
+ this.tableData = response.data.records
|
|
|
+ this.total = response.data.total
|
|
|
+ } else {
|
|
|
+ this.tableData = []
|
|
|
+ this.total = 0
|
|
|
+ }
|
|
|
+ this.loading = false
|
|
|
+ }).catch(error => {
|
|
|
+ console.log(error)
|
|
|
+ this.loading = false
|
|
|
+ this.$message.error({
|
|
|
+ type: 'error',
|
|
|
+ duration: 0,
|
|
|
+ showClose: true,
|
|
|
+ message: ': ' + error.message
|
|
|
+ })
|
|
|
+ })
|
|
|
},
|
|
|
- showEdit() {
|
|
|
- this.$refs.businessEdit.open()
|
|
|
+ jumpTo(link) {
|
|
|
+ window.open(link, '_blank')
|
|
|
},
|
|
|
- showEdit2() {
|
|
|
- this.$refs.systemEdit.open()
|
|
|
+ showEdit(type, data) {
|
|
|
+ this.$refs.systemDetail.open(type, data)
|
|
|
+ },
|
|
|
+ deleteItem(id) {
|
|
|
+ this.loading = true
|
|
|
+ pushdeleteItem(id).then(res => {
|
|
|
+ this.getTablelist()
|
|
|
+ }).catch(error => {
|
|
|
+ console.log(error)
|
|
|
+ this.loading = false
|
|
|
+ this.$message.error({
|
|
|
+ type: 'error',
|
|
|
+ duration: 0,
|
|
|
+ showClose: true,
|
|
|
+ message: ': ' + error.message
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getTypeData() {
|
|
|
+ fetchDictData(this.dictType).then(response => {
|
|
|
+ if (!isNull(response.data)) {
|
|
|
+ this.typeData = response.data
|
|
|
+ } else {
|
|
|
+ this.typeData = []
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ console.log(error)
|
|
|
+ this.$message.error({
|
|
|
+ type: 'error',
|
|
|
+ duration: 0,
|
|
|
+ showClose: true,
|
|
|
+ message: '获取应用类型出错: ' + error.message
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ formatDictData(type) {
|
|
|
+ return formatDictData(this.typeData, type)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
+<style lang="scss" scoped>
|
|
|
+.business-container {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .type-box {
|
|
|
+ width: 230px;
|
|
|
+ min-width: 230px;
|
|
|
+ margin-right: 5px;
|
|
|
+
|
|
|
+ .el-radio-group {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .el-radio-button {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep {
|
|
|
+ .el-card__header {
|
|
|
+ height: 60px;
|
|
|
+ }
|
|
|
+ .el-card__body {
|
|
|
+ padding: 20px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-radio-button__inner {
|
|
|
+ width: 100%;
|
|
|
+ border: 0;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ .el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
|
|
+ background-color: #ebf2fd;
|
|
|
+ color: #0056dd;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-title {
|
|
|
+ font-size: 18px;
|
|
|
+ line-height: 24px;
|
|
|
+ color: rgba(0,0,0,0.85);
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .business-box {
|
|
|
+ padding-left: 20px;
|
|
|
+ background-color: #fff;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .upload-btn {
|
|
|
+ display: inline-block;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .page {
|
|
|
+ margin-right: 20px;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep {
|
|
|
+ .el-scrollbar__wrap{
|
|
|
+ overflow-x: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-scrollbar__bar.is-horizontal {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list-filter {
|
|
|
+ height: 60px;
|
|
|
+ width: 800px;
|
|
|
+ padding-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list-button {
|
|
|
+ height: 50px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list-box {
|
|
|
+ min-width: 800px;
|
|
|
+ height: calc(100% - 110px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .list-scrollbar {
|
|
|
+ height: calc(100% - 32px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .business-item-box {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .business-item {
|
|
|
+ width: 380px;
|
|
|
+ height: 150px;
|
|
|
+ border: 1px solid rgba(0,0,0,0.09);
|
|
|
+ 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-title {
|
|
|
+ display: inline-block;
|
|
|
+ margin-left: 10px;
|
|
|
+
|
|
|
+ .item-name, .item-system {
|
|
|
+ width: 230px;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-name {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 550;
|
|
|
+ color: rgba(0,0,0,0.85);
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-system {
|
|
|
+ font-size: 14px;
|
|
|
+ color: rgba(0,0,0,0.65);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-link {
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-footer {
|
|
|
+ font-size: 12px;
|
|
|
+ color: rgba(0,0,0,0.65);
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep {
|
|
|
+ .el-button--small {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
caiaa