td_official/src/views/progress/plan/index.vue

<template>
  <div class="p-2">
    <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">
            <el-form-item label="请选择方阵：" prop="pid" label-width="100">
              <!-- <el-input v-model="queryParams.pid" placeholder="请选择" clearable /> -->
              <el-cascader
                :options="matrixOptions"
                placeholder="请选择"
                @change="handleChange"
                :props="{ value: 'matrixId', label: 'name' }"
                v-model="queryParams.matrixId"
                clearable
              />
              <!-- <el-select v-model="matrixValue" placeholder="请选择" @change="handleChange" clearable>
                <el-option v-for="item in matrixOptions" :key="item.id" :label="item.matrixName" :value="item.id" />
              </el-select> -->
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Download" @click="handleQuery">导出周报</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </transition>

    <el-card shadow="never">
      <!-- <template #header>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" @click="handleAdd()" v-hasPermi="['progress:progressCategory:add']">新增</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="info" plain icon="Sort" @click="handleToggleExpandAll">展开/折叠</el-button>
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
      </template> -->
      <el-table
        ref="progressCategoryTableRef"
        v-loading="loading"
        :data="progressCategoryList"
        row-key="id"
        :default-expand-all="isExpandAll"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        border
      >
        <el-table-column label="" width="50" type="expand">
          <template #header>
            <el-icon
              class="cursor-pointer text-4! transform-rotate-z--90 transition-all-300"
              :class="!isExpandAll ? 'transform-rotate-z--90' : 'transform-rotate-z-90'"
              @click="handleToggleExpandAll"
              ><Expand
            /></el-icon>
          </template>
          <template #default="scope">
            <el-card class="pl-25" shadow="hover">
              <el-table :data="scope.row.children" border>
                <el-table-column label="名称" align="center" prop="name" width="170">
                  <template #default="{ row }">
                    <el-tooltip :content="row.remark" placement="top" effect="dark" v-if="row.remark">
                      <span class="flex items-center justify-center"
                        ><i class="iconfont icon-wenhao mr-0.5 text-3.5! text-#999"></i>{{ row.name }}</span
                      >
                    </el-tooltip>
                    <span v-else>{{ row.name }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="状态" align="center" prop="status" width="100">
                  <template #default="{ row }">
                    <dict-tag :options="progress_status" :value="row.status" />
                  </template>
                </el-table-column>
                <el-table-column label="是否延期" align="center" prop="isDelay" width="100">
                  <template #default="{ row }">
                    <el-tag :type="row.isDelay == '1' ? 'danger' : 'primary'">{{ row.isDelay == '1' ? '是' : '否' }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="计量方式" align="center" prop="unitType" width="100">
                  <template #default="{ row }">
                    <dict-tag :options="progress_unit_type" :value="row.unitType" />
                  </template>
                </el-table-column>
                <el-table-column label="总量" align="center" prop="total" width="100" />
                <el-table-column label="总进度" align="center" prop="projectId">
                  <template #default="{ row }">
                    <el-progress :text-inside="true" :stroke-width="20" :percentage="row.completedPercentage" status="success" />
                  </template>
                </el-table-column>
                <el-table-column label="计划总量" align="center" prop="planTotal" width="100" />
                <el-table-column label="计划中" align="center" prop="projectId">
                  <template #default="{ row }">
                    <el-progress :text-inside="true" :stroke-width="20" :percentage="row.planTotalPercentage" />
                  </template>
                </el-table-column>
                <el-table-column label="对比" align="center" prop="unitType" width="100">
                  <template #default="{ row }">
                    {{ row.completed + '/' + row.total }}
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
                  <template #default="scope">
                    <!-- <el-button
                      type="warning"
                      icon="Download"
                      link
                      size="small"
                      @click="openDialog(scope.row, 'importDataStatus', '上传数据')"
                      v-hasPermi="['progress:progressCategory:add']"
                    >
                      导入数据
                    </el-button> -->
                    <el-button
                      type="warning"
                      icon="Download"
                      link
                      size="small"
                      v-if="scope.row.name === '光伏板'"
                      @click="openDialog(scope.row, 'importTableStatus', '上传表格')"
                      v-hasPermi="['progress:progressCategory:add']"
                    >
                      导入表格
                    </el-button>
                    <el-button
                      type="success"
                      icon="Plus"
                      link
                      size="small"
                      @click="planRef.openDialog(scope.row)"
                      v-hasPermi="['progress:progressCategory:add']"
                    >
                      计划
                    </el-button>
                    <el-button
                      type="primary"
                      icon="Plus"
                      link
                      size="small"
                      @click="handleDayAdd(scope.row)"
                      v-hasPermi="['progress:progressCategory:add']"
                    >
                      日报
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </template>
        </el-table-column>
        <el-table-column label="名称" align="center" prop="name" width="150" />
        <el-table-column label="状态" align="center" prop="status" width="100">
          <template #default="{ row }">
            <dict-tag :options="progress_status" :value="row.status" />
          </template>
        </el-table-column>
        <el-table-column label="总进度" align="center" prop="projectId">
          <template #default="{ row }">
            <el-progress :text-inside="true" :stroke-width="20" :percentage="row.completedPercentage" status="success" />
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 导入数据对话框 -->
    <el-dialog :title="dialog.title" v-model="dialog.importDataStatus" width="500px" append-to-body>
      <file-upload class="pl-20 pt" v-model="dialog.file" :limit="20" :file-size="50" :file-type="['shp', 'shx', 'dbf']" />
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel('importDataStatus')">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 导入表格对话框 -->
    <el-dialog :title="dialog.title" v-model="dialog.importTableStatus" width="500px" append-to-body>
      <file-upload class="pl-20 pt" v-model="dialog.file" :limit="20" :file-size="50" :file-type="['xls', 'xlsx']" />
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel('importTableStatus')">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 创建计划对话框 -->
    <CreatePlan ref="planRef" @getProgressList="getList"></CreatePlan>
    <CreateDaily ref="dailyRef" @getProgressList="getList"></CreateDaily>
    <CreateDailyRate ref="dailyRateRef" @getProgressList="getList"></CreateDailyRate>
  </div>
</template>

<script setup name="ProgressCategory" lang="ts">
import {
  listProgressCategory,
  getProgressCategory,
  delProgressCategory,
  addProgressCategory,
  updateProgressCategory,
  getProjectSquare
} from '@/api/progress/plan/index';
import { ProgressCategoryVO, ProgressCategoryQuery, ProgressCategoryForm } from '@/api/progress/plan/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const { progress_unit_type, progress_status } = toRefs<any>(proxy?.useDict('progress_unit_type', 'progress_status'));

import CreatePlan from './component/createPlan.vue';
import CreateDaily from './component/createDaily.vue';
import CreateDailyRate from './component/createDailyRate.vue';
type ProgressCategoryOption = {
  id: number;
  name: string;
  children?: ProgressCategoryOption[];
};
import { useUserStoreHook } from '@/store/modules/user';
// 获取用户 store
const userStore = useUserStoreHook();
// 从 store 中获取项目列表和当前选中的项目
const currentProject = computed(() => userStore.selectedProject);
const progressCategoryList = ref<ProgressCategoryVO[]>([]);
const progressCategoryOptions = ref<ProgressCategoryOption[]>([]);
const buttonLoading = ref(false);
const showSearch = ref(true);
const isExpandAll = ref(true);
const loading = ref(false);
const planRef = ref<InstanceType<typeof CreatePlan>>();
const dailyRef = ref<InstanceType<typeof CreateDaily>>();
const dailyRateRef = ref<InstanceType<typeof CreateDailyRate>>();
const queryFormRef = ref<ElFormInstance>();
const progressCategoryFormRef = ref<ElFormInstance>();
const progressCategoryTableRef = ref<ElTableInstance>();
const matrixOptions = ref([]);
const dialog = reactive<any>({
  dailyStatus: false,
  planStatus: false,
  importDataStatus: false,
  importTableStatus: false,
  title: '',
  file: ''
});
const matrixValue = ref<number | undefined>(matrixOptions.value.length > 0 ? matrixOptions.value[0].id : undefined);
const initFormData: ProgressCategoryForm = {
  id: undefined,
  pid: undefined,
  name: undefined,
  matrixId: undefined,
  unitType: undefined,
  projectId: currentProject.value?.id
};

const data = reactive<PageData<ProgressCategoryForm, ProgressCategoryQuery>>({
  form: { ...initFormData },
  queryParams: {
    pid: undefined,
    name: undefined,
    unitType: undefined,
    projectId: currentProject.value?.id,
    matrixId: undefined,
    params: {}
  },
  rules: {
    id: [{ required: true, message: '主键id不能为空', trigger: 'blur' }],
    pid: [{ required: true, message: '父类别id不能为空', trigger: 'blur' }],
    name: [{ required: true, message: '类别名称不能为空', trigger: 'blur' }],
    unitType: [{ required: true, message: '计量方式不能为空', trigger: 'change' }],
    projectId: [{ required: true, message: '项目id不能为空', trigger: 'blur' }]
  }
});

const { queryParams, form, rules } = toRefs(data);

/** 查询进度类别列表 */
const getList = async () => {
  if (!queryParams.value.matrixId) {
    const res = await getProjectSquare(currentProject.value?.id);
    if (!res.data || res.data.length === 0) {
      proxy?.$modal.msgWarning('当前项目下没有方阵，请先创建方阵');
    } else {
      let matrixList = res.data.map((item) => {
        return {
          ...item,
          matrixId: item.projectId
        };
      });
      try {
        if (!matrixValue.value) matrixValue.value = matrixList[0].id;
        matrixOptions.value = matrixList;
        queryParams.value.matrixId = matrixList[0].children[0].matrixId;
      } catch (error) {
        proxy?.$modal.msgError('获取方阵失败');
      }
    }
  }
  loading.value = true;
  try {
    const res = await listProgressCategory(queryParams.value);
    const data = proxy?.handleTree<ProgressCategoryVO>(res.data, 'id', 'parentId');
    if (data) {
      progressCategoryList.value = data;
    }
  } finally {
    // 不管成功或失败，最后都设置为 false
    loading.value = false;
  }
};

/** 查询进度类别下拉树结构 */
const getTreeselect = async () => {
  const res = await listProgressCategory();
  progressCategoryOptions.value = [];
  const data: ProgressCategoryOption = { id: 0, name: '顶级节点', children: [] };
  data.children = proxy?.handleTree<ProgressCategoryOption>(res.data, 'id', 'pid');
  progressCategoryOptions.value.push(data);
};

// 取消按钮
const cancel = (visible) => {
  reset();
  dialog[visible] = false;
};

// 表单重置
const reset = () => {
  form.value = { ...initFormData };
  progressCategoryFormRef.value?.resetFields();
};

//切换项目重置方阵
const resetMatrix = () => {
  matrixValue.value = undefined;
  queryParams.value.matrixId = undefined;
  matrixOptions.value = [];
};

/** 搜索按钮操作 */
const handleQuery = () => {
  getList();
};

/** 级联选择器改变事件 */
const handleChange = (value: number) => {
  queryParams.value.matrixId = value[1];

  getList();
};

const handleDayAdd = (row: ProgressCategoryVO) => {
  if (row.unitType === '2') {
    dailyRef.value.openDialog(row);
  } else {
    dailyRateRef.value.openDialog(row);
  }
};

/** 导入按钮操作 */
const openDialog = (row: ProgressCategoryVO, status: string, title: string) => {
  reset();
  // getTreeselect();
  if (row != null && row.id) {
    form.value.pid = row.id;
  } else {
    form.value.pid = 0;
  }
  dialog[status] = true;
  dialog.title = title;
};

/** 展开/折叠操作 */
const handleToggleExpandAll = () => {
  isExpandAll.value = !isExpandAll.value;
  toggleExpandAll(progressCategoryList.value, isExpandAll.value);
};

/** 展开/折叠操作 */
const toggleExpandAll = (data: ProgressCategoryVO[], status: boolean) => {
  data.forEach((item) => {
    progressCategoryTableRef.value?.toggleRowExpansion(item, status);
    if (item.children && item.children.length > 0) toggleExpandAll(item.children, status);
  });
};

/** 修改按钮操作 */
const handleUpdate = async (row: ProgressCategoryVO) => {
  reset();
  await getTreeselect();
  if (row != null) {
    form.value.pid = row.pid;
  }
  const res = await getProgressCategory(row.id);
  Object.assign(form.value, res.data);
  dialog.visible = true;
  dialog.title = '修改进度类别';
};

/** 提交按钮 */
const submitForm = () => {
  progressCategoryFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      if (form.value.id) {
        await updateProgressCategory(form.value).finally(() => (buttonLoading.value = false));
      } else {
        await addProgressCategory(form.value).finally(() => (buttonLoading.value = false));
      }
      proxy?.$modal.msgSuccess('操作成功');
      dialog.visible = false;
      getList();
    }
  });
};

/** 删除按钮操作 */
const handleDelete = async (row: ProgressCategoryVO) => {
  await proxy?.$modal.confirm('是否确认删除进度类别编号为"' + row.id + '"的数据项？');
  loading.value = true;
  await delProgressCategory(row.id).finally(() => (loading.value = false));
  await getList();
  proxy?.$modal.msgSuccess('删除成功');
};

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

//监听项目id刷新数据
const listeningProject = watch(
  () => currentProject.value?.id,
  (nid, oid) => {
    queryParams.value.projectId = nid;
    form.value.projectId = nid;
    resetMatrix();
    getList();
  }
);

onUnmounted(() => {
  listeningProject();
});
</script>