docking-vue/src/views/database/connect_enterprises_management/index.vue

<template>
  <div>
    <app-search
      v-model="searchForm"
      :options
      label-width="150px"
      @submit="resetPagination"
    />
    <el-button type="primary" class="mb-10" @click="fnAddorEdit('add')">
      新增平台
    </el-button>
    <app-table
      ref="tableRef"
      v-model:pagination="pagination"
      :data="list"
      @get-data="getData"
    >
      <el-table-column prop="serviceName" label="所在平台名称" />
      <el-table-column prop="companyName" label="企业名称" />
      <el-table-column prop="sectorName" label="所属行业" />
      <el-table-column prop="thirdList" label="对接上级平台">
        <template #default="{ row }">
          {{ row.thirdList.map((item) => item.platformName).join("，") }}
        </template>
      </el-table-column>
      <el-table-column prop="runTime" label="运行时间" />
      <el-table-column prop="companyStatus" label="状态">
        <template #default="{ row }">
          {{ translationStatus(row.companyStatus, STATUS_LIST) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="240">
        <template #default="{ row }">
          <el-button
            type="primary"
            text
            link
            @click="
              router.push({
                path: '/database/connect_enterprises_management/info',
                query: {
                  id: row.id,
                },
              })
            "
          >
            查看
          </el-button>
          <el-button type="primary" text link @click="fnAddorEdit('edit', row)">
            编辑
          </el-button>
          <el-button type="danger" text link @click="fnDelete(row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </app-table>
    <edit-dialog
      v-if="visible"
      v-model:visible="visible"
      :title="title"
      :corp-info-id="corpInfoId"
      @get-data="resetPagination"
    ></edit-dialog>
  </div>
</template>

<script setup>
import { ref } from "vue";
import {
  getBusCompanyInfoList,
  setBusCompanyInfoDelete,
  getBusServicePlatformListAll,
} from "@/request/database.js";
import useListData from "@/hooks/useListData.js";
import AppSearch from "@/components/search/index.vue";
import AppTable from "@/components/table/index.vue";
import editDialog from "./components/editDialog.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { translationStatus } from "@/assets/js/utils.js";
import { STATUS_LIST } from "@/assets/js/constant.js";
import { useRouter } from "vue-router";
const router = useRouter();

const corpInfoId = ref(null);
const { data: serveOptions } = await getBusServicePlatformListAll();
const { list, pagination, searchForm, getData, resetPagination, tableRef } =
  useListData(getBusCompanyInfoList);
const options = [
  { key: "companyName", label: "企业名称" },
  {
    key: "serviceName",
    label: "服务平台名称",
    type: "select",
    labelKey: "serviceName",
    valueKey: "serviceName",
    options: serveOptions,
  },
  {
    key: "platformStatus",
    label: "状态",
    type: "select",
    options: STATUS_LIST,
  },
  {
    key: "platformName",
    label: "上级平台名称",
  },
];

const visible = ref(false);
const title = ref("");
const fnAddorEdit = (type, row) => {
  if (type === "edit") {
    corpInfoId.value = row.id;
    title.value = "修改";
  } else {
    title.value = "新增";
    corpInfoId.value = null;
  }
  visible.value = true;
};
const fnDelete = async (id) => {
  await ElMessageBox.confirm("确定要删除吗？", {
    type: "warning",
  });
  await setBusCompanyInfoDelete({ id });
  ElMessage.success("删除成功");
  resetPagination();
};
</script>

<style scoped lang="scss"></style>