477 lines
20 KiB
Vue
477 lines
20 KiB
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-select v-model="queryParams.projectId" placeholder="请选择" @change="handleChange" clearable>
|
|
<el-option v-for="item in matrixOptions" :key="item.projectId" :label="item.name"
|
|
:value="item.projectId" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="请选择方阵：" prop="pid" label-width="100" v-if="relevancyStructure == '2'">
|
|
<el-select v-model="matrixValue" placeholder="请选择" @change="handleChange" clearable>
|
|
<el-option v-for="item in matrixList" :key="item.id" :label="item.matrixName" :value="item.id" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-card>
|
|
</div>
|
|
</transition>
|
|
<el-tabs type="border-card" v-model="activeTab" @tab-click="handleTabClick">
|
|
<el-tab-pane :label="item.name" v-for="item in tabList" :key="item.id" :name="item.id"></el-tab-pane>
|
|
<el-card shadow="never">
|
|
<el-table ref="progressCategoryTableRef" v-loading="loading" :data="progressCategoryList" row-key="id"
|
|
:default-expand-all="isExpandAll" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
|
v-if="isExpand" 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" 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-table ref="progressCategoryTableRef" v-loading="loading" :data="progressCategoryList" v-else 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" 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>
|
|
</el-tabs>
|
|
|
|
<!-- 导入数据对话框 -->
|
|
<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 { 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';
|
|
import { getCategoryTabList, listProgressCategory } from '@/api/progress/progressCategory';
|
|
// 获取用户 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 isExpand = ref(true);
|
|
const activeTab = ref('0');
|
|
const relevancyStructure = ref('1');
|
|
const matrixList = ref([]);
|
|
const tabList = ref<any[]>([]);
|
|
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: undefined,
|
|
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.projectId) {
|
|
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;
|
|
console.log('🚀 ~ getList ~ matrixList:', matrixList);
|
|
queryParams.value.projectId = matrixList[0].projectId;
|
|
form.value.projectId = matrixList[0].projectId;
|
|
await getCategoryTabList(queryParams.value.projectId as string).then((res) => {
|
|
tabList.value = res.data;
|
|
activeTab.value = res.data[0]?.id;
|
|
});
|
|
} catch (error) {
|
|
// proxy?.$modal.msgError('获取方阵失败');
|
|
}
|
|
}
|
|
}
|
|
loading.value = true;
|
|
try {
|
|
const id = relevancyStructure.value == '2' ? matrixValue.value : activeTab.value;
|
|
const res = await listProgressCategory(id);
|
|
const data = proxy?.handleTree<ProgressCategoryVO>(res.data, 'id', 'parentId');
|
|
if (data) {
|
|
if (data.every((item) => !item.children)) {
|
|
isExpand.value = false;
|
|
} else {
|
|
isExpand.value = true;
|
|
}
|
|
progressCategoryList.value = data;
|
|
progressCategoryOptions.value = [];
|
|
const datas: ProgressCategoryOption = { id: 0, name: '顶级节点', children: [...data] };
|
|
progressCategoryOptions.value.push(datas);
|
|
loading.value = false;
|
|
}
|
|
} finally {
|
|
// 不管成功或失败，最后都设置为 false
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
const handleTabClick = (tab: any) => {
|
|
const id = tab.props.name; // 实际上就是 item.id
|
|
const current = tabList.value.find((item) => item.id === id);
|
|
if (current.matrixStructureList && current.matrixStructureList.length > 0) {
|
|
matrixList.value = current.matrixStructureList;
|
|
activeTab.value = current.matrixStructureList[0].id;
|
|
matrixValue.value = current.matrixStructureList[0].id;
|
|
} else {
|
|
activeTab.value = current.id;
|
|
}
|
|
|
|
relevancyStructure.value = current.relevancyStructure;
|
|
getList();
|
|
};
|
|
|
|
// 取消按钮
|
|
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();
|
|
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>
|