merchant_feedov_web/src/views/system/dictionary/index.vue

<template>
  <div class="container">
    <div class="head-title">
      <span> {{ route.meta.title }} </span>
      <a-button type="primary" size="mini" @click="showAddForm">{{
        $t("form.Add")
      }}</a-button>
    </div>

    <find-head  :list="findConfig" @onSearch="evSearch" />
    <a-table :scroll="{ x: '120%' }" :columns="columns" :data="tableData" >

      <template #id="{ record }">
          <a
            href="javascript:;"
            class="a-link"
            style="margin-right: 1rem"
            @click="evEdit(record)"
            >{{$t('form.Edit')}}</a
          >
          <a-popconfirm
            :content="$t('form.DeleteConfirm')"
            :ok-text="$t('form.Confirm')"
            :cancel-text="$t('form.Cancel')"
            @ok="evDelete(record.id)"
          >
            <a href="javascript:;" class="a-link">{{$t('form.Delete')}}</a>
        </a-popconfirm>
        </template>
    </a-table>

    <DictionaryForm
      v-model:visible="formVisible"
      :is-edit="isEdit"
      :edit-data="editData"
      @submit="handleSubmitDictionary"
    />
  </div>
</template>

<script setup>
import { onMounted, reactive, computed, ref, watch } from "vue";
import { useRoute } from "vue-router";
import FindHead from "@/components/FindHead/index.vue"
import { columns, findConfig } from "./config";
import { getDictionaryList, getDictionaryById, addDictionary, updateDictionary } from "@/api/path/dictionary";
import { getInitPagination } from "@/settings/pagination";
import DictionaryForm from "./DictionaryForm.vue";

const route = useRoute();

const tableData = ref([]);
const findData = ref({})
const pagination = ref(getInitPagination)
const formVisible = ref(false);
const isEdit = ref(false);
const editData = ref(null);

const showAddForm = () => {
  isEdit.value = false;
  editData.value = null;
  formVisible.value = true;
};

const evSearch = (data) => {
  initTableData()
  console.log("evSearch", data);
}

const initTableData = async () => {
  const {data, total} = await getDictionaryList({
    size: pagination.value.pageSize,
    current: pagination.value.current,
    ...findData.value,
  }) 
  tableData.value = data.records
  findConfig[1].options = data.records.map(item => ({
    label: item.typeLabel,
    value: item.typeId,
  }))
  pagination.value.total = data.total
}

const evEdit = async (record) => {
  isEdit.value = true;
  // 模拟获取详细数据的 API 调用
  const detailData = await getDictionaryById(record.id);
  editData.value = detailData;
  formVisible.value = true;
};

const handleSubmitDictionary = async (formData) => {
  if (isEdit.value) {
    // 模拟更新 API 调用
    await updateDictionary(formData);
    console.log('Dictionary item updated:', formData);
  } else {
    // 模拟添加 API 调用
    await addDictionary(formData);
    console.log('New dictionary item added:', formData);
  }
  // 重新加载表格数据
  await initTableData();
};

onMounted(() => {
  initTableData()
});
</script>

<style lang="less" scoped>
.head-title {
  display: flex;
  justify-content: space-between;
  .fn-headTitleDiv();
  padding: 0.5rem 0;
}
</style>