index.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. <script lang="ts">
  2. // 声明额外的选项
  3. export default {
  4. name: "Template"
  5. };
  6. </script>
  7. <script setup lang="ts">
  8. import { provide, ref } from "vue";
  9. import { useUser } from "./hook";
  10. import { hasAuth } from "@/router/utils";
  11. import { PureTableBar } from "@/components/RePureTableBar";
  12. import { useRenderIcon } from "@/components/ReIcon/src/hooks";
  13. import Add from "./components/add/index.vue"
  14. import Edit from "./components/edit/index.vue"
  15. import Search from "@iconify-icons/ep/search";
  16. import All from "@iconify-icons/ep/refresh-left";
  17. import Addicon from "@iconify-icons/ep/document-add";
  18. const formRef = ref();
  19. const {
  20. form,
  21. loading,
  22. columns,
  23. dataList,
  24. pagination,
  25. onSearch,
  26. handleSizeChange,
  27. handleCurrentChange,
  28. handleSelectionChange,
  29. handleAdd,
  30. handleUpdate,
  31. handleDelete,
  32. addVisible,
  33. editVisible,
  34. editFormData,
  35. optionList,
  36. } = useUser();
  37. // 关闭修改
  38. const closeEditVisible = () => {
  39. editVisible.value = false
  40. }
  41. provide('closeEditVisible', closeEditVisible)
  42. // 关闭添加
  43. const closeAddVisible = () => {
  44. addVisible.value = false
  45. }
  46. provide('closeAddVisible', closeAddVisible)
  47. </script>
  48. <template lang="pug">
  49. .main
  50. div
  51. el-form.bg-bg_color.pl-8.pt-4.pr-8(
  52. label-position="left"
  53. label-width="100px"
  54. ref="formRef",
  55. :inline="true",
  56. :model="form",
  57. :rules="rules",
  58. class="w-[99/100]"
  59. )
  60. el-form-item(label="搜索内容框:", prop="searchMain")
  61. el-input(
  62. v-model="form.searchMain",
  63. placeholder="请输入搜索内容",
  64. clearable,
  65. class="!w-[230px]"
  66. )
  67. el-form-item(label="级联选择框:", prop="searchMain")
  68. el-cascader(
  69. v-model="form.searchMain"
  70. :options="optionList"
  71. class="!w-[230px]"
  72. clearable)
  73. el-form-item(label="时间选择器:", prop="searchMain")
  74. el-date-picker(
  75. v-model="form.searchMain"
  76. type="daterange"
  77. class="!w-[230px]"
  78. start-placeholder="开始时间"
  79. end-placeholder="结束时间"
  80. :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]"
  81. )
  82. el-form-item
  83. el-button(
  84. type="primary",
  85. :icon="useRenderIcon(Search)",
  86. :loading="loading",
  87. @click="onSearch()"
  88. ) 查询
  89. el-form-item
  90. el-button(
  91. type="primary",
  92. :icon="useRenderIcon(All)",
  93. :loading="loading",
  94. @click="onSearch('all')"
  95. ) 全部
  96. //- 表格组件
  97. PureTableBar(title="后台角色管理", @refresh="onSearch" )
  98. template(#buttons)
  99. el-button(type="primary" :icon="useRenderIcon(Addicon)" @click="handleAdd()") 新增
  100. el-button(type="primary" :icon="useRenderIcon(Addicon)" @click="handleUpdate(row)") 编辑
  101. template(v-slot="{ size, checkList }")
  102. pure-table(stripe
  103. border,
  104. align-whole="center",
  105. table-layout="auto",
  106. :loading="loading",
  107. :size="size",
  108. :data="dataList",
  109. :columns="columns",
  110. :checkList="checkList",
  111. :pagination="pagination",
  112. :paginationSmall="size === 'default' ? true : false",
  113. :header-cell-style="{ background: 'var(--el-table-row-hover-bg-color)', color: 'var(--el-text-color-primary)' }",
  114. @selection-change="handleSelectionChange",
  115. @size-change="handleSizeChange",
  116. @current-change="handleCurrentChange"
  117. )
  118. template(#operation="{ row }")
  119. .flex.flex-wrap.items-center
  120. el-dropdown(trigger="click", :hide-on-click="false")
  121. el-button(type="primary") 操作
  122. el-icon.el-icon--right
  123. arrow-down
  124. template(#dropdown)
  125. el-dropdown-menu
  126. el-dropdown-item
  127. el-button.reset-margin(
  128. link
  129. type="primary"
  130. :size="size"
  131. @click="handleUpdate(row)"
  132. :icon="useRenderIcon(EditPen)"
  133. v-if="hasAuth(['edit'])"
  134. ) 编辑
  135. el-button.reset-margin(
  136. link
  137. type="primary"
  138. :size="size"
  139. @click="handleDelete(row)"
  140. :icon="useRenderIcon(Delete)"
  141. v-if="hasAuth(['delete'])"
  142. ) 删除
  143. Add(:addVisible="addVisible")
  144. Edit(:editVisible="editVisible" :formData="editFormData")
  145. </template>
  146. <style scoped lang="scss">
  147. :deep(.el-dropdown-menu__item i) {
  148. margin: 0;
  149. }
  150. :deep(.el-form-item__label) {
  151. font-weight: 700;
  152. }
  153. :deep(.el-pagination) {
  154. flex-flow: wrap;
  155. }
  156. :deep(.is-draggable) {
  157. max-height: 80vh;
  158. overflow: auto;
  159. }
  160. :deep(.el-dialog__header) {
  161. position: sticky;
  162. top: 0;
  163. z-index: 2;
  164. background: #fff;
  165. }
  166. :deep(.el-descriptions__header) {
  167. margin: 16px 0 !important;
  168. }
  169. </style>