yjhtgl-web/src/views/dataManagement/index.vue

<template>
  <div class="container">
    <div v-show="!dataManagementAddState.show && !dataManagementViewState.show" class="search-bar">
      <div class="mb-[10px]">
        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
          <el-form-item label="选择数据：" prop="planType" label-width="auto">
            <div class="flex" style="align-items: center; justify-content: flex-start">
              <el-select v-model="queryParams.dataType" placeholder="选择数据" @change="onDataTypeChange">
                <el-option v-for="item in type" :key="item.id" :label="item.layer_name" :value="item.id" />
              </el-select>
              <div class="info">
                <span>数据更新：{{ dataUpdateTime }}</span>
                <span class="spacer">数源单位：{{ dataSourceUnit }}</span>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <el-form-item>
        <el-button type="primary" icon="Plus" @click="handleAdd">录入</el-button>
        <el-button plain icon="Upload" @click="openImportDialog">批量导入</el-button>
      </el-form-item>
    </div>
    <el-table v-loading="loading" :data="tableData" :max-height="tableHeight">
      <el-table-column
        v-for="(item, index) in tableHeader"
        :key="index"
        :prop="item.column_name"
        :label="item.column_comment"
        :min-width="item.column_comment.length * 25 > 100 ? item.column_comment.length * 25 : 100"
        align="center"
      />
      <el-table-column label="操作" align="center" width="150px" fixed="right">
        <template #default="scope">
          <el-text v-hasPermi="['system:menu:View']" class="common-btn-text-primary" @click="handleView(scope.row)">查看</el-text>
          <el-text v-hasPermi="['system:menu:edit']" class="common-btn-text-primary" @click="handleUpdate(scope.row)">修改</el-text>
          <el-text v-hasPermi="['system:menu:remove']" class="common-btn-text-danger" @click="removeItem(scope.row)">删除</el-text>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" v-model:page="queryParams.page" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
    <AddDataManagement
      v-if="dataManagementAddState.show"
      :data-type="queryParams.dataType"
      :detail-data="dataManagementAddState.data"
      @on-cancel="handleCancel"
      @on-confirm="onConfirm"
    />
    <ViewDataManagement
      v-if="dataManagementViewState.show"
      :data-type="queryParams.dataType"
      :detail-data="dataManagementViewState.data"
      @on-cancel="handleCancel"
    />
    <DataImport
      v-model="showImportDialog"
      :url="importUrl"
      :data-type="queryParams.dataType"
      :file-name="fileName + '模板.xlsx'"
      :steps-text="fileName"
      @success="getList"
    />
  </div>
</template>

<script lang="ts" setup>
import ViewDataManagement from './ViewDataManagement.vue';
import AddDataManagement from './AddDataManagement.vue';
import DataImport from './DataImport.vue';
import { deleteDataManagerInfo, getDataManagerDataList, getDataManagerInfo, getDataManagerList } from '@/api/dataManagement/dataManagement';
import { parseTime } from '@/utils/ruoyi';
import { deepClone } from '@/utils';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const queryParams = reactive({
  dataType: '',
  page: 1,
  pageSize: 10
});
const baseUrl = import.meta.env.VITE_APP_BASE_API;
let loading = ref(false);
const total = ref(0); // 总条目数
const type = ref([]);

const tableHeight = ref(document.documentElement.scrollHeight - 295 + 'px');
const tableHeader = ref([]);
// 表格数据
const tableData = ref([]);
const dataUpdateTime = ref('');
const dataSourceUnit = ref('');

let showImportDialog = ref(false);
let importUrl = ref('');
let fileName = ref('');

let dataManagementViewState = reactive({
  show: false,
  data: {}
});

let dataManagementAddState = reactive({
  show: false,
  data: {}
});

// 打开新增
const handleAdd = () => {
  dataManagementAddState.data = {};
  dataManagementAddState.show = true;
};
// 打开详情
const handleView = (row: any) => {
  dataManagementViewState.data = row;
  dataManagementViewState.show = true;
};
// 打开修改
const handleUpdate = (row: any) => {
  dataManagementAddState.data = deepClone(row);
  dataManagementAddState.show = true;
};
// 关闭
const handleCancel = () => {
  dataManagementViewState.show = false;
  dataManagementAddState.show = false;
};

const onConfirm = () => {
  handleCancel();
  // queryParams.page = 1;
  getList();
};
// 删除
const removeItem = (item) => {
  proxy?.$modal.confirm('是否确认删除选择的数据项？').then(() => {
    deleteDataManagerInfo(queryParams.dataType, item.id).then(() => {
      proxy?.$modal.msgSuccess('删除成功');
      getList();
    });
  });
};

// 数据选择变化
const onDataTypeChange = () => {
  const index = type.value.findIndex((row) => row.id === queryParams.dataType);
  if (index !== -1) {
    importUrl.value = '/api/dataManager/generate_import_template/' + queryParams.dataType;
    fileName.value = type.value[index].layer_name;
    dataUpdateTime.value = parseTime(type.value[index].data_update_time);
    dataSourceUnit.value = type.value[index].data_resouce;
  }
  queryParams.page = 1;
  getList();
};
const parseTableTime = () => {
  if (tableHeader.value.length == 0 || tableData.value.length == 0) return;
  tableHeader.value.forEach((row) => {
    let pattern = '';
    if (row.data_type === 'datetime') {
      pattern = '{y}-{m}-{d} {h}:{i}:{s}';
    } else if (row.data_type === 'date') {
      pattern = '{y}-{m}-{d}';
    }
    if (pattern) {
      tableData.value.forEach((item) => {
        if (item[row.column_name]) {
          item[row.column_name] = parseTime(item[row.column_name], pattern);
        }
      });
    }
  });
};

// 获取表格数据
const getList = async () => {
  loading.value = true;
  tableHeader.value = [];
  getDataManagerInfo(queryParams.dataType).then((res) => {
    tableHeader.value = res.data.columns;
    parseTableTime();
  });
  getDataManagerDataList(queryParams.dataType, { page: queryParams.page, pageSize: queryParams.pageSize })
    .then((res) => {
      tableData.value = res.data;
      total.value = res.total;
      parseTableTime();
    })
    .finally(() => {
      loading.value = false;
    });
};
// 加载数据
const loadData = () => {
  getDataManagerList().then((res) => {
    type.value = res.data;
    queryParams.dataType = type.value[0].id;
    importUrl.value = '/api/dataManager/generate_import_template/' + queryParams.dataType;
    fileName.value = type.value[0].layer_name;
    dataUpdateTime.value = parseTime(type.value[0].data_update_time);
    dataSourceUnit.value = type.value[0].data_resouce;
    getList();
  });
};

// 打开批量导入弹窗
const openImportDialog = () => {
  showImportDialog.value = true;
};

onMounted(() => {
  loadData();
});
</script>

<style scoped>
.container {
  max-width: 2200px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.search-bar {
  margin-bottom: 20px;
}

.info {
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.spacer {
  margin-left: 15px;
}
</style>