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

<template>
  <div class="normal-container module-cfg-box">
    <div class="header-box">
      <a-space>
        <a-input
          v-model:value="modularName"
          placeholder="请输入数据来源名称"
          allow-clear
          style="width: 200px"
          @change="search"
        />
        <a-select
          placeholder="请选择项目"
          v-model:value="projectId"
          :options="projectSel"
          allow-clear
          style="width: 200px"
          @change="search"
        ></a-select>
        <a-button type="primary" @click="openCreateModal">新建</a-button>
      </a-space>
    </div>
    <div class="content-box">
      <a-table
        :columns="moduleCfgCols"
        :data-source="dataList"
        :pagination="false"
        size="small"
        bordered
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'is_show'">
            <a-switch
              :checked="record.is_show"
              :checkedValue="1"
              :unCheckedValue="0"
              @change="toChangeStatus(record.modular_id, $event)"
            />
          </template>
          <template v-if="column.dataIndex === 'action'">
            <a-space>
              <a-button type="link" size="small" @click="openFieldModal(record)"
                >字段管理</a-button
              >
              <a-button
                type="link"
                size="small"
                @click="toGetModularDetail(record.modular_id)"
                >编辑</a-button
              >
              <a-popconfirm
                title="确定删除吗？"
                @confirm="toDelete(record.modular_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="toGetModularList"
      />
    </div>
    <CreateModal
      :width="700"
      :open="modalState.visible"
      :title="modalState.title"
      :type="modalState.type"
      :data="modalState.data"
      :projectSelect="projectSel"
      @cancel="modalState.visible = false"
      @ok="toSave"
    />
    <FieldModal
      title="字段管理"
      width="90%"
      :open="fieldModalState.visible"
      :modularId="fieldModalState.modularId"
      @cancel="fieldModalState.visible = false"
    />
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { message } from "ant-design-vue";
import { moduleCfgCols } from "./config";
import {
  getModularList,
  deleteModular,
  getModularDetail,
  getProjectSelect,
  saveModular,
  updateStatus,
} from "./service";
import CreateModal from "./components/create-modal.vue";
import FieldModal from "./components/field-modal.vue";

const dataList = ref([]);
const listLoading = ref(false);
const saveLoading = ref(false);
const detailLoading = ref(false);
const modularName = ref("");
const projectId = ref();
const projectSel = ref([]);
const modalState = reactive({
  title: "",
  visible: false,
  type: "", // add - 新建，edit - 编辑
  data: {},
});
const fieldModalState = reactive({
  visible: false,
  title: "",
  modularId: undefined,
});

const pageState = reactive({
  page: 1,
  pageSize: 20,
  total: 0,
});

onMounted(() => {
  toGetModularList();
  toGetProjectSel();
});

const toGetProjectSel = () => {
  getProjectSelect().then((res) => {
    projectSel.value = res.data;
  });
};

const toGetModularList = () => {
  listLoading.value = true;
  getModularList({
    page: pageState.page,
    perPage: pageState.pageSize,
    modularName: modularName.value,
    projectId: projectId.value,
  }).then((res) => {
    dataList.value = res.data.list;
    pageState.total = res.data.total;
    listLoading.value = false;
  });
};

// 详情
const toGetModularDetail = (modularId) => {
  detailLoading.value = true;
  modalState.visible = true;
  modalState.title = "编辑";
  modalState.type = "edit";
  getModularDetail({ modularId })
    .then((res) => {
      modalState.data = res.data;
    })
    .finally(() => {
      detailLoading.value = false;
    });
};

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

// 删除
const toDelete = (id) => {
  deleteModular({ modular_id: id }).then(() => {
    message.success("删除成功");
    search();
  });
};

const toChangeStatus = (id, status) => {
  updateStatus({
    modular_id: id,
    status,
  }).then(() => {
    message.success("修改成功");
    search();
  });
};

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

const search = () => {
  pageState.page = 1;
  toGetModularList();
};

const openFieldModal = (record) => {
  fieldModalState.visible = true;
  fieldModalState.modularId = record.modular_id;
};
</script>

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

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

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