dataList.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. <template>
  2. <div class="data-list">
  3. <el-table
  4. :data="dataList"
  5. style="width: 100%"
  6. header-row-class-name="headerBg"
  7. empty-text="没有角色信息"
  8. >
  9. <el-table-column prop="id" label="ID" align="center" width="80" />
  10. <el-table-column prop="name" label="角色名称" align="left" width="180" />
  11. <el-table-column
  12. prop="intro"
  13. label="角色介绍"
  14. align="center"
  15. min-width="150"
  16. />
  17. <el-table-column
  18. prop="createTime"
  19. label="创建时间"
  20. align="center"
  21. width="150"
  22. />
  23. <el-table-column
  24. prop="status"
  25. label="角色状态"
  26. align="center"
  27. width="150"
  28. >
  29. <template #default="scope">
  30. <div v-if="scope.row.status == 5">启用</div>
  31. <div v-if="scope.row.status == 6">禁用</div>
  32. </template>
  33. </el-table-column>
  34. <el-table-column label="操作" align="center" fixed="right" width="180">
  35. <template #default="scope">
  36. <div class="btns">
  37. <el-button
  38. type="primary"
  39. size="small"
  40. @click="btnEdit(scope.row.id)"
  41. ><svg-icon icon-class="edit" />编辑</el-button
  42. >
  43. <el-button
  44. type="danger"
  45. size="small"
  46. @click="btnDelete(scope.row.id)"
  47. ><svg-icon icon-class="delete" />删除</el-button
  48. >
  49. </div>
  50. </template>
  51. </el-table-column>
  52. </el-table>
  53. <div class="page-info">
  54. <el-pagination
  55. v-model:currentPage="queryForm.page"
  56. :page-size="queryForm.pageSize"
  57. :total="recordCount"
  58. :page-count="pageTotal"
  59. background
  60. layout="prev, pager, next"
  61. @current-change="ChangePage"
  62. >
  63. </el-pagination>
  64. </div>
  65. <el-dialog
  66. :visible.sync="dialogVisible"
  67. append-to-body
  68. v-el-drag-dialog
  69. width="80%"
  70. custom-class="prod-verify"
  71. title="创建项目信息"
  72. >
  73. <dataInfo :id="dataId" @onClose="onClose"></dataInfo>
  74. </el-dialog>
  75. </div>
  76. </template>
  77. <script>
  78. import { searchAdminRole, deleteAdminRole } from "@/api/AdminRole";
  79. import dataInfo from "./dataInfo.vue";
  80. import elDragDialog from "@/directive/el-drag-dialog";
  81. export default {
  82. components: {
  83. dataInfo,
  84. },
  85. directives: { elDragDialog },
  86. props: {
  87. queryForm: {
  88. type: Object,
  89. default: () => {
  90. return {
  91. page: 1,
  92. pageSize: 10,
  93. name: "",
  94. status: "",
  95. };
  96. },
  97. },
  98. },
  99. watch: {
  100. queryForm: {
  101. handler: function (val) {
  102. this.search();
  103. },
  104. // immediate: true,//立即执行
  105. deep: true,
  106. },
  107. },
  108. data() {
  109. return {
  110. dialogVisible: false, //控制产品审核
  111. dataId: 0,
  112. recordCount: 0,
  113. pageTotal: 1,
  114. dataList: [],
  115. currentData: {},
  116. };
  117. },
  118. mounted() {
  119. this.search();
  120. },
  121. methods: {
  122. btnDelete(e) {
  123. let _this = this;
  124. let par = {
  125. id: e,
  126. };
  127. _this
  128. .$confirm("您是否确认删除该记录?", "提示", {
  129. confirmButtonText: "确认",
  130. cancelButtonText: "取消",
  131. type: "warning",
  132. })
  133. .then((res) => {
  134. // console.log("AAA")
  135. deleteAdminRole(par).then((res) => {});
  136. _this.search();
  137. })
  138. .catch(() => {});
  139. },
  140. onChangeVal(e) {
  141. let _this = this;
  142. let par = {
  143. id: _this.currentDataId,
  144. val: e,
  145. };
  146. },
  147. onClose() {
  148. let _this = this;
  149. _this.dialogVisible = false;
  150. _this.search();
  151. },
  152. //编辑
  153. btnEdit(e) {
  154. this.dataId = e;
  155. this.$router.push({ path: "/system/role/edit", query: { id: e } });
  156. },
  157. handleClose() {
  158. let _this = this;
  159. _this.dataId = 0;
  160. _this.dialogVisible = false;
  161. },
  162. //搜索
  163. search() {
  164. let _this = this;
  165. searchAdminRole(_this.queryForm).then((res) => {
  166. if (!res) return;
  167. _this.dataList = res.data.dataList;
  168. _this.recordCount = res.data.totalRecord;
  169. _this.pageTotal = res.data.totalPage;
  170. });
  171. },
  172. //修改分页
  173. ChangePage(e) {
  174. let _this = this;
  175. _this.queryForm.page = e;
  176. _this.search();
  177. },
  178. },
  179. };
  180. </script>
  181. <style lang="scss">
  182. @import "./dataList.scss";
  183. </style>