index.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. <template>
  2. <div class='app-container'>
  3. <el-button type="primary" icon="el-icon-plus" size="mini" @click="getDetail()"
  4. v-hasPermi="['operation:agreement:add']">新增</el-button>
  5. <!-- 列表 -->
  6. <el-table :data="tableData" v-loading="loading">
  7. <el-table-column label="序号" align="center" type="index" />
  8. <el-table-column label="协议名称" align="center" prop="name" />
  9. <el-table-column label="协议类型" align="center" prop="type" :formatter="typeFormatter" />
  10. <el-table-column label="更新时间" align="center" prop="updateTime" />
  11. <el-table-column label="创建时间" align="center" prop="createTime" />
  12. <el-table-column label="操作" align="center">
  13. <template slot-scope="scope">
  14. <el-button type="text" @click="getDetail(scope.row.id, true)">查看</el-button>
  15. <el-button type="text" @click="getDetail(scope.row.id)" v-hasPermi="['operation:agreement:edit']">编辑</el-button>
  16. <el-button type="delete" @click="getDelete(scope.row)"
  17. v-hasPermi="['operation:agreement:delete']">删除</el-button>
  18. </template>
  19. </el-table-column>
  20. </el-table>
  21. <pagination v-show="total > 0" :total="total" :page.sync="form.pageNum" :limit.sync="form.pageSize"
  22. @pagination="getList" />
  23. </div>
  24. </template>
  25. <script>
  26. import { list, remove } from '@/api/operation/agreement'
  27. export default {
  28. data() {
  29. return {
  30. // 遮罩层
  31. loading: false,
  32. // 表单
  33. form: {
  34. pageNum: 1,
  35. pageSize: 10
  36. },
  37. // 列表
  38. tableData: [],
  39. // 总数据
  40. total: 0,
  41. // 协议类型
  42. typeOptions: [{
  43. value: 0,
  44. label: '用户协议'
  45. }, {
  46. value: 1,
  47. label: '隐私协议'
  48. }, {
  49. value: 2,
  50. label: '音乐服务许可协议'
  51. }, {
  52. value: 3,
  53. label: '儿童隐私保护指南'
  54. }, {
  55. value: 4,
  56. label: 'VIP音乐服务协议'
  57. }, {
  58. value: 5,
  59. label: '爱听付费协议'
  60. }, {
  61. value: 6,
  62. label: '关于我们'
  63. }, {
  64. value: 7,
  65. label: '第三方信息共享清单'
  66. }, {
  67. value: 8,
  68. label: '已收集个人信息清单'
  69. }, {
  70. value: 9,
  71. label: '连接设备提示'
  72. }]
  73. }
  74. },
  75. mounted() {
  76. this.getList()
  77. },
  78. methods: {
  79. // 列表
  80. getList() {
  81. this.loading = true
  82. list(this.form).then(res => {
  83. if (res.code === 0) {
  84. this.tableData = res.data.records
  85. this.total = res.data.total
  86. this.loading = false
  87. }
  88. })
  89. },
  90. // 详情
  91. getDetail(id, boolean) {
  92. this.$router.push({
  93. path: `/operation/agreement/detail`,
  94. query: {
  95. id: id,
  96. boolean: boolean
  97. }
  98. })
  99. },
  100. // 删除
  101. getDelete(row) {
  102. this.$confirm(`是否删除${row.name}?`, '提示', {
  103. type: 'warning'
  104. }).then(() => {
  105. remove(row.id).then(res => {
  106. if (res.code === 0) {
  107. this.$message.success('删除成功!')
  108. this.getList()
  109. }
  110. })
  111. }).catch(() => { })
  112. },
  113. // 字典翻译
  114. typeFormatter(row) {
  115. return this.selectDictLabel(this.typeOptions, row.type)
  116. }
  117. }
  118. }
  119. </script>