docking-vue/src/views/system_management/data_dictionary/index.vue

<template>
  <div>
    <app-table
      v-model:pagination="pagination"
      :data="list"
      @get-data="fnGetData"
    >
      <el-table-column label="名称">
        <template #default="{ row }">
          <el-button
            type="primary"
            text
            link
            @click="
              router.push({
                path: '/system_management/data_dictionary',
                query: {
                  parentName: row.name,
                  parentId: row.dictionariesId,
                },
              })
            "
          >
            {{ row.name }} <el-icon><arrow-right /></el-icon>
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="bianma" label="编码" />
      <el-table-column prop="dictionariesId" label="ID" width="300" />
      <el-table-column prop="orderBy" label="排序" width="50" />
      <el-table-column label="操作" width="100">
        <template #default="{ row }">
          <el-button
            type="primary"
            text
            link
            @click="fnAddOrEdit(row.dictionariesId, 'edit')"
          >
            编辑
          </el-button>
          <el-button
            type="primary"
            text
            link
            @click="fnDelete(row.dictionariesId)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
      <template #button>
        <el-button type="primary" @click="fnAddOrEdit('', 'add')">
          新增
        </el-button>
        <el-button
          v-if="parentId !== '0'"
          :icon="ArrowLeft"
          @click="router.back()"
        >
          返回
        </el-button>
      </template>
    </app-table>
    <add
      v-model:form="addOrEditDialog.form"
      v-model:visible="addOrEditDialog.visible"
      :parent-name="parentName"
      :parent-id="parentId"
      :type="addOrEditDialog.type"
      @get-data="resetPagination"
    />
  </div>
</template>

<script setup>
import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
import { nextTick, ref } from "vue";
import { useRouter, onBeforeRouteUpdate, useRoute } from "vue-router";
import AppTable from "@/components/table/index.vue";
import {
  setDataDictionaryDelete,
  getDataDictionaryList,
  getDataDictionaryInfo,
} from "@/request/system_management.js";
import { ElMessage, ElMessageBox } from "element-plus";
import useListData from "@/assets/js/useListData.js";
import Add from "./components/add.vue";

const router = useRouter();
const route = useRoute();
const parentIdDefault = "0";
const parentNameDefault = "（无）此项为顶级菜单";
const parentId = ref(route.query.parentId || parentIdDefault);
const parentName = ref(route.query.parentName || parentNameDefault);
const { list, pagination, resetPagination, getData } = useListData(
  getDataDictionaryList,
  {
    params: { parentId: parentId.value },
  }
);
const addOrEditDialog = ref({
  visible: false,
  type: "",
  form: {
    name: "",
    bianma: "",
    orderBy: "",
    descr: "",
  },
});
const fnGetData = () => {
  getData({ parentId: parentId.value });
};
onBeforeRouteUpdate((to) => {
  parentId.value = to.query.parentId || parentIdDefault;
  parentName.value = to.query.parentName || parentNameDefault;
  fnGetData();
});
const fnDelete = async (dictionariesId) => {
  await ElMessageBox.confirm(`确定要删除吗？`, { type: "warning" });
  await setDataDictionaryDelete({ dictionariesId });
  ElMessage.success("删除成功");
  await resetPagination();
};
const fnAddOrEdit = async (dictionariesId, type) => {
  addOrEditDialog.value.visible = true;
  addOrEditDialog.value.type = type;
  await nextTick();
  if (type === "edit") {
    const resData = await getDataDictionaryInfo({ dictionariesId });
    addOrEditDialog.value.form = resData.dictionaries;
  }
};
</script>

<style scoped></style>