|
|
@@ -1,41 +1,41 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <div class="car_series">
|
|
|
- <div class="count">
|
|
|
- <button @click="showModal">新增类别</button>
|
|
|
- <Count :sum='sum'></Count>
|
|
|
+ <div class="car_series">
|
|
|
+ <div class="count">
|
|
|
+ <button @click="showModal">新增类别</button>
|
|
|
+ <Count :sum="sum"></Count>
|
|
|
+ </div>
|
|
|
+ <div class="table">
|
|
|
+ <Table
|
|
|
+ :tableData="tableData"
|
|
|
+ @edit="edit"
|
|
|
+ @delet_data="deleteData"
|
|
|
+ :pageSize="sum"
|
|
|
+ ></Table>
|
|
|
+ </div>
|
|
|
+ <div class="page">
|
|
|
+ <Tablepage
|
|
|
+ :totalPage="totalPage"
|
|
|
+ :currentPage="currentPage"
|
|
|
+ @change_page="changePage"
|
|
|
+ @jump_page="jumpPage"
|
|
|
+ ></Tablepage>
|
|
|
+ </div>
|
|
|
+ <div class="modal" v-if="modalFlag">
|
|
|
+ <Modal
|
|
|
+ :modalFlag="modalFlag"
|
|
|
+ @submit="submit"
|
|
|
+ @hide_modal="showModal"
|
|
|
+ ></Modal>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="table">
|
|
|
- <Table
|
|
|
- :tableData='tableData'
|
|
|
- @edit='edit'
|
|
|
- @delet_data='deleteData'
|
|
|
- :pageSize='sum'
|
|
|
- ></Table>
|
|
|
- </div>
|
|
|
- <div class="page">
|
|
|
- <Tablepage
|
|
|
- :totalPage='totalPage'
|
|
|
- :currentPage='currentPage'
|
|
|
- @change_page='changePage'
|
|
|
- @jump_page='jumpPage'
|
|
|
- ></Tablepage>
|
|
|
- </div>
|
|
|
- <div class="modal" v-if="modalFlag">
|
|
|
- <Modal
|
|
|
- :modalFlag='modalFlag'
|
|
|
- @submit='submit'
|
|
|
- @hide_modal='showModal'
|
|
|
- ></Modal>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import Count from '../../components/Count';
|
|
|
-import Tablepage from '../../components/TablePage';
|
|
|
-import Table from './components/ContentCategory1/Table';
|
|
|
+import Count from "../../components/Count";
|
|
|
+import Tablepage from "../../components/TablePage";
|
|
|
+import Table from "./components/ContentCategory1/Table";
|
|
|
import Modal from "./components/ContentCategory1/Modal";
|
|
|
|
|
|
export default {
|
|
|
@@ -43,39 +43,42 @@ export default {
|
|
|
Count,
|
|
|
Table,
|
|
|
Tablepage,
|
|
|
- Modal
|
|
|
+ Modal,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- sum: 60, // 一共有多少条数据
|
|
|
+ sum: 0, // 一共有多少条数据
|
|
|
pageSize: 20, // 每页展示的数据
|
|
|
currentPage: 1,
|
|
|
- tableData: [],
|
|
|
- getDate: [{title: '服务', str: '123'},{title: '产品', str: '124'},{title: '品牌', str: '125'},],
|
|
|
- functionData: [],
|
|
|
+ tableData: [
|
|
|
+ { title: "服务", str: "123" },
|
|
|
+ { title: "产品", str: "124" },
|
|
|
+ { title: "品牌", str: "125" },
|
|
|
+ ],
|
|
|
modalFlag: false, // 控制模态框展示
|
|
|
- }
|
|
|
+ dictList: [],
|
|
|
+ };
|
|
|
},
|
|
|
- computed:{
|
|
|
+ computed: {
|
|
|
// 表格总页数
|
|
|
totalPage() {
|
|
|
- return Math.ceil(this.sum/this.pageSize);
|
|
|
+ return Math.ceil(this.sum / this.pageSize);
|
|
|
},
|
|
|
// 获取路由参数
|
|
|
queryTag() {
|
|
|
- console.log (111, this.$route.query);
|
|
|
- return (this.$route.query && this.$route.query.tag) ? 0 : 1
|
|
|
- }
|
|
|
+ console.log(111, this.$route.query);
|
|
|
+ return this.$route.query && this.$route.query.tag ? 0 : 1;
|
|
|
+ },
|
|
|
},
|
|
|
methods: {
|
|
|
// 获取某一页面的数据,展示在表格
|
|
|
- changePage: function(page) {
|
|
|
+ changePage: function (page) {
|
|
|
this.currentPage = page;
|
|
|
console.log(page);
|
|
|
},
|
|
|
// 点击上一页,下一页,首页,尾页
|
|
|
- jumpPage: function(item) {
|
|
|
- switch(item) {
|
|
|
+ jumpPage: function (item) {
|
|
|
+ switch (item) {
|
|
|
case 1:
|
|
|
this.currentPage = 1;
|
|
|
break;
|
|
|
@@ -91,56 +94,180 @@ export default {
|
|
|
}
|
|
|
console.log(this.currentPage);
|
|
|
},
|
|
|
- // 获取数据
|
|
|
- getData: function() {
|
|
|
- this.tableData = [];
|
|
|
- this.functionData = [];
|
|
|
- this.getDate.forEach( (element) => {
|
|
|
- this.tableData.push(
|
|
|
- {
|
|
|
- title: element.title
|
|
|
- }
|
|
|
- );
|
|
|
- this.functionData.push(
|
|
|
- {
|
|
|
- str: element.str
|
|
|
- }
|
|
|
- )
|
|
|
- });
|
|
|
- },
|
|
|
// 展示、隐藏模态框
|
|
|
- showModal: function() {
|
|
|
+ showModal: function () {
|
|
|
this.modalFlag = !this.modalFlag;
|
|
|
},
|
|
|
// 点击编辑
|
|
|
- edit (index, newName) {
|
|
|
- console.log(this.functionData[index].str, newName);
|
|
|
+ edit(index, newName) {
|
|
|
+ this.updataDict(newName, index).then(() => {
|
|
|
+ this.getDateList();
|
|
|
+ });
|
|
|
},
|
|
|
// 点击删除
|
|
|
- deleteData (index) {
|
|
|
- console.log('删除', this.functionData[index].str)
|
|
|
+ deleteData(index) {
|
|
|
+ this.deleteDict(index).then(() => {
|
|
|
+ this.getDateList();
|
|
|
+ });
|
|
|
},
|
|
|
// 新增车型模态框 保存
|
|
|
- submit: function(name) {
|
|
|
- console.log('保存', name);
|
|
|
- this.modalFlag = false;
|
|
|
+ submit: function (name) {
|
|
|
+ this.addList(name).then(() => {
|
|
|
+ this.getDateList();
|
|
|
+ });
|
|
|
+ this.modalFlag = false;
|
|
|
+ },
|
|
|
+ // 获取内容分类、媒体平台、常用参数接口的标识,再调接口时需要用到
|
|
|
+ selectSysDataDictList: function () {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ this.$http({
|
|
|
+ method: "post",
|
|
|
+ url: "/sys/dataDict/selectSysDataDictList",
|
|
|
+ data: {},
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ if (res.data && res.data.code === 200) {
|
|
|
+ this.dictList = res.data.data;
|
|
|
+ resolve();
|
|
|
+ } else {
|
|
|
+ console.log(res);
|
|
|
+ reject();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.log(err);
|
|
|
+ reject();
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 获取列表数据 接口
|
|
|
+ getDateList: function () {
|
|
|
+ this.$http({
|
|
|
+ method: "post",
|
|
|
+ url: "/sys/dataDict/selectSysDataDictPage",
|
|
|
+ data: {
|
|
|
+ dictCode: this.dictList[1]["dictCode"],
|
|
|
+ parentId: this.dictList[1]["id"],
|
|
|
+ },
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ if (res.data && res.data.code === 200) {
|
|
|
+ this.tableData = res.data.data;
|
|
|
+ this.sum = res.data.count;
|
|
|
+ console.log(res);
|
|
|
+ } else {
|
|
|
+ console.log(res);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.log(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 新增
|
|
|
+ addList: function (name) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ this.$http({
|
|
|
+ url: "/sys/dataDict/addSysDataDictInfo",
|
|
|
+ method: "post",
|
|
|
+ data: {
|
|
|
+ dictName: name,
|
|
|
+ parentId: this.dictList[1]["id"],
|
|
|
+ dictCode: this.dictList[1]["dictCode"],
|
|
|
+ },
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ if (res.data && res.data.code === 200) {
|
|
|
+ console.log(res);
|
|
|
+ resolve();
|
|
|
+ } else {
|
|
|
+ alert("新增失败,请重试1");
|
|
|
+ console.log(res);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ alert("新增失败,请重试2");
|
|
|
+ reject(err);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 编辑
|
|
|
+ updataDict: function (newName, index) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ this.$http({
|
|
|
+ url: "/sys/dataDict/updateSysDataDictInfo",
|
|
|
+ method: "post",
|
|
|
+ data: {
|
|
|
+ dictName: newName,
|
|
|
+ id: this.tableData[index]["id"],
|
|
|
+ parentId: this.dictList[1]["id"],
|
|
|
+ dictCode: this.dictList[1]["dictCode"],
|
|
|
+ },
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ if (res.data && res.data.code === 200) {
|
|
|
+ console.log(res);
|
|
|
+ resolve();
|
|
|
+ } else {
|
|
|
+ alert("编辑失败,请重试");
|
|
|
+ console.log(res);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ alert("编辑失败,请重试");
|
|
|
+ reject(err);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 删除 接口
|
|
|
+ deleteDict: function (index) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ this.$http({
|
|
|
+ url: "/sys/dataDict/deleteSysDataDictInfo",
|
|
|
+ method: "post",
|
|
|
+ data: {
|
|
|
+ id: this.tableData[index]["id"],
|
|
|
+ parentId: this.dictList[1]["id"],
|
|
|
+ // dictCode: this.dictList[1]['dictCode'],
|
|
|
+ },
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ if (res.data && res.data.code === 200) {
|
|
|
+ console.log(res);
|
|
|
+ resolve();
|
|
|
+ } else {
|
|
|
+ alert("删除失败,请重试");
|
|
|
+ console.log(res);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ alert("删除失败,请重试");
|
|
|
+ reject(err);
|
|
|
+ });
|
|
|
+ });
|
|
|
},
|
|
|
},
|
|
|
- mounted() {
|
|
|
- this.getData();
|
|
|
- }
|
|
|
-}
|
|
|
+ created() {
|
|
|
+ this.selectSysDataDictList()
|
|
|
+ .then(() => {
|
|
|
+ this.getDateList();
|
|
|
+ console.log(this.dictList);
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.log(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
-.car_series{
|
|
|
- .count{
|
|
|
+.car_series {
|
|
|
+ .count {
|
|
|
height: 40px;
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
- button{
|
|
|
+ button {
|
|
|
width: 86px;
|
|
|
height: 30px;
|
|
|
position: relative;
|