chukubaogong.vue 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763
  1. <template>
  2. <div>
  3. <layout>
  4. <!-- <h1 style="margin: 0%;margin-bottom: 6px;">入库</h1> -->
  5. <el-row :gutter="24" style="margin-bottom: 6px;">
  6. <el-input v-model="add_searchInfo" placeholder="请扫描订单编号或输入生产款号模糊查询" @input="handleInput"
  7. @keyup.enter="add_onSubmit" id="searchInput" style="width: 340px;height: 50px;margin-left: 10px;">
  8. </el-input>
  9. <el-button type="primary" @click="Reporting_onSubmit" style="height: 50px;font-size: 20px;">选择出库</el-button>
  10. <el-button type="primary" icon="reading" @click="details_onSubmit" style="height: 50px;font-size: 20px;">出库记录</el-button>
  11. </el-row>
  12. <layout>
  13. <layout-content >
  14. <div class="gva-table-box">
  15. <el-table ref="multipleTable" style="width: 100%;height: 64vh" tooltip-effect="dark"
  16. :row-style="{ height: '40px' }" :header-cell-style="{ padding: '0px' }"
  17. :cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
  18. :data="restableData" border row-key="ID" size="small"
  19. :cell-class-name="tableDataCellClass"
  20. highlight-current-row="true" @row-dblclick="updateCompanyFunc"
  21. @row-click="tableRowClick" :show-overflow-tooltip="true"
  22. @selection-change="handleSelectionChange">
  23. <!-- <el-table-column type="selection" width="80" /> -->
  24. <el-table-column align="left" label="关联编号" prop="关联编号" width="90" />
  25. <el-table-column align="left" label="订单编号" prop="订单编号" width="105" />
  26. <el-table-column align="left" label="客户编号" prop="客户编号" width="80"/>
  27. <el-table-column align="left" label="生产款号" prop="生产款号" width="170"/>
  28. <el-table-column align="left" label="物料名称" prop="物料名称" width="105" />
  29. <el-table-column align="left" label="物料编码" prop="物料编码" width="105" />
  30. <el-table-column align="left" label="颜色" prop="颜色" width="80" />
  31. <el-table-column align="left" label="款式" prop="款式" width="170"/>
  32. <el-table-column align="left" label="订单数量" prop="订单数量" width="110"/>
  33. <el-table-column align="left" label="接单日期" prop="接单日期" width="160"/>
  34. <el-table-column align="left" label="落货日期" prop="落货日期" width="160"/>
  35. <el-table-column align="left" label="制单人" prop="创建人员" width="90"/>
  36. <el-table-column align="left" label="制单日期" prop="创建时间" width="160"/>
  37. </el-table>
  38. <div class="dialog-footer" style="text-align: left;margin-right: 60px;">
  39. </div>
  40. </div>
  41. </layout-content>
  42. </layout>
  43. </layout>
  44. </div>
  45. <!-- 选择入库弹窗 -->
  46. <el-dialog v-model="res_bomdialogFormVisible" :before-close="res_bomcloseDialog" width="100%" style="height: 100%;margin: 0%;padding: 0px 10px 0px 10px;" destroy-on-close>
  47. <div class="dialog-footer" style="margin: 0px;">
  48. <!-- <el-input v-model="add_lysearchInfo" placeholder="请扫描订单编号进行操作"
  49. @keyup.enter="add_lyonSubmit" id="ly_searchInput" style="width: 340px;height: 50px;margin-left: 10px;">
  50. </el-input> -->
  51. <el-button type="primary" @click="res_bomcloseDialog" style="width: 100px;height: 50px;margin-left: 10px;">关 闭</el-button>
  52. <el-button type="primary" @click="res_bomenterDialog" style="width: 100px;height: 50px;">一键出库</el-button>
  53. </div>
  54. <el-divider><span class="print-title" style="font-size: 18px;">面料出库信息</span></el-divider>
  55. <!-- <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
  56. <p style="font-size: 18px;margin-right: 20px;">出库单号: <el-input v-model="danhao" style="width: 200px;" disabled/></p>
  57. <p style="font-size: 18px;margin-right: 20px;">出库日期:<el-input v-model="riqi" style="width: 200px;" disabled/></p>
  58. </div> -->
  59. <el-descriptions class="margin-top" :column="2" :size="size" border>
  60. <el-descriptions-item label="出库单号">{{danhao}}</el-descriptions-item>
  61. <el-descriptions-item label="出库日期">{{riqi}}</el-descriptions-item>
  62. </el-descriptions>
  63. <el-descriptions class="margin-top" :column="4" :size="size" border>
  64. <el-descriptions-item label="订单编号" class="ddh">{{ ddhformData['ddh'] }}</el-descriptions-item>
  65. <el-descriptions-item label="客户">{{ ddhformData['kh'] }}</el-descriptions-item>
  66. <el-descriptions-item label="生产款号">{{ ddhformData['sckh'] }}</el-descriptions-item>
  67. <el-descriptions-item label="款式">{{ ddhformData['ks'] }}</el-descriptions-item>
  68. </el-descriptions>
  69. <br>
  70. <div>
  71. <el-table
  72. ref="paichengRef"
  73. :show-overflow-tooltip="true"
  74. highlight-current-row="true"
  75. :row-style="{ height: ' 40px' }"
  76. :header-cell-style="{ padding: '0px' }"
  77. :cell-style="{ padding: '10px 0px 10px 0px' }"
  78. :header-row-style="{ height: '0px' }"
  79. style="width: 100%; height: 40vh"
  80. border
  81. tooltip-effect="dark"
  82. :data="resbomtableData"
  83. row-key="ID"
  84. :cell-class-name="scfjfpxsCellClass">
  85. <template v-for="(item, idx) in resbom_tableColumns" :key="idx">
  86. <el-table-column :label="item.label" :width="item.width">
  87. <template #default="{ row, column, $index }">
  88. <!-- 判断该列是否需要输入框 -->
  89. <div v-if="['出库数量'].includes(item.prop)">
  90. <el-input
  91. v-model="row[item.prop]"
  92. :clearable="false"
  93. style="height: 30px;"
  94. :id="`input${idx}${$index}`"
  95. @keyup="resbom_handleKeyDown($event, idx, $index, item.prop)"
  96. @input="handleInput2($event, row, item.prop)"
  97. />
  98. </div>
  99. <div v-else>
  100. {{ row[item.prop] }}
  101. </div>
  102. </template>
  103. </el-table-column>
  104. </template>
  105. </el-table>
  106. <br>
  107. <br>
  108. <div style="display: flex; justify-content: space-around; align-items: center; margin-bottom: 10px;">
  109. <p style="font-size: 18px;">出库人员:
  110. <el-input v-model="chukuren" style="width: 200px;" disabled/>
  111. </p>
  112. <p style="font-size: 18px;">领用人员:
  113. <el-input v-model="linguser" style="width: 200px;" />
  114. </p>
  115. </div>
  116. </div>
  117. </el-dialog>
  118. <!--单号记录 -->
  119. <el-dialog v-model="pickingaddvisible" :before-close="()=> pickingaddvisible = false" style="width: 100%; margin: 0% auto; height: 100%;" :title="'出库、入库、退还记录'" destroy-on-close>
  120. <div class="dialog-footer" style="bottom: 10px; right: 10px; width: 100%;">
  121. <el-button type="primary" @click="ckth_closeDialog" style="width: 80px;height: 40px;display: inline-block;">关 闭</el-button>
  122. <h3 style="color: red;display: inline-block;margin-left: 20px;">双击表格行查看入库单明细</h3>
  123. </div>
  124. <br>
  125. <div>
  126. <el-tabs v-model="activeName" @tab-click="handleClick">
  127. <el-tab-pane label="出库记录" @click="showTable('出库记录')" name="first">
  128. <el-table ref="multipleTable"
  129. :row-style="{ height: '30px' }"
  130. :cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
  131. :header-cell-style="{ padding: '0px' }"
  132. :show-overflow-tooltip="true"
  133. highlight-current-row="true"
  134. @row-click="tableclick"
  135. @row-dblclick="chukuupdateCompanyFunc"
  136. style="width: 100%;height: 36vh" border
  137. :summary-method="getSummaries" tooltip-effect="dark" :data="cktableData" row-key="ID" >
  138. <el-table-column align="left" sortable label="出库单号" prop="单号" width="140"/>
  139. <el-table-column align="left" sortable label="订单编号" prop="订单编号" width="140"/>
  140. <el-table-column align="left" sortable label="款号" prop="款号" width="180"/>
  141. <el-table-column align="left" sortable label="数量" prop="数量" width="105"/>
  142. <el-table-column align="left" sortable label="出库人员" prop="出库人员" width="160"/>
  143. <el-table-column align="left" sortable label="出库时间" prop="出库时间" width="160"/>
  144. </el-table>
  145. </el-tab-pane>
  146. <el-tab-pane label="退还记录" name="second">
  147. <el-table ref="multipleTable"
  148. :row-style="{ height: '30px' }":header-cell-style="{ padding: '0px' }"
  149. :cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
  150. highlight-current-row="true" :show-overflow-tooltip="true"
  151. :cell-class-name="gysatusCellClass" :row-class-name="rowClassStyle2"
  152. @row-click="clickybupdate2" @row-dblclick="thupdateCompanyFunc"
  153. style="width: 100%;height: 36vh" border tooltip-effect="dark" :data="thtableData" row-key="ID">
  154. <el-table-column align="left" sortable label="订单编号" prop="订单编号" width="140"/>
  155. <el-table-column align="left" sortable label="款号" prop="款号" width="180"/>
  156. <el-table-column align="left" sortable label="数量" prop="数量" width="105"/>
  157. <el-table-column align="left" sortable label="退还时间" prop="退还时间" width="160"/>
  158. <el-table-column align="left" sortable label="退还机台" prop="退还机台" width="160"/>
  159. </el-table>
  160. </el-tab-pane>
  161. </el-tabs>
  162. </div>
  163. </el-dialog>
  164. <!--单号详情记录 -->
  165. <el-dialog v-model="details_pickingaddvisible" :before-close="()=> details_pickingaddvisible = false" style="width: 100%; margin: 0% auto; height: 100%;" :title="单据详情"
  166. destroy-on-close>
  167. <div class="dialog-footer" style="bottom: 10px; right: 10px; width: 100%;">
  168. <el-button type="primary" @click="details_ckth_closeDialog" style="width: 80px;height: 40px;">关 闭</el-button>
  169. <el-button type="danger" @click="deldetail_delclick" style="width: 80px;height: 40px;" v-if="del_details=== true" :disabled="details_Selection === '' " class="bt" >删除</el-button>
  170. </div>
  171. <br>
  172. <div>
  173. <el-table ref="multipleTable"
  174. :row-style="{ height: '30px' }" :header-cell-style="{ padding: '0px' }"
  175. :cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
  176. :show-overflow-tooltip="true" highlight-current-row="true"
  177. @row-click="tableclick" @row-dblclick="ysupdateCompanyFunc"
  178. @selection-change="detailSelectionChange" style="width: 100%;height: 65vh" border
  179. :summary-method="getSummaries" tooltip-effect="dark" :data="chuku_detailstableData" row-key="ID" >
  180. <el-table-column align="center" type="selection" width="40"/>
  181. <el-table-column align="left" label="订单编号" prop="订单编号" width="110"/>
  182. <el-table-column align="left" label="生产款号" prop="生产款号" width="140"/>
  183. <el-table-column align="left" label="物料名称" prop="物料名称" width="140"/>
  184. <el-table-column align="left" label="计划用料" prop="计划用料" width="100"/>
  185. <el-table-column align="left" label="定额用料" prop="定额用料" width="100"/>
  186. <el-table-column align="left" label="计划门幅" prop="计划门幅" width="100"/>
  187. <el-table-column align="left" label="定额门幅" prop="定额门幅" width="100"/>
  188. <el-table-column align="left" label="裁床实际用料" prop="裁床实际用料" width="110"/>
  189. <el-table-column align="left" label="裁床领用面料" prop="裁床领用面料" width="110"/>
  190. <el-table-column align="left" label="裁床退还数量" prop="裁床退还数量" width="110"/>
  191. <el-table-column align="left" label="库存总量" prop="库存总量" width="100"/>
  192. <el-table-column align="left" label="面料结余" prop="面料结余" width="100"/>
  193. <el-table-column align="left" label="入库数量" prop="入库数量" width="100"/>
  194. <el-table-column align="left" label="投料单位" prop="投料单位" width="90"/>
  195. <el-table-column align="left" label="入库人员" prop="入库人员" width="120"/>
  196. <el-table-column align="left" label="入库时间" prop="入库时间" width="160"/>
  197. <el-table-column align="left" label="款式" prop="款式" width="140"/>
  198. <el-table-column align="left" label="客户" prop="客户编号" width="80"/>
  199. </el-table>
  200. </div>
  201. </el-dialog>
  202. </template>
  203. <script>
  204. //点击按钮显示下方表格
  205. export default {
  206. data() {
  207. return {
  208. currentTable: '', // 当前展示的表格
  209. activeName: 'first',
  210. _ddhval:'',
  211. add_gddialogFormVisible: true,
  212. };
  213. },
  214. methods: {
  215. }
  216. };
  217. </script>
  218. <script setup>
  219. // 全量引入格式化工具 请按需保留
  220. import { Layout, LayoutSider, LayoutContent } from '@arco-design/web-vue';
  221. import {ref, reactive} from 'vue'
  222. import {getSpotList,getSpotTab,getInputDetail,
  223. InputOrderSearch,outReport,orderBomList,FabricDetail,gitReceiptNumber,FabricDetaillist,FabricDetaildel} from '@/api/mes/job'
  224. import { ElMessage, ElMessageBox,ElUpload, ElButton } from 'element-plus';
  225. import { useUserStore } from '@/pinia/modules/user'
  226. // import { get } from 'scriptjs';
  227. defineOptions({name: 'Company'})
  228. //获取用户登录信息
  229. const userStore = useUserStore()
  230. const _username = ref('')
  231. _username.value = userStore.userInfo.userName + '/' + userStore.userInfo.nickName
  232. console.log('获取用户名称',_username.value)
  233. //全局调用获取当前日期
  234. const today = new Date();
  235. const year = today.getFullYear();
  236. const month = String(today.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始,需要补零
  237. const day = String(today.getDate()).padStart(2, '0');
  238. const hours = String(today.getHours()).padStart(2, '0');
  239. const minutes = String(today.getMinutes()).padStart(2, '0');
  240. const seconds = String(today.getSeconds()).padStart(2, '0');
  241. const currentDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  242. const currentDates = `${year}-${month}-${day}`;
  243. //自动聚焦光标input
  244. const getMachineMacdata = async () => {
  245. setTimeout(() => {
  246. const inputElement = document.getElementById('searchInput');
  247. if (inputElement) {
  248. inputElement.focus();
  249. }
  250. }, 100); // 延迟100毫秒
  251. }
  252. getMachineMacdata();
  253. //全局调用参数
  254. const danhao = ref('')
  255. const riqi = ref('')
  256. const chukuren = ref('')
  257. const linguser = ref('')
  258. const add_searchInfo = ref('')//搜索
  259. const add_lysearchInfo = ref('')//搜索
  260. const restableData = reactive([])//表格
  261. const _orderid = ref('')//订单子编号
  262. const _kh = ref('')//生产款号
  263. //input实时调用
  264. const handleInput = async ()=>{
  265. restableData.splice(0, restableData.length);//清空表格
  266. //订单信息数据查询【接口】
  267. const orderSearchdata = await InputOrderSearch({search:add_searchInfo.value});
  268. if(orderSearchdata.data.length === 1){
  269. _orderid.value = orderSearchdata.data[0]['订单编号']
  270. add_searchInfo.value = orderSearchdata.data[0]['订单编号']
  271. ddhformData.ddh = orderSearchdata.data[0]['订单编号']
  272. ddhformData.kh = orderSearchdata.data[0]['客户编号']
  273. ddhformData.sckh = orderSearchdata.data[0]['生产款号']
  274. ddhformData.ks = orderSearchdata.data[0]['款式']
  275. add_lysearchInfo.value = add_searchInfo.value
  276. const gitReceiptNumberdata = await gitReceiptNumber({number:'RK'});
  277. danhao.value = gitReceiptNumberdata.data.number
  278. chukuren.value = userStore.userInfo.nickName
  279. riqi.value = currentDates
  280. }else{
  281. restableData.splice(0,orderSearchdata.length,...orderSearchdata.data);
  282. }
  283. }
  284. //input回车事件
  285. const add_onSubmit = async ()=>{
  286. //清空表格
  287. restableData.splice(0, restableData.length);
  288. const orderSearchdata = await InputOrderSearch({search:add_searchInfo.value});
  289. if(orderSearchdata.data.length === 1){
  290. res_bomdialogFormVisible.value = true
  291. _orderid.value = orderSearchdata.data[0]['订单编号']
  292. add_searchInfo.value = orderSearchdata.data[0]['订单编号']
  293. ddhformData.ddh = orderSearchdata.data[0]['订单编号']
  294. ddhformData.kh = orderSearchdata.data[0]['客户编号']
  295. ddhformData.sckh = orderSearchdata.data[0]['生产款号']
  296. ddhformData.ks = orderSearchdata.data[0]['款式']
  297. add_lysearchInfo.value = add_searchInfo.value
  298. const gitReceiptNumberdata = await gitReceiptNumber({number:'RK'});
  299. console.log(gitReceiptNumberdata)
  300. danhao.value = gitReceiptNumberdata.data.number
  301. chukuren.value = userStore.userInfo.nickName
  302. riqi.value = currentDates
  303. Reporting_onSubmit()
  304. }else{
  305. restableData.splice(0,orderSearchdata.length,...orderSearchdata.data);
  306. }
  307. };
  308. //表格行点击
  309. const tableRowClick = async (row)=>{
  310. add_searchInfo.value = row.订单编号
  311. _orderid.value = row.订单编号
  312. _kh.value = row.生产款号
  313. ddhformData.glbh = row['关联编号']
  314. ddhformData.ddh = row['订单编号']
  315. ddhformData.kh = row['客户编号']
  316. ddhformData.sckh = row['生产款号']
  317. ddhformData.wlbh = row['物料编码']
  318. ddhformData.ks = row['款式']
  319. }
  320. //查询
  321. const add_lyonSubmit = async ()=>{
  322. const orderSearchdata = await InputOrderSearch({search:add_lysearchInfo.value});
  323. if(orderSearchdata.data.length === 1){
  324. add_lysearchInfo.value = orderSearchdata.data[0]['订单编号']
  325. ddhformData.ddh = orderSearchdata.data[0]['订单编号']
  326. ddhformData.kh = orderSearchdata.data[0]['客户编号']
  327. ddhformData.sckh = orderSearchdata.data[0]['生产款号']
  328. ddhformData.ks = orderSearchdata.data[0]['款式']
  329. }
  330. try {
  331. const Detailres = await getInputDetail({
  332. 关联编号:ddhformData.glbh,
  333. 订单编号:ddhformData.ddh,
  334. 物料编码:ddhformData.wlbh
  335. });
  336. console.log(Detailres)
  337. add_lysearchInfo.value = ''
  338. } catch (error) {
  339. console.error(error);
  340. }
  341. };
  342. //选择入库弹窗
  343. const res_bomdialogFormVisible = ref(false)
  344. const resbomtableData = ref([]);
  345. const ddhformData = reactive({
  346. glbh: '',
  347. ddh: '',
  348. kh:'',
  349. sckh:'',
  350. ks:'',
  351. wlbh:'',
  352. });
  353. const resbom_tableColumns = ref(
  354. [ { label: '物料编号', prop: '物料编号', width: '160' },
  355. { label: '物料名称', prop: '物料名称', width: '100' },
  356. { label: '计划用料', prop: '计划用料', width: '90' },
  357. { label: '计划门幅', prop: 'BOM_计划门幅', width: '90' },
  358. { label: '定额用料', prop: '定额用料', width: '90' },
  359. { label: '定额门幅', prop: 'BOM_定额门幅', width: '90' },
  360. { label: '实际门幅', prop: '实际门幅', width: '100' },
  361. { label: '出库数量', prop: '出库数量', width: '90' },
  362. { label: '入仓总数量', prop: '入仓总量', width: '100' },
  363. { label: '库存数量', prop: '库存数量', width: '90' },
  364. { label: '出库总数量', prop: '领用数量', width: '100' },
  365. { label: '批次号', prop: '批次号', width: '80' },
  366. { label: '关联号', prop: '关联号', width: '80' },
  367. { label: '颜色', prop: 'BOM_颜色', width: '100' },
  368. { label: '关联订单', prop: '关联订单', width: '160' },
  369. { label: '单位', prop: '单位', width: '90' },
  370. ]
  371. )
  372. //选择出库
  373. const Reporting_onSubmit = async ()=>{
  374. if(_orderid.value === '' || _orderid.value === null){
  375. ElMessage({type: 'warning',message: '请扫描订单后,再操作此功能'})
  376. }else{
  377. add_lysearchInfo.value = add_searchInfo.value
  378. res_bomdialogFormVisible.value = true
  379. const gitReceiptNumberdata = await gitReceiptNumber({number:'CK'});
  380. danhao.value = gitReceiptNumberdata.data.number
  381. chukuren.value = userStore.userInfo.nickName
  382. riqi.value = currentDates
  383. _TestCoefficient();
  384. }
  385. }
  386. //调用接口【获取入库面料信息】
  387. const _TestCoefficient = async () => {
  388. try {
  389. const Detailres = await getInputDetail({
  390. 关联编号: ddhformData.glbh,
  391. 订单编号: ddhformData.ddh,
  392. 物料编码: ddhformData.wlbh
  393. });
  394. console.log(Detailres);
  395. // 如果接口返回的data是单条数据(对象),可以直接赋值
  396. if (Detailres.code === 0 && Detailres.data) {
  397. resbomtableData.value = [Detailres.data]; // 将单条数据包装为数组,便于表格渲染
  398. }
  399. } catch (error) {
  400. console.error(error);
  401. }
  402. }
  403. const resbom_handleKeyDown = (event, x, y, prop) => {
  404. const currentElement = document.getElementById(`input${x}${y}`);
  405. if (currentElement === null && currentElement === undefined) return
  406. let move = 0
  407. switch (event.keyCode) {
  408. case 13: // Enter
  409. case 40: // 向下箭头
  410. if (y < resbomtableData.value.length )
  411. document.getElementById(`input${x}${y + 1}`).focus();
  412. break;
  413. case 38: // 向上箭头
  414. if ( y > 0) {
  415. document.getElementById(`input${x}${y - 1}`).focus();
  416. }
  417. break;
  418. case 39: // 向左箭头
  419. if (x >= 0 && x <=6) {
  420. move = x + 1
  421. }
  422. document.getElementById(`input${move}${y}`).focus();
  423. break;
  424. case 37: // 向右箭头
  425. if (x = 0 && x <=6) {
  426. move = x - 1
  427. }
  428. document.getElementById(`input${move}${y}`).focus();
  429. break;
  430. default:
  431. break;
  432. }
  433. }
  434. const scfjfpxsCellClass = ({row, column, rowIndex, columnIndex}) =>{
  435. if (column.label === '出库数量') {
  436. return 'background-plan-usage-low';
  437. }
  438. }
  439. // 确定
  440. const res_bomenterDialog = async () => {
  441. console.log(resbomtableData);
  442. if(linguser.value === '' || linguser.value === null){
  443. ElMessage({type: 'warning',message: '请输入领用人员'})
  444. return
  445. }
  446. if(resbomtableData.value[0]['出库数量'] === ''|| resbomtableData.value[0]['出库数量'] === undefined){
  447. ElMessage({type: 'warning',message: '出库数量不能为空'})
  448. return
  449. }
  450. // 直接构造一个对象,不用 JSON 格式的索引
  451. const formattedData = {
  452. order_id: ddhformData.ddh,
  453. 款号: ddhformData.sckh,
  454. 物料编码: resbomtableData.value[0]['物料编号'],
  455. 物料名称: resbomtableData.value[0]['物料名称'],
  456. number: resbomtableData.value[0]['出库数量'],
  457. name: "出库",
  458. sys_id: userStore.userInfo.nickName,
  459. receipt_number: danhao.value,
  460. 客户编号: ddhformData.kh,
  461. 款式: ddhformData.ks,
  462. rq: currentDate,
  463. 批次号: resbomtableData.value[0]['批次号'],
  464. 关联编号: resbomtableData.value[0]['关联号'],
  465. 实际门幅: resbomtableData.value[0]['实际门幅'],
  466. };
  467. console.log(formattedData);
  468. // 异步调用输入数据的接口
  469. const add_outReport = await outReport(formattedData);
  470. // 根据返回的 code 进行提示
  471. if (add_outReport.code === 0) {
  472. res_bomdialogFormVisible.value = false;
  473. ElMessage({ type: 'success', message: '出库成功' });
  474. } else {
  475. ElMessage({ type: 'error', message: '出库失败' });
  476. }
  477. }
  478. // 取消
  479. const res_bomcloseDialog = () => {
  480. _orderid.value = '';
  481. add_searchInfo.value = '';
  482. restableData.splice(0, restableData.length);
  483. res_bomdialogFormVisible.value = false;
  484. //自动获取光标
  485. getMachineMacdata();
  486. }
  487. // 输入框只能输入数字和小数点
  488. const handleInput2 = (value, row, prop) => {
  489. if(prop != "物料名称" && prop != "备注" ){
  490. // 使用正则表达式过滤非数字和小数点的字符
  491. let filteredValue = value.replace(/[^\d.]/g, '');
  492. // 不允许以 . 开头
  493. if (filteredValue.startsWith('.')) {
  494. filteredValue = filteredValue.slice(1); // 去掉开头的 .
  495. }
  496. // 确保只有一个小数点
  497. const parts = filteredValue.split('.');
  498. if (parts.length > 2) {
  499. // 如果超过一个小数点,只保留第一个
  500. row[prop] = `${parts[0]}.${parts.slice(1).join('')}`;
  501. } else {
  502. // 否则直接赋值
  503. row[prop] = filteredValue;
  504. }
  505. }
  506. };
  507. //=============出库退还记录==================
  508. const cktableData = reactive([])
  509. const thtableData = reactive([])
  510. const pickingaddvisible = ref(false)//弹窗
  511. const add_prinkformData = reactive({});
  512. //详情记录
  513. const details_onSubmit = async ()=>{
  514. cktableData.splice(0,cktableData.length);
  515. thtableData.splice(0,thtableData.length);
  516. pickingaddvisible.value = true
  517. const FabricDetaillist = await FabricDetail({order:_orderid.value});
  518. console.log(FabricDetaillist)
  519. cktableData.splice(0,FabricDetaillist.length,...FabricDetaillist.data['出库记录']);
  520. thtableData.splice(0,FabricDetaillist.length,...FabricDetaillist.data['退还记录']);
  521. }
  522. //领料取消
  523. const ckth_closeDialog = async ()=>{
  524. pickingaddvisible.value = false
  525. //自动聚焦光标input
  526. getMachineMacdata();
  527. }
  528. const dh = ref('')
  529. const type = ref('')
  530. const details_pickingaddvisible = ref(false)
  531. const chuku_detailstableData = reactive([])
  532. const th_detailstableData = reactive([])
  533. const chukuupdateCompanyFunc = async (row)=>{
  534. dh.value = row.单号
  535. type.value = 'ck'
  536. details_pickingaddvisible.value = true
  537. chuku_detailstableData.splice(0,chuku_detailstableData.length);
  538. const FabricDetaillistdata = await FabricDetaillist({order:row.单号,search:''});
  539. chuku_detailstableData.splice(0,FabricDetaillistdata.length,...FabricDetaillistdata.data['出库记录']);
  540. console.log(FabricDetaillistdata)
  541. }
  542. const thupdateCompanyFunc = async (row)=>{
  543. dh.value = row.单号
  544. type.value = 'th'
  545. details_pickingaddvisible.value = true
  546. console.log(row)
  547. const FabricDetaillistdata = await FabricDetaillist({order:row.单号,search:''});
  548. console.log(FabricDetaillistdata)
  549. }
  550. //详情页取消
  551. const details_ckth_closeDialog = async ()=>{
  552. details_pickingaddvisible.value = false
  553. //自动聚焦光标input
  554. getMachineMacdata();
  555. }
  556. //表格复选框
  557. const del_details = ref(true)//删除BOM资料
  558. const details_Selection = ref('')//存储选中Uniqid
  559. const detailSelectionChange = (selection, type) => {
  560. const ids = selection.map(item => {
  561. return item.id
  562. })
  563. details_Selection.value = ids.join(',')
  564. console.log("复选框",details_Selection.value)
  565. }
  566. // 删除详情按钮
  567. const deldetail_delclick = async () => {
  568. try {
  569. // 弹出确认框
  570. await ElMessageBox.confirm('此操作将永久删除, 是否继续?', '提示', {
  571. confirmButtonText: '确定',
  572. cancelButtonText: '取消',
  573. type: 'warning',
  574. });
  575. // 用户点击“确定”后执行以下逻辑
  576. const params = {
  577. id: details_Selection._value,
  578. Mod_id: userStore.userInfo.nickName,
  579. };
  580. console.log('删除参数:', params);
  581. // 调用删除接口
  582. const res1 = await FabricDetaildel(params);
  583. if (res1.code === 0) {
  584. ElMessage.success('删除成功');
  585. } else {
  586. ElMessage.error('删除失败');
  587. return; // 如果删除失败,直接返回
  588. }
  589. // 重新获取BOM列表数据
  590. const FabricDetaillistdata = await FabricDetaillist({order:dh.value,search:''});
  591. chuku_detailstableData.splice(0,FabricDetaillistdata.length,...FabricDetaillistdata.data['入库记录']);
  592. } catch (error) {
  593. // 用户点击“取消”或弹框关闭
  594. console.log('用户取消删除操作');
  595. }
  596. };
  597. // =========== 分页 ===========
  598. // 分页相关的响应式变量
  599. const page = ref(1)
  600. const total = ref(0)
  601. const pageSize = ref(10)
  602. // 分页
  603. const handleCurrentChange = (val) => {
  604. page.value = val;
  605. _getStaffList();
  606. };
  607. // 修改页面容量 点击多少条/页
  608. const handleSizeChange = (val) => {
  609. page.value = 10;//默认显示
  610. pageSize.value = val;
  611. _getStaffList();
  612. };
  613. </script>
  614. <style scoped>
  615. /* 根据出库状态文字颜色 */
  616. :deep(.status-plan-usage-low div) {
  617. color: #8c939d !important;
  618. }
  619. :deep(.statusy-plan-usage-low div) {
  620. color: blue !important;
  621. }
  622. .form-container {
  623. display: flex;
  624. flex-wrap: wrap;
  625. }
  626. .form-column {
  627. /*flex: 1;*/
  628. margin-right: 15px; /* 调整列之间的间距 */
  629. }
  630. /* 左侧输入框宽度调整 */
  631. .form-column .el-form-item .el-input {
  632. width: 150px; /* 调整左侧输入框的宽度 */
  633. }
  634. /* 媒体查询,根据需要调整断点 */
  635. @media screen and (max-width: 768px) {
  636. .form-column {
  637. flex: 1 0 100%; /* 在小屏幕下变成单列布局 */
  638. margin-right: 0;
  639. }
  640. }
  641. .JKWTree-container {
  642. display: flex;
  643. }
  644. .JKWTree-tree {
  645. /*width: 300px;*/
  646. background-color: #fff;
  647. padding: 10px;
  648. margin-right: 20px;
  649. }
  650. .JKWTree-tree h3 {
  651. font-size: 15px;
  652. font-weight: 700;
  653. margin: 10px 0;
  654. }
  655. .JKWTree-content {
  656. flex: 1;
  657. }
  658. /* 表格复选框大小调整 */
  659. :deep(.el-checkbox.el-checkbox--small .el-checkbox__inner) {
  660. width: 45px; /* 复选框宽度 */
  661. height: 23px; /* 复选框高度 */
  662. }
  663. /*bom参数背景*/
  664. :deep(.el-table__body .background-plan-usage-low div div div) {
  665. background: #80FA80 !important;
  666. }
  667. /* 选中某行时的背景色 */
  668. :deep(.el-table__body tr.current-row) > td {
  669. background: #ff80ff !important;
  670. }
  671. :deep(.el-checkbox.el-checkbox--small.is-checked .el-checkbox__inner::after) {
  672. transform: scale(1.2) rotate(45deg); /* 调整选中后的对勾大小 */
  673. top: 5%; /* 调整对勾位置 */
  674. left: 40%; /* 调整对勾位置 */
  675. width: 5px; /* 调整对勾宽度 */
  676. height: 9px; /* 调整对勾高度 */
  677. }
  678. /* 选中某行时的背景色 */
  679. :deep(.el-table__body tr.current-row) > td {
  680. background: #ff80ff !important;
  681. }
  682. </style>
  683. <style scoped>
  684. :deep(.el-table td .cell) {
  685. line-height: 20px !important;
  686. }
  687. :deep(.el-tabs__header){
  688. margin-bottom: 0;
  689. }
  690. .search{
  691. margin-left: 0px !important;
  692. margin-right: 10px !important;
  693. }
  694. .bt{
  695. margin-left: 2px !important;
  696. padding: 3px !important;
  697. font-size: 12px;
  698. }
  699. .el-tabs__header{
  700. margin: 0px !important;
  701. }
  702. .gva-table-box{
  703. padding: 0px !important;
  704. margin-left: 5px !important;
  705. }
  706. .mab{
  707. margin-bottom: 5px;
  708. }
  709. /* 搜索样式 */
  710. ::v-deep .el-input__wrapper #searchInput {
  711. font-size: 16px;
  712. }
  713. ::v-deep(.el-descriptions__table tbody tr .is-bordered-label){
  714. width: 60px;
  715. }
  716. ::v-deep(.el-descriptions__table tbody tr .el-descriptions__content){
  717. width: 120px;
  718. }
  719. </style>