low-code/src/views/config-manage/view-cfg/index.vue

<template>
  <div class="normal-container view-cfg-box">
    <div class="header-box">
      <a-space>
        <a-input
          v-model:value="fieldName"
          placeholder="请输入字段名称"
          allow-clear
          style="width: 200px"
          @change="search"
        />
        <a-select
          placeholder="请选择数据表id"
          v-model:value="modularId"
          allow-clear
          style="width: 160px"
          @change="search"
        ></a-select>
        <a-button type="primary" @click="openCreateModal">新建</a-button>
      </a-space>
    </div>
    <div class="content-box">
      <a-table
        :columns="viewCfgCols"
        :data-source="dataList"
        :pagination="false"
        size="small"
        bordered
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'action'">
            <a-space>
              <a-button
                type="link"
                size="small"
                @click="toGetDetail(record.field_id)"
                >编辑</a-button
              >
              <a-popconfirm
                title="确定删除？"
                @confirm="toDelete(record.field_id)"
              >
                <a-button type="link" size="small">删除</a-button>
              </a-popconfirm>
            </a-space>
          </template>
        </template>
      </a-table>
      <a-pagination
        v-model:current="pageState.page"
        :total="pageState.total"
        :page-size="pageState.perPage"
        :hide-on-single-page="false"
        size="small"
        class="pagination-box"
        @change="toGetFieldList"
      />
    </div>
    <CreateModal
      :width="700"
      :open="modalState.visible"
      :title="modalState.title"
      :type="modalState.type"
      :data="modalState.data"
      @cancel="modalState.visible = false"
      @ok="toSave"
    />
  </div>
</template>

<script setup>
import { onMounted, ref, reactive } from "vue";
import { viewCfgCols } from "./config";
import {
  getFieldList,
  deleteField,
  saveField,
  getFieldDetail,
} from "./service";
import CreateModal from "./components/create-modal.vue";
import { message } from "ant-design-vue";

const listLoading = ref(false);
const saveLoading = ref(false);
const dataList = ref([]);
const fieldName = ref("");
const modularId = ref("");
const modalState = reactive({
  title: undefined,
  visible: false,
  type: "", // add - 新建，edit - 编辑
  data: {},
});
const pageState = reactive({
  page: 1,
  perPage: 20,
  total: 0,
});

onMounted(() => {
  toGetFieldList();
});

const toGetFieldList = () => {
  listLoading.value = true;
  getFieldList({
    fieldName: fieldName.value,
    modularId: modularId.value,
    page: pageState.page,
    perPage: pageState.perPage,
  })
    .then((res) => {
      dataList.value = res.data.list;
      pageState.total = res.data.total;
    })
    .finally(() => {
      listLoading.value = false;
    });
};

// 保存
const toSave = (data) => {
  saveLoading.value = true;
  saveField(data)
    .then(() => {
      message.success("保存成功");
    })
    .finally(() => {
      saveLoading.value = false;
    });
};

// 获取详情
const toGetDetail = (fieldId) => {
  modalState.visible = true;
  modalState.title = "编辑";
  modalState.type = "edit";
  getFieldDetail({ fieldId }).then((res) => {
    modalState.data = res.data;
  });
};

// 删除
const toDelete = (fieldId) => {
  deleteField({ field_id: fieldId }).then(() => {
    message.success("删除成功");
    search();
  });
};

// 点击新建
const openCreateModal = () => {
  modalState.visible = true;
  modalState.title = "新建";
  modalState.type = "add";
  modalState.data = {};
};

const handleEdit = (record) => {
  console.log(record);
};

const search = () => {
  pageState.page = 1;
  toGetFieldList();
};
</script>

<style lang="less" scoped>
.header-box {
  margin-bottom: 10px;
}

.@{ant-prefix}-table-wrapper {
  margin-bottom: 10px;
}

.pagination-box {
  text-align: center;
}
</style>