| | |
| | | <template> |
| | | <div class="userList"> |
| | | <el-container style="height: 100%"> |
| | | <el-aside heigth="100%" width="200px "> |
| | | <myAside @selectedDepartment="selectedDepartment" /> |
| | | </el-aside> |
| | | |
| | | <el-container> |
| | | <store-content :model="'three-pack'" /> |
| | | </div> |
| | | </el-container> |
| | | </el-container> |
| | | </template> |
| | | <script> |
| | | import myAside from "./components/aside"; |
| | | import updateUser from "@/views/operate/fivepack/threepack/components/updateUser"; |
| | | import storeContent from "@/views/operate/fivepack/threepack/components/content"; |
| | | import { getStoreInfoList, deleteStoreInfo } from "@/api/operate/storeManagement"; |
| | | import { |
| | | getStoreInfoList, |
| | | deleteStoreInfo, |
| | | } from "@/api/operate/storeManagement"; |
| | | |
| | | export default { |
| | | components: { myAside, storeContent, updateUser }, |
| | | components: { myAside, storeContent, updateUser }, |
| | | |
| | | created() { |
| | | created() { |
| | | this.search(); |
| | | }, |
| | | |
| | | data() { |
| | | return { |
| | | storeCode: null, |
| | | storeStatus: null, |
| | | options: [ |
| | | { label: "全部", value: 0 }, |
| | | { label: "经营", value: 1 }, |
| | | { label: "倒闭", value: 2 }, |
| | | ], |
| | | tableData: [], |
| | | dialogUpdate: false, |
| | | currentPage: 1, |
| | | totalNum: 0, |
| | | pageSize: 10, |
| | | userInfo: null, |
| | | updateFlag: false, |
| | | storeInfo: null, |
| | | }; |
| | | }, |
| | | |
| | | methods: { |
| | | search(data) { |
| | | let communityId, streetId; |
| | | if (data) { |
| | | communityId = data.id; |
| | | streetId = data.parentId; |
| | | } |
| | | getStoreInfoList({ keyword: this.storeCode, communityId, streetId }) |
| | | .then(({ list, pageSize, totalPage }) => { |
| | | this.tableData = list; |
| | | this.pageSize = pageSize; |
| | | this.totalNum = totalPage; |
| | | }) |
| | | .catch((err) => this.$message({ type: "error", message: err })); |
| | | }, |
| | | |
| | | handleReset() { |
| | | this.storeCode = ""; |
| | | this.storeStatus = null; |
| | | this.currentPage = 1; |
| | | this.search(); |
| | | }, |
| | | |
| | | data() { |
| | | return { |
| | | storeCode: null, |
| | | storeStatus: null, |
| | | options: [{ label: '全部', value: 0 }, { label: '经营', value: 1 }, { label: '倒闭', value: 2 }], |
| | | tableData: [], |
| | | dialogUpdate: false, |
| | | currentPage: 1, |
| | | totalNum: 0, |
| | | pageSize: 10, |
| | | userInfo: null, |
| | | updateFlag: false, |
| | | storeInfo: null |
| | | } |
| | | }, |
| | | handleView(row, type) { |
| | | this.dialogUpdate = true; |
| | | this.storeInfo = row; |
| | | this.updateFlag = type === "update"; |
| | | }, |
| | | |
| | | methods: { |
| | | search(data) { |
| | | let communityId, streetId; |
| | | if (data) { |
| | | communityId = data.parentId; |
| | | streetId = data.id; |
| | | } |
| | | getStoreInfoList({ keyword: this.storeCode, communityId, streetId }) |
| | | .then(({ list, pageSize, totalPage }) => { |
| | | this.tableData = list; |
| | | this.pageSize = pageSize; |
| | | this.totalNum = totalPage; |
| | | }) |
| | | .catch(err => this.$message({ type: 'error', message: err })); |
| | | }, |
| | | |
| | | handleReset() { |
| | | this.storeCode = ''; |
| | | this.storeStatus = null; |
| | | this.search(); |
| | | }, |
| | | |
| | | handleView(row, type) { |
| | | this.dialogUpdate = true; |
| | | this.storeInfo = row; |
| | | this.updateFlag = type === 'update'; |
| | | }, |
| | | |
| | | handleDelete(id) { |
| | | deleteStoreInfo(id) |
| | | .then(() => { |
| | | this.$message({ type: 'success', message }); |
| | | this.search(); |
| | | }) |
| | | .catch(err => this.$message({ type: 'error', message: err })); |
| | | }, |
| | | |
| | | handleClose() { |
| | | this.dialogUpdate = false; |
| | | }, |
| | | |
| | | closeDialog() { |
| | | this.dialogUpdate = false; |
| | | this.search(); |
| | | }, |
| | | |
| | | changeCurrentPage(currentPage) { |
| | | this.currentPage = currentPage; |
| | | this.search(); |
| | | }, |
| | | |
| | | tableRowClassName({ row, rowIndex }) { |
| | | if ((rowIndex + 1) % 2 === 0) { |
| | | return "warning-row"; |
| | | } else { |
| | | return "success-row"; |
| | | } |
| | | }, |
| | | selectedDepartment(data) { |
| | | if (!data.children) { |
| | | handleDelete(id) { |
| | | deleteStoreInfo(id) |
| | | .then(() => { |
| | | this.$message({ type: "success", message }); |
| | | this.currentPage = 1; |
| | | this.search(); |
| | | } |
| | | }) |
| | | .catch((err) => this.$message({ type: "error", message: err })); |
| | | }, |
| | | |
| | | handleClose() { |
| | | this.dialogUpdate = false; |
| | | }, |
| | | |
| | | closeDialog() { |
| | | this.dialogUpdate = false; |
| | | this.currentPage = 1; |
| | | this.search(); |
| | | }, |
| | | |
| | | changeCurrentPage(currentPage) { |
| | | this.currentPage = currentPage; |
| | | this.search(); |
| | | }, |
| | | |
| | | tableRowClassName({ row, rowIndex }) { |
| | | if ((rowIndex + 1) % 2 === 0) { |
| | | return "warning-row"; |
| | | } else { |
| | | return "success-row"; |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | selectedDepartment(data) { |
| | | if (!data.children) { |
| | | this.searchData = data; |
| | | this.search(data); |
| | | } else { |
| | | data.parentId = data.id; |
| | | data.id = null; |
| | | this.searchData = data; |
| | | this.search(data); |
| | | } |
| | | this.currentPage = 1; |
| | | }, |
| | | }, |
| | | }; |
| | | </script> |
| | | <style lang="scss" scoped> |
| | | .userList { |
| | | text-align: left; |
| | | margin: 10px 20px; |
| | | color: #4b9bb7; |
| | | display: flex; |
| | | height: 100%; |
| | | ::v-deep .el-header { |
| | | background-color: #09152f; |
| | | color: #000; |
| | | line-height: 60px; |
| | | } |
| | | |
| | | .right{ |
| | | flex: 1; |
| | | height: 100%; |
| | | padding-left: 20px; |
| | | ::v-deep .el-aside { |
| | | background-color: #09152f; |
| | | } |
| | | |
| | | .headerContent { |
| | | display: flex; |
| | | line-height: 100px; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | ::v-deep .el-menu { |
| | | background-color: #09152f; |
| | | } |
| | | |
| | | .find { |
| | | display: flex; |
| | | } |
| | | ::v-deep .el-main, |
| | | ::v-deep .el-footer { |
| | | background-color: #09152f; |
| | | } |
| | | |
| | | .search-item { |
| | | display: flex; |
| | | padding: 10px; |
| | | } |
| | | |
| | | .findBtn { |
| | | line-height: 100px; |
| | | margin-left: 15px; |
| | | display: flex; |
| | | align-items: center; |
| | | |
| | | .el-button { |
| | | padding: 12px 25px; |
| | | } |
| | | } |
| | | |
| | | .addBtn { |
| | | padding: 12px 30px; |
| | | margin-left: 20%; |
| | | } |
| | | } |
| | | |
| | | main { |
| | | background-color: #09152f; |
| | | margin-top: 20px; |
| | | padding-bottom: 50px; |
| | | |
| | | .mainTitle { |
| | | line-height: 60px; |
| | | } |
| | | |
| | | .el-link { |
| | | color: #4b9bb7; |
| | | } |
| | | |
| | | .leftPx { |
| | | margin-left: 10px; |
| | | } |
| | | |
| | | .pagination { |
| | | margin-top: 50px; |
| | | display: flex; |
| | | line-height: 50px; |
| | | justify-content: center; |
| | | |
| | | .el-pagination { |
| | | &::v-deep li, |
| | | &::v-deep .btn-prev, |
| | | &::v-deep .btn-next { |
| | | background-color: #071f39; |
| | | color: #4b9bb7; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .el-table { |
| | | color: #4b9bb7; |
| | | font-size: 10px; |
| | | |
| | | &::v-deep .el-table__empty-block { |
| | | background-color: #09152f; |
| | | color: #4b9bb7; |
| | | } |
| | | |
| | | .operation { |
| | | display: flex; |
| | | |
| | | .el-button { |
| | | border: none; |
| | | } |
| | | |
| | | span:hover { |
| | | cursor: pointer; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | &::v-deep .el-dialog__header, |
| | | &::v-deep .el-dialog__body { |
| | | background-color: #06122c; |
| | | } |
| | | |
| | | &::v-deep .el-dialog__header { |
| | | display: flex; |
| | | align-items: center; |
| | | background-color: #fff; |
| | | padding: 20px; |
| | | line-height: 60px; |
| | | } |
| | | |
| | | &::v-deep .el-dialog__title { |
| | | color: #4b9bb7; |
| | | } |
| | | |
| | | &::v-deep .el-dialog__close { |
| | | width: 20px; |
| | | height: 20px; |
| | | // color: #fff; |
| | | } |
| | | |
| | | &::v-deep .el-dialog__body { |
| | | padding: 0; |
| | | } |
| | | ::v-deep .el-tree-node__label { |
| | | line-height: 30px; |
| | | font-size: 14px; |
| | | // color: rgb(75, 155, 183); |
| | | } |
| | | </style> |