【ct 增删改查页面】

<template>
  <!-- 数据域标签 -->
  <div class="pa-3" style="background-color: #FFF;">
    <filter-list :option="filter" @search="handleSearch" />
    <table-list
      class="mt-3"
      :loading="loading"
      :headers="headers"
      :items="items"
      :total="total"
      :page-info="pageInfo"
      :is-tools="false"
      :show-select="false"
      @edit="handleEdit"
      @delete="handleDelete"
      @pageHandleChange="pageHandleChange"
      @sort="handleSort"
    >
      <template v-slot:navBtn>
        <v-btn class="elevation-5 buttons" color="primary" rounded @click="handleAdd">
          <v-icon left>mdi-plus</v-icon>
          新增
        </v-btn>
      </template>
    </table-list>
    <edit-dialog :visible.sync="show" :title="editId ? '编辑' : '新增' " @submit="handleSubmit">
      <form-list ref="form" v-if="show" style="min-height: 550px;" class="mt-5" :items="formItems"></form-list>
    </edit-dialog>
  </div>
</template>

<script>
import FilterList from '@/components/Filter'
import TableList from '@/components/List/table'
import EditDialog from '@/components/Dialog'
import FormList from '@/components/Form/list'
import {
  combinationTagsPage,
  combinationTagsDel,
  combinationTagsSave
} from '@/api/dataBook'
export default {
  name: 'data-field-tag',
  components: {
    FilterList,
    TableList,
    EditDialog,
    FormList
  },
  data () {
    return {
      formItems: {
        options: [
          {
            type: 'text',
            key: 'title',
            value: null,
            default: null,
            label: '请输入中文名称',
            outlined: true,
            dense: true,
            rules: [v => !!v || '请输入中文名称']
          }
        ]
      },
      filter: {
        list: [
          { type: 'textField', value: '', label: '请输入中文名称', key: 'title' }
        ]
      },
      show: false,
      loading: false,
      headers: [
        { text: '标签名称', align: 'start', value: 'title' },
        { text: '标签id', align: 'start', value: 'metaDataCombinationTagsId' },
        { text: '操作', align: 'start', value: 'actions' }
      ],
      items: [],
      total: 0,
      pageInfo: {
        size: 10,
        current: 1
      },
      params: {},
      orders: [],
      editId: null
    }
  },
  created () {
    this.init()
  },
  methods: {
    async init () {
      try {
        const { data } = await combinationTagsPage({ ...this.params, ...this.pageInfo, orders: this.orders })
        this.items = data.records.map(item => item.entity)
        this.total = data.total
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    handleAdd () {
      this.editId = null
      this.formItems.options.forEach(item => { item.value = item.default })
      this.show = true
    },
    async handleEdit (obj) {
      // combinationTagsDetail // 详情接口
      this.formItems.options.forEach(item => { item.value = obj[item.key] })
      this.editId = obj.metaDataCombinationTagsId
      this.show = true
    },
    handleDelete (id, { metaDataCombinationTagsId }) {
      this.$confirm('提示', '是否确定删除该项元数据').then(async () => {
        try {
          await combinationTagsDel({ metaDataCombinationTagsId })
          this.$snackbar.success('删除成功')
          this.init()
        } catch (error) {
          this.$snackbar.error(error)
        }
      })
    },
    async handleSubmit () {
      const query = this.formItems.options.reduce((res, item) => {
        res[item.key] = item.value
        return res
      }, {})
      if (this.editId) Object.assign(query, { metaDataCombinationTagsId: this.editId })
      try {
        await combinationTagsSave(query)
        this.show = false
        this.$snackbar.success(`${this.editId ? '编辑' : '新增'}成功`)
        this.init()
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    handleSort (val) {
      this.orders = val
      this.init()
    },
    handleSearch (obj) {
      Object.assign(this.params, obj)
      this.pageInfo.current = 1
      this.init()
    },
    pageHandleChange (index) {
      this.pageInfo.current = index
      this.init()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>