videoSetting.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. <template>
  2. <a-card :bordered="false">
  3. <div class="table-operator">
  4. <v-select v-show="false" code="BUSINESS_EXPERIRENCE_CONTENT_CLS" ref="contentCls" allowClear placeholder="请选择分类" ></v-select>
  5. <a-button type="primary" icon="plus" @click="openModal">新建</a-button>
  6. </div>
  7. <s-table
  8. ref="table"
  9. size="default"
  10. rowKey="id"
  11. :columns="columns"
  12. :data="loadData"
  13. bordered
  14. >
  15. <span slot="status" slot-scope="text, record">
  16. <a-switch checkedChildren="启用" unCheckedChildren="禁用" v-model="record.status==1 ? true : false" @change="changeFlagHandle(text, record)"/>
  17. </span>
  18. <span slot="contentCls" slot-scope="text, record">
  19. {{ $refs.contentCls.getNameByCode(text) }}
  20. </span>
  21. <span slot="action" slot-scope="text, record">
  22. <template>
  23. <a-icon type="eye" :style="{ fontSize: '20px', color: '#e29e14', padding: '0 10px' }" @click="handleDetail(record)"/>
  24. <a-icon type="edit" v-if="record.status==='0'" style="font-size: 20px;color: #1890FF;padding: 0 10px;" @click="handleEdit(record)"/>
  25. <a-icon type="delete" v-if="record.status==='0'" style="font-size: 20px;color: red;padding: 0 10px;" @click="delect(record)"/>
  26. <!-- <a class="action-button editBtns" v-if="!record.releaseStatus" @click="handleEdit(record)">编辑</a> -->
  27. <!-- <a class="action-button delBtns" v-if="!record.releaseStatus" @click="delect(record)">删除</a> -->
  28. </template>
  29. </span>
  30. </s-table>
  31. </a-card>
  32. </template>
  33. <script>
  34. import { STable, VSelect } from '@/components'
  35. import { getSettingList, changeStatus, deleteItem, searcAdhDetail } from '@/api/videoSetting.js'
  36. export default {
  37. name: 'VideoSetting',
  38. components: {
  39. STable, VSelect
  40. },
  41. data () {
  42. return {
  43. // 表头
  44. columns: [
  45. {
  46. title: '序号',
  47. dataIndex: 'no',
  48. width: '40',
  49. align: 'center'
  50. },
  51. {
  52. title: '名称',
  53. dataIndex: 'title',
  54. width: '100',
  55. align: 'center'
  56. },
  57. {
  58. title: '分类',
  59. dataIndex: 'contentCls',
  60. width: '100',
  61. align: 'center',
  62. scopedSlots: { customRender: 'contentCls' }
  63. },
  64. {
  65. title: '状态',
  66. dataIndex: 'status',
  67. width: '100',
  68. align: 'center',
  69. scopedSlots: { customRender: 'status' }
  70. },
  71. {
  72. title: '排序',
  73. dataIndex: 'sort',
  74. width: '100',
  75. align: 'center'
  76. // scopedSlots: { customRender: 'status' },
  77. },
  78. {
  79. title: '操作',
  80. width: '100',
  81. align: 'center',
  82. scopedSlots: { customRender: 'action' }
  83. }
  84. ],
  85. // 加载数据方法 必须为 Promise 对象
  86. loadData: parameter => {
  87. return getSettingList(Object.assign(parameter, { title: '' }))
  88. .then(res => {
  89. const no = (res.data.pageNo - 1) * res.data.pageSize
  90. for (let i = 0; i < res.data.list.length; i++) {
  91. const _item = res.data.list[i]
  92. _item.no = no + i + 1
  93. _item.releaseStatus = _item.releaseStatus + '' === 'FB'
  94. }
  95. return res.data
  96. })
  97. }
  98. }
  99. },
  100. methods: {
  101. // 新建
  102. openModal () {
  103. this.$router.push({ name: 'videoSetting_add' })
  104. // this.$router.push({name: 'addVideoSetting'})
  105. },
  106. // 修改
  107. handleEdit (row) {
  108. this.$router.push({ name: 'videoSetting_edit', query: { id: row.id } })
  109. },
  110. // 删除
  111. delect (row) {
  112. const _this = this
  113. this.$confirm({
  114. title: '警告',
  115. content: '删除后无法恢复,确认删除?',
  116. okText: '确定',
  117. cancelText: '取消',
  118. onOk () {
  119. deleteItem({
  120. id: row.id
  121. }).then(res => {
  122. if (res.status == 200) {
  123. _this.$message.success('删除成功')
  124. _this.$refs.table.refresh()
  125. }
  126. })
  127. }
  128. })
  129. },
  130. // 修改状态
  131. changeFlagHandle (text, record) {
  132. console.log(record, 'record')
  133. const _data = {
  134. id: record.id,
  135. flag: record.status == 1 ? '0' : '1'
  136. }
  137. changeStatus(_data).then(res => {
  138. if (res.status == '200') {
  139. this.$message.success('修改成功')
  140. this.$refs.table.refresh()
  141. } else {
  142. record.status = !record.status
  143. }
  144. })
  145. },
  146. handleDetail (record) {
  147. console.log(record)
  148. this.$router.push({ name: 'videoSetting_detail', query: { id: record.id, relateAdvert: record.relateAdvert } })
  149. }
  150. }
  151. }
  152. </script>
  153. <style>
  154. .action-button{
  155. line-height: 40px;
  156. white-space: nowrap;
  157. padding: 5px 10px;
  158. background-color: #1890ff;
  159. border-radius: 4px;
  160. color: #fff;
  161. margin-right: 5px;
  162. &:hover{
  163. background-color: #1db8ff;
  164. color: #fff;
  165. }
  166. }
  167. .delBtns{
  168. background-color: #FF0000;
  169. &:hover{
  170. background-color: #b91818;
  171. color: #fff;
  172. }
  173. }
  174. </style>