overseasWarehouseAuth.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383
  1. <template>
  2. <div class="p-3 bg-white">
  3. <!-- <template #toolbar> -->
  4. <div class="inner-toolbar w-11/12">
  5. <div class="toolbar-search dark:!bg-[#060818]">
  6. <en-table-search class="!justify-start" @search="searchEvent" :placeholder="$t('place')"> </en-table-search>
  7. </div>
  8. <div class="toolbar-btns mt-5 mb-4">
  9. <el-button size="small" v-if="store.state.user.user.founder !== 1" type="primary" @click="handleAddGoodsLend">{{ $t('overseasWarehouseAuth') }}</el-button>
  10. </div>
  11. </div>
  12. <!-- </template> -->
  13. <en-table-layout :tableData="tableData.data" :toolbar="false" :loading="loading" @selection-change="handleSelectionChange">
  14. <template #table-columns>
  15. <el-table-column type="selection" width="55" />
  16. <el-table-column prop="warehouse.sn" :label="$t('warechouse_sn')"></el-table-column>
  17. <el-table-column class="dark:!bg-[#060818]" prop="warehouse.name" :label="$t('warechouse_name')"></el-table-column>
  18. <el-table-column prop="code" :label="$t('warechouse_code')" />
  19. <el-table-column prop="type" :label="$t('warechouse_area')">
  20. <template #default="scope">{{ statusFilter(scope.row.type) }}</template>
  21. </el-table-column>
  22. <el-table-column prop="bind_num" :label="$t('warechouse_sku')" />
  23. <el-table-column :label="$t('operate')" fixed="right" width="300">
  24. <template #default="scope">
  25. <el-button size="small" v-if="store.state.user.user.founder !== 1" @click="handleEditGoodsLend(scope.row)">{{ $t('edit') }}</el-button>
  26. <el-button
  27. type="success"
  28. size="small"
  29. style="margin-top: 5px"
  30. v-if="store.state.user.user.founder !== 1"
  31. @click="handleReturnGoodsLend(scope.row)"
  32. >{{ $t('delete') }}</el-button
  33. >
  34. </template>
  35. </el-table-column>
  36. </template>
  37. <template #pagination>
  38. <el-pagination
  39. v-if="tableData"
  40. @size-change="handlePageSizeChange"
  41. @current-change="handlePageCurrentChange"
  42. :current-page="tableData.page_no"
  43. :page-sizes="[10, 20, 50, 100]"
  44. :page-size="tableData.page_size"
  45. layout="total, sizes, prev, pager, next, jumper"
  46. :total="tableData.data_total"
  47. >
  48. </el-pagination>
  49. </template>
  50. </en-table-layout>
  51. <el-dialog :title="$t('print')" v-model="dialogVisible" width="940px" center @close="handleCancle">
  52. <el-button size="small" type="primary" @click="handlePrintGoodsLend" class="print">{{ $t('print') }}</el-button>
  53. <div id="deliverySheet" style="width: 900px">
  54. <div class="tips-t" v-for="(item, index) in codeList" :key="index">
  55. <div>
  56. </div>
  57. </div>
  58. </div>
  59. </el-dialog>
  60. <el-dialog :title="title" v-model="dialogVisibleForm" width="940px" center @close="addHandleCancle" style="width: 30%; border-radius: 10px">
  61. <el-form :model="addLendForm" ref="addLendFormRef" :rules="rules" label-width="90px">
  62. <el-form-item :label="$t('warechouse')" prop="warehouse_id">
  63. <el-select v-model="addLendForm.warehouse_id" clearable @change="selWarehouse">
  64. <el-option v-for="item in warehouseList" :key="item.id" :label="item.name" :value="item.id" />
  65. </el-select>
  66. </el-form-item>
  67. <el-form-item :label="$t('warechouse_area')" prop="type">
  68. <el-select v-model="addLendForm.type" clearable @change="selAreaTableData">
  69. <el-option v-for="item in AreaTableData" :key="item.id" :label="item.name" :value="item.code" />
  70. </el-select>
  71. </el-form-item>
  72. <el-form-item :label="$t('warechouse_code')" prop="code">
  73. <el-input v-model="addLendForm.code" maxlength="12" :placeholder="$t('place') + $t('warechouse_code')" style="width: 270px">
  74. <template #prepend>{{ warehouseSn }}-{{ AreaTab }}</template>
  75. </el-input>
  76. </el-form-item>
  77. <el-form-item :label="$t('location_notes')">
  78. <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" :placeholder="$t('place') + $t('location_notes')" v-model="addLendForm.intro">
  79. </el-input>
  80. </el-form-item>
  81. </el-form>
  82. <template #footer>
  83. <el-button @click="addHandleCancle">{{ $t('cancel') }}</el-button>
  84. <el-button type="primary" @click="lendCommit">{{ $t('submit') }}</el-button>
  85. </template>
  86. </el-dialog>
  87. </div>
  88. </template>
  89. <script lang="ts" setup>
  90. import { ref, reactive, onMounted, watch, nextTick } from 'vue';
  91. import * as API_GoodsLend from '@/api/goodsLend';
  92. import Print from 'print-js';
  93. import * as API_Setting from '@/api/setting';
  94. import { useRouter, useRoute } from 'vue-router';
  95. import QRCode from 'qrcode';
  96. /* import EnTableLayout from '@/components/TableLayout/index.vue';
  97. import EnTableSearch from '@/components/TableSearch/index.vue'; */
  98. import { ElMessageBox, ElMessage } from 'element-plus';
  99. import { useStore } from 'vuex';
  100. import { useI18n } from 'vue-i18n';
  101. const { t } = useI18n();
  102. const store = useStore();
  103. const router = useRouter();
  104. const route = useRoute();
  105. const warehouseSn = ref('');
  106. const warehouseList = ref<any>([]);
  107. const loading = ref(false);
  108. const params = reactive<any>({
  109. page_no: 1,
  110. page_size: 10,
  111. company_id: store.state.companId,
  112. });
  113. const advancedForm = ref<any>({});
  114. const tableData = ref<any>({});
  115. const dialogVisible = ref(false);
  116. const multipleSelection = ref([]);
  117. const goodsLendForm = ref<any>({});
  118. const codeList = ref<any>([]);
  119. const title = ref('');
  120. const dialogVisibleForm = ref(false);
  121. let addLendForm = ref<any>({
  122. warehouse_id: '',
  123. type: '',
  124. code: '',
  125. intro: '',
  126. status: '',
  127. goodsLend_time_range: [],
  128. });
  129. const rules = ref<any>({
  130. warehouse_id: [{ required: true, message: t('change') + t('warechouse_code'), trigger: 'change' }],
  131. name: [{ required: true, message: '请输入仓库名称', trigger: 'blur' }],
  132. code: [{ required: true, message: '请输入库位号', trigger: 'blur' }],
  133. type: [{ required: true, message: t('change') + t('warechouse_area'), trigger: 'change' }],
  134. });
  135. const typeList = ref<any>([]);
  136. const AreaTableData = ref<any>([]);
  137. const AreaTab = ref('');
  138. const GET_GoodsLendList = () => {
  139. loading.value = true;
  140. API_GoodsLend.query(params)
  141. .then((response) => {
  142. loading.value = false;
  143. tableData.value = response;
  144. })
  145. .catch(() => {
  146. loading.value = false;
  147. });
  148. };
  149. onMounted(() => {
  150. GET_GoodsLendList();
  151. GET_DeptList();
  152. });
  153. watch(
  154. route,
  155. (newVal) => {
  156. if (newVal.query.status) {
  157. params.status = newVal.query.status;
  158. advancedForm.value.status = newVal.query.status;
  159. }
  160. params.page_no = 1;
  161. GET_GoodsLendList();
  162. },
  163. { immediate: true }
  164. );
  165. const introGoodsLend = (row) => {
  166. router.push({
  167. name: 'inventoryItem',
  168. params: { id: row.id, type: 'check', code: row.code },
  169. });
  170. };
  171. const AddGoodsLend = (row) => {
  172. router.push({
  173. name: 'bindAreaStock',
  174. params: { id: row.id, warehouse_id: row.warehouse_id, code: row.code },
  175. });
  176. };
  177. const gowareHouse = () => {
  178. dialogVisibleForm.value = false;
  179. router.push({ name: 'warehouseList' });
  180. };
  181. const selWarehouse = (val) => {
  182. const list = warehouseList.value.filter((el) => el.id === val);
  183. let obj = list[0];
  184. warehouseSn.value = obj.sn;
  185. };
  186. const selAreaTableData = (val) => {
  187. const list = AreaTableData.value.filter((el) => el.code === val);
  188. let obj = list[0];
  189. AreaTab.value = obj.code;
  190. };
  191. const addLendFormRef = ref();
  192. const lendCommit = () => {
  193. addLendForm.value.code = warehouseSn.value + '-' + addLendForm.value.type + '-' + addLendForm.value.code;
  194. addLendFormRef.value.validate((valid) => {
  195. if (valid) {
  196. if (!id.value) {
  197. API_GoodsLend.create(addLendForm.value).then(() => {
  198. ElMessage.success(t('add_success'));
  199. dialogVisibleForm.value = false;
  200. warehouseSn.value = '';
  201. addLendForm.value = {};
  202. GET_GoodsLendList();
  203. });
  204. } else {
  205. API_GoodsLend.update(addLendForm.value).then(() => {
  206. ElMessage.success(t('edit_success'));
  207. dialogVisibleForm.value = false;
  208. addLendForm.value = {};
  209. GET_GoodsLendList();
  210. });
  211. }
  212. } else {
  213. ElMessage.error(t('form_erroe'));
  214. return false;
  215. }
  216. });
  217. };
  218. const addHandleCancle = () => {
  219. dialogVisibleForm.value = false;
  220. };
  221. const handleCancle = () => {
  222. dialogVisible.value = false;
  223. codeList.value = [];
  224. };
  225. /* const creatQrCode = () => {
  226. nextTick(() => {
  227. codeList.value.forEach((item, index) => {
  228. document.getElementById(`codeItem${index}`).innerHTML = '';
  229. new QRCode(document.getElementById(`codeItem${index}`), {
  230. text: item,
  231. width: 600,
  232. height: 660,
  233. render: 'table',
  234. colorDark: '#333333',
  235. colorLight: '#ffffff',
  236. correctLevel: QRCode.CorrectLevel.H,
  237. });
  238. });
  239. });
  240. }; */
  241. const id = ref('');
  242. const handleEditGoodsLend = (row) => {
  243. id.value = row.id;
  244. title.value = t('edit');
  245. const str = row.code;
  246. warehouseSn.value = str.split('-')[0];
  247. AreaTab.value = str.split('-')[1];
  248. // 使用 Object.assign 或者手动赋值来更新 reactive 对象的属性
  249. /* Object.assign(addLendForm, row); */
  250. addLendForm.value = row;
  251. addLendForm.value.code = str.split('-').pop();
  252. dialogVisibleForm.value = true;
  253. };
  254. const handleReturnGoodsLend = (row) => {
  255. ElMessageBox.confirm(t('del_info'), t('prompt'), { type: 'warning' })
  256. .then(() => {
  257. API_GoodsLend.deletes({ id: row.id }).then(() => {
  258. ElMessage.success(t('del_success'));
  259. GET_GoodsLendList();
  260. });
  261. })
  262. .catch(() => {});
  263. };
  264. const statusFilter = (val) => {
  265. const obj = AreaTableData.value.filter((el) => el.code === val);
  266. return obj.length !== 0 ? obj[0].name : '';
  267. };
  268. const handleConfirmGoodsLend = () => {
  269. if (!multipleSelection.value.length) return ElMessage.error('请先选择!');
  270. const ids = multipleSelection.value.map((item: any) => item.code);
  271. codeList.value = ids;
  272. dialogVisible.value = true;
  273. /* creatQrCode(); */
  274. };
  275. const GET_DeptList = () => {
  276. API_Setting.getListAll().then((response) => {
  277. warehouseList.value = response;
  278. });
  279. API_Setting.getPage({
  280. dictType: 'Warehouse_location_type',
  281. page_no: 1,
  282. page_size: 50,
  283. }).then((res) => {
  284. typeList.value = res.data;
  285. });
  286. API_GoodsLend.getListAreaType({ page_no: 1, page_size: 100, company_id: store.state.companId })
  287. .then((response) => {
  288. loading.value = false;
  289. AreaTableData.value = response;
  290. })
  291. .catch(() => {
  292. loading.value = false;
  293. });
  294. };
  295. const handlePrintGoodsLend = () => {
  296. Print({
  297. printable: 'deliverySheet',
  298. type: 'html',
  299. targetStyles: ['*'],
  300. ignoreElements: ['no-logs', 'goods-image', 'no-btn', 'elementToIgnore'],
  301. });
  302. };
  303. const handleSelectionChange = (val) => {
  304. multipleSelection.value = val;
  305. };
  306. const handlePageSizeChange = (size) => {
  307. params.page_size = size;
  308. GET_GoodsLendList();
  309. };
  310. const handlePageCurrentChange = (page) => {
  311. params.page_no = page;
  312. GET_GoodsLendList();
  313. };
  314. const handleAddGoodsLend = () => {
  315. id.value = '';
  316. title.value = t('add');
  317. addLendForm.value = {};
  318. warehouseSn.value = '';
  319. AreaTab.value = '';
  320. dialogVisibleForm.value = true;
  321. };
  322. const handlePrintGoodsLendDialog = (row) => {
  323. dialogVisible.value = true;
  324. codeList.value.push(row.code);
  325. /* creatQrCode(); */
  326. };
  327. /* const GET_GoodsLendDetail = (id) => {
  328. API_GoodsLend.getGoodsLendInfo(id).then((response) => {
  329. goodsLendForm.value = response;
  330. if (response.product_list && response.product_list.length) {
  331. var str = '';
  332. response.product_list.forEach(function (i) {
  333. str += i.product_name + '、';
  334. });
  335. }
  336. goodsLendForm.value.illustrate = str;
  337. });
  338. }; */
  339. const searchEvent = (data) => {
  340. params.sn = data;
  341. Object.keys(advancedForm).forEach((key) => delete params[key]);
  342. params.page_no = 1;
  343. GET_GoodsLendList();
  344. };
  345. const advancedSearchEvent = () => {
  346. Object.assign(params, advancedForm);
  347. params.page_no = 1;
  348. GET_GoodsLendList();
  349. };
  350. </script>