v2admin/plop-templates/table-view/index.hbs

<!-- {{ title }} -->
<template>
  <div class="app-container">
    <el-container>

      <el-main>
        <!-- 查询 -->
        <Conditions ref="conditions" :search-params.sync="searchParams" @search="search" />
        <!-- 表格 -->
        <Tables ref="dyTable" :search-params="searchParams" @rowOperation="rowOperation" />
        <!-- 弹窗 -->
        <Details ref="detail" />
      </el-main>

    </el-container>
  </div>
</template>

<script>
import Tables from './components/table.vue'
import Conditions from './components/conditions.vue'
import Details from './components/detail.vue'

export default {
  name: '{{ properCase name }}',
  components: { Conditions, Tables, Details },
  data() {
    return {
      global: {
        loading: true,
      },
      searchParams: {} // 查询(此处不赋值)
    }
  },
  provide() {
    return {
      global: this.global, // 全局数据对象
      reload: this.reload, // 重置
      refresh: this.refresh // 刷新
    }
  },
  created() {
    this.updateOptions()
  },
  methods: {
    /* common */
    reload() { // 重置搜索 回到第一页
      this.$refs.conditions.reset()
    },
    refresh() { // 不重置搜索 刷新当前页
      this.$refs.dyTable.getList(this.searchParams)
    },
    /* search -> table */
    search(params) { // 搜索
      this.searchParams = params
      this.$refs.dyTable.pageObj.current = 1
      this.$refs.dyTable.getList(this.searchParams)
    },
    /* table -> dialog */
    async rowOperation(row, idx, actionName, params = {}) {
      if (['add', 'edit', 'see'].includes(actionName)) { // 增改查统一
        this.$refs['detail'].showDialog({
          mode: actionName,
          formData: row || {},
          ...params // 自定义字段
        })
      } else if (actionName === 'delete') { // 删除
        const txt = `<p class="delText">您确定要删除该条记录吗？</p>`
        await this.$confirm(txt, '温馨提示', {
          dangerouslyUseHTMLString: true,
          type: 'warning'
        })
        try {
          this.loading = true
          // TODO: 删除
          // const res = await deleteInvitation({ id: row.id })
          if (res.success) {
            this.reload()
          }
        } finally {
          this.loading = false
        }
      } else { // 表格其它操作
        this.$refs[actionName].showDialog({
          formData: row || {},
          ...params // 自定义字段
        })
      }
    },
    updateOptions() {

    }
  }
}
</script>

<style lang="scss" scoped>

</style>