outStore.vue 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252
  1. <template>
  2. <div class="outStore">
  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="getOutStoreList">查找</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="carcassCode" label="胴体编码"></el-table-column>
  27. <el-table-column prop="deliveryTime" label="出库时间"></el-table-column>
  28. <el-table-column prop="flowTo" label="去向">
  29. <template v-slot="scope">
  30. <div
  31. v-for="item in $store.state['outStoreDirection']"
  32. :key="item.value"
  33. >
  34. <span v-if="item.value == scope.row['flowTo']">{{ item.label }}</span>
  35. </div>
  36. </template>
  37. </el-table-column>
  38. <el-table-column prop="deliveryWeight" label="出库重量"></el-table-column>
  39. <el-table-column prop="operator" label="操作人员"></el-table-column>
  40. <el-table-column prop="slaughterBatch" label="屠宰批次"></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="addOutStore" :model="formData" :rules="rules" label-width="140px">
  66. <el-form-item label="胴体编码">
  67. <el-input v-model="formData.carcassCode"></el-input>
  68. </el-form-item>
  69. <el-form-item label="出库时间">
  70. <el-date-picker
  71. v-model="formData.deliveryTime"
  72. type="date"
  73. value-format="yyyy-MM-dd"
  74. placeholder="选择日期"
  75. ></el-date-picker>
  76. </el-form-item>
  77. <el-form-item label="去向">
  78. <el-radio-group v-model="formData.flowTo">
  79. <el-radio
  80. v-for="item in $store.state['outStoreDirection']"
  81. :key="item.value"
  82. :label="item.value"
  83. >{{ item.label }}</el-radio>
  84. </el-radio-group>
  85. </el-form-item>
  86. <el-form-item label="出库重量">
  87. <el-input v-model="formData.deliveryWeight"></el-input>
  88. </el-form-item>
  89. <el-form-item label="操作人员">
  90. <el-input v-model="formData.operator"></el-input>
  91. </el-form-item>
  92. <el-form-item label="屠宰批次">
  93. <el-input v-model="formData.slaughterBatch"></el-input>
  94. </el-form-item>
  95. <el-form-item>
  96. <el-button @click="isShow=false">取 消</el-button>
  97. <el-button type="primary" @click="submitForm('addOutStore')">保 存</el-button>
  98. </el-form-item>
  99. </el-form>
  100. </el-col>
  101. </el-row>
  102. </el-dialog>
  103. </div>
  104. </template>
  105. <script>
  106. import {
  107. reqOutStoreList,
  108. reqAddOutStore,
  109. reqUpdateOutStore,
  110. reqDelOutStore
  111. } from "@/api/slaughterManagment.js";
  112. const pageSize = 10;
  113. const rules = {};
  114. export default {
  115. name: "OutStore",
  116. data() {
  117. return {
  118. search: "",
  119. page: 1,
  120. tableData: [],
  121. totalPages: 0,
  122. isShow: false,
  123. formData: {
  124. carcassCode: "1010",
  125. deliveryTime: this.$moment().format("YYYY-MM-DD"),
  126. flowTo: this.$store.state["outStoreDirection"][0].value,
  127. deliveryWeight: "48",
  128. operator: "王三喜",
  129. slaughterBatch: "16546"
  130. },
  131. isAdd: false,
  132. rules
  133. };
  134. },
  135. created() {
  136. // 出仓管理列表
  137. this.getOutStoreList();
  138. },
  139. methods: {
  140. submitForm(formName) {
  141. this.$refs[formName].validate(valid => {
  142. if (valid) {
  143. if (this.isAdd) {
  144. reqAddOutStore(this.formData)
  145. .then(res => {
  146. // 出仓管理列表
  147. this.getOutStoreList();
  148. // this.$message.success("添加成功!");
  149. if (res.errCode) {
  150. this.$message.error(res.errMsg);
  151. } else {
  152. this.$message.success("成功");
  153. }
  154. })
  155. .catch(err => {
  156. console.log(err);
  157. this.$message.error("添加失败!");
  158. });
  159. } else {
  160. reqUpdateOutStore(this.formData)
  161. .then(res => {
  162. // 出仓管理列表
  163. this.getOutStoreList();
  164. // this.$message.success("编辑成功!");
  165. if (res.errCode) {
  166. this.$message.error(res.errMsg);
  167. } else {
  168. this.$message.success("成功");
  169. }
  170. })
  171. .catch(err => {
  172. console.log(err);
  173. this.$message.error("编辑失败!");
  174. });
  175. }
  176. } else {
  177. return false;
  178. }
  179. });
  180. },
  181. // 出仓管理列表
  182. getOutStoreList() {
  183. reqOutStoreList({
  184. searchStr: this.search,
  185. pageSize,
  186. pageNum: this.page
  187. })
  188. .then(res => {
  189. this.tableData = res.content;
  190. this.totalPages = res.totalPages;
  191. })
  192. .catch(err => {
  193. console.log(err);
  194. });
  195. },
  196. add() {
  197. this.isShow = true;
  198. this.isAdd = true;
  199. },
  200. edit(row) {
  201. this.formData = row;
  202. this.isShow = true;
  203. this.isAdd = false;
  204. },
  205. del(row) {
  206. reqDelOutStore(row.id)
  207. .then(res => {
  208. console.log(res);
  209. // 出仓管理列表
  210. this.getOutStoreList();
  211. if (res.errCode) {
  212. this.$message.error(res.errMsg);
  213. } else {
  214. this.$message.success("删除成功");
  215. }
  216. })
  217. .catch(err => {
  218. console.log(err);
  219. this.$message.error("删除失败!");
  220. });
  221. },
  222. pageChange(p) {
  223. console.log(p);
  224. this.page = p;
  225. // 出仓管理列表
  226. this.getOutStoreList();
  227. }
  228. }
  229. };
  230. </script>
  231. <style lang="scss" scoped>
  232. #header {
  233. margin-bottom: 15px;
  234. }
  235. .table {
  236. .pagination {
  237. margin-top: 20px;
  238. }
  239. }
  240. </style>