|
<template>
<div class="app-container">
<!--工具条-->
<div class="toolbar" style="padding-bottom: 0px; height: 48px">
<el-form :inline="true">
<el-form-item>
<el-input v-model="TableNameS" placeholder="表名称"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" v-on:click="fetchData">查询字段</el-button>
</el-form-item>
</el-form>
</div>
<el-table
v-loading="listLoading"
:data="list.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
element-loading-text="Loading"
border
fit
highlight-current-row
@selection-change="handleSelectionChange"
tooltip-effect="dark"
>
<el-table-column
prop="name"
label="字段名称"
align="center"
width="100px"
>
<template scope="scope">
<el-input
size="mini"
v-model="scope.row.name"
style="width: 100px"
></el-input>
</template>
</el-table-column>
<el-table-column
prop="label"
label="字段标题"
align="center"
width="100px"
>
<template scope="scope">
<el-input
size="mini"
v-model="scope.row.label"
style="width: 100px"
></el-input>
</template>
</el-table-column>
<el-table-column
prop="width"
label="字段宽度"
align="center"
width="100px"
>
<template scope="scope">
<el-input
size="mini"
v-model="scope.row.width"
style="width: 100px"
></el-input>
</template>
</el-table-column>
<el-table-column
type="selection"
:reserve-selection="true"
prop="name"
align="center"
width="80"
></el-table-column>
</el-table>
<el-pagination
layout="prev, pager, next, sizes, total, jumper"
:page-sizes="[5, 10, 20, 100]"
:page-size="pageSize"
:total="list.length"
:current-page.sync="currentPage"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
style="text-align: center; margin-top: 1%"
></el-pagination>
<el-button type="success" @click="getchecks()">获取选择</el-button>
<el-button type="success" @click="AddBatch()">保存</el-button>
</div>
</template>
<script>
import { getList, remove, GetColumnName2 } from "@/api/test";
export default {
filters: {},
data() {
return {
list: [],
listLoading: false,
TableNameS: "",
pageSize: 20,
currentPage: 1,
ids: [], // 保存id
};
},
created() {},
methods: {
getchecks() {
let arr = this.ids;
let column_link="";
arr.forEach(function (item, index) {
column_link+=item+",";
console.log(item);
});
},
// 复选框
handleSelectionChange(val) {
this.ids = [];
val.forEach((ele) => {
this.ids.push(ele.name);
});
},
fetchData() {
this.listLoading = true;
let param = { TableName: this.TableNameS };
GetColumnName2(param).then((response) => {
this.list = response.Data;
this.listLoading = false;
this.currentPage = 1;
});
},
modifyData(rowData) {
this.$router.push("/test_modify?id=" + rowData.ID);
},
checkDetail(rowData) {
this.$router.push("/test_detail?id=" + rowData.ID);
},
handleCurrentChange: function (cpage) {
this.$data.currentPage = cpage;
},
handleSizeChange: function (psize) {
this.$data.pageSize = psize;
},
AddBatch() {
//代表通过验证 ,将参数传回后台
let params = this.list;
debugger;
// AddBatch(params).then((res) => {
// this.$message({
// type: "info",
// message: res.Message,
// });
// if (res.Code == 702) {
// return;
// }
// });
},
},
};
</script>
|
