index.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  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="rowSave"
  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)"
  31. icon="el-icon-link"
  32. text
  33. type="primary"
  34. >设备</el-button>
  35. </template>
  36. </avue-crud>
  37. <el-dialog
  38. v-model="dialog.visible"
  39. :title="dialog.title"
  40. width="900px"
  41. @close="dialog.visible = false"
  42. >
  43. <station-page :stationId="stationDevice.id"/>
  44. </el-dialog>
  45. </div>
  46. </template>
  47. <script setup="ts">
  48. import { ref, getCurrentInstance } from "vue";
  49. import { useCrud } from "@/hooks/userCrud";
  50. import ButtonPermKeys from "@/common/configs/buttonPermission";
  51. import { useCommonStoreHook } from "@/store";
  52. const { isShowTable, tableType } = toRefs(useCommonStoreHook());
  53. import { useDictionaryStoreHook } from "@/store";
  54. import { columns } from "./columns";
  55. const test = () => {
  56. isShowTable.value = true;
  57. tableType.value = tableType.value == 1 ? 2 : 1;
  58. };
  59. // 传入一个url,后面不带/
  60. const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
  61. useCrud({
  62. src: "/api/v1/base/station",
  63. });
  64. const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
  65. Methords; //增删改查
  66. const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
  67. const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
  68. // checkBtnPerm(ButtonPermKeys.PLAN.BTNS.order_add) :permission="permission"
  69. // const permission = reactive({
  70. // delBtn: checkPerm(buttonPermission.PLAN.BTNS.order_del),
  71. // addBtn: checkPerm(buttonPermission.PLAN.BTNS.order_add),
  72. // editBtn: checkPerm(buttonPermission.PLAN.BTNS.order_edit),
  73. // menu: true,
  74. // });
  75. function rowSave(form,done,loading) {
  76. console.info(form);
  77. createRow(form,done,loading);
  78. }
  79. const crudRef = ref(null); //crudRef.value 获取avue-crud对象
  80. onMounted(() => {
  81. // console.log("crudRef", crudRef)
  82. dataList();
  83. });
  84. /**
  85. * 上传excel相关
  86. */
  87. const uploadRef = ref(null);
  88. const uploadFinished = () => {
  89. // 上传完成后的刷新操作
  90. page.currentPage = 1;
  91. dataList();
  92. };
  93. const importExcelData = () => {
  94. if (uploadRef.value) {
  95. uploadRef.value.show("/api/v1/base/station");
  96. }
  97. };
  98. const dialog = reactive({
  99. title: "设备绑定",
  100. visible: false,
  101. });
  102. const stationDevice=ref(null);
  103. const binding=(row)=>{
  104. dialog.visible=true;
  105. stationDevice.value=row;
  106. }
  107. // 设置表格列或者其他自定义的option
  108. option.value = Object.assign(option.value, {
  109. selection: true,
  110. column: columns,
  111. });
  112. </script>