PutFeedList.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. <template>
  2. <div class="app-container">
  3. <a-card :bordered="false">
  4. <SearchForm ref="searchForm" @reloadData="reloadData"/>
  5. <s-table
  6. ref="table"
  7. size="default"
  8. rowKey="id"
  9. :scroll="{ x: 2300 }"
  10. :columns="columns"
  11. :data="loadData"
  12. :alert="options.alert"
  13. :rowSelection="options.rowSelection"
  14. showPagination="true"
  15. >
  16. <span slot="summary" slot-scope="text">
  17. <ellipsis :length="10" tooltip>{{ text }}</ellipsis>
  18. </span>
  19. <span slot="avatar" slot-scope="text">
  20. <template>
  21. <avatar-list size="large"><avatar-list-item :src="text"/></avatar-list>
  22. </template>
  23. </span>
  24. <span slot="videoAccountName" slot-scope="text, record">
  25. <ellipsis :length="10" :tips="record.finderUin" tooltip>{{ text }}</ellipsis>
  26. </span>
  27. <span slot="createTime" slot-scope="text">
  28. {{ text | dayjs }}
  29. </span>
  30. </s-table>
  31. <CreateAuthorForm
  32. :formType="formType"
  33. :visible="visible"
  34. ref="createAuthorForm"
  35. @resetData="resetData"
  36. @refreshTable="refreshTable"
  37. />
  38. </a-card>
  39. </div>
  40. </template>
  41. <script>
  42. import { fetchFeedList, deleteAuthorVideo } from '@/api/author'
  43. import { STable, Ellipsis } from '@/components'
  44. import CreateAuthorForm from './modules/CreateForm'
  45. import SearchForm from './modules/SearchForm'
  46. import { filters, table } from './putFeed-constants'
  47. import AvatarList from '@/components/AvatarList'
  48. const AvatarListItem = AvatarList.AvatarItem
  49. export default {
  50. name: 'PutFeedList',
  51. components: {
  52. STable,
  53. Ellipsis,
  54. CreateAuthorForm,
  55. SearchForm,
  56. AvatarList,
  57. AvatarListItem
  58. },
  59. filters: filters,
  60. data () {
  61. return {
  62. queryParam: {},
  63. loadData: parameter => {
  64. console.log('loadData.parameter', parameter)
  65. return fetchFeedList(Object.assign(parameter, this.queryParam)).then(res => {
  66. return res
  67. })
  68. },
  69. options: {
  70. alert: {
  71. show: true,
  72. clear: () => {
  73. this.selectedRowKeys = []
  74. }
  75. },
  76. rowSelection: {
  77. selectedRowKeys: this.selectedRowKeys,
  78. onChange: this.onSelectChange
  79. }
  80. },
  81. columns: table.columns,
  82. visible: false,
  83. formType: 'create'
  84. }
  85. },
  86. created () {
  87. },
  88. methods: {
  89. createHandler () {
  90. this.formType = 'create'
  91. this.visible = true
  92. this.$refs.createAuthorForm.resetForm()
  93. },
  94. handleEdit (record) {
  95. this.$refs.createAuthorForm.handleEdit(record)
  96. this.formType = 'edit'
  97. this.visible = true
  98. },
  99. resetData (flag) {
  100. this.visible = flag
  101. this.record = null
  102. },
  103. refreshTable () {
  104. this.$refs.table.refresh()
  105. },
  106. reloadData (queryParam) {
  107. this.queryParam = queryParam
  108. this.refreshTable()
  109. },
  110. handleDelete (row) {
  111. deleteAuthorVideo(row.id).then(res => {
  112. this.$notification.success({
  113. message: '删除成功'
  114. })
  115. this.$refs.table.refresh()
  116. })
  117. },
  118. cancel () {
  119. }
  120. }
  121. }
  122. </script>
  123. <style scoped>
  124. .edit-input {
  125. padding-right: 100px;
  126. }
  127. .cancel-btn {
  128. position: absolute;
  129. right: 15px;
  130. top: 10px;
  131. }
  132. .ant-upload-select-picture-card i {
  133. font-size: 32px;
  134. color: #999;
  135. }
  136. .ant-upload-select-picture-card .ant-upload-text {
  137. margin-top: 8px;
  138. color: #666;
  139. }
  140. </style>