index.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. <template>
  2. <div class="content-container">
  3. <el-row class="tool-bar">
  4. <el-col :span="12" class="left">
  5. <div class="content-title">
  6. 设备类别
  7. </div>
  8. </el-col>
  9. <el-col :span="12" class="right">
  10. <el-input v-model="conditions.keywords" style="width: 200px;" class="filter-item" prefix-icon="el-icon-search" placeholder="请输入内容" @keyup.enter.native="handleFilter" />
  11. <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
  12. <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
  13. </el-col>
  14. </el-row>
  15. <el-row class="content-body">
  16. <el-table v-loading="listLoading" :data="dataList" fit style="width: 100%">
  17. <el-table-column type="index" align="center" label="序号" width="80" />
  18. <el-table-column label="类别名称" align="center" width="250">
  19. <template v-slot="{row}">
  20. <span>{{ row.equipCatTitle }}</span>
  21. </template>
  22. </el-table-column>
  23. <el-table-column label="说明">
  24. <template v-slot="{row}">
  25. <span>{{ row.equipCatDesc }}</span>
  26. </template>
  27. </el-table-column>
  28. <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
  29. <template v-slot="{row}">
  30. <el-button size="mini" @click="handleEdit(row)">修改</el-button>
  31. <el-button v-if="row.isFixed !== 1" size="mini" type="danger" @click="handleDelete(row)">删除</el-button>
  32. </template>
  33. </el-table-column>
  34. </el-table>
  35. <div v-if="false" class="pagination-container">
  36. <pagination v-show="total>0" :total="total" :page.sync="conditions.page" :limit.sync="conditions.limit" @pagination="getData" />
  37. </div>
  38. </el-row>
  39. <sensor-cat ref="sensor-cat" @formSuccess="getData" />
  40. </div>
  41. </template>
  42. <script>
  43. import SensorCat from './sensorCat'
  44. import { getSensorCat, deleteSensorCatById } from '@/api/goaf/sensorCatApi'
  45. import Pagination from '@/components/Pagination'
  46. export default {
  47. components: {
  48. Pagination,
  49. SensorCat
  50. },
  51. data() {
  52. return {
  53. dataList: null,
  54. listLoading: true,
  55. total: 0,
  56. conditions: {
  57. page: 1,
  58. limit: 10,
  59. keywords: ''
  60. }
  61. }
  62. },
  63. mounted() {
  64. this.getData()
  65. },
  66. methods: {
  67. getData() {
  68. this.listLoading = true
  69. getSensorCat(this.conditions).then((resp) => {
  70. this.listLoading = false
  71. const { code, msg, data } = resp
  72. if (code === 0) {
  73. // this.total = total
  74. this.dataList = data
  75. } else {
  76. this.$message.error(msg)
  77. }
  78. })
  79. },
  80. // 查询
  81. handleFilter() {
  82. this.conditions.page = 1
  83. this.getData()
  84. },
  85. // 添加
  86. handleAdd() {
  87. this.$refs['sensor-cat'].showAddModel()
  88. },
  89. // 修改
  90. handleEdit(data) {
  91. this.$refs['sensor-cat'].showEditModel(JSON.parse(JSON.stringify(data)))
  92. },
  93. // 删除
  94. handleDelete(data) {
  95. const { sensorTypeId } = data
  96. this.$confirm('此操作将永久删除, 是否继续?', '提示', {
  97. confirmButtonText: '确定',
  98. cancelButtonText: '取消',
  99. type: 'warning'
  100. }).then(() => {
  101. deleteSensorCatById(sensorTypeId).then((resp) => {
  102. const { code, msg } = resp
  103. if (code === 0) {
  104. this.$message.success(msg)
  105. this.getData()
  106. } else {
  107. this.$message.error(msg)
  108. }
  109. }).catch((error) => {
  110. console.log(error)
  111. })
  112. }).catch(() => {
  113. this.$message.info('已取消删除')
  114. })
  115. }
  116. }
  117. }
  118. </script>