ActorList.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. <template>
  2. <a-card :bordered="false">
  3. <!-- 查询区域 -->
  4. <div class="table-page-search-wrapper">
  5. <a-form layout="inline">
  6. <a-row :gutter="24">
  7. <a-col :md="6" :sm="8">
  8. <a-form-item label="姓名">
  9. <a-input placeholder="请输入姓名" v-model="queryParam.name"></a-input>
  10. </a-form-item>
  11. </a-col>
  12. <a-col :md="6" :sm="8">
  13. <a-form-item label="性别">
  14. <a-select v-model="queryParam.sex" placeholder="请选择性别查询">
  15. <a-select-option value="">请选择性别查询</a-select-option>
  16. <a-select-option value="1">男</a-select-option>
  17. <a-select-option value="2">女</a-select-option>
  18. </a-select>
  19. </a-form-item>
  20. </a-col>
  21. <a-col :md="6" :sm="8">
  22. <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
  23. <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
  24. <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
  25. </span>
  26. </a-col>
  27. </a-row>
  28. </a-form>
  29. </div>
  30. <!-- 操作按钮区域 -->
  31. <div class="table-operator">
  32. <a-button @click="handleAdd" v-show="show" type="primary" icon="plus">新增</a-button>
  33. </div>
  34. <!-- table区域-begin -->
  35. <div>
  36. <a-table
  37. ref="table"
  38. size="middle"
  39. bordered
  40. rowKey="id"
  41. :columns="columns"
  42. :dataSource="dataSource"
  43. :pagination="ipagination"
  44. :loading="loading">
  45. <!-- 字符串超长截取省略号显示-->
  46. <span slot="esContent" slot-scope="text">
  47. <j-ellipsis :value="text" :length="10"/>
  48. </span>
  49. <span slot="action" slot-scope="text, record">
  50. <a href="javascript:;" @click="handleDetail(record)">详情</a>
  51. <a-divider type="vertical"/>
  52. <a-dropdown>
  53. <a class="ant-dropdown-link">更多<a-icon type="down"/></a>
  54. <a-menu slot="overlay">
  55. <a-menu-item v-show="show">
  56. <a @click="handleEdit(record)">编辑</a>
  57. </a-menu-item>
  58. </a-menu>
  59. </a-dropdown>
  60. </span>
  61. </a-table>
  62. </div>
  63. <!-- table区域-end -->
  64. <!-- 表单区域 -->
  65. <actor-modal ref="modalForm" @ok="modalFormOk"></actor-modal>
  66. </a-card>
  67. </template>
  68. <script>
  69. import ActorModal from './modules/ActorModal'
  70. import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  71. import JEllipsis from "@/components/jeecg/JEllipsis";
  72. export default {
  73. name: "ActorList",
  74. mixins: [JeecgListMixin],
  75. components: {
  76. JEllipsis,
  77. ActorModal
  78. },
  79. data() {
  80. return {
  81. queryParam:{},
  82. description: '演员管理',
  83. // 新增修改按钮是否显示
  84. show: true,
  85. // 表头
  86. columns: [
  87. {
  88. title: 'ID',
  89. align: "center",
  90. dataIndex: 'id'
  91. },
  92. {
  93. title: '姓名',
  94. align: "center",
  95. dataIndex: 'name'
  96. },
  97. {
  98. title: '生日',
  99. align: "center",
  100. dataIndex: 'birthday',
  101. },
  102. {
  103. title: '性别',
  104. align: "center",
  105. dataIndex: 'sex_dictText',
  106. },
  107. {
  108. title: '特长',
  109. align: "center",
  110. dataIndex: 'speciality'
  111. },
  112. {
  113. title: '创建时间',
  114. align: 'center',
  115. dataIndex: 'createTime'
  116. },
  117. {
  118. title: '操作',
  119. dataIndex: 'action',
  120. align: "center",
  121. scopedSlots: {customRender: 'action'},
  122. }
  123. ],
  124. url: {
  125. list: "/ctop/actor/list",
  126. },
  127. }
  128. },
  129. methods: {}
  130. }
  131. </script>
  132. <style scoped>
  133. @import '~@assets/less/common.less'
  134. </style>