dispatching.vue 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  1. <template>
  2. <div class="dispatching">
  3. <h2 style="margin-bottom: 20px;padding-bottom:7px;border-bottom:2px solid #ddd">配送管理</h2>
  4. <header id="header">
  5. <el-row type="flex" :gutter="20">
  6. <el-col :span="4">
  7. <el-input v-model="search" placeholder="请选择"></el-input>
  8. </el-col>
  9. <el-col :span="4">
  10. <el-button type="primary" @click="getDispatchList">查找</el-button>
  11. </el-col>
  12. <el-col :span="4">
  13. <el-button type="primary" @click="add">新增</el-button>
  14. </el-col>
  15. </el-row>
  16. </header>
  17. <section>
  18. <article class="table">
  19. <el-table
  20. ref="multipleTable"
  21. :data="tableData"
  22. tooltip-effect="dark"
  23. style="width: 100%"
  24. >
  25. <el-table-column prop="id" label="序号" width="80"></el-table-column>
  26. <el-table-column prop="salesNo" label="ID编码"></el-table-column>
  27. <el-table-column prop="deliveryCustomer" label="配送客户/单位"></el-table-column>
  28. <el-table-column prop="deliveryAddress" label="配送地址"></el-table-column>
  29. <el-table-column prop="transportNo" label="运输单号"></el-table-column>
  30. <el-table-column prop="weight" label="重量"></el-table-column>
  31. <el-table-column prop="distributor" label="配送员"></el-table-column>
  32. <el-table-column prop="transportVehicles" label="车牌号"></el-table-column>
  33. <el-table-column prop="tel" label="手机号"></el-table-column>
  34. <el-table-column label="状态">
  35. <template v-slot="scope">
  36. <div v-for="item in $store.state['dispatchStatus']" :key="item.value">
  37. <span v-if="item.value == scope.row['status']">{{ item.label }}</span>
  38. </div>
  39. </template>
  40. </el-table-column>
  41. <el-table-column label="操作" width="150">
  42. <template slot-scope="scope">
  43. <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
  44. <el-popconfirm title="是否删除此设备的信息?" @onConfirm="del(scope.row)">
  45. <el-button slot="reference" type="text" size="small">删除</el-button>
  46. </el-popconfirm>
  47. </template>
  48. </el-table-column>
  49. </el-table>
  50. <el-row type="flex" justify="end">
  51. <el-col :span="8" class="pagination">
  52. <el-pagination
  53. @current-change="pageChange"
  54. background
  55. layout="prev, pager, next"
  56. :page-count="Number(totalPages)"
  57. ></el-pagination>
  58. </el-col>
  59. </el-row>
  60. </article>
  61. </section>
  62. <el-dialog title="新增/编辑" :visible.sync="isShow" width="40%">
  63. <el-row type="flex">
  64. <el-col :span="20">
  65. <el-form ref="addDispatch" :model="formData" :rules="rules" label-width="140px">
  66. <el-form-item label="销售单号">
  67. <el-input v-model="formData.salesNo"></el-input>
  68. </el-form-item>
  69. <el-form-item label="配送客户/单位">
  70. <el-input v-model="formData.deliveryCustomer"></el-input>
  71. </el-form-item>
  72. <el-form-item label="配送地址">
  73. <el-input v-model="formData.deliveryAddress"></el-input>
  74. </el-form-item>
  75. <el-form-item label="运输单号">
  76. <el-input v-model="formData.transportNo"></el-input>
  77. </el-form-item>
  78. <el-form-item label="重量(kg)">
  79. <el-input v-model.number="formData.weight"></el-input>
  80. </el-form-item>
  81. <el-form-item label="配送员">
  82. <el-input v-model="formData.distributor"></el-input>
  83. </el-form-item>
  84. <el-form-item label="车牌号">
  85. <el-input v-model="formData.transportVehicles"></el-input>
  86. </el-form-item>
  87. <el-form-item label="手机号">
  88. <el-input v-model="formData.tel"></el-input>
  89. </el-form-item>
  90. <el-form-item>
  91. <el-button @click="isShow=false">取 消</el-button>
  92. <el-button type="primary" @click="submitForm('addDispatch')">保 存</el-button>
  93. </el-form-item>
  94. </el-form>
  95. </el-col>
  96. </el-row>
  97. </el-dialog>
  98. </div>
  99. </template>
  100. <script>
  101. import {
  102. reqDispatchList,
  103. reqAddDispatch,
  104. reqUpdateDispatch,
  105. reqDelDispatch
  106. } from "@/api/storeTransportation.js";
  107. const pageSize = 10;
  108. const rules = {};
  109. export default {
  110. name: "dispatching",
  111. data() {
  112. return {
  113. search: "",
  114. page: 1,
  115. tableData: [],
  116. totalPages: 0,
  117. isShow: false,
  118. formData: {
  119. salesNo: "DHG54G8415",
  120. deliveryCustomer: "xx食品有限公司",
  121. deliveryAddress: "深圳新思路",
  122. transportNo: 'J4544T4D4F54',
  123. weight: 2096,
  124. distributor: '李宜珊',
  125. transportVehicles: '浙A 1J8022',
  126. tel: '13856798458'
  127. },
  128. isAdd: false,
  129. rules
  130. };
  131. },
  132. created() {
  133. // 配送管理列表
  134. this.getDispatchList();
  135. },
  136. methods: {
  137. submitForm(formName) {
  138. this.$refs[formName].validate(valid => {
  139. if (valid) {
  140. if (this.isAdd) {
  141. reqAddDispatch(this.formData)
  142. .then(res => {
  143. // 配送管理列表
  144. this.getDispatchList();
  145. this.$message.success("添加成功!");
  146. })
  147. .catch(err => {
  148. console.log(err);
  149. this.$message.error("添加失败!");
  150. });
  151. } else {
  152. reqUpdateDispatch(this.formData)
  153. .then(res => {
  154. // 配送管理列表
  155. this.getDispatchList();
  156. this.$message.success("编辑成功!");
  157. })
  158. .catch(err => {
  159. console.log(err);
  160. this.$message.error("编辑失败!");
  161. });
  162. }
  163. } else {
  164. return false;
  165. }
  166. });
  167. },
  168. // 配送管理列表
  169. getDispatchList() {
  170. reqDispatchList({
  171. searchStr: this.search,
  172. pageSize,
  173. pageNum: this.page
  174. })
  175. .then(res => {
  176. this.tableData = res.content;
  177. this.totalPages = res.totalPages;
  178. })
  179. .catch(err => {
  180. console.log(err);
  181. });
  182. },
  183. add() {
  184. this.isShow = true;
  185. this.isAdd = true;
  186. },
  187. edit(row) {
  188. this.formData = row;
  189. this.isShow = true;
  190. this.isAdd = false;
  191. },
  192. del(row) {
  193. reqDelDispatch(row.id)
  194. .then(res => {
  195. console.log(res);
  196. // 配送管理列表
  197. this.getDispatchList();
  198. this.$message.success("删除成功!");
  199. })
  200. .catch(err => {
  201. console.log(err);
  202. this.$message.error("删除失败!");
  203. });
  204. },
  205. pageChange(p) {
  206. console.log(p);
  207. this.page = p;
  208. // 配送管理列表
  209. this.getDispatchList();
  210. }
  211. }
  212. };
  213. </script>
  214. <style lang="scss" scoped>
  215. #header {
  216. margin-bottom: 15px;
  217. }
  218. .table {
  219. .pagination {
  220. margin-top: 20px;
  221. }
  222. }
  223. </style>