vue-manage-system/src/views/table/basetable.vue

<template>
  <div>
    <TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
    <div class="container">
      <TableCustom
        :columns="columns"
        :tableData="tableData"
        :total="page.total"
        :viewFunc="handleView"
        :delFunc="handleDelete"
        :editFunc="handleEdit"
        :refresh="getData"
        :currentPage="page.index"
        :changePage="changePage"
      >
        <template #toolbarBtn>
          <el-button
            type="warning"
            :icon="CirclePlusFilled"
            @click="visible = true"
            >新增</el-button
          >
        </template>
        <template #money="{ rows }"> ￥{{ rows.money }} </template>
        <template #thumb="{ rows }">
          <el-image
            class="table-td-thumb"
            :src="rows.thumb"
            :z-index="10"
            :preview-src-list="[rows.thumb]"
            preview-teleported
          />
        </template>
        <template #state="{ rows }">
          <el-tag :type="rows.state ? 'success' : 'danger'">
            {{ rows.state ? "正常" : "异常" }}
          </el-tag>
        </template>
      </TableCustom>
    </div>
    <el-dialog
      :title="isEdit ? '编辑' : '新增'"
      v-model="visible"
      width="700px"
      destroy-on-close
      :close-on-click-modal="false"
      @close="closeDialog"
    >
      <TableEdit
        :form-data="rowData"
        :options="options"
        :edit="isEdit"
        :update="updateData"
      >
        <template #thumb="{ rows }">
          <img class="table-td-thumb" :src="rows.thumb" />
        </template>
      </TableEdit>
    </el-dialog>
    <el-dialog
      title="查看详情"
      v-model="visible1"
      width="700px"
      destroy-on-close
    >
      <TableDetail :data="viewData">
        <template #thumb="{ rows }">
          <el-image :src="rows.thumb" />
        </template>
      </TableDetail>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="basetable">
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { CirclePlusFilled } from "@element-plus/icons-vue";
import { fetchData } from "@/api/index";
import TableCustom from "@/components/table-custom.vue";
import TableDetail from "@/components/table-detail.vue";
import TableSearch from "@/components/table-search.vue";
import { TableItem } from "@/types/table";
import { FormOption, FormOptionList } from "@/types/form-option";

// 查询相关
const query = reactive({
  name: "",
});
const searchOpt = ref<FormOptionList[]>([
  { type: "input", label: "用户名：", prop: "name" },
]);
const handleSearch = () => {
  changePage(1);
};

// 表格相关
let columns = ref([
  { type: "selection" },
  { type: "index", label: "序号", width: 55, align: "center" },
  { prop: "name", label: "用户名" },
  { prop: "money", label: "账户余额" },
  { prop: "thumb", label: "头像" },
  { prop: "state", label: "账户状态" },
  { prop: "operator", label: "操作", width: 250 },
]);
const page = reactive({
  index: 1,
  size: 10,
  total: 200,
});
const tableData = ref<TableItem[]>([]);
const getData = async () => {
  const res = await fetchData();
  tableData.value = res.data.list;
};
getData();

const changePage = (val: number) => {
  page.index = val;
  getData();
};

// 新增/编辑弹窗相关
let options = ref<FormOption>({
  labelWidth: "100px",
  span: 24,
  list: [
    { type: "input", label: "用户名", prop: "name", required: true },
    { type: "number", label: "账户余额", prop: "money", required: true },
    {
      type: "switch",
      activeText: "正常",
      inactiveText: "异常",
      label: "账户状态",
      prop: "state",
      required: true,
    },
    { type: "upload", label: "头像", prop: "thumb", required: true },
  ],
});
const visible = ref(false);
const isEdit = ref(false);
const rowData = ref({});
const handleEdit = (row: TableItem) => {
  rowData.value = { ...row };
  isEdit.value = true;
  visible.value = true;
};
const updateData = () => {
  closeDialog();
  getData();
};

const closeDialog = () => {
  visible.value = false;
  isEdit.value = false;
};

// 查看详情弹窗相关
const visible1 = ref(false);
const viewData = ref({
  row: {},
  list: [],
});
const handleView = (row: TableItem) => {
  viewData.value.row = { ...row };
  viewData.value.list = [
    {
      prop: "id",
      label: "用户ID",
    },
    {
      prop: "name",
      label: "用户名",
    },
    {
      prop: "money",
      label: "账户余额",
    },
    {
      prop: "state",
      label: "账户状态",
    },
    {
      prop: "thumb",
      label: "头像",
    },
  ];
  visible1.value = true;
};

// 删除相关
const handleDelete = (row: TableItem) => {
  ElMessage.success("删除成功");
};
</script>

<style scoped>
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>