index.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  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-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-left="{ size }">
  19. <el-button
  20. type="primary"
  21. icon="el-icon-plus"
  22. :size="size"
  23. @click="addRow"
  24. >新增</el-button
  25. >
  26. <el-button
  27. :disabled="toDeleteIds.length < 1"
  28. type="danger"
  29. icon="el-icon-delete"
  30. :size="size"
  31. @click="multipleDelete"
  32. >删除</el-button
  33. ></template>
  34. <template #menu="{row,index,type}">
  35. <el-button @click="binding(row)"
  36. icon="el-icon-link"
  37. text
  38. type="primary"
  39. >BOM</el-button>
  40. </template>
  41. </avue-crud>
  42. <el-dialog
  43. v-model="dialog.visible"
  44. :title="dialog.title"
  45. width="800px"
  46. @close="dialog.visible = false"
  47. >
  48. <user-skill :dialog="dialog"/>
  49. </el-dialog>
  50. </div>
  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, useDictionaryStoreHook } from "@/store";
  57. import dictDataUtil from "@/common/configs/dictDataUtil";
  58. const { isShowTable, tableType } = toRefs(useCommonStoreHook());
  59. // 数据字典相关
  60. const { dicts } = useDictionaryStoreHook();
  61. const test = () => {
  62. isShowTable.value = true;
  63. tableType.value = tableType.value == 1 ? 2 : 1;
  64. };
  65. const dialog = reactive({
  66. title: "员工技能",
  67. visible: false,
  68. });
  69. const addRow=()=>{
  70. dialog.visible=true;
  71. }
  72. // 传入一个url,后面不带/
  73. const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
  74. useCrud({
  75. src: "/api/v1/sys/employeeSkill",
  76. });
  77. const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
  78. Methords; //增删改查
  79. const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
  80. const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
  81. // checkBtnPerm(ButtonPermKeys.PLAN.BTNS.order_add) :permission="permission"
  82. // const permission = reactive({
  83. // delBtn: checkPerm(buttonPermission.PLAN.BTNS.order_del),
  84. // addBtn: checkPerm(buttonPermission.PLAN.BTNS.order_add),
  85. // editBtn: checkPerm(buttonPermission.PLAN.BTNS.order_edit),
  86. // menu: true,
  87. // });
  88. const ctableRef = ref(null); //crudRef.value 获取avue-crud对象
  89. const router = useRouter();
  90. const binding = (row) => {
  91. router.push(`/base/bom/${row.materialCode}`);
  92. };
  93. onMounted(() => {
  94. // console.log("crudRef", crudRef)
  95. dataList();
  96. });
  97. /**
  98. * 上传excel相关
  99. */
  100. const uploadRef = ref(null);
  101. const uploadFinished = () => {
  102. // 上传完成后的刷新操作
  103. page.currentPage = 1;
  104. dataList();
  105. };
  106. const importExcelData = () => {
  107. if (uploadRef.value) {
  108. uploadRef.value.show("/api/v1/plan/order/import");
  109. }
  110. };
  111. // 设置表格列或者其他自定义的option
  112. option.value = Object.assign(option.value, {
  113. selection: true,
  114. addBtn:false,
  115. column: [
  116. { label: "所属机构", prop: "institution", width: 130,
  117. search: true,
  118. filterable: true,
  119. type: "select",
  120. overHidden: true,
  121. dicUrl:dictDataUtil.dept_list_url,
  122. dicMethod:"post",
  123. props: { label: "deptName", value: "id" },
  124. disabled:true,
  125. },
  126. { label: "员工姓名", prop: "userName", width: 140,overHidden: true,search: true ,rules: [{
  127. required: true,
  128. search: true,
  129. message: "请选择员工姓名",
  130. trigger: "blur"
  131. }],
  132. },
  133. {
  134. label: "员工编号",
  135. prop: "employeeCode",
  136. search: true,
  137. disabled:true,
  138. },
  139. { label: "岗位", prop: "postId", overHidden: true,search: true ,
  140. search: true,
  141. filterable: true,
  142. type: "select",
  143. overHidden: true,
  144. dicUrl:dictDataUtil.post_list_url,
  145. dicMethod:"post",
  146. props: { label: "postName", value: "id" },
  147. },
  148. { label: "部门", prop: "deptName", overHidden: true,
  149. disabled:true, },
  150. {
  151. label: "分数",
  152. prop: "scopes",
  153. filterable: true,
  154. },
  155. ],
  156. });
  157. const onSelectedFinish=()=>{
  158. }
  159. </script>