shopList.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
  1. <template>
  2. <div class="shopList" v-loading="loading" element-loading-text="数据加载中">
  3. <div class="header" v-if="shopList.length">
  4. <div class="left">
  5. <div class="line">
  6. <div class="b_line"></div>
  7. <div class="triangle"></div>
  8. </div>
  9. <div class="label">门店管理</div>
  10. </div>
  11. <div class="right">
  12. <el-button class="btn" v-if="$store.state.userInfo.memberType === 2" @click.stop="addShop(1)">新增门店</el-button>
  13. </div>
  14. </div>
  15. <el-table v-if="shopList.length" :data="shopList" stripe header-row-class-name="table_h" style="width: 100%; margin-top: 10px">
  16. <el-table-column prop="code" label="门店编号" width="170"></el-table-column>
  17. <el-table-column prop="name" label="门店名称" width="172" align="center"></el-table-column>
  18. <el-table-column prop="address" label="门店地址" width="321" align="center"></el-table-column>
  19. <el-table-column prop="contactName" label="联系人" width="164" align="center"></el-table-column>
  20. <el-table-column prop="mobile" label="联系电话" width="176" align="center"></el-table-column>
  21. <el-table-column label="已获运力" align="center" width="350">
  22. <template slot-scope="scope">
  23. <div class="imgs">
  24. <img class="img" :src="item.logo" v-for="(item, i) in scope.row.deliveries" :key="i" alt="">
  25. </div>
  26. </template>
  27. </el-table-column>
  28. <el-table-column fixed="right" label="操作" width="200" align="center">
  29. <template slot-scope="scope">
  30. <el-button class="btn" size="mini" @click.stop="addShop(2, scope.row)">修改</el-button>
  31. <!-- <el-button type="danger" size="mini" @click.stop="deleteItem(scope.row)">删除</el-button> -->
  32. </template>
  33. </el-table-column>
  34. </el-table>
  35. <el-empty v-if="!shopList.length && !loading" description="暂无门店数据!"></el-empty>
  36. <shop-add @getData="getData" ref="shopAdd" :products="productList"></shop-add>
  37. </div>
  38. </template>
  39. <script>
  40. import shopAdd from "./shopAdd";
  41. import { getShopList, getProductList, shopDelete } from "../../api/shop";
  42. export default {
  43. components: {
  44. shopAdd,
  45. },
  46. data() {
  47. return {
  48. loading: false,
  49. shopList: [],
  50. productList: [],
  51. memberType: this.$store.state.userInfo.memberType,
  52. };
  53. },
  54. mounted() {
  55. if (this.memberType !== 1) {
  56. this.getData();
  57. }
  58. this.getProductList();
  59. // this.$refs.map.setDialogStatus()
  60. },
  61. methods: {
  62. addShop(val, e) {
  63. if (val == 1) {
  64. this.$refs.shopAdd.init();
  65. } else {
  66. this.$refs.shopAdd.init(JSON.parse(JSON.stringify(e)));
  67. }
  68. },
  69. getData() {
  70. this.loading = true;
  71. getShopList().then((res) => {
  72. if (res.code === 200) {
  73. this.shopList = res.data;
  74. } else {
  75. this.$message({
  76. type: "error",
  77. message: res.msg,
  78. });
  79. }
  80. this.loading = false;
  81. });
  82. },
  83. getProductList() {
  84. getProductList().then((res) => {
  85. if (res.code === 200) {
  86. this.productList = res.data;
  87. } else {
  88. this.$message({
  89. type: "error",
  90. message: res.msg,
  91. });
  92. }
  93. });
  94. },
  95. deleteItem(e) {
  96. this.$confirm("此操作将永久删除该门店, 是否继续?", "提示", {
  97. confirmButtonText: "确定",
  98. cancelButtonText: "取消",
  99. type: "warning",
  100. }).then(() => {
  101. shopDelete({
  102. shopId: e.id,
  103. }).then((res) => {
  104. if (res.code === 200) {
  105. this.$message({
  106. type: "success",
  107. message: "删除成功!",
  108. });
  109. this.getData();
  110. } else {
  111. this.$message({
  112. type: "error",
  113. message: res.msg,
  114. });
  115. }
  116. });
  117. });
  118. },
  119. },
  120. };
  121. </script>
  122. <style lang="scss">
  123. .shopList {
  124. width: 100%;
  125. background: #ffffff;
  126. min-height: calc(100vh - 184px);
  127. padding: 20px;
  128. box-sizing: border-box;
  129. .header {
  130. display: flex;
  131. align-items: center;
  132. justify-content: space-between;
  133. .left {
  134. display: flex;
  135. align-items: center;
  136. .line {
  137. position: relative;
  138. width: 4px;
  139. height: 15px;
  140. background: #fc7200;
  141. border-radius: 4px;
  142. overflow: hidden;
  143. margin-right: 10px;
  144. .b_line {
  145. width: 100px;
  146. height: 6px;
  147. background: #462bf7;
  148. }
  149. .triangle {
  150. width: 0;
  151. height: 0;
  152. border-top: 100px solid #462bf7;
  153. border-left: 100px solid transparent;
  154. }
  155. }
  156. .label {
  157. font-size: 16px;
  158. font-weight: 500;
  159. color: #0d1e40;
  160. }
  161. }
  162. }
  163. .btn {
  164. background: #fc7200;
  165. border-color: #fc7200;
  166. color: #fff;
  167. &.black {
  168. background: #0d1e40;
  169. border-color: #0d1e40;
  170. }
  171. }
  172. .el-table th.el-table__cell {
  173. height: 38px;
  174. background: #fafafa;
  175. padding: 0;
  176. font-size: 12px;
  177. color: #666666;
  178. }
  179. .el-table .el-table__cell {
  180. font-size: 14px;
  181. color: #222222;
  182. }
  183. .imgs {
  184. display: flex;
  185. align-items: center;
  186. padding-left: 36px;
  187. .img {
  188. width: 20px;
  189. height: 20px;
  190. border-radius: 50%;
  191. margin-right: 10px;
  192. }
  193. }
  194. }
  195. </style>