outbound.vue 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320
  1. <template>
  2. <div>
  3. <div class="search bg-white p-3">
  4. <el-form ref="advancedFormRef" :model="advancedForm" label-width="160px">
  5. <el-row>
  6. <el-col :span="activeName === 'first' ? 12 : 8">
  7. <el-form-item :label="$t('outBound')">
  8. <el-date-picker
  9. v-model="advancedForm.goodsExchange_time_range"
  10. type="daterange"
  11. align="center"
  12. :editable="false"
  13. unlink-panels
  14. :clearable="true"
  15. :default-time="['00:00:00', '23:59:59']"
  16. range-separator="-"
  17. :start-placeholder="$t('start_time')"
  18. :end-placeholder="$t('end_time')"
  19. value-format="timestamp"
  20. :picker-options="{
  21. disabledDate(time) {
  22. return time.getTime() - 1 >= new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()).getTime() + 86400000 - 1;
  23. },
  24. shortcuts: MixinPickerShortcuts,
  25. }"
  26. ></el-date-picker>
  27. </el-form-item>
  28. </el-col>
  29. <el-col :span="8">
  30. <el-form-item :label="$t('warechouse')">
  31. <el-select v-model="advancedForm.warehouse_id" clearable>
  32. <el-option v-for="item in warehouseList" :key="item.id" :label="item.name" :value="item.id" />
  33. </el-select>
  34. </el-form-item>
  35. </el-col>
  36. <!-- <el-col :span="6" v-if="activeName === 'second'">
  37. <el-form-item label="入库类型">
  38. <el-select v-model="advancedForm.type" clearable>
  39. <el-option v-for="item in entryList" :key="item.id" :label="item.label" :value="item.value" />
  40. </el-select>
  41. </el-form-item>
  42. </el-col>
  43. <el-col :span="8" v-if="activeName === 'second'">
  44. <el-form-item label="客户名称">
  45. <el-input v-model="advancedForm.customer_name" clearable placeholder="请输入客户名称"></el-input>
  46. </el-form-item>
  47. </el-col>
  48. <el-col :span="8" v-if="activeName === 'second'">
  49. <el-form-item label="手机号">
  50. <el-input v-model="advancedForm.customer_phone" clearable placeholder="请输入手机号"></el-input>
  51. </el-form-item>
  52. </el-col> -->
  53. </el-row>
  54. </el-form>
  55. <div class="flex justify-end">
  56. <el-button class="mr-3" @click="advancedSearchEvent"> {{$t('search')}} </el-button>
  57. </div>
  58. </div>
  59. <en-table-layout :tableData="tableData.data" :loading="loading" @selection-change="handleSelectionChange">
  60. <template #toolbar>
  61. <div class="inner-toolbar">
  62. <div class="toolbar-btns">
  63. <!-- <el-button size="mini" v-if="checkPermission(['addInventory']) && activeName === 'second'" type="primary" @click="handleAddGoodsExchange"
  64. >新增入库</el-buttonv-if="checkPermission(['goodsExchangeAdd'])"
  65. > -->
  66. <el-button size="mini" type="primary" v-if="store.state.user.user.founder!==1" @click="handleShiftGoodsExchange">新增出库</el-button>
  67. </div>
  68. </div>
  69. </template>
  70. <template #table-columns>
  71. <el-table-column type="selection" width="55" />
  72. <el-table-column prop="sn" :label="$t('out_sn')">
  73. <template #default="scope">
  74. {{ scope.row.sn }}
  75. </template>
  76. </el-table-column>
  77. <el-table-column prop="warehouse_id" :label="$t('warechouse_name')">
  78. <template #default="scope">
  79. {{ warehouseName(scope.row.warehouse_id) }}
  80. </template>
  81. </el-table-column>
  82. <!-- <el-table-column prop="warehouse_id" label="客户名称">
  83. <template #default="scope">
  84. {{ scope.row.customer_name }}
  85. </template>
  86. </el-table-column>
  87. <el-table-column prop="warehouse_id" label="客户手机号">
  88. <template #default="scope">
  89. {{ scope.row.customer_phone }}
  90. </template>
  91. </el-table-column> -->
  92. <el-table-column :label="$t('out_type')">
  93. <template #default="scope">
  94. <span>{{ outName(scope.row.type) }}</span>
  95. </template>
  96. </el-table-column>
  97. <!-- <el-table-column prop="order_id_list" label="订单编号" /> -->
  98. <el-table-column :label="$t('warehousing_state')">
  99. <template #default="scope">
  100. <span>{{ scope.row.has_submit === 'Y' ? $t('inOut') : $t('notOut') }}</span>
  101. </template>
  102. </el-table-column>
  103. <el-table-column :label="$t('outTime')">
  104. <template #default="scope">
  105. <span>{{ scope.row.create_time }}</span>
  106. </template>
  107. </el-table-column>
  108. <el-table-column :label="$t('notes')">
  109. <template #default="scope">
  110. <span>{{ scope.row.notes }}</span>
  111. </template>
  112. </el-table-column>
  113. <el-table-column :label="$t('operate')" width="300">
  114. <template #default="scope">
  115. <!-- v-if="checkPermission(['checkInventory'])" -->
  116. <el-button size="mini" @click="handleAuditGoodsExchange(scope.row)">{{$('view')}}</el-button>
  117. <!-- && checkPermission(['editInventory']) && checkPermission(['goodsExchangeEdit']) -->
  118. <el-button
  119. size="mini"
  120. v-if="scope.row.has_submit === 'N' && store.state.user.user.founder!==1"
  121. @click="handleEditGoodsExchange(scope.row)"
  122. >{{$('outBound')}}</el-button
  123. >
  124. </template>
  125. </el-table-column>
  126. </template>
  127. <el-pagination
  128. v-if="tableData.data && tableData.data.length"
  129. @size-change="handlePageSizeChange"
  130. @current-change="handlePageCurrentChange"
  131. :current-page="tableData.page_no"
  132. :page-sizes="[10, 20, 50, 100]"
  133. :page-size="tableData.page_size"
  134. layout="total, sizes, prev, pager, next, jumper"
  135. :total="tableData.data_total"
  136. ></el-pagination>
  137. </en-table-layout>
  138. </div>
  139. </template>
  140. <script setup>
  141. import { ref, reactive, onMounted, watchEffect } from 'vue';
  142. import { useRouter, useRoute } from 'vue-router';
  143. import * as API_GoodsExchange from '@/api/goodsExchange';
  144. import * as API_Setting from '@/api/setting';
  145. import * as API_BasicSetting from '@/api/basicSetting';
  146. import { useStore } from 'vuex';
  147. const store = useStore();
  148. const router = useRouter();
  149. const route = useRoute();
  150. const warehouseList = ref([]);
  151. const deptList = ref([]);
  152. const loading = ref(false);
  153. const params = reactive({
  154. page_no: 1,
  155. page_size: 10,
  156. company_id: store.state.companId,
  157. });
  158. const advancedForm = reactive({});
  159. const tableData = ref('');
  160. const dialogVisible = ref(false);
  161. const multipleSelection = ref([]);
  162. const goodsExchangeForm = reactive({});
  163. const activeName = ref('second');
  164. const entryList = ref([]);
  165. const outList = ref([]);
  166. const advancedFormRef = ref(null);
  167. const GET_WarehouseList = () => {
  168. API_BasicSetting.getWarehouseListAll().then((response) => {
  169. warehouseList.value = response;
  170. });
  171. };
  172. const GET_DeptList = () => {
  173. /* API_Setting.getPage({ dictType: 'warehouse_entry_type' }).then((res) => {
  174. entryList.value = res.data;
  175. }); */
  176. API_Setting.getPage({ dictType: 'out_warehouse_type' }).then((res) => {
  177. outList.value = res.data;
  178. });
  179. };
  180. const GET_GoodsExchangeList = () => {
  181. loading.value = true;
  182. API_GoodsExchange.getWarehouseOut(params)
  183. .then((response) => {
  184. loading.value = false;
  185. tableData.value = response;
  186. })
  187. .catch(() => {
  188. loading.value = false;
  189. });
  190. };
  191. const GET_WarehouseEntry = () => {
  192. loading.value = true;
  193. API_GoodsExchange.getWarehouseEntry(params)
  194. .then((response) => {
  195. loading.value = false;
  196. tableData.value = response;
  197. })
  198. .catch(() => {
  199. loading.value = false;
  200. });
  201. };
  202. const handleClick = (tab) => {
  203. activeName.value = tab.name;
  204. params.page_no = 1;
  205. GET_GoodsExchangeList();
  206. };
  207. const handleEditGoodsExchange = (row) => {
  208. router.push({
  209. name: 'addOutbound',
  210. query: { id: row.id, type: 'edit' },
  211. });
  212. };
  213. const handleAuditGoodsExchange = (row) => {
  214. router.push({
  215. name: 'addOutbound',
  216. query: {
  217. id: row.id,
  218. type: 'view',
  219. },
  220. });
  221. };
  222. const handleSelectionChange = (val) => {
  223. multipleSelection.value = val;
  224. };
  225. const handlePageSizeChange = (size) => {
  226. params.page_size = size;
  227. GET_GoodsExchangeList();
  228. };
  229. const handlePageCurrentChange = (page) => {
  230. params.page_no = page;
  231. GET_GoodsExchangeList();
  232. };
  233. const handleShiftGoodsExchange = () => {
  234. router.push({
  235. name: 'addOutbound',
  236. });
  237. };
  238. const handleAddGoodsExchange = () => {
  239. router.push({
  240. name: 'addOutbound',
  241. params: { callback: GET_GoodsExchangeList, type: 'second' },
  242. });
  243. };
  244. const advancedSearchEvent = () => {
  245. Object.assign(params, advancedForm);
  246. delete params.start_time;
  247. delete params.end_time;
  248. if (advancedForm.goodsExchange_time_range) {
  249. params.start_time = parseInt(Number(advancedForm.goodsExchange_time_range[0]) / 1000);
  250. params.end_time = parseInt(Number(advancedForm.goodsExchange_time_range[1]) / 1000);
  251. }
  252. delete params.goodsExchange_time_range;
  253. params.page_no = 1;
  254. GET_GoodsExchangeList();
  255. };
  256. const warehouseName = (val) => {
  257. let name = '';
  258. warehouseList.value.map((el) => {
  259. if (el.id === val) {
  260. name = el.name;
  261. }
  262. });
  263. return name;
  264. };
  265. const outName = (val) => {
  266. let name = '';
  267. outList.value.map((el) => {
  268. if (el.value === val) {
  269. name = el.label;
  270. }
  271. });
  272. return name;
  273. };
  274. const entryName = (val) => {
  275. let name = '';
  276. entryList.value.map((el) => {
  277. if (el.value === val) {
  278. name = el.label;
  279. }
  280. });
  281. return name;
  282. };
  283. onMounted(() => {
  284. GET_GoodsExchangeList();
  285. GET_DeptList();
  286. GET_WarehouseList();
  287. });
  288. watchEffect(() => {
  289. if (route.query.status) {
  290. params.status = route.query.status;
  291. advancedForm.status = route.query.status;
  292. }
  293. params.page_no = 1;
  294. GET_GoodsExchangeList();
  295. });
  296. </script>