index.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. <template>
  2. <div class="mainContentBox">
  3. <avue-crud
  4. ref="crudRef"
  5. v-model:search="search"
  6. v-model="form"
  7. :data="data"
  8. :option="option"
  9. v-model:page="page"
  10. @row-save="createRow"
  11. @row-update="updateRow"
  12. @row-del="deleteRow"
  13. @search-change="searchChange"
  14. @search-reset="resetChange"
  15. @size-change="dataList"
  16. @current-change="dataList"
  17. @selection-change="selectionChange"
  18. >
  19. </avue-crud>
  20. </div>
  21. </template>
  22. <script setup>
  23. import { ref } from "vue";
  24. import { useCrud } from "@/hooks/userCrud";
  25. import dictDataUtil from "@/common/configs/dictDataUtil";
  26. import { queryStationByLineId } from "@/api/station";
  27. import { getUserList } from "@/api/system/user";
  28. import { useDictionaryStore } from "@/store";
  29. import { getStatistics } from "@/api/order/index";
  30. // 数据字典相关
  31. const { dicts } = useDictionaryStore();
  32. // 传入一个url,后面不带/
  33. const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
  34. useCrud({
  35. src: "/api/v1/plan/task/track",
  36. });
  37. const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
  38. Methords; //增删改查
  39. const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
  40. const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
  41. const crudRef = ref(null); //crudRef.value 获取avue-crud对象
  42. const stationList = ref([]);
  43. const userList = ref([]);
  44. const charts = shallowRef(null);
  45. onMounted(() => {
  46. dataList();
  47. });
  48. // 设置表格列或者其他自定义的option
  49. option.value = Object.assign(option.value, {
  50. selection: true,
  51. menu: false,
  52. menuWidth: 160,
  53. addBtn: false,
  54. filterBtn: false,
  55. searchShowBtn: false,
  56. columnBtn: false,
  57. gridBtn: false,
  58. editBtn: false,
  59. viewBtn: false,
  60. delBtn: false,
  61. column: [
  62. {
  63. label: "管号",
  64. prop: "seqNo",
  65. editDisabled: true,
  66. search: true,
  67. },
  68. {
  69. label: "工位名称",
  70. prop: "stationName",
  71. search: true,
  72. display: false,
  73. },
  74. {
  75. label: "工位名称",
  76. hide: true,
  77. editDisabled: false,
  78. type: "select",
  79. dicData: stationList,
  80. filterable: true,
  81. prop: "stationId",
  82. props: { label: "name", value: "id" },
  83. rules: [
  84. {
  85. required: true,
  86. message: "请选择工位名称",
  87. trigger: "blur",
  88. },
  89. ],
  90. },
  91. {
  92. label: "订单编码",
  93. prop: "orderCode",
  94. search: true,
  95. width: 125,
  96. editDisabled: true,
  97. },
  98. {
  99. label: "工单编码",
  100. prop: "workOrderCode",
  101. search: true,
  102. width: 125,
  103. editDisabled: true,
  104. },
  105. {
  106. label: "产线名称",
  107. prop: "productLineName",
  108. editDisabled: true,
  109. },
  110. {
  111. label: "工艺路线",
  112. prop: "routeName",
  113. editDisabled: true,
  114. },
  115. {
  116. label: "物料编号",
  117. prop: "materialCode",
  118. search: true,
  119. editDisabled: true,
  120. },
  121. {
  122. label: "物料名称",
  123. prop: "materialName",
  124. search: true,
  125. editDisabled: true,
  126. },
  127. {
  128. label: "物料规格",
  129. prop: "materialModel",
  130. editDisabled: true,
  131. },
  132. {
  133. label: "当前工序编码",
  134. prop: "operationCode",
  135. editDisabled: true,
  136. },
  137. {
  138. label: "当前工序名称",
  139. prop: "operationName",
  140. editDisabled: true,
  141. },
  142. {
  143. label: "排序",
  144. prop: "operationSort",
  145. editDisabled: true,
  146. width: 60,
  147. },
  148. {
  149. label: "状态",
  150. prop: "state",
  151. type: "select",
  152. width: 80,
  153. editDisabled: true,
  154. dicUrl:
  155. dictDataUtil.request_url + dictDataUtil.TYPE_CODE.station_task_state,
  156. props: {
  157. label: "dictLabel",
  158. value: "dictValue",
  159. },
  160. },
  161. ],
  162. });
  163. </script>
  164. <style lang="scss" scoped>
  165. :deep(.avue-crud__left) {
  166. width: 100%;
  167. }
  168. #charts {
  169. width: 100%;
  170. height: 300px;
  171. border: 1px solid #ccc;
  172. }
  173. </style>