merchant_feedov_web/src/views/SetMeal/index.vue

<template>
  <div>
    <template v-if="AddSet">
      <div class="search">
        <Search :SearchForm="SetMealSearchForm" @query="initData" @reset="reset"></Search>
      </div>

      <div class="table">
        <a-table row-key="id" :data="tableData" :columns="columnsSetMeal" :pagination="pagination"
          :scroll="{ x: 'auto' }" @page-change="evChangePage">
          <template #status="{ record }">
            <a-tag :color="record.status == 1 ? '#7bc616' : '#86909c'">{{ record.status == 1 ? '上架' : '下架' }}</a-tag>
          </template>
          <template #Controls="{ record }">
            <a-space>
              <a-button type="text" @click="SetUpPackage(record)">查看套餐</a-button>
            </a-space>
          </template>
          <template #isRecharge="{ record }">
            {{ filterDict(SetMealList, record.isRecharge) }}
          </template>
        </a-table>
      </div>
    </template>

    <!-- 新增套餐计划 -->
    <AddSetMeal v-if="!AddSet" :id="pid" @break="AddSet=true"/>
  </div>

</template>

<script setup>
import { ref, onMounted, toRefs } from 'vue';
import Search from '@/components/Search/index.vue'
import { SetMealSearchForm, columnsSetMeal } from './config.js'
import { PackageSchedule } from '@/api/path/tariffManagement.api.js'
import { Getdictionary, tableFunction, filterDict } from '@/mixins/index.js'
import AddSetMeal from './addSetMeal.vue'

const state = ref({
  pagination: {
    total: 0,
    pageSize: 10,
    current: 1,
  },
  AddSet: true,
  pid: null,
  SetMealList: [],
})
const { pagination,AddSet, pid,SetMealList } = toRefs(state.value)


const { tableData, evChangePage, initData, reset } = tableFunction(pagination.value, PackageSchedule)


const SetUpPackage = (item) => {
  pid.value = item.id
  AddSet.value = false
}

onMounted(async () => {
  SetMealList.value = await Getdictionary('setMeal')
  initData()
})
</script>
<style lang="less" scoped>
.search,
.table {
  margin-top: 1rem;
}

.code {
  justify-content: center;
  display: flex;
}
</style>