lingliaobaogong.vue 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294
  1. <template>
  2. <div>
  3. <layout>
  4. <!-- <layout-header> -->
  5. <div class="gva-table-box">
  6. <h1 style="margin: 0%;margin-bottom: 6px;">领料报工</h1>
  7. <el-row :gutter="24" style="margin-bottom: 6px;">
  8. <el-input v-model="add_searchInfo" placeholder="请扫描子订单编号"
  9. @keyup.enter="add_onSubmit"
  10. id="searchInput"
  11. style="width: 220px;height: 50px;margin-left: 10px;">
  12. </el-input>
  13. <el-button type="primary" icon="search" @click="add_onSubmit" style="height: 50px;">领料报工</el-button>
  14. <el-form-item label="机台号:" prop="jitaihao" class="mab" style="font-size: 30px;margin: 10px;" label-width="116px">
  15. <el-input v-model="add_formData['机台号']" readonly style="width: 100px; height: 40px;" id="jitaihao" />
  16. </el-form-item>
  17. <el-form-item label="工序:" prop="gongxu" class="mab" style="font-size: 30px; margin: 10px;" label-width="81px">
  18. <el-input v-model="add_formData['工序']" readonly style="width: 100px; height: 40px;" id="gongxu" />
  19. </el-form-item>
  20. <el-form-item label="组别:" prop="zubie" class="mab" style="font-size: 30px; margin: 10px;" label-width="81px">
  21. <el-input v-model="add_formData['组别']" readonly style="width: 110px; height: 40px;" id="zubie" />
  22. </el-form-item>
  23. <el-form-item label="人员:" prop="renyuan" class="mab" style="font-size: 30px; margin: 10px;" label-width="81px">
  24. <el-input v-model="add_formData['人员']" readonly style="width: 110px; height: 40px;" id="renyuan" />
  25. </el-form-item>
  26. </el-row>
  27. </div>
  28. </layout>
  29. </div>
  30. </template>
  31. <script setup>
  32. // 全量引入格式化工具 请按需保留
  33. import { Layout, LayoutSider, LayoutContent } from '@arco-design/web-vue';
  34. import {ref, reactive} from 'vue'
  35. import {getMachineMac} from '@/api/jixiaoguanli/jitairibaobiao'
  36. import {getMac} from '@/api/jixiaoguanli/baogong'
  37. import {ElMessage} from "element-plus";
  38. import { get } from 'scriptjs';
  39. defineOptions({name: 'Company'})
  40. import { useUserStore } from '@/pinia/modules/user'
  41. const userStore = useUserStore()
  42. const _username = ref('')
  43. _username.value = userStore.userInfo.userName + '/' + userStore.userInfo.nickName
  44. //全局调用获取当前日期
  45. const today = new Date();
  46. const year = today.getFullYear();
  47. const month = String(today.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始,需要补零
  48. const day = String(today.getDate()).padStart(2, '0');
  49. const hours = String(today.getHours()).padStart(2, '0');
  50. const minutes = String(today.getMinutes()).padStart(2, '0');
  51. const seconds = String(today.getSeconds()).padStart(2, '0');
  52. const currentDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  53. const currentDates = `${year}-${month}-${day}`;
  54. const add_formData = reactive({
  55. 机台号: '',
  56. 工序: '',
  57. 组别: '',
  58. 人员: '',
  59. 尺码: '',
  60. 数量: '',
  61. 是否订单尾包: '',
  62. });
  63. //全局获取code,接口接收code
  64. const _code = '领料'
  65. //全局接口接受的物理地址
  66. const Machine = ref('')
  67. //全局获取UniqId
  68. const UniqId = ref('')
  69. //物理地址获取机台编号
  70. const getMachineMacdata = async () => {
  71. console.log("本页面获取物理地址",Machine.value)
  72. try {
  73. const data = await getMachineMac({sys_sbID:'70-ED-A4-26-5F-30'});
  74. add_formData['机台号'] = data.data['机台号']
  75. add_formData['工序'] = data.data['生产工序']
  76. add_formData['组别'] = data.data['组别']
  77. add_formData['人员'] = data.data['组长']
  78. setTimeout(() => {
  79. const inputElement = document.getElementById('searchInput');
  80. if (inputElement) {
  81. inputElement.focus();
  82. }
  83. }, 100); // 延迟100毫秒
  84. } catch (error) {
  85. console.error(error)
  86. }
  87. }
  88. //自动获取物理地址
  89. const GetAddr = () => {
  90. var xmlhttp = null;
  91. var res;
  92. if (window.XMLHttpRequest) {
  93. xmlhttp = new XMLHttpRequest();
  94. } else if (window.ActiveXObject) {
  95. xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  96. }
  97. // 2. 设置回调函数
  98. xmlhttp.onreadystatechange = function() {
  99. if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
  100. res = eval('('+xmlhttp.response+')');
  101. let result = ''
  102. for (let i = 0; i < res.macAddress.length; i++) {
  103. if (i % 2 === 0 && i !== 0) {
  104. result += '-' // 根据实际需求修改分隔符
  105. }
  106. result += res.macAddress[i]
  107. }
  108. Machine.value = result
  109. getMachineMacdata(Machine.value)
  110. }
  111. }
  112. // 3. 打开一个连接
  113. xmlhttp.open("get", "http://127.0.0.1:8090/init")
  114. // 5. 发送
  115. xmlhttp.send();
  116. }
  117. getMachineMacdata();
  118. // GetAddr()
  119. const add_searchInfo = ref('')//搜索
  120. //点击【查询】按钮
  121. const add_onSubmit = async ()=>{
  122. setTimeout(() => {
  123. const inputElement = document.querySelector('#searchInput');
  124. if (inputElement) {
  125. inputElement.focus();
  126. }
  127. }, 100); // 延迟100毫秒
  128. if(add_searchInfo.value === ''){
  129. ElMessage({type: 'warning',message: '请扫描子订单编号' })
  130. }else{
  131. //领料
  132. let llparams = {};
  133. llparams.子订单编号 = add_searchInfo.value
  134. llparams.班组 = add_formData['机台号']
  135. llparams.订单编号 = add_searchInfo.value.split('-')[0]
  136. llparams.Sys_id = _username.value
  137. const processAdd_post = await processAdd(llparams);
  138. console.log(processAdd_post)
  139. if (processAdd_post.code === 0) {
  140. add_searchInfo.value = ''
  141. ElMessage({type: 'success',message: '领料成功'})
  142. } else {
  143. ElMessage({ type: 'error',message: '领料失败'})
  144. }
  145. }
  146. };
  147. // =========== 分页 ===========
  148. // 分页相关的响应式变量
  149. const page = ref(1)
  150. const total = ref(0)
  151. const pageSize = ref(10)
  152. // 分页
  153. const handleCurrentChange = (val) => {
  154. page.value = val;
  155. _getStaffList();
  156. };
  157. // 修改页面容量 点击多少条/页
  158. const handleSizeChange = (val) => {
  159. page.value = 10;//默认显示
  160. pageSize.value = val;
  161. _getStaffList();
  162. };
  163. //根据出库状态文字颜色
  164. const tableDataCellClass = ({row, column, rowIndex, columnIndex}) =>{
  165. if(row['是否出库'] === '已出库'){
  166. return 'status-plan-usage-low';
  167. }
  168. if(row['是否出库'] === '未出库'){
  169. return 'statusy-plan-usage-low';
  170. }
  171. }
  172. </script>
  173. <style scoped>
  174. /* 根据出库状态文字颜色 */
  175. :deep(.status-plan-usage-low div) {
  176. color: #8c939d !important;
  177. }
  178. :deep(.statusy-plan-usage-low div) {
  179. color: blue !important;
  180. }
  181. .form-container {
  182. display: flex;
  183. flex-wrap: wrap;
  184. }
  185. .form-column {
  186. /*flex: 1;*/
  187. margin-right: 15px; /* 调整列之间的间距 */
  188. }
  189. /* 左侧输入框宽度调整 */
  190. .form-column .el-form-item .el-input {
  191. width: 150px; /* 调整左侧输入框的宽度 */
  192. }
  193. /* 媒体查询,根据需要调整断点 */
  194. @media screen and (max-width: 768px) {
  195. .form-column {
  196. flex: 1 0 100%; /* 在小屏幕下变成单列布局 */
  197. margin-right: 0;
  198. }
  199. }
  200. .JKWTree-container {
  201. display: flex;
  202. }
  203. .JKWTree-tree {
  204. /*width: 300px;*/
  205. background-color: #fff;
  206. padding: 10px;
  207. margin-right: 20px;
  208. }
  209. .JKWTree-tree h3 {
  210. font-size: 15px;
  211. font-weight: 700;
  212. margin: 10px 0;
  213. }
  214. .JKWTree-content {
  215. flex: 1;
  216. }
  217. /* 表格复选框大小调整 */
  218. :deep(.el-checkbox.el-checkbox--small .el-checkbox__inner) {
  219. width: 45px; /* 复选框宽度 */
  220. height: 23px; /* 复选框高度 */
  221. }
  222. :deep(.el-checkbox.el-checkbox--small.is-checked .el-checkbox__inner::after) {
  223. transform: scale(1.2) rotate(45deg); /* 调整选中后的对勾大小 */
  224. top: 5%; /* 调整对勾位置 */
  225. left: 40%; /* 调整对勾位置 */
  226. width: 5px; /* 调整对勾宽度 */
  227. height: 9px; /* 调整对勾高度 */
  228. }
  229. /* 选中某行时的背景色 */
  230. :deep(.el-table__body tr.current-row) > td {
  231. background: #ff80ff !important;
  232. }
  233. </style>
  234. <style scoped>
  235. :deep(.el-table td .cell) {
  236. line-height: 20px !important;
  237. }
  238. :deep(.el-tabs__header){
  239. margin-bottom: 0;
  240. }
  241. .search{
  242. margin-left: 0px !important;
  243. margin-right: 10px !important;
  244. }
  245. .bt{
  246. margin-left: 2px !important;
  247. padding: 3px !important;
  248. font-size: 12px;
  249. }
  250. .el-tabs__header{
  251. margin: 0px !important;
  252. }
  253. .gva-table-box{
  254. padding: 0px !important;
  255. margin-left: -10px !important;
  256. }
  257. .mab{
  258. margin-bottom: 5px;
  259. }
  260. /* 搜索样式 */
  261. ::v-deep .el-input__wrapper #searchInput {
  262. font-size: 16px;
  263. }
  264. ::v-deep .el-input__wrapper #jitaihao {
  265. font-size: 18px;
  266. }
  267. ::v-deep .el-input__wrapper #gongxu {
  268. font-size: 18px;
  269. }
  270. ::v-deep .el-input__wrapper #zubie {
  271. font-size: 18px;
  272. }
  273. ::v-deep .el-input__wrapper #renyuan {
  274. font-size: 18px;
  275. }
  276. </style>