index.vue 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362
  1. <template>
  2. <div class="mainContentBox">
  3. <avue-crud
  4. ref="crudRef1"
  5. v-model:search="data1.search"
  6. :data="data1.data"
  7. :option="data1.option"
  8. v-model:page="data1.page"
  9. @row-save="createRow"
  10. @row-update="updateRow"
  11. @row-del="deleteRow"
  12. @search-change="searchChange"
  13. @search-reset="resetChange"
  14. @size-change="dataList"
  15. @current-change="dataList"
  16. @selection-change="selectionChange"
  17. @cell-click="ckickCell"
  18. >
  19. <template #menu="{ row, index, type }">
  20. <el-button
  21. @click="ckickCell(row)"
  22. icon="el-icon-view"
  23. text
  24. type="primary"
  25. >查看</el-button
  26. >
  27. </template>
  28. <template #menu-right="{}">
  29. <el-button
  30. class="ml-3"
  31. @click="
  32. data1.Utils.exportData(
  33. '/api/v1/process/census/abnormalOperation/export'
  34. )
  35. "
  36. >
  37. <template #icon> <i-ep-download /> </template>导出
  38. </el-button>
  39. </template>
  40. </avue-crud>
  41. <el-dialog
  42. v-model="editDialog.visible"
  43. :title="editDialog.title"
  44. width="1200px"
  45. @close="editDialog.visible = false"
  46. >
  47. <div class="mainContentBox">
  48. <avue-crud
  49. ref="crudRef2"
  50. v-model:search="data2.search"
  51. :data="data2.data"
  52. :option="data2.option"
  53. v-model:page="data2.page"
  54. @row-update="data2.Methords.updateRow"
  55. @row-del="data2.Methords.deleteRow"
  56. @search-change="data2.Methords.dataList"
  57. @search-reset="data2.Methords.resetChange"
  58. @size-change="data2.Methords.dataList"
  59. @current-change="data2.Methords.dataList"
  60. @selection-change="data2.Methords.selectionChange"
  61. >
  62. <template #menu-right="{}">
  63. <el-button
  64. class="ml-3"
  65. @click="
  66. data2.Utils.exportData(
  67. '/api/v1/process/census/abnormalOperationDetails/export'
  68. )
  69. "
  70. >
  71. <template #icon> <i-ep-download /> </template>导出
  72. </el-button>
  73. </template></avue-crud
  74. >
  75. </div>
  76. </el-dialog>
  77. </div>
  78. </template>
  79. <script setup>
  80. import { ref, getCurrentInstance } from "vue";
  81. import { useCrud } from "@/hooks/userCrud";
  82. import { useCommonStoreHook, useDictionaryStore } from "@/store";
  83. import dictDataUtil from "@/common/configs/dictDataUtil";
  84. import editSkill from "@/views/base/skill/components/edit-skill.vue";
  85. import { getEchartData } from "@/api/report";
  86. import * as echarts from "echarts";
  87. // 数据字典相关
  88. const { dicts } = useDictionaryStore();
  89. const editDialog = ref({ visible: false, title: "订单详情" });
  90. const key = ref(false);
  91. // const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
  92. // useCrud({
  93. // src: "/api/v1/process/census/completeOrder",
  94. // });
  95. // ;
  96. const data1 = ref(
  97. useCrud({
  98. src: "/api/v1/process/census/abnormalOperation",
  99. })
  100. );
  101. const data2 = ref(
  102. useCrud({
  103. src: "/api/v1/process/census/abnormalOperationDetails",
  104. })
  105. );
  106. const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
  107. data1.value.Methords;
  108. const { selectionChange, multipleDelete } = data1.value.Methords;
  109. const ckickCell = (row) => {
  110. data2.value.search.workOrderCode = row.workOrderCode;
  111. data2.value.search.operationCode = row.operationCode;
  112. data2.value.search.searchTime = data1.value.search.searchTime;
  113. editDialog.value.visible = true;
  114. };
  115. // 设置表格列或者其他自定义的option
  116. data1.value.option = Object.assign(data1.value.option, {
  117. selection: false,
  118. menu: true,
  119. menuWidth: 100,
  120. addBtn: false,
  121. filterBtn: false,
  122. searchShowBtn: false,
  123. columnBtn: false,
  124. gridBtn: false,
  125. editBtn: false,
  126. viewBtn: false,
  127. delBtn: false,
  128. column: [
  129. {
  130. label: "日期范围",
  131. prop: "searchTime",
  132. search: true,
  133. hide: true,
  134. type: "date",
  135. format: "YYYY-MM-DD",
  136. valueFormat: "YYYY-MM-DD",
  137. searchRange: true,
  138. startPlaceholder: "开始日期",
  139. endPlaceholder: "结束日期",
  140. },
  141. {
  142. label: "订单编码",
  143. prop: "orderCode",
  144. overHidden: true,
  145. search: true,
  146. editDisabled: true,
  147. hide: true,
  148. },
  149. {
  150. label: "订单名称",
  151. prop: "orderName",
  152. overHidden: true,
  153. search: true,
  154. editDisabled: true,
  155. hide: true,
  156. },
  157. {
  158. label: "物料编码",
  159. prop: "materialCode",
  160. overHidden: true,
  161. search: true,
  162. editDisabled: true,
  163. hide: true,
  164. },
  165. {
  166. label: "工单编码",
  167. prop: "workOrderCode",
  168. width: 140,
  169. overHidden: true,
  170. search: true,
  171. editDisabled: true,
  172. hide: true,
  173. },
  174. {
  175. label: "订单名称",
  176. prop: "orderName",
  177. search: false,
  178. },
  179. {
  180. label: "订单编码",
  181. prop: "orderCode",
  182. search: false,
  183. },
  184. {
  185. label: "工单编码",
  186. prop: "workOrderCode",
  187. search: false,
  188. },
  189. {
  190. label: "工单数量",
  191. prop: "planNum",
  192. search: false,
  193. },
  194. {
  195. label: "物料编码",
  196. prop: "materialCode",
  197. search: false,
  198. },
  199. {
  200. label: "物料名称",
  201. prop: "materialName",
  202. search: false,
  203. },
  204. {
  205. label: "物料规格",
  206. prop: "materialModel",
  207. search: false,
  208. },
  209. {
  210. label: "工序编码",
  211. prop: "operationCode",
  212. search: false,
  213. },
  214. {
  215. label: "工序名称",
  216. prop: "operationName",
  217. search: false,
  218. },
  219. {
  220. label: "异常数量",
  221. prop: "count",
  222. search: false,
  223. },
  224. ],
  225. });
  226. data2.value.option = Object.assign(data2.value.option, {
  227. selection: false,
  228. addBtn: false,
  229. filterBtn: false,
  230. searchShowBtn: false,
  231. menu: false,
  232. addBtn: false,
  233. filterBtn: false,
  234. searchShowBtn: false,
  235. columnBtn: false,
  236. gridBtn: false,
  237. editBtn: false,
  238. viewBtn: false,
  239. delBtn: false,
  240. column: [
  241. {
  242. label: "订单名称",
  243. prop: "orderName",
  244. search: false,
  245. },
  246. {
  247. label: "订单编码",
  248. prop: "orderCode",
  249. search: false,
  250. },
  251. {
  252. label: "工单编码",
  253. prop: "workOrderCode",
  254. search: false,
  255. },
  256. {
  257. label: "物料编码",
  258. prop: "materialCode",
  259. search: false,
  260. },
  261. {
  262. label: "物料名称",
  263. prop: "materialName",
  264. search: false,
  265. },
  266. {
  267. label: "物料规格",
  268. prop: "materialModel",
  269. search: false,
  270. },
  271. {
  272. label: "工序编码",
  273. prop: "operationCode",
  274. search: false,
  275. },
  276. {
  277. label: "工序名称",
  278. prop: "operationName",
  279. search: false,
  280. },
  281. {
  282. label: "工位",
  283. prop: "stationName",
  284. search: false,
  285. },
  286. {
  287. label: "管号",
  288. prop: "seqNo",
  289. search: false,
  290. },
  291. {
  292. label: "开始时间",
  293. prop: "realStartWhen",
  294. search: false,
  295. },
  296. {
  297. label: "结束时间",
  298. prop: "realEndWhen",
  299. search: false,
  300. },
  301. {
  302. label: "标准用时",
  303. prop: "standardWorktime",
  304. search: false,
  305. },
  306. {
  307. label: "总共用时",
  308. prop: "totalTime",
  309. search: false,
  310. },
  311. ],
  312. });
  313. const getCurrentMonthStartAndEndDates = () => {
  314. // 获取当前日期
  315. let now = new Date();
  316. // 获取当前月份的第一天
  317. let startDate = new Date(now.getFullYear(), now.getMonth(), 1);
  318. // 获取当前月份的最后一天
  319. let endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0);
  320. // 格式化日期为'YYYY-MM-DD'格式
  321. function formatDate(date) {
  322. let year = date.getFullYear();
  323. let month = String(date.getMonth() + 1).padStart(2, "0");
  324. let day = String(date.getDate()).padStart(2, "0");
  325. return `${year}-${month}-${day}`;
  326. }
  327. // 返回包含开始和结束日期的数组
  328. return [formatDate(startDate), formatDate(endDate)];
  329. };
  330. //设置搜索条件中的时间范围为默认此月
  331. const setTime = () => {
  332. data1.value.search.searchTime = getCurrentMonthStartAndEndDates();
  333. };
  334. onMounted(async () => {
  335. setTime();
  336. dataList();
  337. });
  338. watch(
  339. () => editDialog.value.visible,
  340. () => {
  341. if (editDialog.value.visible == true) {
  342. data2.value.Methords.dataList();
  343. } else {
  344. key.value = !key.value;
  345. }
  346. }
  347. );
  348. </script>
  349. <style lang="scss" scoped>
  350. :deep(.avue-crud__left) {
  351. width: 100%;
  352. }
  353. </style>