lingliaobaogong.vue 8.7 KB

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