index.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. <script lang="ts">
  2. // 声明额外的选项
  3. export default {
  4. name: "AppVersion"
  5. };
  6. </script>
  7. <script setup lang="ts">
  8. import { provide } from "vue";
  9. import { useAppVersion } from "./hook";
  10. import { http } from "@/utils/http";
  11. import { useRenderIcon, hasAuth, PureTableBar } from "@/utils/importUsed"
  12. import Add from "./components/add/index.vue";
  13. import EditUpdate from "./components/update/index.vue";
  14. import Search from "@iconify-icons/ep/search";
  15. import Addicon from "@iconify-icons/ep/document-add";
  16. import Delete from "@iconify-icons/ep/delete";
  17. import EditPen from "@iconify-icons/ep/edit-pen";
  18. import More from "@iconify-icons/ep/more-filled";
  19. const {
  20. form,
  21. loading,
  22. columns,
  23. dataList,
  24. pagination,
  25. onSearch,
  26. handleSizeChange,
  27. handleCurrentChange,
  28. handleSelectionChange,
  29. ruleFormRef,
  30. handleAdd,
  31. addVisible,
  32. handleUpdate,
  33. editUpdateVisible,
  34. editUpdateFormData,
  35. handleDelete,
  36. } = useAppVersion();
  37. // 关闭添加
  38. const closeAddVisible = () => {
  39. onSearch(ruleFormRef.value);
  40. addVisible.value = false;
  41. }
  42. provide('closeAddVisible', closeAddVisible)
  43. // 关闭修改
  44. const closeEditUpdateVisible = () => {
  45. onSearch(ruleFormRef.value);
  46. editUpdateVisible.value = false
  47. }
  48. provide('closeEditUpdateVisible', closeEditUpdateVisible)
  49. </script>
  50. <template lang="pug">
  51. .main
  52. div
  53. //- 搜索表格组件条件
  54. el-form.bg-bg_color.pl-8.pt-4.pr-8(
  55. label-position="left"
  56. label-width="100px"
  57. :inline="true",
  58. :model="form",
  59. class="w-[99/100]"
  60. ref="ruleFormRef"
  61. :rules="rules"
  62. )
  63. el-form-item(label="分类", prop="kind")
  64. el-select(
  65. v-model="form.kind",
  66. placeholder="请选择分类",
  67. clearable,
  68. )
  69. el-option(:label="item.label", :value="item.id" v-for="(item,index) in kindOptionList")
  70. el-form-item
  71. el-button(
  72. type="primary",
  73. :icon="useRenderIcon(Search)",
  74. :loading="loading",
  75. @click="onSearch(ruleFormRef)"
  76. ) 查询
  77. //- 表格组件
  78. PureTableBar(title="app版本管理", @refresh="onSearch(ruleFormRef)" )
  79. template(#buttons)
  80. el-button(type="primary" :icon="useRenderIcon(Addicon)" @click="handleAdd()" v-if="hasAuth(['add'])") 新增
  81. template(v-slot="{ size, checkList }")
  82. pure-table(
  83. row-key="id"
  84. ref="tableRef"
  85. adaptive
  86. align-whole="center"
  87. table-layout="auto"
  88. :loading="loading"
  89. :size="size",
  90. :data="dataList",
  91. :columns="columns",
  92. :checkList="checkList",
  93. :pagination="pagination",
  94. :paginationSmall="size === 'default' ? true : false",
  95. :header-cell-style="{ background: 'var(--el-table-row-hover-bg-color)', color: 'var(--el-text-color-primary)' }",
  96. @selection-change="handleSelectionChange",
  97. @size-change="handleSizeChange",
  98. @current-change="handleCurrentChange"
  99. )
  100. template(#operation="{ row }")
  101. el-button.reset-margin(
  102. link
  103. type="primary"
  104. size="small"
  105. @click="handleUpdate(row)"
  106. :icon="useRenderIcon(Delete)"
  107. v-if="hasAuth(['update'])"
  108. ) 编辑
  109. el-button.reset-margin(
  110. link
  111. type="primary"
  112. size="small"
  113. @click="handleDelete(row)"
  114. :icon="useRenderIcon(Delete)"
  115. v-if="hasAuth(['delete'])"
  116. ) 删除
  117. Add(:addVisible="addVisible")
  118. EditUpdate(:editVisible="editUpdateVisible" :formData="editUpdateFormData")
  119. </template>
  120. <style scoped lang="scss">
  121. :deep(.el-dropdown-menu__item i) {
  122. margin: 0;
  123. }
  124. :deep(.el-form-item__label) {
  125. font-weight: 700;
  126. }
  127. :deep(.el-pagination) {
  128. flex-flow: wrap;
  129. }
  130. :deep(.is-draggable) {
  131. max-height: 80vh;
  132. overflow: auto;
  133. }
  134. :deep(.el-dialog__header) {
  135. position: sticky;
  136. top: 0;
  137. z-index: 2;
  138. background: #fff;
  139. }
  140. :deep(.el-descriptions__header) {
  141. margin: 16px 0 !important;
  142. }
  143. </style>