index.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  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. >
  18. <template #menu-right="{}">
  19. <el-button
  20. class="ml-3"
  21. @click="
  22. data1.Utils.exportData('/api/v1/process/census/outputInfo/export')
  23. "
  24. >
  25. <template #icon> <i-ep-download /> </template>导出
  26. </el-button>
  27. </template>
  28. </avue-crud>
  29. </div>
  30. </template>
  31. <script setup>
  32. import { ref, getCurrentInstance } from "vue";
  33. import { useCrud } from "@/hooks/userCrud";
  34. import { useCommonStoreHook, useDictionaryStore } from "@/store";
  35. import dictDataUtil from "@/common/configs/dictDataUtil";
  36. import editSkill from "@/views/base/skill/components/edit-skill.vue";
  37. import { getEchartData } from "@/api/report";
  38. import * as echarts from "echarts";
  39. // 数据字典相关
  40. const { dicts } = useDictionaryStore();
  41. const editDialog = ref({ visible: false, title: "订单详情" });
  42. const key = ref(false);
  43. // const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
  44. // useCrud({
  45. // src: "/api/v1/process/census/completeOrder",
  46. // });
  47. // ;
  48. const data1 = ref(
  49. useCrud({
  50. src: "/api/v1/process/census/outputInfo",
  51. })
  52. );
  53. const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
  54. data1.value.Methords;
  55. const { selectionChange, multipleDelete } = data1.value.Methords;
  56. // 设置表格列或者其他自定义的option
  57. data1.value.option = Object.assign(data1.value.option, {
  58. selection: false,
  59. menuWidth: 100,
  60. addBtn: false,
  61. filterBtn: false,
  62. searchShowBtn: false,
  63. columnBtn: false,
  64. gridBtn: false,
  65. editBtn: false,
  66. viewBtn: false,
  67. delBtn: false,
  68. column: [
  69. {
  70. label: "日期范围",
  71. prop: "searchTime",
  72. search: true,
  73. hide: true,
  74. type: "date",
  75. format: "YYYY-MM-DD",
  76. valueFormat: "YYYY-MM-DD",
  77. searchRange: true,
  78. startPlaceholder: "开始日期",
  79. endPlaceholder: "结束日期",
  80. },
  81. {
  82. label: "订单编码",
  83. prop: "orderCode",
  84. overHidden: true,
  85. search: true,
  86. editDisabled: true,
  87. hide: true,
  88. },
  89. {
  90. label: "订单名称",
  91. prop: "orderName",
  92. overHidden: true,
  93. search: true,
  94. editDisabled: true,
  95. hide: true,
  96. },
  97. {
  98. label: "物料编码",
  99. prop: "materialCode",
  100. overHidden: true,
  101. search: true,
  102. editDisabled: true,
  103. hide: true,
  104. },
  105. {
  106. label: "工单编码",
  107. prop: "workOrderCode",
  108. width: 140,
  109. overHidden: true,
  110. search: true,
  111. editDisabled: true,
  112. hide: true,
  113. },
  114. {
  115. label: "报工人员",
  116. prop: "userName",
  117. width: 140,
  118. overHidden: true,
  119. search: true,
  120. editDisabled: true,
  121. hide: true,
  122. },
  123. {
  124. label: "工序code",
  125. prop: "operationCode",
  126. width: 140,
  127. overHidden: true,
  128. search: true,
  129. editDisabled: true,
  130. hide: true,
  131. },
  132. {
  133. label: "订单名称",
  134. prop: "orderName",
  135. search: false,
  136. },
  137. {
  138. label: "订单编码",
  139. prop: "orderCode",
  140. search: false,
  141. },
  142. {
  143. label: "工单编码",
  144. prop: "workOrderCode",
  145. search: false,
  146. },
  147. {
  148. label: "物料编码",
  149. prop: "materialCode",
  150. search: false,
  151. },
  152. {
  153. label: "物料名称",
  154. prop: "materialName",
  155. search: false,
  156. },
  157. {
  158. label: "物料规格",
  159. prop: "materialModel",
  160. search: false,
  161. },
  162. {
  163. label: "工序编码",
  164. prop: "operationCode",
  165. search: false,
  166. },
  167. {
  168. label: "工序名称",
  169. prop: "operationName",
  170. search: false,
  171. },
  172. {
  173. label: "工位",
  174. prop: "stationName",
  175. search: false,
  176. },
  177. {
  178. label: "WIN码",
  179. prop: "seqNo",
  180. search: false,
  181. },
  182. {
  183. label: "开始时间",
  184. prop: "realStartWhen",
  185. search: false,
  186. },
  187. {
  188. label: "结束时间",
  189. prop: "realEndWhen",
  190. search: false,
  191. },
  192. {
  193. label: "标准用时(秒)",
  194. prop: "standardWorktime",
  195. search: false,
  196. },
  197. {
  198. label: "总共用时(秒)",
  199. prop: "totalTime",
  200. search: false,
  201. },
  202. {
  203. label: "人员占比",
  204. prop: "userTime",
  205. search: false,
  206. },
  207. ],
  208. });
  209. const getCurrentMonthStartAndEndDates = () => {
  210. // 获取当前日期
  211. let now = new Date();
  212. // 获取当前月份的第一天
  213. let startDate = new Date(now.getFullYear(), now.getMonth(), 1);
  214. // 获取当前月份的最后一天
  215. let endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0);
  216. // 格式化日期为'YYYY-MM-DD'格式
  217. function formatDate(date) {
  218. let year = date.getFullYear();
  219. let month = String(date.getMonth() + 1).padStart(2, "0");
  220. let day = String(date.getDate()).padStart(2, "0");
  221. return `${year}-${month}-${day}`;
  222. }
  223. // 返回包含开始和结束日期的数组
  224. return [formatDate(startDate), formatDate(endDate)];
  225. };
  226. //设置搜索条件中的时间范围为默认此月
  227. const setTime = () => {
  228. data1.value.search.searchTime = getCurrentMonthStartAndEndDates();
  229. };
  230. onMounted(async () => {
  231. setTime();
  232. dataList();
  233. });
  234. </script>
  235. <style lang="scss" scoped>
  236. :deep(.avue-crud__left) {
  237. width: 100%;
  238. }
  239. </style>