intelligent-etmf-system-web/src/views/document/folder/project.vue

<template>
  <div>
    <!-- 项目列表视图 -->
    <div v-if="!showDocumentView">
      <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
        <div v-show="showSearch" class="mb-[10px]">
          <el-card shadow="hover">
            <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="100px">
              <el-form-item :label="t('project.management.search.code')" prop="code">
                <el-input
                  v-model="queryParams.code"
                  :placeholder="t('project.management.search.codePlaceholder')"
                  clearable
                  @keyup.enter="handleQuery"
                  style="width: 240px"
                />
              </el-form-item>
              <el-form-item :label="t('project.management.search.name')" prop="name">
                <el-input
                  v-model="queryParams.name"
                  :placeholder="t('project.management.search.namePlaceholder')"
                  clearable
                  @keyup.enter="handleQuery"
                  style="width: 240px"
                />
              </el-form-item>
              <el-form-item :label="t('project.management.search.language')" prop="language">
                <el-select
                  v-model="queryParams.language"
                  :placeholder="t('project.management.search.languagePlaceholder')"
                  clearable
                  style="width: 240px"
                >
                  <el-option v-for="dict in project_language" :key="dict.value" :label="parseI18nName(dict.label)" :value="dict.value" />
                </el-select>
              </el-form-item>
              <el-form-item :label="t('project.management.search.type')" prop="type">
                <el-select v-model="queryParams.type" :placeholder="t('project.management.search.typePlaceholder')" clearable style="width: 240px">
                  <el-option v-for="dict in project_type" :key="dict.value" :label="parseI18nName(dict.label)" :value="dict.value" />
                </el-select>
              </el-form-item>
              <el-form-item :label="t('project.management.search.startTime')">
                <el-date-picker
                  v-model="dateRangeStartTime"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  type="daterange"
                  range-separator="-"
                  :start-placeholder="t('project.management.search.startDate')"
                  :end-placeholder="t('project.management.search.endDate')"
                  :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
                  style="width: 240px"
                />
              </el-form-item>
              <el-form-item :label="t('project.management.search.endTime')">
                <el-date-picker
                  v-model="dateRangeEndTime"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  type="daterange"
                  range-separator="-"
                  :start-placeholder="t('project.management.search.startDate')"
                  :end-placeholder="t('project.management.search.endDate')"
                  :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
                  style="width: 240px"
                />
              </el-form-item>
              <el-form-item :label="t('project.management.search.createTime')">
                <el-date-picker
                  v-model="dateRangeCreateTime"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  type="daterange"
                  range-separator="-"
                  :start-placeholder="t('project.management.search.startDate')"
                  :end-placeholder="t('project.management.search.endDate')"
                  :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
                  style="width: 240px"
                />
              </el-form-item>
              <el-form-item :label="t('project.management.search.updateTime')">
                <el-date-picker
                  v-model="dateRangeUpdateTime"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  type="daterange"
                  range-separator="-"
                  :start-placeholder="t('project.management.search.startDate')"
                  :end-placeholder="t('project.management.search.endDate')"
                  :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
                  style="width: 240px"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">{{ t('project.management.search.search') }}</el-button>
                <el-button icon="Refresh" @click="resetQuery">{{ t('project.management.search.reset') }}</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </div>
      </transition>

      <el-card shadow="never">
        <template #header>
          <el-row :gutter="10" class="mb8">
            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
          </el-row>
        </template>

        <el-table v-loading="loading" border :data="projectList" style="width: 100%">
          <el-table-column :label="t('project.management.table.id')" align="center" prop="id" width="100" />
          <el-table-column :label="t('project.management.table.code')" align="center" prop="code" width="200" />
          <el-table-column :label="t('project.management.table.name')" align="center" prop="name" width="200" />
          <el-table-column :label="t('project.management.table.language')" align="center" prop="language" width="150">
            <template #default="scope">
              <dict-tag :options="project_language" :value="scope.row.language" />
            </template>
          </el-table-column>
          <el-table-column :label="t('project.management.table.type')" align="center" prop="type" width="200">
            <template #default="scope">
              <dict-tag :options="project_type" :value="scope.row.type" />
            </template>
          </el-table-column>
          <el-table-column :label="t('project.management.table.status')" align="center" prop="status" width="100" />
          <el-table-column :label="t('project.management.table.startTime')" align="center" prop="startTime" width="120">
            <template #default="scope">
              <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="t('project.management.table.endTime')" align="center" prop="endTime" width="120">
            <template #default="scope">
              <span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="t('project.management.table.createTime')" align="center" prop="createTime" min-width="180" />
          <el-table-column :label="t('project.management.table.updateTime')" align="center" prop="updateTime" min-width="180" />
          <el-table-column :label="t('project.management.table.actions')" align="center" width="120" fixed="right">
            <template #default="scope">
              <el-button
                v-hasPermi="['document:folder:entry']"
                type="primary"
                icon="ArrowRight"
                style="padding: 0 5px; font-size: 10px; height: 24px; --el-button-icon-span-gap: 2px"
                @click="handleEnterProject(scope.row)"
              >
                {{ t('project.management.table.enterProject') }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
      </el-card>
    </div>

    <!-- 文档管理视图 -->
    <document-view v-else :project-id="currentProjectId" @back="handleBackToList" />
  </div>
</template>

<script setup lang="ts">
import { listProject } from '@/api/document/folder';
import { ProjectVO, ProjectQuery } from '@/api/document/folder/types';
import { useI18n } from 'vue-i18n';
import { parseI18nName } from '@/utils/i18n';
import DocumentView from './document/index.vue';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { t } = useI18n();
const { project_type, project_language } = toRefs<any>(proxy?.useDict('project_type', 'project_language'));

const projectList = ref<ProjectVO[]>([]);
const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);
const showDocumentView = ref(false);
const currentProjectId = ref<number | string>();
const dateRangeStartTime = ref<[DateModelType, DateModelType]>(['', '']);
const dateRangeEndTime = ref<[DateModelType, DateModelType]>(['', '']);
const dateRangeCreateTime = ref<[DateModelType, DateModelType]>(['', '']);
const dateRangeUpdateTime = ref<[DateModelType, DateModelType]>(['', '']);

const queryFormRef = ref<ElFormInstance>();

const queryParams = ref<ProjectQuery>({
  pageNum: 1,
  pageSize: 10,
  code: undefined,
  name: undefined,
  language: undefined,
  type: undefined,
  status: undefined,
  params: {}
});

/** 查询项目列表 */
const getList = async () => {
  loading.value = true;
  queryParams.value.params = {};
  proxy?.addDateRange(queryParams.value, dateRangeStartTime.value, 'StartTime');
  proxy?.addDateRange(queryParams.value, dateRangeEndTime.value, 'EndTime');
  proxy?.addDateRange(queryParams.value, dateRangeCreateTime.value, 'CreateTime');
  proxy?.addDateRange(queryParams.value, dateRangeUpdateTime.value, 'UpdateTime');
  const res = await listProject(queryParams.value);
  projectList.value = res.rows;
  total.value = res.total;
  loading.value = false;
};

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
  dateRangeStartTime.value = ['', ''];
  dateRangeEndTime.value = ['', ''];
  dateRangeCreateTime.value = ['', ''];
  dateRangeUpdateTime.value = ['', ''];
  queryFormRef.value?.resetFields();
  handleQuery();
};

/** 进入项目 */
const handleEnterProject = (row: ProjectVO) => {
  currentProjectId.value = row.id;
  showDocumentView.value = true;
};

/** 返回项目列表 */
const handleBackToList = () => {
  showDocumentView.value = false;
  currentProjectId.value = undefined;
};

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