vent-template/src/views/vent/reportManager/comment/reportMap.vue

<template>
  <div class="report-map">
    <div class="search-area">
      <a-tree-select
        v-model:value="searchForm.sysOrgCode"
        show-search
        style="width: 280px; margin-right: 15px"
        :dropdown-style="{ maxHeight: '200px', overflow: 'auto' }"
        placeholder="请选择部门..."
        allow-clear
        tree-default-expand-all
        :tree-data="sysOrgCodeList"
        tree-node-filter-prop="title"
      >
        <template #title="{ value: val, title }">
          {{ title }}
        </template>
      </a-tree-select>
      <a-button type="primary" preIcon="ant-design:search-outlined" style="margin-right: 15px" @click="getSearch">查询</a-button>
      <a-button preIcon="ant-design:sync-outlined" @click="onReset">重置</a-button>
    </div>
    <a-button preIcon="ant-design:plus-outlined" type="primary" @click="handleAdd" style="margin-bottom: 10px">新增</a-button>
    <a-table size="small" :dataSource="dataSource" :columns="columnsMap" :scroll="{ y: 620 }" :pagination="pagination" @change="pageChange">
      <template #action="{ record }">
        <a class="table-action-link" @click="handleEdit(record)">编辑</a>
        <a class="table-action-link" @click="handleDel(record)">删除</a>
      </template>
    </a-table>
    <!-- 添加/编辑弹窗 -->
    <a-modal v-model:visible="visibleMap" width="1000px" :footer="null" :title="titleMap" centered destroyOnClose>
      <reportModal :isToggle="isToggle" :sysOrgCodeList="sysOrgCodeList" :formState="formState" @Close="Close" />
    </a-modal>
  </div>
</template>

<script setup lang="ts">
  //ts语法
  import { ref, reactive, toRaw, watch, onMounted } from 'vue';
  import { listMap, queryDepartTreeSync, reportDel, queryTreeList } from '../reportManager.api';
  import { columnsMap } from '../reportManager.data';
  import reportModal from './report-modal.vue';

  let dataSource = ref<any[]>([]);
  let searchForm = reactive({
    sysOrgCode: '',
  });
  let sysOrgCodeList = ref<any[]>([]);
  //分页参数配置
  let pagination = reactive({
    current: 1, // 当前页码
    pageSize: 10, // 每页显示条数
    total: 0, // 总条目数，后端返回
    // showTotal: (total, range) => `${range[0]}-${range[1]} 条，总共 ${total} 条`, // 分页右下角显示信息
    showSizeChanger: true, // 是否可改变每页显示条数
    pageSizeOptions: ['10', '20', '50'], // 可选的每页显示条数
  });
  let visibleMap = ref(false);
  let titleMap = ref('');
  let isToggle = ref('');
  let formState = reactive({
    id: '',
    sysOrgCode: '',
    formula: '',
    groupCol: '',
    groupRow: '',
    groupSheet: '',
    isCompute: true,
    mineCells: [],
    sheet: '',
    col: '',
    row: '',
    name: '',
  });

  //关闭弹窗
  function Close() {
    visibleMap.value = false;
    pagination.current = 1;
    getListMap();
  }
  //添加
  function handleAdd() {
    titleMap.value = '新增报表映射';
    visibleMap.value = true;
    isToggle.value = 'add';
    formState = {
      sysOrgCode: '',
      formula: '',
      groupCol: '',
      groupRow: '',
      groupSheet: '',
      isCompute: true,
      mineCells: [],
      sheet: '',
      col: '',
      row: '',
      name: '',
    };
  }
  //编辑
  function handleEdit(record) {
    titleMap.value = '编辑报表映射';
    visibleMap.value = true;
    isToggle.value = 'edit';

    formState = {
      id: record.id,
      sysOrgCode: record.sysOrgCode,
      formula: record.formula,
      groupCol: record.groupCol,
      groupRow: record.groupRow,
      groupSheet: record.groupSheet,
      isCompute: record.isCompute,
      mineCells: record.mineCells,
      sheet: record.sheet,
      col: record.col,
      row: record.row,
      name: record.name,
    };
    console.log(formState, '00000===========');
  }
  //删除
  async function handleDel(record) {
    await reportDel({ id: record.id });
    pagination.current = 1;
    getListMap();
  }

  //分页切换
  function pageChange(val) {
    pagination.current = val.current;
    pagination.pageSize = val.pageSize;
    getListMap();
  }
  //获取所属部门编号列表数据
  async function queryDepartTreeSyncList() {
    let res = await queryTreeList();
    console.log(res, '部门编号列表--------');
    res.forEach((el) => {
      el.value = el.orgCode;
      el.children.forEach((v) => {
        v.value = v.orgCode;
      });
    });
    sysOrgCodeList.value = res || [];
  }

  //获取数据列表
  async function getListMap() {
    let res = await listMap({ sysOrgCode: searchForm.sysOrgCode, pageNo: pagination.current, pageSize: pagination.pageSize });
    console.log(res, 'res=========');
    if (res.records && res.records.length != 0) {
      dataSource.value = res.records;
      pagination.total = res.total;
    } else {
      dataSource.value = res.records;
    }
  }
  //查询
  function getSearch() {
    pagination.current = 1;
    getListMap();
  }
  //重置
  function onReset() {
    pagination.current = 1;
    searchForm.sysOrgCode = '';
    getListMap();
  }

  onMounted(() => {
    queryDepartTreeSyncList();
    getListMap();
  });
</script>

<style lang="less" scoped>
  @import '/@/design/theme.less';

  .report-map {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;

    .search-area {
      display: flex;
      height: 60px;
      align-items: center;
    }
  }

  :deep(.zxm-select-selector) {
    width: 100%;
    // color: #fff;
    border: 1px solid var(--vent-form-item-border) !important;
    background-color: #ffffff00 !important;
  }

  :deep(.zxm-select-selection-item) {
    color: #fff !important;
  }

  // :deep(.zxm-select-selection-placeholder) {
  //     color: #ccc !important;
  // }
</style>