warehousing.vue 10 KB

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