|
|
@@ -1,253 +1,253 @@
|
|
|
-<template>
|
|
|
- <div>
|
|
|
- <div class="grouping" v-if="queryTag">
|
|
|
- <div class="count">
|
|
|
- <button @click="showModal">新增小组</button>
|
|
|
- <Count :sum="sum"></Count>
|
|
|
- </div>
|
|
|
- <div class="table">
|
|
|
- <Table
|
|
|
- :tableData="tableData"
|
|
|
- @edit="edit"
|
|
|
- @delet_data="deleteData"
|
|
|
- @group_member="groupMember"
|
|
|
- :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"
|
|
|
- @hide_modal="showModal"
|
|
|
- @submit="submit"
|
|
|
- ></Modal>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div v-else>
|
|
|
- <GroupMember />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import Count from "../../components/Count";
|
|
|
-import Tablepage from "../../components/TablePage";
|
|
|
-import Table from "./components/Grouping/GroupingTable";
|
|
|
-import Modal from "./components/Grouping/GroupingModal";
|
|
|
-import GroupMember from "./components/Grouping/GroupMember";
|
|
|
-export default {
|
|
|
- components: {
|
|
|
- Count,
|
|
|
- Table,
|
|
|
- Tablepage,
|
|
|
- Modal,
|
|
|
- GroupMember,
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- sum: 140, // 一共有多少条数据
|
|
|
- pageSize: 20, // 每页展示的数据
|
|
|
- currentPage: 1,
|
|
|
- // 表格配置
|
|
|
- tableData: [],
|
|
|
- modalFlag: false, // 控制模态框展示
|
|
|
- };
|
|
|
- },
|
|
|
- computed: {
|
|
|
- // 表格总页数
|
|
|
- totalPage() {
|
|
|
- return Math.ceil(this.sum / this.pageSize);
|
|
|
- },
|
|
|
- // 获取路由参数
|
|
|
- queryTag() {
|
|
|
- return this.$route.query && this.$route.query.tag ? 0 : 1;
|
|
|
- },
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 获取某一页面的数据,展示在表格
|
|
|
- changePage: function (page) {
|
|
|
- this.currentPage = page;
|
|
|
- console.log(page);
|
|
|
- },
|
|
|
- // 点击上一页,下一页,首页,尾页
|
|
|
- jumpPage: function (item) {
|
|
|
- switch (item) {
|
|
|
- case 1:
|
|
|
- this.currentPage = 1;
|
|
|
- break;
|
|
|
- case 2:
|
|
|
- this.currentPage = this.currentPage - 1;
|
|
|
- break;
|
|
|
- case 3:
|
|
|
- this.currentPage = this.currentPage + 1;
|
|
|
- break;
|
|
|
- case 4:
|
|
|
- this.currentPage = this.totalPage;
|
|
|
- break;
|
|
|
- }
|
|
|
- console.log(this.currentPage);
|
|
|
- },
|
|
|
- // 展示、隐藏模态框
|
|
|
- showModal: function () {
|
|
|
- this.modalFlag = !this.modalFlag;
|
|
|
- },
|
|
|
- // 模态框保存,
|
|
|
- submit: function (groupName) {
|
|
|
- this.addGroupInfo(groupName).then(() => {
|
|
|
- this.selectGroupList();
|
|
|
- });
|
|
|
- this.modalFlag = false;
|
|
|
- },
|
|
|
- // 点击编辑
|
|
|
- edit(index, newName) {
|
|
|
- console.log(index, newName);
|
|
|
- let id = this.tableData[index]['id'];
|
|
|
- this.updateGroupInfo(id, newName).then(() => {
|
|
|
- this.selectGroupList();
|
|
|
- })
|
|
|
- },
|
|
|
- // 点击删除
|
|
|
- deleteData: function (index) {
|
|
|
- console.log("删除", index);
|
|
|
- let id = this.tableData[index]['id'];
|
|
|
- this.deleteGroupInfo(id).then(() => {
|
|
|
- this.selectGroupList();
|
|
|
- })
|
|
|
- },
|
|
|
- // 点击小组成员
|
|
|
- groupMember: function (index) {
|
|
|
- // 页面变化
|
|
|
- this.$router.push({ query: { tag: "group_member", id: this.tableData[index]['id'] } });
|
|
|
- },
|
|
|
- // 新增小组 接口
|
|
|
- addGroupInfo: function (groupName) {
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
- this.$http({
|
|
|
- method: "post",
|
|
|
- url: "/sys/group/addGroupInfo",
|
|
|
- data: {
|
|
|
- groupName
|
|
|
- },
|
|
|
- })
|
|
|
- .then((res) => {
|
|
|
- if (res.data && res.data.code === 200) {
|
|
|
- console.log(res);
|
|
|
- resolve();
|
|
|
- } else {
|
|
|
- alert("新增失败,请重试");
|
|
|
- console.log(res);
|
|
|
- }
|
|
|
- })
|
|
|
- .catch((err) => {
|
|
|
- console.log(err);
|
|
|
- reject(err);
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
- // 获取列表 接口
|
|
|
- selectGroupList: function () {
|
|
|
- this.$http({
|
|
|
- method: "post",
|
|
|
- url: "/sys/group/selectGroupList",
|
|
|
- data: {},
|
|
|
- })
|
|
|
- .then((res) => {
|
|
|
- if (res.data && res.data.code === 200) {
|
|
|
- console.log(res);
|
|
|
- this.tableData = res.data.data;
|
|
|
- this.sum = res.data.count;
|
|
|
- } else {
|
|
|
- console.log(res);
|
|
|
- }
|
|
|
- })
|
|
|
- .catch((err) => {
|
|
|
- console.log(err);
|
|
|
- });
|
|
|
- },
|
|
|
- // 编辑平台模块,接口
|
|
|
- updateGroupInfo: function (id, platformName) {
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
- this.$http({
|
|
|
- method: "post",
|
|
|
- url: "/sys/group/updateGroupInfo",
|
|
|
- data: {
|
|
|
- id,
|
|
|
- platformName,
|
|
|
- },
|
|
|
- })
|
|
|
- .then((res) => {
|
|
|
- console.log(res, 1111);
|
|
|
- if (res.data && res.data.code === 200) {
|
|
|
- console.log(res);
|
|
|
- resolve();
|
|
|
- } else {
|
|
|
- alert("编辑失败,请重试");
|
|
|
- console.log(res);
|
|
|
- }
|
|
|
- })
|
|
|
- .catch((err) => {
|
|
|
- alert("编辑失败,请重试");
|
|
|
- console.log(err);
|
|
|
- reject(err);
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
- // 删除平台模块 接口
|
|
|
- deleteGroupInfo: function (id) {
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
- this.$http({
|
|
|
- method: "post",
|
|
|
- url: "/sys/group/deleteGroupInfo",
|
|
|
- data: {
|
|
|
- id
|
|
|
- },
|
|
|
- })
|
|
|
- .then((res) => {
|
|
|
- if (res.data && res.data.code === 200) {
|
|
|
- console.log(res);
|
|
|
- resolve();
|
|
|
- } else {
|
|
|
- alert("编辑失败,请重试");
|
|
|
- console.log(res);
|
|
|
- }
|
|
|
- })
|
|
|
- .catch((err) => {
|
|
|
- alert("编辑失败,请重试");
|
|
|
- console.log(err);
|
|
|
- reject(err);
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.selectGroupList();
|
|
|
- }
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped lang="less">
|
|
|
-.grouping {
|
|
|
- .count {
|
|
|
- height: 40px;
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- button {
|
|
|
- width: 86px;
|
|
|
- height: 30px;
|
|
|
- position: relative;
|
|
|
- bottom: -5px;
|
|
|
- margin: 0;
|
|
|
- border-radius: 2px;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="grouping" v-if="queryTag">
|
|
|
+ <div class="count">
|
|
|
+ <button @click="showModal">新增小组</button>
|
|
|
+ <Count :sum="sum"></Count>
|
|
|
+ </div>
|
|
|
+ <div class="table">
|
|
|
+ <Table
|
|
|
+ :tableData="tableData"
|
|
|
+ @edit="edit"
|
|
|
+ @delet_data="deleteData"
|
|
|
+ @group_member="groupMember"
|
|
|
+ :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"
|
|
|
+ @hide_modal="showModal"
|
|
|
+ @submit="submit"
|
|
|
+ ></Modal>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <GroupMember />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Count from "../../components/Count";
|
|
|
+import Tablepage from "../../components/TablePage";
|
|
|
+import Table from "./components/Grouping/GroupingTable";
|
|
|
+import Modal from "./components/Grouping/GroupingModal";
|
|
|
+import GroupMember from "./components/Grouping/GroupMember";
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ Count,
|
|
|
+ Table,
|
|
|
+ Tablepage,
|
|
|
+ Modal,
|
|
|
+ GroupMember,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ sum: 140, // 一共有多少条数据
|
|
|
+ pageSize: 20, // 每页展示的数据
|
|
|
+ currentPage: 1,
|
|
|
+ // 表格配置
|
|
|
+ tableData: [],
|
|
|
+ modalFlag: false, // 控制模态框展示
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ // 表格总页数
|
|
|
+ totalPage() {
|
|
|
+ return Math.ceil(this.sum / this.pageSize);
|
|
|
+ },
|
|
|
+ // 获取路由参数
|
|
|
+ queryTag() {
|
|
|
+ return this.$route.query && this.$route.query.tag ? 0 : 1;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 获取某一页面的数据,展示在表格
|
|
|
+ changePage: function (page) {
|
|
|
+ this.currentPage = page;
|
|
|
+ console.log(page);
|
|
|
+ },
|
|
|
+ // 点击上一页,下一页,首页,尾页
|
|
|
+ jumpPage: function (item) {
|
|
|
+ switch (item) {
|
|
|
+ case 1:
|
|
|
+ this.currentPage = 1;
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ this.currentPage = this.currentPage - 1;
|
|
|
+ break;
|
|
|
+ case 3:
|
|
|
+ this.currentPage = this.currentPage + 1;
|
|
|
+ break;
|
|
|
+ case 4:
|
|
|
+ this.currentPage = this.totalPage;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ console.log(this.currentPage);
|
|
|
+ },
|
|
|
+ // 展示、隐藏模态框
|
|
|
+ showModal: function () {
|
|
|
+ this.modalFlag = !this.modalFlag;
|
|
|
+ },
|
|
|
+ // 模态框保存,
|
|
|
+ submit: function (groupName) {
|
|
|
+ this.addGroupInfo(groupName).then(() => {
|
|
|
+ this.selectGroupList();
|
|
|
+ });
|
|
|
+ this.modalFlag = false;
|
|
|
+ },
|
|
|
+ // 点击编辑
|
|
|
+ edit(index, newName) {
|
|
|
+ console.log(index, newName);
|
|
|
+ let id = this.tableData[index]['id'];
|
|
|
+ this.updateGroupInfo(id, newName).then(() => {
|
|
|
+ this.selectGroupList();
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 点击删除
|
|
|
+ deleteData: function (index) {
|
|
|
+ console.log("删除", index);
|
|
|
+ let id = this.tableData[index]['id'];
|
|
|
+ this.deleteGroupInfo(id).then(() => {
|
|
|
+ this.selectGroupList();
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 点击小组成员
|
|
|
+ groupMember: function (index) {
|
|
|
+ // 页面变化
|
|
|
+ this.$router.push({ query: { tag: "group_member", id: this.tableData[index]['id'] } });
|
|
|
+ },
|
|
|
+ // 新增小组 接口
|
|
|
+ addGroupInfo: function (groupName) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ this.$http({
|
|
|
+ method: "post",
|
|
|
+ url: "/sys/group/addGroupInfo",
|
|
|
+ data: {
|
|
|
+ groupName
|
|
|
+ },
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ if (res.data && res.data.code === 200) {
|
|
|
+ console.log(res);
|
|
|
+ resolve();
|
|
|
+ } else {
|
|
|
+ alert("新增失败,请重试");
|
|
|
+ console.log(res);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.log(err);
|
|
|
+ reject(err);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 获取列表 接口
|
|
|
+ selectGroupList: function () {
|
|
|
+ this.$http({
|
|
|
+ method: "post",
|
|
|
+ url: "/sys/group/selectGroupList",
|
|
|
+ data: {},
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ if (res.data && res.data.code === 200) {
|
|
|
+ console.log(res);
|
|
|
+ this.tableData = res.data.data;
|
|
|
+ this.sum = res.data.count;
|
|
|
+ } else {
|
|
|
+ console.log(res);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.log(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 编辑平台模块,接口
|
|
|
+ updateGroupInfo: function (id, platformName) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ this.$http({
|
|
|
+ method: "post",
|
|
|
+ url: "/sys/group/updateGroupInfo",
|
|
|
+ data: {
|
|
|
+ id,
|
|
|
+ groupName:platformName,
|
|
|
+ },
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ console.log(res, 1111);
|
|
|
+ if (res.data && res.data.code === 200) {
|
|
|
+ console.log(res);
|
|
|
+ resolve();
|
|
|
+ } else {
|
|
|
+ alert("编辑失败,请重试");
|
|
|
+ console.log(res);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ alert("编辑失败,请重试");
|
|
|
+ console.log(err);
|
|
|
+ reject(err);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 删除平台模块 接口
|
|
|
+ deleteGroupInfo: function (id) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ this.$http({
|
|
|
+ method: "post",
|
|
|
+ url: "/sys/group/deleteGroupInfo",
|
|
|
+ data: {
|
|
|
+ id
|
|
|
+ },
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ if (res.data && res.data.code === 200) {
|
|
|
+ console.log(res);
|
|
|
+ resolve();
|
|
|
+ } else {
|
|
|
+ alert("编辑失败,请重试");
|
|
|
+ console.log(res);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ alert("编辑失败,请重试");
|
|
|
+ console.log(err);
|
|
|
+ reject(err);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.selectGroupList();
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="less">
|
|
|
+.grouping {
|
|
|
+ .count {
|
|
|
+ height: 40px;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ button {
|
|
|
+ width: 86px;
|
|
|
+ height: 30px;
|
|
|
+ position: relative;
|
|
|
+ bottom: -5px;
|
|
|
+ margin: 0;
|
|
|
+ border-radius: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|