|
|
@@ -2,38 +2,38 @@
|
|
|
<div class="Box">
|
|
|
<div class="centerBox">
|
|
|
<div class="searchBox">
|
|
|
- <Search :isAdd="false" @getSearchData="getSearchData" :isSlot="true"
|
|
|
- ><el-button class="btnAdd" @click="gotoAdd"
|
|
|
- >新增策略</el-button
|
|
|
- ></Search
|
|
|
- >
|
|
|
+ <Search :isAdd="false" @getSearchData="getSearchData" @clearSearchData="clearSearchData" :isSlot="true">
|
|
|
+ <el-button class="btnAdd" @click="gotoAdd">新增策略</el-button>
|
|
|
+ </Search>
|
|
|
</div>
|
|
|
- <div class="center-box">
|
|
|
- <el-card class="box-card" v-for="(item, index) in tacList" :key="index">
|
|
|
- <button
|
|
|
- type="text"
|
|
|
- @click="open(item,index)"
|
|
|
- style="
|
|
|
+ <div class="content-box">
|
|
|
+ <div v-if="tacList.length" class="contentBox">
|
|
|
+ <div v-infinite-scroll="load" :infinite-scroll-distance="20" infinite-scroll-disabled="disabled" class="center-box">
|
|
|
+ <el-card class="box-card" v-for="(item, index) in tacList" :key="index">
|
|
|
+ <button type="text" @click="open(item,index)" style="
|
|
|
float: right;
|
|
|
padding: 3px 0;
|
|
|
border: none;
|
|
|
color: #303133;
|
|
|
width: 20px;
|
|
|
background: #fff;
|
|
|
- "
|
|
|
- >
|
|
|
- ×
|
|
|
- </button>
|
|
|
- <div style="padding: 10px">
|
|
|
- <div class="header-top">
|
|
|
- <div class="header-mid">
|
|
|
- <span class="title">{{ item.TacName }} </span>
|
|
|
+ ">
|
|
|
+ ×
|
|
|
+ </button>
|
|
|
+ <div style="padding: 10px">
|
|
|
+ <div class="header-top">
|
|
|
+ <div class="header-mid">
|
|
|
+ <span class="title">{{ item.TacName }} </span>
|
|
|
+ </div>
|
|
|
+ <div class="loger" @click="EditStystem(item.TacId)"></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="loger" @click="EditStystem(item.TacId)"></div>
|
|
|
- </div>
|
|
|
+ </el-card>
|
|
|
</div>
|
|
|
- </el-card>
|
|
|
- <el-empty v-if="tacList.length==0" description="没有内容" style="margin:0 auto"></el-empty>
|
|
|
+ <p class="center" v-if="loading">加载中...</p>
|
|
|
+ <p class="center" v-if="noMore">没有更多数据了~</p>
|
|
|
+ </div>
|
|
|
+ <el-empty v-else description="没有内容" style="margin:0 auto"></el-empty>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -47,9 +47,7 @@
|
|
|
<div class="title1">删除策略</div>
|
|
|
<div class="content">是否确认删除该策略？</div>
|
|
|
<div class="foot right t30">
|
|
|
- <el-button size="medium" @click="remove(item,index)" type="danger" class="r24"
|
|
|
- >删除</el-button
|
|
|
- >
|
|
|
+ <el-button size="medium" @click="remove(item,index)" type="danger" class="r24">删除</el-button>
|
|
|
<el-button size="medium" @click="flag = false">取消</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -60,78 +58,132 @@
|
|
|
<script>
|
|
|
import Search from "@/layout/components/Search";
|
|
|
import Dialog from "@/layout/components/Dialog";
|
|
|
-import { GetTacList ,DeleteTac } from "@/api/systemConfiguration";
|
|
|
+import { GetTacList, DeleteTac } from "@/api/systemConfiguration";
|
|
|
export default {
|
|
|
components: { Search, Dialog },
|
|
|
- data() {
|
|
|
+ data () {
|
|
|
return {
|
|
|
flag: false, //弹框开关
|
|
|
tacList: [],
|
|
|
- delItem:null,
|
|
|
- delIndex:null,
|
|
|
- keyWord:""
|
|
|
+ delItem: null,
|
|
|
+ delIndex: null,
|
|
|
+ keyWord: "",
|
|
|
+ pageNum: 1,
|
|
|
+ PageSize: 40,
|
|
|
+ loading: false,
|
|
|
+ total: null,
|
|
|
+ dataList: [],
|
|
|
+ num: null
|
|
|
};
|
|
|
},
|
|
|
- created:function(){
|
|
|
- if(this.$route.query.keyWords){
|
|
|
+ created () {
|
|
|
+ if (this.$route.query.keyWords) {
|
|
|
this.keyWord = this.$route.query.keyWords;
|
|
|
}
|
|
|
- this.getTacList();
|
|
|
+ this.getTacList({
|
|
|
+ QueryName: this.keyWord,
|
|
|
+ PageSize: this.PageSize,
|
|
|
+ PageIndex: this.pageNum
|
|
|
+ });
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ noMore () {
|
|
|
+ return this.pageNum >= this.total
|
|
|
+ },
|
|
|
+ disabled () {
|
|
|
+ return this.loading || this.noMore
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
- getSearchData: function (data) {
|
|
|
+ getSearchData (data) {
|
|
|
this.keyWord = data;
|
|
|
- this.getTacList()
|
|
|
+ this.dataList = [];
|
|
|
+ this.tacList = [];
|
|
|
+ this.pageNum = 1;
|
|
|
+ this.getTacList({
|
|
|
+ QueryName: this.keyWord,
|
|
|
+ PageSize: this.PageSize,
|
|
|
+ PageIndex: this.pageNum
|
|
|
+ });
|
|
|
+ },
|
|
|
+ clearSearchData () {
|
|
|
+ this.keyWord = '';
|
|
|
+ this.dataList = [];
|
|
|
+ this.tacList = [];
|
|
|
+ this.pageNum = 1;
|
|
|
+ this.getTacList({
|
|
|
+ QueryName: this.keyWord,
|
|
|
+ PageSize: this.PageSize,
|
|
|
+ PageIndex: this.pageNum
|
|
|
+ });
|
|
|
},
|
|
|
- getTacList() {
|
|
|
+ getTacList (obj) {
|
|
|
+ this.loading = true;
|
|
|
return new Promise((resolve, reject) => {
|
|
|
- GetTacList({ QueryName: this.keyWord })
|
|
|
+ GetTacList(obj)
|
|
|
.then((response) => {
|
|
|
if (response.code === 0) {
|
|
|
const { returnData } = response;
|
|
|
- this.tacList = returnData;
|
|
|
+ const datas = returnData.records;
|
|
|
+ this.total = returnData.pages;
|
|
|
+ this.dataList.push(datas)
|
|
|
+ const arrs = this.dataList.flat()
|
|
|
+ this.tacList = arrs;
|
|
|
+ this.loading = false;
|
|
|
}
|
|
|
resolve();
|
|
|
})
|
|
|
.catch((error) => {
|
|
|
reject(error);
|
|
|
+ this.loading = false;
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
- gotoSystem() {
|
|
|
+ gotoSystem () {
|
|
|
this.$router.push("/systemManagement");
|
|
|
},
|
|
|
// 新增页面
|
|
|
- gotoAdd() {
|
|
|
+ gotoAdd () {
|
|
|
this.$router.push("/addSystem");
|
|
|
},
|
|
|
//编辑页面
|
|
|
- EditStystem(id) {
|
|
|
- this.$router.push({path:"/EditSystem",query:{TacId:id}});
|
|
|
+ EditStystem (id) {
|
|
|
+ this.$router.push({ path: "/EditSystem", query: { TacId: id } });
|
|
|
},
|
|
|
//删除
|
|
|
- remove() {
|
|
|
+ remove () {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
- DeleteTac({ TacId: this.delItem.TacId})
|
|
|
+ DeleteTac({ TacId: this.delItem.TacId })
|
|
|
.then((response) => {
|
|
|
if (response.code === 0) {
|
|
|
this.delItem = null;
|
|
|
this.$message.success("删除成功");
|
|
|
- this.tacList.splice(this.delIndex,1)
|
|
|
+ this.tacList.splice(this.delIndex, 1)
|
|
|
+ this.delIndex = null
|
|
|
this.flag = false;
|
|
|
}
|
|
|
resolve();
|
|
|
})
|
|
|
.catch((error) => {
|
|
|
reject(error);
|
|
|
+ this.flag = false;
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
- open(data,index) {
|
|
|
+ open (data, index) {
|
|
|
this.delItem = data;
|
|
|
this.delIndex = index;
|
|
|
this.flag = true;
|
|
|
},
|
|
|
+ //滚动加载数据
|
|
|
+ load () {
|
|
|
+ this.pageNum += 1
|
|
|
+ this.getTacList({
|
|
|
+ QueryName: this.keyWord,
|
|
|
+ PageSize: this.PageSize,
|
|
|
+ PageIndex: this.pageNum
|
|
|
+ });
|
|
|
+ }
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
@@ -165,6 +217,14 @@ export default {
|
|
|
margin-right: 52px;
|
|
|
border-radius: 16px;
|
|
|
}
|
|
|
+.content-box {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.contentBox {
|
|
|
+ height: 76vh;
|
|
|
+}
|
|
|
.center-box {
|
|
|
margin-top: 50px;
|
|
|
display: flex;
|
|
|
@@ -172,6 +232,10 @@ export default {
|
|
|
flex-wrap: wrap;
|
|
|
margin-left: 160px;
|
|
|
width: calc(100% - 149px);
|
|
|
+ height: 70vh;
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
+ padding-bottom: 20px;
|
|
|
}
|
|
|
.colorTitle {
|
|
|
margin-top: 20px;
|
|
|
@@ -218,10 +282,10 @@ export default {
|
|
|
font-weight: bold;
|
|
|
color: #303133;
|
|
|
display: inline-block;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- overflow: hidden;
|
|
|
- word-break: break-all;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ word-break: break-all;
|
|
|
}
|
|
|
.title1 {
|
|
|
width: 150px;
|
|
|
@@ -275,5 +339,4 @@ export default {
|
|
|
margin: 35px 0 24px 60px;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
</style>
|
