<template> <div class="main"> <div class="title">全部门店( 共5个 )</div> <div class="searchs"> <div class="buttons"> <el-button class="button buttonlight" size="small" @click="addStore">添加门店</el-button> <el-button class="button buttondark" size="small">批量删除</el-button> </div> <!-- 搜索区 --> <el-form class="searchzone" :inline="true" :model="data.search" label-width="auto" > <el-form-item label="关键词"> <el-input size="small" v-model="data.search.keys" style="width:160px" placeholder="请输入关键词" /> </el-form-item> <el-button class="button buttondark" size="small" style="margin-top:4px;" >搜索</el-button > </el-form> </div> <div class="lists"> <el-table stripe class="list" ref="multipleTable" :data="list.main" tooltip-effect="dark" style="width: 100%" @selection-change="listPick" height="calc(100vh - 360px)" > <el-table-column type="selection" width="60"></el-table-column> <el-table-column prop="taskName" label="门店名称" align="center" ></el-table-column> <el-table-column prop="taskType" label="门店类型" align="center" width="120" ></el-table-column> <el-table-column prop="bar" label="门店负责人" align="center" width="120" ></el-table-column> <el-table-column prop="bar" label="所属柜组" align="center" width="120" ></el-table-column> <el-table-column prop="bar" label="位置" align="center" width="120" ></el-table-column> <el-table-column prop="bar" label="门牌号" align="center" width="120" ></el-table-column> <el-table-column label="操作" align="center" fixed="right" width="200"> <template slot-scope="scope"> <el-button type="text" class="btn" @click="handleDetail(scope.row)" >详情</el-button > <el-button type="text" class="btn" @click="testButtonClick(scope.row)" >编辑</el-button > <el-button type="text" @click="testButtonClick(scope.row)" class="listButtonRed" >删除</el-button > </template> </el-table-column> </el-table> </div> <div class="pages"> <el-pagination @current-change="handleCurrentChange" :current-page="page.currentPage" :page-size="page.size" layout="total, prev, pager, next, jumper" :total="page.total"> </el-pagination> </div> <add-store ref="addStore"></add-store> <store-detail ref="storeDetail" ></store-detail> </div> </template> <script> import AddStore from './components/addStore' import StoreDetail from './components/storeDetail' export default { components: { AddStore, StoreDetail }, data() { return { page:{ currentPage:1, size:20, total:100 }, list: { main: [ { id: "1001", taskName: "2019年男装销售任务", taskType: "拉新", bar: "男装", taskContent: "任务内容任务内容任务内容...", sendDate: "2019/02/08" }, { id: "1002", taskName: "2019年男装销售任务", taskType: "拉新", bar: "男装", taskContent: "任务内容任务内容任务内容...", sendDate: "2019/02/08" }, { id: "1003", taskName: "2019年男装销售任务", taskType: "拉新", bar: "男装", taskContent: "任务内容任务内容任务内容...", sendDate: "2019/02/08" }, { id: "1003", taskName: "2019年男装销售任务", taskType: "拉新", bar: "男装", taskContent: "任务内容任务内容任务内容...", sendDate: "2019/02/08" }, { id: "1003", taskName: "2019年男装销售任务", taskType: "拉新", bar: "男装", taskContent: "任务内容任务内容任务内容...", sendDate: "2019/02/08" }, { id: "1003", taskName: "2019年男装销售任务", taskType: "拉新", bar: "男装", taskContent: "任务内容任务内容任务内容...", sendDate: "2019/02/08" }, { id: "1003", taskName: "2019年男装销售任务", taskType: "拉新", bar: "男装", taskContent: "任务内容任务内容任务内容...", sendDate: "2019/02/08" } ], search: { bar: [ { id: "1", name: "全部" }, { id: "2", name: "测试" } ], taskType: [ { id: "1", name: "全部" }, { id: "2", name: "测试" } ] } }, tableHeight: window.innerHeight * 0.5 , data: { search: { bar: "", taskType: "", date: "", keys: "" }, page: { nowPageNum: 4 } } }; }, created() {}, methods: { listPick() {}, testButtonClick() {}, pagesSizeChange() {}, pagesNowPageChange() {}, setListsHeadStyle({ row, column, rowIndex, columnIndex }) { if (rowIndex === 0) { return "background-color: #0B0F32; border-right: 1px solid white;color: white;"; } else { return "" } }, addStore() { this.$refs.addStore.addStoreDialog = true }, handleDetail() { this.$refs.storeDetail.detailDialog = true }, handleCurrentChange(val) { console.log(`当前页: ${val}`); }, } }; </script> <style lang="scss" scoped> .btn { font-size:14px; font-weight:bold; color:rgba(102,102,102,1); } .main { position: relative; background-color: #fff; box-sizing: border-box; height: 100%; padding: 0px 16px 16px; display: flex; flex-direction: column; justify-content: flex-start; width: 100%; box-shadow: 0px 2px 4px 0px #ddd; } .buttons { width: 266px; display: flex; flex-direction: row; justify-content: flex-start; } .buttonlight { background-color: #e8e9fe; color: #4e59c7; border: 1px solid #4e59c7; box-sizing: border-box; } .buttondark { width: 88px; height: 32px; background-color: #4e59c7; color: #ffffff; border: 1px solid #4e59c7; box-sizing: border-box; } .searchzone { height: 40px; width: auto; min-width: 654px; text-align: right; } .lists { height: auto; min-height: 70%; width: 100%; margin-top: 20px; } .listButtonRed { color: #D0021B; font-weight: bold; } .pages { height: 40px; width: 100%; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; } .title { height: 48px; line-height: 48px; color: rgba(56, 56, 56, 1); border-bottom: 1px solid #f8f8f8; margin-bottom: 16px; } </style>