|
|
@@ -0,0 +1,106 @@
|
|
|
+<template>
|
|
|
+ <div class="pa-3 white">
|
|
|
+ <m-search class="mb-3" :items="searchItems" v-model="searchValue" @search="onSearch">
|
|
|
+ <template #button>
|
|
|
+ <m-button type="orange" icon="el-icon-plus" @click="onAdd">新增</m-button>
|
|
|
+ </template>
|
|
|
+ </m-search>
|
|
|
+ <m-table
|
|
|
+ v-loading="loading"
|
|
|
+ :items="items"
|
|
|
+ :headers="headers"
|
|
|
+ :page-size="pageInfo.size"
|
|
|
+ :page-current="pageInfo.current"
|
|
|
+ :total="total"
|
|
|
+ @page-change="onPageChange"
|
|
|
+ >
|
|
|
+ <template #actions="{ row }">
|
|
|
+ <m-button type="primary" text @click="onEdit(row)">编辑</m-button>
|
|
|
+ <m-button type="danger" text @click="onDelete(row)">删除</m-button>
|
|
|
+ </template>
|
|
|
+ </m-table>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'PrivateChart',
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ searchItems: [
|
|
|
+ {
|
|
|
+ label: '名称',
|
|
|
+ prop: 'name',
|
|
|
+ type: 'input',
|
|
|
+ options: {
|
|
|
+ placeholder: '请输入名称'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ searchValues: {
|
|
|
+ name: null
|
|
|
+ },
|
|
|
+ headers: [
|
|
|
+ { label: '名称', prop: 'name' },
|
|
|
+ { label: '描述', prop: 'desc' },
|
|
|
+ { label: '操作', prop: 'actions', fixed: 'right', width: 300 }
|
|
|
+ ],
|
|
|
+ items: [],
|
|
|
+ total: 0,
|
|
|
+ pageInfo: {
|
|
|
+ current: 1,
|
|
|
+ size: 10
|
|
|
+ },
|
|
|
+ loading: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async onInit () {
|
|
|
+ this.loading = true
|
|
|
+ try {
|
|
|
+ // const { data } = await ApiName()
|
|
|
+ // this.items = data.list || []
|
|
|
+ // this.total = data.total || 0
|
|
|
+ } catch (error) {
|
|
|
+ this.message.error(error.message || '请求失败')
|
|
|
+ } finally {
|
|
|
+ this.loading = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onAdd () {
|
|
|
+ this.refs.templateRefs.open()
|
|
|
+ },
|
|
|
+ onEdit (item) {
|
|
|
+ this.refs.templateRefs.open(item)
|
|
|
+ },
|
|
|
+ onDelete (row) {
|
|
|
+ this.confirm('确定删除吗？', '提示')
|
|
|
+ .then(async () => {
|
|
|
+ try {
|
|
|
+ // await ApiName({ id: row.id })
|
|
|
+ this.message.success('删除成功')
|
|
|
+ this.onInit()
|
|
|
+ } catch (error) {
|
|
|
+ this.message.error(error.message || '删除失败')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(_ => {})
|
|
|
+ },
|
|
|
+ onSearch () {
|
|
|
+ this.pageInfo.current = 1
|
|
|
+ this.onInit()
|
|
|
+ },
|
|
|
+ onPageChange (index) {
|
|
|
+ this.pageInfo.current = index
|
|
|
+ this.onInit()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.onInit()
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ /* 自定义样式 */
|
|
|
+</style>
|
zhengnaiwen_citu