index.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  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-del="deleteRow"
  12. @row-update="updateRow"
  13. @search-change="searchChange"
  14. @search-reset="resetChange"
  15. @size-change="dataList"
  16. @current-change="dataList"
  17. @selection-change="selectionChange"
  18. :before-open="onBeforeOpen"
  19. >
  20. </avue-crud>
  21. </div>
  22. </template>
  23. <script setup lang="ts">
  24. import {ref, getCurrentInstance} from "vue";
  25. import {useCrud} from "@/hooks/userCrud";
  26. // 传入一个url,后面不带/
  27. const {form, data, option, search, page, toDeleteIds, Methords, Utils} =
  28. useCrud({
  29. src: "/api/v1/attendanceStatistics",
  30. });
  31. const {dataList, createRow, updateRow, deleteRow, searchChange, resetChange} =
  32. Methords; //增删改查
  33. const {selectionChange, multipleDelete} = Methords; //选中和批量删除事件
  34. const {checkBtnPerm, downloadTemplate, exportData} = Utils; //按钮权限等工具
  35. const deptTypes = ref([]);
  36. const crudRef = ref(null); //crudRef.value 获取avue-crud对象
  37. onMounted(() => {
  38. // console.log("crudRef", crudRef)
  39. dataList();
  40. });
  41. const multipleRow = ref(true);
  42. const productionLineRef = ref(null);
  43. const startCreat = () => {
  44. productionLineRef.value?.mergeOption({
  45. selection: true,
  46. reserveSelection: true,
  47. });
  48. };
  49. // 设置表格列或者其他自定义的option
  50. option.value = Object.assign(option.value, {
  51. searchEnter: false,
  52. selection: false,
  53. menuWidth: 200,
  54. border: true,
  55. index: true,
  56. delBtn: true,
  57. addBtn: true,
  58. viewBtn: false,
  59. editBtn: false,
  60. rowKey: "id",
  61. column: [
  62. // {
  63. // label: "择班组信息",
  64. // prop: "toSelect",
  65. // hide: true,
  66. // type: "tree",
  67. // dicUrl: import.meta.env.VITE_APP_BASE_API + "/api/v1/sys/dept/orgTree",
  68. // // dicMethod: "post",
  69. // span: 24,
  70. // props: {
  71. // label: "deptName", // 下拉菜单显示的字段
  72. // value: "deptCode", // 下拉菜单值的字段
  73. // },
  74. // change: (row) => {
  75. // if (row && row.item) {
  76. // form.value.deptName = row.item.deptName;
  77. // }
  78. // },
  79. // },
  80. {
  81. label: "班组名称",
  82. prop: "deptName",
  83. type: "select",
  84. dicUrl: import.meta.env.VITE_APP_BASE_API + "/api/v1/sys/dept/deptList?parentId=10",
  85. props: {
  86. label: "deptName",
  87. value: "deptName",
  88. },
  89. change: (row) => {
  90. if (row && row.item) {
  91. form.value.deptName = row.item.deptName;
  92. form.value.deptNum = row.item.deptNum;
  93. }
  94. },
  95. search: true,
  96. overHidden: true,
  97. rules: [
  98. {
  99. required: true,
  100. message: "请输入deptName",
  101. trigger: "blur",
  102. },
  103. ],
  104. },
  105. {
  106. label: "班组人数",
  107. prop: "deptNum",
  108. search: false,
  109. overHidden: true,
  110. type: "number",
  111. min: 1,
  112. max: 99999,
  113. rules: [
  114. {
  115. required: true,
  116. message: "班组人数不能为空",
  117. trigger: "trigger",
  118. },
  119. ],
  120. },
  121. {
  122. label: "应出勤",
  123. prop: "answerNum",
  124. search: false,
  125. overHidden: true,
  126. type: "number",
  127. min: 1,
  128. max: 99999,
  129. rules: [
  130. {
  131. required: true,
  132. message: "应出勤人数不能为空",
  133. trigger: "trigger",
  134. },
  135. ],
  136. },
  137. {
  138. label: "实出勤",
  139. prop: "practicalNum",
  140. search: false,
  141. overHidden: true,
  142. type: "number",
  143. min: 1,
  144. max: 99999,
  145. rules: [
  146. {
  147. required: true,
  148. message: "实出勤人数不能为空",
  149. trigger: "trigger",
  150. },
  151. ],
  152. blur: () => {
  153. // 检查两个字段是否都有值(不为 null/undefined/空字符串/0)
  154. if (form.value.practicalNum != null && form.value.answerNum != null) {
  155. // 额外检查 answerNum 不能为 0(避免除以零)
  156. if (form.value.answerNum !== 0) {
  157. form.value.attendanceRate = (form.value.practicalNum / form.value.answerNum * 100).toFixed(2);
  158. } else {
  159. form.value.attendanceRate = 0; // 或其他默认值
  160. }
  161. }
  162. // 如果任一字段为空,不执行计算(保持 attendanceRate 原值或清空)
  163. },
  164. },
  165. {
  166. label: "出勤率(%)",
  167. prop: "attendanceRate",
  168. search: false,
  169. overHidden: true,
  170. },
  171. {
  172. label: "创建时间",
  173. prop: "created",
  174. display: false,
  175. },
  176. ],
  177. });
  178. const tableData = ref<any[]>([]); //选中的行
  179. const onBeforeOpen = (done) => {
  180. console.log("before open");
  181. tableData.value = [];
  182. form.value.dtos = [];
  183. done();
  184. };
  185. </script>