low-code/src/views/view-all-manage/view-list/index.vue

<template>
  <div class="normal-container">
    <div class="view-list-box">
      <div class="left-box">
        <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
          <a-form-item label="项目">
            <a-select
              :options="projectSel"
              v-model:value="projectId"
              placeholder="请选择项目"
              @change="onProjectChange"
            ></a-select>
          </a-form-item>
          <a-form-item label="数据来源">
            <a-select
              :options="modularSel"
              v-model:value="modularId"
              placeholder="请先选好项目再选择"
              @change="onModularChange"
            ></a-select>
          </a-form-item>
        </a-form>
        <a-table
          :data-source="dataList"
          :columns="viewListCols"
          :pagination="false"
          :row-class-name="
            (record) =>
              record.preview_id === selectedRowId ? 'selected-row' : ''
          "
          :custom-row="
            (record, index) => {
              return {
                onClick: () => {
                  selectedRowId = record.preview_id;
                  toGetViewInfo();
                },
              };
            }
          "
          size="small"
          bordered
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'action'">
              <a-popconfirm
                title="确定删除？"
                @confirm="toDelete(record.preview_id)"
              >
                <a-button
                  type="link"
                  @click="
                    (e) => {
                      e.stopPropagation();
                    }
                  "
                  >删除</a-button
                >
              </a-popconfirm>
            </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="toGetList"
        />
      </div>
      <div class="right-box">
        <y-table
          v-if="selectViewInfo.type === 'table'"
          :filter-config="selectViewInfo.filter"
          :data-list="selectViewInfo.data"
          :column-config="selectViewInfo.header"
          :total="selectViewInfo.count"
          :title="selectViewInfo.preview_name"
          :is-export="selectViewInfo.is_export"
          @toFilt="
            (params) => {
              toGetViewInfo(params);
            }"
          @toExport="
            (params) => {
              toExport(params)
            }"
        />
        <y-chart v-else-if="selectViewInfo.type === 'chart'" :chartCfg="selectViewInfo.config" :title="selectViewInfo.preview_name" :filter-config="selectViewInfo.filter" @toFilt="toGetViewInfo" />
        <div class="preview-area" v-else>
          <div><BarChartOutlined /></div>
          <div>展示区</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive } from "vue";
import { getProModular, getViewList, getViewInfo, deleteView } from "./service";
import { exportTable } from "@/api/preview/index";
import { viewListCols } from "./config";
import yTable from "@/components/common/y-table.vue";
import { message } from "ant-design-vue";
import { BarChartOutlined } from "@ant-design/icons-vue";

const projectSel = ref([]);
const modularSel = ref([]);
const projectId = ref();
const modularId = ref();
const dataList = ref([]);
const selectedRowId = ref();
const selectViewInfo = ref({
  type: "",
  filter: [],
  config: {
    line: {
      data: []
    }
  }
});

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

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

const toGetProModular = () => {
  getProModular().then((res) => {
    projectSel.value = res.data;
  });
};

const toGetList = () => {
  getViewList({
    modularId: modularId.value,
    page: pageState.page,
    perPage: pageState.perPage,
  }).then((res) => {
    dataList.value = res.data.list;
    pageState.total = res.data.total;
  });
};

const toGetViewInfo = (params = {}) => {
  getViewInfo({
    previewId: selectedRowId.value,
    ...params,
  }).then((res) => {
    selectViewInfo.value = res.data;
  });
};

const toExport = (params = {}) => {
  exportTable({
    previewId: selectedRowId.value,
    ...params,
  }).then(() => {
    message.success("导出成功");
  });
}

const onProjectChange = (val) => {
  modularSel.value = projectSel.value.find((item) => item.value === val).child;
  modularId.value = null;
};

const onModularChange = () => {
  pageState.page = 1;
  toGetList();
};

const toDelete = (previewId) => {
  deleteView({ previewId }).then(() => {
    message.success("删除成功");
    toGetList();
  });
};
</script>

<style lang="less" scoped>
.normal-container {
  height: calc(100vh - 120px);
  padding: 16px;
}

.view-list-box {
  display: flex;
  height: 100%;
}

.left-box {
  width: 320px;
  height: calc(100% - 20px);
  padding: 10px;
  flex-shrink: 0;
  border-right: 1px solid #ddd;
  overflow: auto;
}

:deep(.@{ant-prefix}-table-row:hover) {
  cursor: pointer;
  background-color: #e6f4ff;
}

:deep(.selected-row) {
  background-color: #e6f4ff;
}

.pagination-box {
  text-align: center;
  margin-top: 10px;
}
.right-box {
  padding: 0 0 0 10px;
  flex-grow: 1;
  overflow: auto;
}

.preview-area {
  background-color: #f6f6f6;
  height: 100%;
  width: 100%;
  font-size: 20px;
  color: #999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .anticon-bar-chart {
    font-size: 100px;
  }
}
</style>