大列表
<template>
<el-row>
<!--选择查询-->
<el-col align="left">
<el-form
:inline="true"
:model="dataConfigCats"
size="mini"
label-width="80px"
>
<!--分类选择-->
<el-form-item label="选择分类">
<el-select
size="mini"
v-model="dataConfigCats.sel"
placeholder="请选择"
>
<el-option label="全部" value=""> </el-option>
<el-option
v-for="item in dataConfigCats.data"
:key="item.value"
:label="item.catName"
:value="item.catId"
>
</el-option>
</el-select>
</el-form-item>
<!--提交按钮-->
<el-form-item>
<el-button type="primary" @click="onSearch()">查询</el-button>
</el-form-item>
</el-form>
</el-col>
<!--正式表格区域-->
<el-col>
<!--highlight-current-row：配置点击单选，border：配置纵向边框-->
<el-table
size="mini"
:data="dataConfig.paginate.data"
style="width: 100%"
highlight-current-row
border
v-loading="dataConfig.loading"
>
<!--配置自定义序号-->
<el-table-column type="index"></el-table-column>
<!--绑定列属性-->
<el-table-column
v-for="(v, i) in dataConfig.columns"
:key="i"
:prop="v.field"
:label="v.title"
:width="v.width"
>
<template slot-scope="scope">
<span v-if="scope.row.isSet">
<span v-if="v.field == 'catId'">
<el-select size="mini" v-model="dataConfig.sel[v.field]">
<el-option
v-for="item in dataConfigCats.data"
:key="item.value"
:label="item.catName"
:value="item.catId"
>
</el-option>
</el-select>
</span>
<span v-else>
<el-input
size="mini"
placeholder="请输入内容"
v-model="dataConfig.sel[v.field]"
>
</el-input>
</span>
</span>
<span v-else>
<span v-if="v.field == 'catId'">
{{ dataConfigCat(scope.row[v.field]) }}
</span>
<span v-else>{{ scope.row[v.field] }}</span>
</span>
</template>
</el-table-column>
<!--行内操作-->
<el-table-column label="操作" width="100">
<template slot-scope="scope">
<span
class="el-tag el-tag--info el-tag--mini"
style="cursor: pointer;"
@click="changeDataConfig(scope.row, scope.$index, true)"
>
{{ scope.row.isSet ? "保存" : "修改" }}
</span>
<span
v-if="!scope.row.isSet"
class="el-tag el-tag--danger el-tag--mini"
style="cursor: pointer;"
@click="deleteDataConfig(scope.row)"
>
删除
</span>
<span
v-else
class="el-tag el-tag--mini"
style="cursor: pointer;"
@click="changeDataConfig(scope.row, scope.$index, false)"
>
取消
</span>
</template>
</el-table-column>
</el-table>
</el-col>
<!--操作区域-->
<el-col>
<div
class="el-table-add-row"
style="width: 99.2%;"
@click="createDataConfig()"
>
<span>+ 添加新数据</span>
</div>
</el-col>
<!--分页-->
<el-col align="left">
<el-pagination
background
@size-change="getChangeLimit"
@current-change="getChangePage"
:current-page="dataConfig.paginate.current_page"
:page-sizes="[10, 20, 50, 100]"
:page-size="dataConfig.paginate.per_page"
layout="total, sizes, prev, pager, next, jumper"
:total="dataConfig.paginate.total"
:size="dataConfig.paginate.last_page"
>
</el-pagination>
</el-col>
</el-row>
</template>
<script>
import {
reqGetSysDataConfigs,
reqGetSysDataConfigCats,
reqSaveSysDataConfig,
reqDeleteSysDataConfig
} from "../../api";
export default {
name: "DataConfigList",
data() {
return {
//表格内绑定数据
dataConfig: {
sel: null, //选中行数据
columns: [
{ field: "id", title: "项目ID", width: 60 },
{ field: "catId", title: "所属分类", width: 200 },
{ field: "dataName", title: "数据名", width: 350 },
{ field: "dataVal", title: "数据值" },
{ field: "dataSort", title: "排序编号" }
],
paginate: {
data: [],
//总数
total: 0,
//当前页
current_page: 0,
//最后一页
last_page: null,
//limit
per_page: 20
},
//表格加载开关
loading: true
},
//分类数据
dataConfigCats: {
//选中的分类
sel: null,
data: [
{
catId: null,
catName: ""
}
]
}
};
},
mounted() {
this.getDataConfigCats();
this.getDataConfigList();
},
methods: {
//读取表格分类列表
async getDataConfigCats() {
const rs = await reqGetSysDataConfigCats();
this.dataConfigCats.data = rs.data;
if (!rs) {
this.$message.warning("分类数据获取失败！");
}
},
//读取表格数据列表
async getDataConfigList() {
const rs = await reqGetSysDataConfigs(
this.dataConfig.paginate.per_page,
this.dataConfig.paginate.current_page,
this.dataConfigCats.sel
);
if (!rs) {
this.$message.warning("获取数据失败！");
this.dataConfig.loading = false;
}
this.dataConfig.paginate = rs;
this.dataConfig.loading = false;
},
//表格获取数量选择
getChangeLimit(limit) {
this.dataConfig.paginate.current_page = 1;
this.dataConfig.paginate.per_page = limit;
this.getDataConfigList();
},
//页码选择
getChangePage(page) {
this.dataConfig.paginate.current_page = page;
this.getDataConfigList();
},
//可视化添加新数据
createDataConfig() {
for (let i of this.dataConfig.paginate.data) {
if (i.isSet) return this.$message.warning("请先保存当前编辑项");
}
let j = {
id: "",
catId: "",
dataName: "",
dataVal: "",
dadaSort: "",
dataFlag: 1,
isSet: true
};
this.dataConfig.paginate.data.push(j);
this.dataConfig.sel = JSON.parse(JSON.stringify(j));
},
//修改、保存
changeDataConfig(row, index, cg) {
//点击修改 判断是否已经保存所有操作
for (let i of this.dataConfig.paginate.data) {
if (i.isSet && i.id != row.id) {
this.$message.warning("请先保存当前编辑项");
return false;
}
}
//是否是取消操作
if (!cg) {
return (row.isSet = false);
}
//创建数据
if (row.isSet) {
const loading = this.$loading({
lock: true,
text: "提交中请等待...",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)"
});
setTimeout(() => {
loading.close();
}, 2000);
//项目是模拟请求操作 自己修改下
reqSaveSysDataConfig(this.dataConfig.sel)
.then(rs => {
loading.close();
if (rs.status == 1) {
this.$message({
type: "success",
message: "保存成功!"
});
//成功后这边重新读取表格数据
this.getDataConfigList();
row.isSet = false;
} else {
this.$message.warning(rs.msg);
}
})
.catch(() => {
loading.close();
this.$message.warning("保存失败！");
});
} else {
this.dataConfig.sel = JSON.parse(JSON.stringify(row));
row.isSet = true;
}
},
//删除
deleteDataConfig(row) {
const loading = this.$loading({
lock: true,
text: "提交中请等待...",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)"
});
reqDeleteSysDataConfig(row.id)
.then(rs => {
loading.close();
if (rs.status == 1) {
this.$message({
type: "success",
message: "删除成功!"
});
//成功后这边重新读取表格数据
this.getDataConfigList();
} else {
this.$message.warning(rs.msg);
}
})
.catch(() => {
loading.close();
this.$message.warning("删除失败！");
});
},
//筛选查询
onSearch() {
this.dataConfig.paginate.current_page = 1;
this.getDataConfigList();
}
},
computed: {
dataConfigCat() {
return v => {
for (let item of this.dataConfigCats.data) {
if (item.catId == v) {
return item.catName;
}
}
};
}
}
};
</script>
<style scoped></style>
分类列表
<template>
<el-row>
<!--正式表格区域-->
<el-col>
<!--highlight-current-row：配置点击单选，border：配置纵向边框-->
<el-table
size="mini"
:data="dataConfigCats.paginate.data"
style="width: 100%"
highlight-current-row
border
v-loading="dataConfigCats.loading"
>
<!--配置自定义序号-->
<el-table-column type="index"></el-table-column>
<!--绑定列属性-->
<el-table-column
v-for="(v, i) in dataConfigCats.columns"
:key="i"
:prop="v.field"
:label="v.title"
:width="v.width"
>
<template slot-scope="scope">
<span v-if="scope.row.isSet">
<el-input
size="mini"
placeholder="请输入内容"
v-model="dataConfigCats.sel[v.field]"
>
</el-input>
</span>
<span v-else>{{ scope.row[v.field] }}</span>
</template>
</el-table-column>
<!--行内操作-->
<el-table-column label="操作" width="100">
<template slot-scope="scope">
<span
class="el-tag el-tag--info el-tag--mini"
style="cursor: pointer;"
@click="changeDataConfigCats(scope.row, scope.$index, true)"
>
{{ scope.row.isSet ? "保存" : "修改" }}
</span>
<span
v-if="!scope.row.isSet"
class="el-tag el-tag--danger el-tag--mini"
style="cursor: pointer;"
@click="deleteDataConfigCats(scope.row)"
>
删除
</span>
<span
v-else
class="el-tag el-tag--mini"
style="cursor: pointer;"
@click="changeDataConfigCats(scope.row, scope.$index, false)"
>
取消
</span>
</template>
</el-table-column>
</el-table>
</el-col>
<!--操作区域-->
<el-col>
<div
class="el-table-add-row"
style="width: 99.2%;"
@click="createDataConfig()"
>
<span>+ 添加新数据</span>
</div>
</el-col>
<!--分页-->
<el-col>
<el-pagination
background
@size-change="getChangeLimit"
@current-change="getChangePage"
:current-page="dataConfigCats.paginate.current_page"
:page-sizes="[10, 20, 50, 100]"
:page-size="dataConfigCats.limit"
layout="total, sizes, prev, pager, next, jumper"
:total="dataConfigCats.paginate.total"
>
</el-pagination>
</el-col>
</el-row>
</template>
<script>
import {
reqGetSysDataConfigCats,
reqSaveSysDataConfigCats,
reqDeleteSysDataConfigCats
} from "../../api";
export default {
name: "DataConfigCats",
data() {
return {
//表格内绑定数据
dataConfigCats: {
sel: null, //选中行数据
columns: [
{ field: "catId", title: "分类Id", width: 50 },
{ field: "catName", title: "分类名", width: 200 },
{ field: "catCode", title: "分类代码" },
{ field: "dataFlag", title: "是否启用" }
],
//表格数据
limit: 20,
paginate: {
data: [],
//总数
total: 0,
//当前页
current_page: 1,
//最后一页
last_page: null,
//limit
per_page: null
},
//表格加载开关
loading: true
}
};
},
mounted() {
this.getDataConfigCats();
},
methods: {
//读取表格数据列表
async getDataConfigCats() {
//根据实际情况，自己改下啊
const rs = await reqGetSysDataConfigCats(
this.dataConfigCats.limit,
this.dataConfigCats.paginate.current_page
);
if (!rs) {
this.$message.warning("获取数据失败！");
this.dataConfigCats.loading = false;
}
this.dataConfigCats.paginate = rs;
this.dataConfigCats.loading = false;
},
//页面数据选择
getChangeLimit(limit) {
this.dataConfigCats.limit = limit;
this.getDataConfigList();
},
//页码选择
getChangePage(page) {
this.dataConfigCats.paginate.current_page = page;
this.getDataConfigList();
},
//可视化添加新数据
createDataConfigCats() {
for (let i of this.dataConfig.paginate.data) {
if (i.isSet) return this.$message.warning("请先保存当前编辑项");
}
let j = {
id: this.id,
catId: "",
dataName: "",
dataVal: "",
dadaSort: "",
isSet: true
};
this.dataConfig.paginate.data.push(j);
this.dataConfig.sel = JSON.parse(JSON.stringify(j));
},
//修改
changeDataConfigCats(row, index, cg) {
//点击修改 判断是否已经保存所有操作
for (let i of this.dataConfig.dataList) {
if (i.isSet && i.catId != row.catId) {
this.$message.warning("请先保存当前编辑项");
return false;
}
}
//是否是取消操作
if (!cg) {
if (!this.dataConfig.sel.id) this.dataConfig.dataList.splice(index, 1);
return (row.isSet = !row.isSet);
}
//提交数据
if (row.isSet) {
//项目是模拟请求操作 自己修改下
let data = JSON.parse(JSON.stringify(this.dataConfig.sel));
for (let k in data) row[k] = data[k];
this.id = this.id + 1;
this.$message({
type: "success",
message: "保存成功!"
});
//然后这边重新读取表格数据
this.getDataConfigList();
row.isSet = false;
} else {
this.dataConfig.sel = JSON.parse(JSON.stringify(row));
row.isSet = true;
}
},
//删除
deleteDataConfigCats(row) {
const loading = this.$loading({
lock: true,
text: "提交中请等待...",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)"
});
reqDeleteSysDataConfigCats(row.catId)
.then(rs => {
loading.close();
if (rs.status == 1) {
this.$message({
type: "success",
message: "删除成功!"
});
//成功后这边重新读取表格数据
this.getDataConfigCats();
} else {
this.$message.warning(rs.msg);
}
})
.catch(() => {
loading.close();
this.$message.warning("删除失败！");
});
}
}
};
</script>
<style lang="stylus" scoped></style>
