baozhuangbaogong.vue 30 KB

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