123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213 |
- <template>
- <div class="shopList" v-loading="loading" element-loading-text="数据加载中">
- <div class="header" v-if="shopList.length">
- <div class="left">
- <div class="line">
- <div class="b_line"></div>
- <div class="triangle"></div>
- </div>
- <div class="label">门店管理</div>
- </div>
- <div class="right">
- <el-button class="btn" v-if="$store.state.userInfo.memberType === 2" @click.stop="addShop(1)">新增门店</el-button>
- </div>
- </div>
- <el-table v-if="shopList.length" :data="shopList" stripe header-row-class-name="table_h" style="width: 100%; margin-top: 10px">
- <el-table-column prop="code" label="门店编号" width="170"></el-table-column>
- <el-table-column prop="name" label="门店名称" width="172" align="center"></el-table-column>
- <el-table-column prop="address" label="门店地址" width="321" align="center"></el-table-column>
- <el-table-column prop="contactName" label="联系人" width="164" align="center"></el-table-column>
- <el-table-column prop="mobile" label="联系电话" width="176" align="center"></el-table-column>
- <el-table-column label="已获运力" align="center" width="350">
- <template slot-scope="scope">
- <div class="imgs">
- <img class="img" :src="item.logo" v-for="(item, i) in scope.row.deliveries" :key="i" alt="">
- </div>
- </template>
- </el-table-column>
- <el-table-column fixed="right" label="操作" width="200" align="center">
- <template slot-scope="scope">
- <el-button class="btn" size="mini" @click.stop="addShop(2, scope.row)">修改</el-button>
- <!-- <el-button type="danger" size="mini" @click.stop="deleteItem(scope.row)">删除</el-button> -->
- </template>
- </el-table-column>
- </el-table>
- <el-empty v-if="!shopList.length && !loading" description="暂无门店数据!"></el-empty>
- <shop-add @getData="getData" ref="shopAdd" :products="productList"></shop-add>
- </div>
- </template>
- <script>
- import shopAdd from "./shopAdd";
- import { getShopList, getProductList, shopDelete } from "../../api/shop";
- export default {
- components: {
- shopAdd,
- },
- data() {
- return {
- loading: false,
- shopList: [],
- productList: [],
- memberType: this.$store.state.userInfo.memberType,
- };
- },
- mounted() {
- if (this.memberType !== 1) {
- this.getData();
- }
- this.getProductList();
- // this.$refs.map.setDialogStatus()
- },
- methods: {
- addShop(val, e) {
- if (val == 1) {
- this.$refs.shopAdd.init();
- } else {
- this.$refs.shopAdd.init(JSON.parse(JSON.stringify(e)));
- }
- },
- getData() {
- this.loading = true;
- getShopList().then((res) => {
- if (res.code === 200) {
- this.shopList = res.data;
- } else {
- this.$message({
- type: "error",
- message: res.msg,
- });
- }
- this.loading = false;
- });
- },
- getProductList() {
- getProductList().then((res) => {
- if (res.code === 200) {
- this.productList = res.data;
- } else {
- this.$message({
- type: "error",
- message: res.msg,
- });
- }
- });
- },
- deleteItem(e) {
- this.$confirm("此操作将永久删除该门店, 是否继续?", "提示", {
- confirmButtonText: "确定",
- cancelButtonText: "取消",
- type: "warning",
- }).then(() => {
- shopDelete({
- shopId: e.id,
- }).then((res) => {
- if (res.code === 200) {
- this.$message({
- type: "success",
- message: "删除成功!",
- });
- this.getData();
- } else {
- this.$message({
- type: "error",
- message: res.msg,
- });
- }
- });
- });
- },
- },
- };
- </script>
- <style lang="scss">
- .shopList {
- width: 100%;
- background: #ffffff;
- min-height: calc(100vh - 184px);
- padding: 20px;
- box-sizing: border-box;
- .header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- .left {
- display: flex;
- align-items: center;
- .line {
- position: relative;
- width: 4px;
- height: 15px;
- background: #fc7200;
- border-radius: 4px;
- overflow: hidden;
- margin-right: 10px;
- .b_line {
- width: 100px;
- height: 6px;
- background: #462bf7;
- }
- .triangle {
- width: 0;
- height: 0;
- border-top: 100px solid #462bf7;
- border-left: 100px solid transparent;
- }
- }
- .label {
- font-size: 16px;
- font-weight: 500;
- color: #0d1e40;
- }
- }
- }
- .btn {
- background: #fc7200;
- border-color: #fc7200;
- color: #fff;
- &.black {
- background: #0d1e40;
- border-color: #0d1e40;
- }
- }
- .el-table th.el-table__cell {
- height: 38px;
- background: #fafafa;
- padding: 0;
- font-size: 12px;
- color: #666666;
- }
- .el-table .el-table__cell {
- font-size: 14px;
- color: #222222;
- }
- .imgs {
- display: flex;
- align-items: center;
- padding-left: 36px;
- .img {
- width: 20px;
- height: 20px;
- border-radius: 50%;
- margin-right: 10px;
- }
- }
- }
- </style>
|