index.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  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. <template #menu-left="{ size }">
  20. <el-button
  21. :disabled="toDeleteIds.length < 1"
  22. type="danger"
  23. icon="el-icon-delete"
  24. :size="size"
  25. @click="multipleDelete"
  26. >删除</el-button
  27. >
  28. </template>
  29. <template #menu="{ row, index, type }">
  30. <el-button @click="binding(row)" icon="el-icon-link" text type="primary"
  31. >产能</el-button
  32. >
  33. </template>
  34. </avue-crud>
  35. <el-dialog
  36. v-model="dialog.visible"
  37. :title="dialog.title"
  38. width="900px"
  39. @close="dialog.visible = false"
  40. :destroy-on-close="true"
  41. >
  42. <capacity-page :productionLineId="productionLine.id" />
  43. </el-dialog>
  44. </div>
  45. <CommonTable
  46. ref="ctableRef"
  47. tableTitle="员工选择"
  48. tableType="USERS"
  49. @selected-sure="onSelectedFinish"
  50. />
  51. </template>
  52. <script setup>
  53. import { ref, getCurrentInstance } from "vue";
  54. import { useCrud } from "@/hooks/userCrud";
  55. import ButtonPermKeys from "@/common/configs/buttonPermission";
  56. import { useCommonStoreHook } from "@/store";
  57. const { isShowTable, tableType } = toRefs(useCommonStoreHook());
  58. const test = () => {
  59. isShowTable.value = true;
  60. tableType.value = tableType.value == 1 ? 2 : 1;
  61. };
  62. const dialog = reactive({
  63. title: "产能",
  64. visible: false,
  65. });
  66. // 传入一个url,后面不带/
  67. const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
  68. useCrud({
  69. src: "/api/v1/base/productionLine/list",
  70. });
  71. const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
  72. Methords; //增删改查
  73. const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
  74. const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
  75. // checkBtnPerm(ButtonPermKeys.PLAN.BTNS.order_add) :permission="permission"
  76. // const permission = reactive({
  77. // delBtn: checkPerm(buttonPermission.PLAN.BTNS.order_del),
  78. // addBtn: checkPerm(buttonPermission.PLAN.BTNS.order_add),
  79. // editBtn: checkPerm(buttonPermission.PLAN.BTNS.order_edit),
  80. // menu: true,
  81. // });
  82. const ctableRef = ref(null);
  83. const crudRef = ref(null); //crudRef.value 获取avue-crud对象
  84. onMounted(() => {
  85. // console.log("crudRef", crudRef)
  86. dataList();
  87. });
  88. /**
  89. * 上传excel相关
  90. */
  91. const uploadRef = ref(null);
  92. const uploadFinished = () => {
  93. // 上传完成后的刷新操作
  94. page.currentPage = 1;
  95. dataList();
  96. };
  97. const importExcelData = () => {
  98. if (uploadRef.value) {
  99. uploadRef.value.show("/api/v1/plan/order/import");
  100. }
  101. };
  102. const productionLine = ref(null);
  103. const binding = (row) => {
  104. productionLine.value = row;
  105. dialog.visible = true;
  106. };
  107. const onSelectedFinish = (selectedValue) => {
  108. form.value.manager = selectedValue.userName;
  109. };
  110. // 设置表格列或者其他自定义的option
  111. option.value = Object.assign(option.value, {
  112. selection: true,
  113. column: [
  114. {
  115. label: "产线名称",
  116. prop: "name",
  117. search: true,
  118. overHidden: true,
  119. span: 24,
  120. rules: [
  121. {
  122. required: true,
  123. message: "请填写产线名称",
  124. trigger: "blur",
  125. },
  126. ],
  127. },
  128. {
  129. label: "负责人",
  130. prop: "manager",
  131. span: 24,
  132. rules: [
  133. {
  134. required: true,
  135. message: "请选择产线负责人",
  136. trigger: "blur",
  137. },
  138. ],
  139. click: ({ value, column }) => {
  140. ctableRef.value.startSelect();
  141. },
  142. change: ({ value, column }) => {
  143. if (value != form.value.manager) {
  144. ctableRef.value.startSelect();
  145. }
  146. },
  147. },
  148. {
  149. label: "产线位置",
  150. prop: "position",
  151. span: 24,
  152. overHidden: true,
  153. },
  154. {
  155. label: "所属车间",
  156. prop: "workShopName",
  157. overHidden: true,
  158. display: false,
  159. },
  160. {
  161. label: "产线描述",
  162. overHidden: true,
  163. prop: "remark",
  164. type: "textarea",
  165. span: 24,
  166. },
  167. {
  168. label: "创建人",
  169. prop: "creator",
  170. display: false,
  171. },
  172. {
  173. label: "创建时间",
  174. prop: "created",
  175. overHidden: true,
  176. display: false,
  177. },
  178. ],
  179. });
  180. </script>