vent-template/src/views/vent/sys/setting/index.vue

<template>
  <div class="setting-box">
    <a-table :columns="columns" :data-source="dataSource" bordered :pagination="false">
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'operation'">
          <a class="action-link" @click="handleEdit(record)">编辑</a>
        </template>
        <template v-if="column.dataIndex === 'logoIcon' || column.dataIndex === 'loginBack'">
          <span>{{ record[column.dataIndex] }}</span>
          <img width="50" height="50" :src="urlStr + '/sys/common/static/' + record[column.dataIndex]" />
        </template>
      </template>
    </a-table>
    <DetailModal @register="register" @success="getDataSource" />
  </div>
</template>
<script lang="ts" name="system-setting" setup>
  import { ref, onMounted } from 'vue';
  import { useModal } from '/@/components/Modal';
  import DetailModal from './DetailModal.vue';
  import { columns } from './setting.data';
  import { getList } from './setting.api';
  import { useGlobSetting } from '/@/hooks/setting';
  const globSetting = useGlobSetting();
  const baseUploadUrl = globSetting.uploadUrl;

  let urlStr = '';
  if (import.meta.env.PROD) {
    urlStr = VUE_APP_URL.baseUrl;
  } else {
    urlStr = baseUploadUrl || '';
  }

  const [register, { openModal: openDetail }] = useModal();
  const dataSource = ref<any[]>([]);

  async function getDataSource(isReload?) {
    if (isReload) {
      location.reload();
    }
    const result = await getList({});
    dataSource.value = [result];
  }

  /**
   * 编辑事件
   */
  function handleEdit(record) {
    openDetail(true, {
      record,
      isUpdate: true,
    });
  }

  onMounted(async () => {
    await getDataSource();
  });
</script>
<style lang="less" scoped>
  @import '/@/design/theme.less';
  // 绿色主题特化的变量
  @{theme-green} {
    .setting-box {
      border: 1px solid #3c5c64;
      box-shadow: 0 0 20px #44b4ff33 inset;
      background-color: #ffffff11;
    }
  }
  .setting-box {
    margin: 10px 8px;
    height: calc(100% - 72px);
    padding-bottom: 10px;
    border: 1px solid #44d3ff70;
    border-radius: 2px;
    box-shadow: 0 0 20px #44b4ff33 inset;
    background-color: #ffffff11;
    overflow-y: auto;
  }
</style>