DYL0109
2025-04-16 75f043dfa6660716364e66ee0b3cf99f44255686
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<template>
  <div class="page">
    <div class="form-card">
      <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="120px">
        <el-form-item label="标题">
          <el-input v-model="queryParams.title" placeholder="请输入标题" clearable />
        </el-form-item>
        <el-form-item label="能源类型">
          <el-select v-model="queryParams.type" placeholder="请选择能源类型" style="width: 100%" clearable>
            <el-option v-for="dict in types" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button type="primary" icon="plus" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
 
    <div class="table-bg-style">
      <div class="table-box">
        <el-table :data="tableData" v-loading="loading">
          <el-table-column prop="title" label="标题" show-overflow-tooltip align="center" />
          <el-table-column prop="typeDesc" label="能源类型" show-overflow-tooltip align="center" />
          <el-table-column prop="content" label="内容" show-overflow-tooltip align="center" />
          <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip align="center" />
          <el-table-column label="操作" width="300" align="center">
            <template #default="scope">
              <el-button link type="primary" icon="Edit" @click="handleAdd(scope.row)"> 修改 </el-button>
              <el-button link type="primary" icon="Delete" @click="handleDel(scope.row)"> 删除 </el-button>
            </template>
          </el-table-column>
        </el-table>
 
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
    <edit-modal ref="EditModalRef" @getList="getList" :types="types" />
  </div>
</template>
 
<script setup>
import EditModal from "./components/EditModal.vue"
import { knowledgeBaseList, knowledgeBaseDel, knowledgeBaseInfo } from "@/api/policy/knowledgeBase"
let { proxy } = getCurrentInstance()
const types = ref([
  { label: "电", value: 0 },
  { label: "水", value: 1 },
  { label: "天然气", value: 2 },
  { label: "蒸汽", value: 3 },
])
let loading = ref(false)
let total = ref(0)
let tableData = ref([])
let queryParams = ref({
  title: "",
  type: null,
  pageNum: 1,
  pageSize: 10,
})
 
function getList() {
  loading.value = true
  knowledgeBaseList(queryParams.value).then((res) => {
    console.log(res.rows)
    tableData.value = res.rows
    total.value = res.total
    loading.value = false
  })
}
 
getList()
 
let EditModalRef = ref("")
function handleAdd(row) {
  if (EditModalRef.value) {
    if (row.id) {
      knowledgeBaseInfo(row.id).then((res) => {
        EditModalRef.value.handleOpen(res.data)
      })
    } else {
      EditModalRef.value.handleOpen(row)
    }
  }
}
 
function handleDel(row) {
  proxy.$modal
    .confirm("是否确认删除数据项?")
    .then(function () {
      return knowledgeBaseDel(row.id)
    })
    .then(() => {
      getList()
      proxy.$modal.msgSuccess("删除成功")
    })
    .catch(() => {})
}
 
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}
 
function resetQuery() {
  queryParams.value = {
    title: "",
    type: null,
    pageNum: 1,
    pageSize: 10,
  }
  getList()
}
</script>
 
<style lang="scss" scoped>
@import "@/assets/styles/page.scss";
 
.header-box {
  :deep .el-form-item__content {
    color: #fff;
    font-size: 16px;
  }
}
</style>