index.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  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. kindOptionList,
  37. } = useAppVersion();
  38. // 关闭添加
  39. const closeAddVisible = () => {
  40. onSearch(ruleFormRef.value);
  41. addVisible.value = false;
  42. }
  43. provide('closeAddVisible', closeAddVisible)
  44. // 关闭修改
  45. const closeEditUpdateVisible = () => {
  46. onSearch(ruleFormRef.value);
  47. editUpdateVisible.value = false
  48. }
  49. provide('closeEditUpdateVisible', closeEditUpdateVisible)
  50. </script>
  51. <template lang="pug">
  52. .main
  53. div
  54. //- 搜索表格组件条件
  55. el-form.bg-bg_color.pl-8.pt-4.pr-8(
  56. label-position="left"
  57. label-width="100px"
  58. :inline="true",
  59. :model="form",
  60. class="w-[99/100]"
  61. ref="ruleFormRef"
  62. :rules="rules"
  63. )
  64. el-form-item(label="分类", prop="kind")
  65. el-select(
  66. v-model="form.kind",
  67. placeholder="请选择分类",
  68. clearable,
  69. )
  70. el-option(:label="item.label", :value="item.id" v-for="(item,index) in kindOptionList")
  71. el-form-item(label='版本号' prop="appVersion")
  72. el-input(v-model='form.appVersion' autocomplete='off'
  73. placeholder="请输入版本号")
  74. el-form-item
  75. el-button(
  76. type="primary",
  77. :icon="useRenderIcon(Search)",
  78. :loading="loading",
  79. @click="onSearch(ruleFormRef)"
  80. ) 查询
  81. //- 表格组件
  82. PureTableBar(title="app版本管理", @refresh="onSearch(ruleFormRef)" )
  83. template(#buttons)
  84. el-button(type="primary" :icon="useRenderIcon(Addicon)" @click="handleAdd()" v-if="hasAuth(['add'])") 新增
  85. template(v-slot="{ size, checkList }")
  86. pure-table(
  87. row-key="id"
  88. ref="tableRef"
  89. adaptive
  90. align-whole="center"
  91. table-layout="auto"
  92. :loading="loading"
  93. :size="size",
  94. :data="dataList",
  95. :columns="columns",
  96. :checkList="checkList",
  97. :pagination="pagination",
  98. :paginationSmall="size === 'default' ? true : false",
  99. :header-cell-style="{ background: 'var(--el-table-row-hover-bg-color)', color: 'var(--el-text-color-primary)' }",
  100. @selection-change="handleSelectionChange",
  101. @size-change="handleSizeChange",
  102. @current-change="handleCurrentChange"
  103. )
  104. template(#operation="{ row }")
  105. el-button.reset-margin(
  106. link
  107. type="primary"
  108. size="small"
  109. @click="handleUpdate(row)"
  110. :icon="useRenderIcon(Delete)"
  111. v-if="hasAuth(['update'])"
  112. ) 编辑
  113. el-button.reset-margin(
  114. link
  115. type="primary"
  116. size="small"
  117. @click="handleDelete(row)"
  118. :icon="useRenderIcon(Delete)"
  119. v-if="hasAuth(['delete'])"
  120. ) 删除
  121. Add(:addVisible="addVisible")
  122. EditUpdate(:editVisible="editUpdateVisible" :formData="editUpdateFormData")
  123. </template>
  124. <style scoped lang="scss">
  125. :deep(.el-dropdown-menu__item i) {
  126. margin: 0;
  127. }
  128. :deep(.el-form-item__label) {
  129. font-weight: 700;
  130. }
  131. :deep(.el-pagination) {
  132. flex-flow: wrap;
  133. }
  134. :deep(.is-draggable) {
  135. max-height: 80vh;
  136. overflow: auto;
  137. }
  138. :deep(.el-dialog__header) {
  139. position: sticky;
  140. top: 0;
  141. z-index: 2;
  142. background: #fff;
  143. }
  144. :deep(.el-descriptions__header) {
  145. margin: 16px 0 !important;
  146. }
  147. </style>