datangbaogong.vue 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921
  1. <template>
  2. <div>
  3. <layout>
  4. <layout-content >
  5. <!-- <el-main> -->
  6. <div class="gva-table-box">
  7. <h1 id="title" style="margin: 0%;margin-bottom: 10px;">{{_code}}报工</h1>
  8. <el-row :gutter="10" style="align-items: center; margin-bottom: 20px;">
  9. <!-- 子订单编号输入框 -->
  10. <el-col :span="4" style="padding: 0px;margin: 0px;">
  11. <el-input v-model="add_searchInfo" placeholder="请扫描子订单编号"@keyup.enter="add_onSubmit" id="searchInput" style="width: 100%; height: 50px;"/>
  12. </el-col>
  13. <!-- 查询按钮 -->
  14. <el-col :span="1.5" style="padding: 0px;margin: 0px;">
  15. <el-button type="primary" icon="search" @click="add_onSubmit"style="height: 50px;width: 80px;">查询</el-button>
  16. </el-col>
  17. <el-col :span="1.5" style="padding: 0px;margin: 0px;">
  18. <el-text style="font-size: 30px;">机台号</el-text>
  19. </el-col>
  20. <!-- 机台号输入框 -->
  21. <el-col :span="2"><el-input v-model="add_formData['机台号']" readonly style="width: 100%; height: 40px;"/></el-col>
  22. <el-col :span="1.5" style="padding: 0px;margin: 0px;">
  23. <el-text style="font-size: 30px;">工序</el-text>
  24. </el-col>
  25. <!-- 工序输入框 -->
  26. <el-col :span="2"><el-input v-model="add_formData['工序']" readonly style="width: 100%; height: 40px;" /></el-col>
  27. <el-col :span="1.5" style="padding: 0px;margin: 0px;">
  28. <el-text style="font-size: 30px;">组别</el-text>
  29. </el-col>
  30. <!-- 组别输入框 -->
  31. <el-col :span="2"><el-input v-model="add_formData['组别']" readonly style="width: 100%; height: 40px;" /></el-col>
  32. <el-col :span="1.5" style="padding: 0px;margin: 0px;">
  33. <el-text style="font-size: 30px;">人员</el-text>
  34. </el-col>
  35. <!-- 人员输入框 -->
  36. <el-col :span="2"><el-input v-model="add_formData['人员']" readonly style="width: 100%; height: 40px;"/></el-col>
  37. </el-row>
  38. <el-row :gutter="10" style="align-items: center; margin-bottom: 20px;">
  39. <el-col :span="1.5" style="padding: 0px;margin: 0px;">
  40. <el-text style="font-size: 30px;">尺码</el-text>
  41. </el-col>
  42. <!-- 尺码输入框 -->
  43. <el-col :span="2"><el-input v-model="add_formData['尺码']" readonly style="width: 100%; height: 40px;"/></el-col>
  44. <el-col :span="1.5" style="padding: 0px;margin: 0px;">
  45. <el-text style="font-size: 30px;">总数量</el-text>
  46. </el-col>
  47. <!-- 总数量输入框 -->
  48. <el-col :span="2"><el-input v-model="add_formData['总数量']" readonly style="width: 100%; height: 40px;"/></el-col>
  49. <el-col :span="1.5" style="padding: 0px;margin: 0px;">
  50. <el-text style="font-size: 30px;">剩余数量</el-text>
  51. </el-col>
  52. <!--剩余数量输入框 -->
  53. <el-col :span="2"><el-input v-model="add_formData['剩余数量']" readonly style="width: 100%; height: 40px;"/></el-col>
  54. <el-col :span="1.5" style="padding: 0px;margin: 0px;">
  55. <el-text style="font-size: 30px;">上报数量</el-text>
  56. </el-col>
  57. <!--上报数量输入框 -->
  58. <el-col :span="2"><el-input v-model="add_formData['上报数量']" @input="baogongslpd" id="s_num" style="width: 100%; height: 40px;"/></el-col>
  59. <!-- 是否尾包文本 -->
  60. <el-col :span="2.5">
  61. <el-text style="font-size: 30px;">是否尾包</el-text>
  62. </el-col>
  63. <!-- 是否尾包按钮 -->
  64. <el-col :span="1">
  65. <el-button
  66. :class="{'info-button': activeButtonValue === '1', 'default-button': activeButtonValue !== '1'}"
  67. style="margin-top:-6px; margin-right:15px; height: 50px; width: 60px;
  68. display: flex; justify-content: center; align-items: center; cursor: not-allowed; border: 1px solid #ccc;
  69. border-radius: 4px; color: #000000; font-size: 24px;"
  70. :style="{ backgroundColor: activeButtonValue === '1' ? '#ff0000' : '#808080' }"
  71. >是</el-button>
  72. </el-col>
  73. <el-col :span="1">
  74. <el-button
  75. :class="{'info-button': activeButtonValue === '0', 'default-button': activeButtonValue !== '0'}"
  76. style="margin-top:-6px; height: 50px; width: 60px; margin-left: 10px;
  77. display: flex; justify-content: center; align-items: center; cursor: not-allowed; border: 1px solid #ccc;
  78. border-radius: 4px; color: #000000; font-size: 24px;"
  79. :style="{ backgroundColor: activeButtonValue === '0' ? '#ff0000' : '#808080' }"
  80. >否</el-button>
  81. </el-col>
  82. </el-row>
  83. <layout-content >
  84. <el-main>
  85. <el-row :gutter="24" style="margin-bottom: 15px;">
  86. <!-- 表格数据 -->
  87. <el-tabs v-model="activeName">
  88. <el-tab-pane label="报工历史记录" @click="showTable('报工历史记录')" name="first">
  89. <el-table ref="multipleTableRef" style="width: 100%;height: 53vh"
  90. :row-style="{ height: '50px' }" :header-cell-style="{ padding: '5px', fontSize: '20px' }"
  91. :cell-style="{ padding: '10px', fontSize: '20px' }" :header-row-style="{ height: '20px' }"
  92. :data="add_tableData" border row-key="ID" size="small"
  93. highlight-current-row="true" tooltip-effect="dark"
  94. @row-dblclick="add_updateCompanyFunc" @row-click="add_tableRowClick" @row-contextmenu="handleRightClick"
  95. :show-overflow-tooltip="true" @selection-change="add_xpSelectionChange">
  96. <!-- <el-table-column type="selection" width="70" /> -->
  97. <el-table-column sortable align="left" label="流水号" prop="serial" width="100"/>
  98. <el-table-column sortable align="left" label="报工时间" prop="sys_rq" width="160"/>
  99. <el-table-column sortable align="left" label="订单编号" prop="订单编号" width="130"/>
  100. <el-table-column sortable align="left" label="订单子编号" prop="子订单编号" width="140"/>
  101. <el-table-column sortable align="left" label="款式" prop="款式" width="140"/>
  102. <el-table-column sortable align="left" label="色系名称" prop="颜色" width="130"/>
  103. <el-table-column sortable align="left" label="尺码" prop="尺码" width="110"/>
  104. <el-table-column sortable align="left" label="数量" prop="数量" width="110"/>
  105. <el-table-column sortable align="left" label="上报数量" prop="上报数量" width="110"/>
  106. <el-table-column sortable align="left" label="是否尾包" prop="尾包" width="130"/>
  107. <!-- <el-table-column sortable align="left" label="组别" prop="组别" width="130"/> -->
  108. </el-table>
  109. </el-tab-pane>
  110. <el-tab-pane label="订单资料附件" name="third">
  111. <el-table ref="multipleTable"
  112. :row-style="{ height: '30px' }"
  113. :cell-style="{ padding: '0px' }" :header-row-style="{ height: '30px' }"
  114. :header-cell-style="{ padding: '0px' }"
  115. :show-overflow-tooltip="true"
  116. :cell-class-name="planUsageCellClass"
  117. highlight-current-row="true"
  118. @row-dblclick="gdbomupdateCompanyFunc"
  119. style="width: 100%;height: 36vh" border tooltip-effect="dark" :data="ddtableData" row-key="ID"
  120. @selection-change="fjSelectionChange">
  121. <el-table-column align="left" label="关联编号" prop="关联编号" width="115"/>
  122. <el-table-column align="left" label="备注" prop="附件备注" width="110"/>
  123. <el-table-column align="left" label="文件类型" prop="附件类型" width="100"/>
  124. <el-table-column align="left" label="建档时间" prop="sys_rq" width="160"/>
  125. <el-table-column align="left" label="建档用户" prop="sys_id" width="200"/>
  126. </el-table>
  127. </el-tab-pane>
  128. <el-tab-pane label="技术附件" name="fourth">
  129. <el-table ref="multipleTable"
  130. :row-style="{ height: '30px' }"
  131. :cell-style="{ padding: '0px' }" :header-row-style="{ height: '30px' }"
  132. :header-cell-style="{ padding: '0px' }"
  133. :show-overflow-tooltip="true"
  134. :cell-class-name="planUsageCellClass"
  135. highlight-current-row="true"
  136. @row-dblclick="ExcelShow"
  137. style="width: 100%;height: 36vh" border tooltip-effect="dark" :data="jstableData" row-key="ID" @selection-change="handleSelectionChange">
  138. <el-table-column align="left" label="关联编号" prop="关联编号" width="115"/>
  139. <el-table-column align="left" label="备注" prop="附件备注" width="110"/>
  140. <el-table-column align="left" label="文件类型" prop="附件类型" width="100"/>
  141. <el-table-column align="left" label="建档时间" prop="sys_rq" width="160"/>
  142. <el-table-column align="left" label="建档用户" prop="sys_id" width="200"/>
  143. </el-table>
  144. </el-tab-pane>
  145. </el-tabs>
  146. </el-row>
  147. </el-main>
  148. </layout-content>
  149. <div class="dialog-footer" style="text-align: left;margin-right: 60px;">
  150. <el-button type="primary" @click="add_Dialog" id="add_Dialog" :disabled="add_Dialogonclick === false" style="width: 110px;height: 60px;font-size: 20px;margin-left: 20px;">报工</el-button>
  151. <el-button type="primary" @click="gd_yulan" style="width: 100px;height: 60px;font-size: 20px;">订单表预览</el-button>
  152. </div>
  153. </div>
  154. <!-- </el-main> -->
  155. </layout-content>
  156. </layout>
  157. <!-- 技术附件预览弹窗 -->
  158. <el-dialog v-model="luckyexcelVisible" :before-close="luckyexcelCloseDialog" width="100%" top="0vh">
  159. <div id="luckyexcel" style="width: 100%;height: 100vh;"></div>
  160. </el-dialog>
  161. <PrintPage ref="printPageRef" />
  162. </div>
  163. </template>
  164. <script>
  165. export default {
  166. data() {
  167. return {
  168. currentTable: '', // 当前展示的表格
  169. activeName: 'first',
  170. };
  171. },
  172. methods: {
  173. handleKeyDown(event, prevId, currentId, nextId) {
  174. const currentElement = document.getElementById(currentId);
  175. const isEmpty = currentElement.value === '';
  176. const atStart = currentElement.selectionStart === 0;
  177. const atEnd = currentElement.selectionStart === currentElement.value.length;
  178. switch (event.keyCode) {
  179. case 13: // Enter
  180. case 40: // 向下箭头
  181. if (nextId) {
  182. document.getElementById(nextId).focus();
  183. }
  184. break;
  185. case 38: // 向上箭头
  186. if (prevId) {
  187. document.getElementById(prevId).focus();
  188. }
  189. break;
  190. case 8: // 删除键
  191. if (prevId && (isEmpty || atStart)) {
  192. document.getElementById(prevId).focus();
  193. }
  194. break;
  195. case 37: // 向左箭头
  196. if (prevId && atStart) {
  197. document.getElementById(prevId).focus();
  198. }
  199. break;
  200. case 39: // 向右箭头
  201. if (nextId && atEnd) {
  202. document.getElementById(nextId).focus();
  203. }
  204. break;
  205. default:
  206. break;
  207. }
  208. },
  209. },
  210. };
  211. </script>
  212. <script setup>
  213. // 全量引入格式化工具 请按需保留
  214. import $script from 'scriptjs'
  215. import $ from 'jquery';
  216. import LuckyExcel from 'luckyexcel';
  217. import { Layout, LayoutSider, LayoutContent } from '@arco-design/web-vue';
  218. import {hiprint} from "vue-plugin-hiprint";
  219. import {ref, reactive,nextTick,watch, setBlockTracking } from 'vue'
  220. import {getSpotList,search,getTab,OrderAttachments,getTabByGdbh } from '@/api/mes/job'
  221. import {getMachineMac} from '@/api/jixiaoguanli/jitairibaobiao'
  222. import {getMac} from '@/api/jixiaoguanli/baogong'
  223. import PrintPage from '../yunyin/shengchanguanli/components/print.vue';
  224. import {ElMessage} from "element-plus";
  225. import { get } from 'scriptjs';
  226. import { useUserStore } from '@/pinia/modules/user';
  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. const printPageRef = ref()
  244. //全局获取code,接口接收code
  245. const _code = '大烫'
  246. //全局接口接受的物理地址
  247. const Machine = ref('')
  248. //全局获取UniqId
  249. const UniqId = ref('')
  250. //全局获取工序
  251. const _gx = '5'
  252. //全局获取工序名称
  253. const _gxmc = _code
  254. const add_formData = reactive({
  255. 机台号: '',
  256. 工序: '',
  257. 组别: '',
  258. 人员: '',
  259. 尺码: '',
  260. 数量: '',
  261. 剩余数量: '',
  262. 上报数量:'',
  263. 是否订单尾包: '',
  264. });
  265. //物理地址获取机台编号
  266. const getMachineMacdata = async () => {
  267. console.log(_code,"机台获取物理地址",Machine.value)
  268. try {
  269. const data = await getMachineMac({sys_sbID:Machine.value});
  270. if (data.data === null) {
  271. ElMessage({
  272. type: 'error',
  273. message: '未获取到机台编号请确认MAC地址或与管理员联系'
  274. })
  275. return;
  276. }
  277. add_formData['机台号'] = data.data['机台号']
  278. add_formData['工序'] = data.data['生产工序']
  279. add_formData['组别'] = data.data['组别']
  280. add_formData['人员'] = data.data['组长']
  281. setTimeout(() => {
  282. const inputElement = document.getElementById('searchInput');
  283. if (inputElement) {
  284. inputElement.focus();
  285. }
  286. }, 100); // 延迟100毫秒
  287. } catch (error) {
  288. console.error(error)
  289. }
  290. }
  291. //自动获取物理地址
  292. const GetAddr = () => {
  293. var xmlhttp = null;
  294. var res;
  295. if (window.XMLHttpRequest) {
  296. xmlhttp = new XMLHttpRequest();
  297. } else if (window.ActiveXObject) {
  298. xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  299. }
  300. // 2. 设置回调函数
  301. xmlhttp.onreadystatechange = function() {
  302. if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
  303. res = eval('('+xmlhttp.response+')');
  304. let result = ''
  305. for (let i = 0; i < res.macAddress.length; i++) {
  306. if (i % 2 === 0 && i !== 0) {
  307. result += '-' // 根据实际需求修改分隔符
  308. }
  309. result += res.macAddress[i]
  310. }
  311. Machine.value = result
  312. getMachineMacdata(Machine.value)
  313. }
  314. }
  315. // 3. 打开一个连接
  316. xmlhttp.open("get", "http://127.0.0.1:8090/init")
  317. // 5. 发送
  318. xmlhttp.send();
  319. }
  320. // getMachineMacdata();
  321. GetAddr()
  322. //搜索
  323. const add_searchInfo = ref('')
  324. //表格
  325. const add_tableData = reactive([]);
  326. //尾包选中值
  327. const activeButtonValue = ref('')
  328. //代表扫描两次自动保存
  329. const searcs = ref('')
  330. const _order = ref('')
  331. //技术附件
  332. const jstableData = reactive([])
  333. const ddtableData = reactive([])
  334. const _list = ref('')
  335. // 查询按钮
  336. const add_onSubmit = async ()=>{
  337. if(add_formData['机台号'] === ''){
  338. ElMessage({type: 'warning',message: '未获取到机台'})
  339. return false;
  340. }
  341. if(add_searchInfo.value === '' || add_searchInfo.value === undefined){
  342. const WorkListdata = [];
  343. add_tableData.splice(0,add_tableData.length,...WorkListdata);
  344. ElMessage({type: 'warning',message: '请扫描小票二维码' })
  345. return false;
  346. }
  347. setTimeout(() => {
  348. const inputElement = document.getElementById('s_num');
  349. if (inputElement) {
  350. inputElement.focus();
  351. }
  352. }, 100);
  353. _order.value = add_searchInfo.value;
  354. //获取下面报工历史记录
  355. const getSpotLists = await getSpotList({order:add_searchInfo.value,code:_code,sys_sbID:add_formData['机台号']});
  356. console.log(getSpotLists)
  357. if(getSpotLists.data === null){
  358. add_searchInfo.value = ''
  359. add_formData['尺码'] = ''
  360. add_formData['总数量'] = ''
  361. add_formData['剩余数量'] = ''
  362. setTimeout(() => {
  363. const inputElement = document.getElementById('searchInput');
  364. if (inputElement) {
  365. inputElement.focus();
  366. }
  367. }, 100);
  368. }
  369. activeButtonValue.value = getSpotLists.data.result.wb
  370. UniqId.value = getSpotLists.data.result.UniqId
  371. _list.value = getSpotLists.data.result
  372. add_formData['尺码'] = getSpotLists.data.result.cm
  373. add_formData['总数量'] = getSpotLists.data.result.sl
  374. add_formData['剩余数量'] = getSpotLists.data.result.ci_num
  375. add_tableData.splice(0,add_tableData.length,...getSpotLists.data.records);
  376. //xlsx附件
  377. const searchValue = add_searchInfo.value.split('-')[0];
  378. const jsOrderAttachments = await OrderAttachments({order:searchValue,desc:'技术附件'})
  379. const ddOrderAttachments = await OrderAttachments({order:searchValue,desc:'订单资料附件'})
  380. jstableData.splice(0,jsOrderAttachments.data.length,...jsOrderAttachments.data);
  381. ddtableData.splice(0,ddOrderAttachments.data.length,...ddOrderAttachments.data);
  382. }
  383. //订单资料excel展示
  384. const gdbomupdateCompanyFunc = (row) =>{
  385. // 加载插件和样式
  386. const loadScriptsAndStyles = () => {
  387. $.getScript('/luckysheet/plugins/js/plugin.js', () => {
  388. $script('/luckysheet/luckysheet.umd.js', () => {
  389. initializeLuckysheet();
  390. });
  391. });
  392. const styles = [
  393. '/luckysheet/plugins/css/pluginsCss.css',
  394. '/luckysheet/plugins/plugins.css',
  395. '/luckysheet/css/luckysheet.css',
  396. '/luckysheet/assets/iconfont/iconfont.css'
  397. ];
  398. styles.forEach(style => {
  399. $('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', style));
  400. });
  401. };
  402. // 初始化 Luckysheet
  403. const initializeLuckysheet = () => {
  404. const callback = (exportJson, luckysheetfile) => {
  405. if (!exportJson.sheets || exportJson.sheets.length === 0) {
  406. alert("Failed to read the content of the excel file, currently does not support xls files!");
  407. return;
  408. }
  409. if (luckyExcel) luckyExcel.destroy();
  410. luckysheet.create({
  411. container: 'luckyexcel',
  412. data: exportJson.sheets,
  413. title: exportJson.info.name,
  414. lang: "zh",
  415. showtoolbar: false,
  416. showinfobar: false,
  417. allowEdit: false,
  418. enableAddRow: false,
  419. enableAddCol: false,
  420. userInfo: false,
  421. showRowBar: false,
  422. showColumnBar: false,
  423. sheetFormulaBar: false,
  424. enableAddBackTop: false,
  425. });
  426. luckyExcel = luckysheet;
  427. };
  428. if (row['url'] === null || row['url'] === '') {
  429. const blob = dataURLtoBlob(row.附件内容);
  430. luckyexcelVisible.value = true;
  431. LuckyExcel.transformExcelToLucky(blob, callback);
  432. } else {
  433. const excelPath = `/${row.url.replace(/\\/g, "/")}`;
  434. const excelName = excelPath.split('/').pop();
  435. luckyexcelVisible.value = true;
  436. LuckyExcel.transformExcelToLuckyByUrl(excelPath, excelName, callback);
  437. }
  438. };
  439. // Data URL 转 Blob
  440. const dataURLtoBlob = (dataUrl) => {
  441. const byteString = atob(dataUrl.split(',')[1]);
  442. const ab = new ArrayBuffer(byteString.length);
  443. const ia = new Uint8Array(ab);
  444. for (let i = 0; i < byteString.length; i++) {
  445. ia[i] = byteString.charCodeAt(i);
  446. }
  447. return new Blob([ab], { type: 'application/octet-stream' });
  448. };
  449. loadScriptsAndStyles();
  450. }
  451. //技术资料excel展示
  452. const ExcelShow = (row) =>{
  453. // 加载插件和样式
  454. const loadScriptsAndStyles = () => {
  455. $.getScript('/luckysheet/plugins/js/plugin.js', () => {
  456. $script('/luckysheet/luckysheet.umd.js', () => {
  457. initializeLuckysheet();
  458. });
  459. });
  460. const styles = [
  461. '/luckysheet/plugins/css/pluginsCss.css',
  462. '/luckysheet/plugins/plugins.css',
  463. '/luckysheet/css/luckysheet.css',
  464. '/luckysheet/assets/iconfont/iconfont.css'
  465. ];
  466. styles.forEach(style => {
  467. $('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', style));
  468. });
  469. };
  470. // 初始化 Luckysheet
  471. const initializeLuckysheet = () => {
  472. const callback = (exportJson, luckysheetfile) => {
  473. if (!exportJson.sheets || exportJson.sheets.length === 0) {
  474. alert("Failed to read the content of the excel file, currently does not support xls files!");
  475. return;
  476. }
  477. if (luckyExcel) luckyExcel.destroy();
  478. luckysheet.create({
  479. container: 'luckyexcel',
  480. data: exportJson.sheets,
  481. title: exportJson.info.name,
  482. lang: "zh",
  483. showtoolbar: false,
  484. showinfobar: false,
  485. allowEdit: false,
  486. enableAddRow: false,
  487. enableAddCol: false,
  488. userInfo: false,
  489. showRowBar: false,
  490. showColumnBar: false,
  491. sheetFormulaBar: false,
  492. enableAddBackTop: false,
  493. });
  494. luckyExcel = luckysheet;
  495. };
  496. if (row['url'] === null || row['url'] === '') {
  497. const blob = dataURLtoBlob(row.附件内容);
  498. luckyexcelVisible.value = true;
  499. LuckyExcel.transformExcelToLucky(blob, callback);
  500. } else {
  501. const excelPath = `/${row.url.replace(/\\/g, "/")}`;
  502. const excelName = excelPath.split('/').pop();
  503. luckyexcelVisible.value = true;
  504. LuckyExcel.transformExcelToLuckyByUrl(excelPath, excelName, callback);
  505. }
  506. };
  507. // Data URL 转 Blob
  508. const dataURLtoBlob = (dataUrl) => {
  509. const byteString = atob(dataUrl.split(',')[1]);
  510. const ab = new ArrayBuffer(byteString.length);
  511. const ia = new Uint8Array(ab);
  512. for (let i = 0; i < byteString.length; i++) {
  513. ia[i] = byteString.charCodeAt(i);
  514. }
  515. return new Blob([ab], { type: 'application/octet-stream' });
  516. };
  517. loadScriptsAndStyles();
  518. }
  519. let luckyExcel = null
  520. const luckyexcelVisible = ref(false)
  521. const luckyexcelCloseDialog = () => {
  522. luckyexcelVisible.value = false
  523. }
  524. const AttendanceVisible=ref(false)
  525. //清空对象的属性值
  526. const gd_clearFormData = () => {
  527. Object.keys(add_formData).forEach(key => {
  528. add_formData[key] = '';
  529. });
  530. };
  531. const add_Dialogonclick = ref(false)
  532. //获取input事件
  533. function baogongslpd() {
  534. // 将字符串转换为数字
  535. const reportedQuantity = parseInt(add_formData['上报数量'], 10) || 0;
  536. const totalQuantity = parseInt(add_formData['剩余数量'], 10) || 0;
  537. if (reportedQuantity > totalQuantity) {
  538. ElMessage({ type: 'warning', message: '上报数量不能大于剩余数量' });
  539. add_Dialogonclick.value = false;
  540. }else if(reportedQuantity === ''){
  541. add_Dialogonclick.value = false;
  542. } else {
  543. add_Dialogonclick.value = true;
  544. }
  545. }
  546. const currentSlValue=ref('')
  547. //报工
  548. const add_Dialog = async ()=>{
  549. console.log(UniqId.value)
  550. if(add_formData['上报数量'] === ''){
  551. ElMessage({type: 'warning',message: '上报数量为空,请填写上报数量'})
  552. return;
  553. }
  554. if(_order.value === ''){
  555. ElMessage({type: 'warning',message: '请重新扫描小票二维码'})
  556. return;
  557. }else{
  558. let params ={}
  559. params.code = _code
  560. params.order = _order.value.split(',')[0].split('-')[0]
  561. params.order_id = _order.value.split(',')[0]
  562. params.gx = _gx
  563. params.gxmc = _gxmc
  564. params.cm = _order.value.split(',')[3]
  565. params.sl = _order.value.split(',')[4]
  566. params.sczl_jtbh = add_formData['机台号']
  567. params.sczl_bh = add_formData['组别']
  568. params.wb = _order.value.split(',')[5]
  569. params.sys_id = add_formData['人员']
  570. params.UniqId = UniqId.value
  571. params.s_num = add_formData['上报数量']
  572. params.ci_num = add_formData['剩余数量']
  573. console.log(params)
  574. // 记录每一次上报数据信息日志
  575. // let datalog = {};
  576. // datalog.code = _code;
  577. // datalog.订单编号 = _list.value.订单编号;
  578. // datalog.子订单编号 = _list.value.order;
  579. // datalog.款号 = _list.value.生产款号;
  580. // datalog.款式 = _list.value.款式;
  581. // datalog.颜色 = _list.value.颜色;
  582. // datalog.上报时间 = currentDate;
  583. // datalog.上报数量 = add_formData['上报数量'];
  584. // // 记录总实裁数
  585. // datalog.sctotal = _list.value.sctotal;
  586. // datalog.zdtotal = _list.value.zdtotal;
  587. // datalog['组别'] = add_formData['组别'];
  588. // console.log(_list)
  589. // console.log(datalog)
  590. // const getTabByGdbhs = await getTabByGdbh(datalog);
  591. // return false;
  592. const cf_gettab = await search(params); // 调用search函数
  593. if (cf_gettab.code === 0) {
  594. // const firstPart = add_searchInfo.value.split(',')[0];
  595. //上报后历史记录表格刷新
  596. const lsjltable = await getTab({order_id:_order.value.split(',')[0],sczl_jtbh:add_formData['机台号']});
  597. add_tableData.splice(0,add_tableData.length,...lsjltable.data.records);
  598. // //上报后刷新表格数据
  599. // const getSpotLists = await getSpotList({order:_order.value.split(',')[0],code:_code,sys_sbID:sys_sbID});
  600. // add_tableData.splice(0,add_tableData.length,...getSpotLists.data.records);
  601. add_searchInfo.value = '';
  602. setTimeout(() => {
  603. const inputElement = document.getElementById('searchInput');
  604. if (inputElement) {
  605. inputElement.focus();
  606. }
  607. }, 100); // 延迟100毫秒
  608. // searcs.value = '';
  609. add_formData['尺码']=''
  610. add_formData['总数量']=''
  611. add_formData['上报数量']=''
  612. add_formData['剩余数量']=''
  613. // searcs.value = 1;
  614. add_searchInfo.value = ''
  615. ElMessage({type: 'success', message: '报工成功'});
  616. }
  617. }
  618. }
  619. const gd_yulan = () => {
  620. if(_order.value === '' || _order.value === null){
  621. ElMessage({type: 'warning',message: '请选择具体的工单后,再操作此功能'})
  622. return false;
  623. }else{
  624. const order = _order.value.split('-')[0]
  625. printPageRef.value.open(order)
  626. }
  627. }
  628. //单击
  629. const add_tableRowClick = async (row) => {
  630. const orderString = `${row['子订单编号']},${row['组别']},3,${row['尺码']},${row['数量']},${row['尾包']}`;
  631. add_formData['尺码'] = row.尺码
  632. add_formData['总数量'] = row.数量
  633. add_formData['剩余数量'] = row.剩余数量
  634. _order.value = orderString
  635. console.log(row)
  636. }
  637. //双击
  638. const add_updateCompanyFunc = async (row) => {
  639. }
  640. //右键
  641. const handleRightClick = async (row) => {
  642. }
  643. //复选框
  644. const add_xpSelectionChange = async (selection) => {
  645. console.log(selection.length)
  646. selectedRows.value = selection;
  647. if (selection.length === 0) {
  648. ElMessage({type: 'warning', message: '请勾选打印的数据' });
  649. return false;
  650. }else if(selection.length>0){
  651. allPrintData.value = selection.map((row) => {
  652. let weibao = row['是否尾包'] === '是' ? 1 : 0;
  653. const ewm = `${row['订单子编号']},01,${row['尺码']},${row['数量']},${weibao}`;
  654. return {
  655. emm: ewm,
  656. zddbh: row['子订单编号'],
  657. kh: row['款号'],
  658. pm: row['款式'],
  659. ys: row['颜色'],
  660. cm: row['尺码'],
  661. sl: row['数量'],
  662. zb: row['组别'],
  663. dyrq: currentDates,
  664. wb: row['尾包']
  665. };
  666. });
  667. }else{
  668. allPrintData.value = [];
  669. }
  670. console.log(allPrintData.value)
  671. }
  672. // =========== 删除按钮 ===========
  673. //记录复选框的值
  674. const bgSelection = ref(null)
  675. const baogong_del = () => {
  676. if(bgSelection.value === null || bgSelection.value === ''){
  677. ElMessage({type: 'warning',message: '请选择删除的数据' })
  678. }else{
  679. console.log(bgSelection.value)
  680. }
  681. }
  682. // 保存当前选中的行数据
  683. const table_selectrows = ref([]);
  684. // 表格复选框选中变化时触发
  685. const table_SelectionChange = (val) => {
  686. table_selectrows.value = val; // 将选中的行数据保存到 table_selectrows
  687. }
  688. // =========== 分页 ===========
  689. // 分页相关的响应式变量
  690. const page = ref(1)
  691. const total = ref(0)
  692. const pageSize = ref(10)
  693. // 分页
  694. const handleCurrentChange = (val) => {
  695. page.value = val;
  696. _getStaffList();
  697. };
  698. // 修改页面容量 点击多少条/页
  699. const handleSizeChange = (val) => {
  700. page.value = 10;//默认显示
  701. pageSize.value = val;
  702. _getStaffList();
  703. };
  704. </script>
  705. <style scoped>
  706. .form-container {
  707. display: flex;
  708. flex-wrap: wrap;
  709. }
  710. .form-column {
  711. /*flex: 1;*/
  712. margin-right: 15px; /* 调整列之间的间距 */
  713. }
  714. /* 左侧输入框宽度调整 */
  715. .form-column .el-form-item .el-input {
  716. width: 150px; /* 调整左侧输入框的宽度 */
  717. }
  718. /* 媒体查询,根据需要调整断点 */
  719. @media screen and (max-width: 768px) {
  720. .form-column {
  721. flex: 1 0 100%; /* 在小屏幕下变成单列布局 */
  722. margin-right: 0;
  723. }
  724. }
  725. /* 表格复选框大小调整 */
  726. :deep(.el-checkbox.el-checkbox--small .el-checkbox__inner) {
  727. width: 30px; /* 复选框宽度 */
  728. height: 20px; /* 复选框高度 */
  729. }
  730. :deep(.el-checkbox.el-checkbox--small.is-checked .el-checkbox__inner::after) {
  731. transform: scale(1.2) rotate(45deg); /* 调整选中后的对勾大小 */
  732. top: 5%; /* 调整对勾位置 */
  733. left: 40%; /* 调整对勾位置 */
  734. width: 5px; /* 调整对勾宽度 */
  735. height: 9px; /* 调整对勾高度 */
  736. }
  737. /*:deep(.el-table td .cell) {*/
  738. /* line-height: 30px !important;*/
  739. /*}*/
  740. .JKWTree-container {
  741. display: flex;
  742. }
  743. .JKWTree-tree {
  744. /*width: 300px;*/
  745. background-color: #fff;
  746. padding: 10px;
  747. margin-right: 20px;
  748. }
  749. .JKWTree-tree h3 {
  750. font-size: 15px;
  751. font-weight: 700;
  752. margin: 10px 0;
  753. }
  754. .JKWTree-content {
  755. flex: 1;
  756. }
  757. /* 图片上传 */
  758. .upload-box {
  759. width: 200px;
  760. height: 200px;
  761. border: 2px dashed #e2e2e2;
  762. display: flex;
  763. justify-content: center;
  764. align-items: center;
  765. position: relative;
  766. cursor: pointer;
  767. }
  768. .uploaded-image {
  769. width: 100%;
  770. height: 100%;
  771. object-fit: cover;
  772. }
  773. .upload-icon {
  774. font-size: 40px;
  775. color: #c0c4cc;
  776. }
  777. .file-input {
  778. display: none;
  779. }
  780. .el-table .warning-row {
  781. background: oldlace;
  782. }
  783. /* 选中某行时的背景色 */
  784. :deep(.el-table__body tr.current-row) > td {
  785. background: #ff80ff !important;
  786. }
  787. </style>
  788. <style scoped>
  789. :deep(.el-table td .cell) {
  790. line-height: 20px !important;
  791. }
  792. :deep(.el-tabs__header){
  793. margin-bottom: 0;
  794. }
  795. .search{
  796. margin-left: 0px !important;
  797. margin-right: 10px !important;
  798. }
  799. .bt{
  800. margin-left: 2px !important;
  801. padding: 3px !important;
  802. font-size: 12px;
  803. }
  804. .el-tabs__header{
  805. margin: 0px !important;
  806. }
  807. .gva-table-box{
  808. padding: 0px !important;
  809. margin-left: -10px !important;
  810. }
  811. .mab{
  812. margin-bottom: 5px;
  813. }
  814. /* 点击按钮改变颜色 */
  815. .active-button {
  816. background-color: #ff0000;
  817. }
  818. .default-button {
  819. background-color: #808080;
  820. }
  821. /* 搜索样式 */
  822. ::v-deep .el-input__wrapper #searchInput {
  823. font-size: 16px;
  824. }
  825. ::v-deep .el-input__wrapper #jitaihao {
  826. font-size: 18px;
  827. }
  828. ::v-deep .el-input__wrapper #gongxu {
  829. font-size: 18px;
  830. }
  831. ::v-deep .el-input__wrapper #zubie {
  832. font-size: 18px;
  833. }
  834. ::v-deep .el-input__wrapper #renyuan {
  835. font-size: 18px;
  836. }
  837. ::v-deep .el-input__wrapper #shuliang {
  838. font-size: 18px;
  839. color: red;
  840. }
  841. ::v-deep .el-input__wrapper #chima {
  842. font-size: 18px;
  843. }
  844. ::v-deep .el-input__wrapper #sbsl {
  845. font-size: 18px;
  846. color: red;
  847. }
  848. </style>