bdzl2/bxztApp
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 项目管理

Browse Source
This commit is contained in:
huangchenhao 2026-04-07 17:56:06 +08:00
parent 4ab272934c
commit 76e64b38b4
4 changed files with 639 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/screen/src/router/index.js
View File

@ -139,6 +139,16 @@ const routes = [
breadcrumb: true,
parentRoute: 'warningManagement' // 用于在面包屑中建立父子关系
}
},
// 项目管理
{
path: '/projectManagement',
name: 'projectManagement',
component: () => import('../views/ProjectManagement_Rebuild/index.vue'),
meta: {
title: '项目管理',
breadcrumb: true
}
}
]

372
packages/screen/src/views/ProjectManagement_Rebuild/addDialog.vue Normal file
View File

@ -0,0 +1,372 @@
<template>
<div class="detail-container">
<el-form ref="formRef" :model="form" label-position="right" label-width="auto"
style="max-height: 60vh; overflow-y: auto; padding-right: 50px" :rules="rules">
<el-row style="margin: 20px 0px;">
<h4>项目信息</h4>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="工程状态" prop="工程状态">
<el-radio-group v-model="form.zt">
<el-radio value="1">在建</el-radio>
<el-radio value="2">停工</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="所属区县" prop="所属区县">
<el-select v-model="qx" filterable remote reserve-keyword clearable placeholder="输入区县名称查询"
:remote-method="remoteMethod_qx" :loading="loading" @change="handleSelect_qx" value-key="index">
<el-option v-for="(item, index) in qxList" :key="index" :label="item.qxmc" :value="item.qxmc" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="项目名称" prop="项目名称">
<el-input />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="驻地名称" prop="驻地名称">
<el-input />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="驻地类型" prop="驻地类型">
<el-select>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="坐标点位" prop="坐标点位">
<el-row :gutter="10">
<el-col :span="12">
<el-input aria-label="经度" placeholder="经度" />
</el-col>
<el-col :span="12">
<el-input aria-label="纬度" placeholder="纬度" />
</el-col>
</el-row>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="所属项目名称:">
<el-input />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="项目类型:">
<el-select>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="建设单位:">
<el-input />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="施工单位:">
<el-input />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="行政区域:">
<el-select ></el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="驻地人数:">
<el-input />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="驻地风险等级:">
<el-select ></el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="房建类型:">
<el-select ></el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="搬迁状态:">
<el-select ></el-select>
</el-form-item>
</el-col>
</el-row>
<el-row style="margin: 20px 0px;">
<h4>项目联系人信息</h4>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="吹哨人姓名:">
<el-input />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="吹哨人电话:">
<el-input />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="建设单位包保责任人姓名:">
<el-input />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="建设单位包保责任人电话:">
<el-input />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="施工单位包保责任人姓名:">
<el-input />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="施工单位包保责任人电话:">
<el-input />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="驻地包保责任人姓名:">
<el-input />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="驻地包保责任人电话:">
<el-input />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="区县级包保责任人姓名:">
<el-input />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="区县级包保责任人电话:">
<el-input />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="市级包保责任人姓名:">
<el-input />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="市级包保责任人电话:">
<el-input />
</el-form-item>
</el-col>
</el-row>
<el-row style="margin: 20px 0px;">
<h4>其他信息</h4>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="备注:">
<el-input />
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</template>
<script setup>
import { ref, onMounted, watch, computed } from "vue";
import { request } from "@/utils/request";
const formRef = ref(null);
defineExpose({ formRef });
const props = defineProps({
form: {
type: Object,
default: () => ({}),
},
});
const sfjwd = ref("是");
const qx = ref("");
const loading = ref(false);
const selectOptions = ref([]);
const qxList = ref([]);
// 根据用户信息 查询角色列表
const getUserList = async (key) => {
try {
const keyword = key;
let url = "";
if (keyword) {
url = `/snow-ops-platform/yhzry/getUserByKey?key=${keyword}`;
} else {
url = `/snow-ops-platform/yhzry/getUserByKey?key=`;
}
const res = await request({
url: url,
method: "GET",
});
if (res.code === "00000") {
return res.data;
} else {
throw new Error(res.message);
}
} catch (error) {
ElMessage.error(error.message);
console.log(error);
}
};
// 选择人员筛选
const remoteMethod = async (query) => {
if (query === "") {
selectOptions.value = [];
return [];
}
loading.value = true;
const res = await getUserList(query);
if (res) {
selectOptions.value = res;
}
loading.value = false;
};
// 根据区县名称 查询区县列表
const getQxList = async (key) => {
try {
const keyword = key;
let url = "";
if (keyword) {
url = `/snow-ops-platform/district/listDistricts?qxmc=${keyword}`;
} else {
url = `/snow-ops-platform/district/listDistricts?qxmc=`;
}
const res = await request({
url: url,
method: "GET",
});
if (res.code === "00000") {
return res.data;
} else {
throw new Error(res.message);
}
} catch (error) { }
};
// 选择区县筛选
const remoteMethod_qx = async (query) => {
loading.value = true;
const res = await getQxList(query);
if (res) {
qxList.value = res;
}
loading.value = false;
};
// 选择区县
const handleSelect_qx = (value) => {
props.form.qxmc = value;
};
// 选择人员
const handleSelect = (value) => {
console.log("value", value);
props.form.fzrXm = value.realName;
props.form.fzrSjhm = value.phone;
props.form.fzrUserId = value.userId;
};
const rules = computed(() => {
return {
mc: [
{
required: true,
validator: (rule, value, callback) => {
if (props.form.mc) {
callback();
} else {
callback(new Error("请输入服务站名称"));
}
},
trigger: "blur",
},
],
qxmc: [
{
required: true,
validator: (rule, value, callback) => {
if (props.form.qxmc) {
callback();
} else {
callback(new Error("请选择所属区县"));
}
},
trigger: "blur",
},
],
fzr: [
{
required: true,
validator: (rule, value, callback) => {
if (props.form.fzrUserId && props.form.fzrXm && props.form.fzrSjhm) {
callback();
} else {
callback(new Error("请选择负责人"));
}
},
trigger: "blur",
},
],
jd: [
{
required: sfjwd.value === "否",
validator: (rule, value, callback) => {
if (props.form.jd) {
callback();
} else {
callback(new Error("请输入站点经度"));
}
},
trigger: "blur",
},
],
wd: [
{
required: sfjwd.value === "否",
validator: (rule, value, callback) => {
if (props.form.wd) {
callback();
} else {
callback(new Error("请输入站点纬度"));
}
},
trigger: "blur",
},
],
};
});
</script>
<style></style>

205
packages/screen/src/views/ProjectManagement_Rebuild/index.js Normal file
View File

@ -0,0 +1,205 @@
import { h, ref, onMounted, reactive, watch, toRaw, nextTick } from "vue";
import { request } from "@/utils/request";
import { useRoute, useRouter } from 'vue-router'
import AddDialog from "./addDialog.vue";
const tableData = ref([]); // 表格数据
const modelVisible = ref(false); // 弹窗状态
const drawerVisible = ref(false); // 抽屉状态
// 弹窗内容
const model = reactive({
title: '',
content: null,
props: {},
onCancel: null,
onConfirm: null,
width: '',
});
const form = reactive({
});
const INIT_FORM = {
};
// 抽屉内容
const drawer = reactive({
title: '',
content: null,
props: {},
onCancel: null,
onConfirm: null,
direction: 'rtl',
size: '50%'
});
const dialogRef = ref(null); // 弹窗实例
const drawerRef = ref(null); // 抽屉实例
const columns = [
{
prop: "xxx",
label: "区县",
},
{
prop: "xxx",
label: "路线编码",
},
{
prop: "xxx",
label: "灾害类型",
},
{
prop: "xxx",
label: "起点桩号",
},
{
prop: "xxx",
label: "止点桩号",
},
{
prop: "xxx",
label: "实施里程（公里）",
},
{
prop: "xxx",
label: "技术等级",
},
{
prop: "xxx",
label: "总投资金额(万元)",
},
{
prop: "xxx",
label: "投资估算(万元)",
},
{
prop: "xxx",
label: "开工或预计开工时间",
},
{
prop: "xxx",
label: "完工或预计完工时间",
},
{
prop: "xxx",
label: "申报状态",
},
{
prop: "xxx",
label: "审批状态",
},
{
prop: "xxx",
label: "更新日期",
},
{
label: "操作",
fixed: "right",
width: 150,
render: (row) => () =>
h("div", { class: "action-btns" }, [
h(
ElButton,
{
type: "primary",
link: true,
onClick: async () => {
},
},
() => "审批"
),
h(
ElButton,
{
type: "primary",
link: true,
style: "margin-left: 10px;",
onClick: async () => {
},
},
() => "详情"
),
]),
},
]
// 过滤条件
const filterData = reactive({
year: "",
code: "",
})
// 分页
const pagination = reactive({
current: 1,
pageSize: 10,
total: 0,
pageSizes: [10, 20, 50],
layout: "prev, pager, next, jumper",
onChange: (page, pageSize) => {
pagination.current = page;
pagination.pageSize = pageSize;
getTableData(filterData);
},
});
// 获取预警列表
const getTableData = async (filterData) => {
try {
const res = await request({
url: '',
method: "GET",
params: {
}
})
} catch (error) {
}
}
// 打开填报项目弹窗
const openAddDialog = () => {
model.title = '填报项目';
Object.assign(form, INIT_FORM);
model.props = {
form: form,
};
model.content = AddDialog;
model.onCancel = () => {
modelVisible.value = false;
};
model.onConfirm = async () => {
dialogType.value = '';
await dialogRef?.value?.dynamicComponentRef?.formRef.validate().then(() => {
console.log('@@@@@填报项目', form);
})
.catch((err) => {
ElMessage.error('请处理表单中的错误项');
});
};
model.width = "70%"
modelVisible.value = true;
}
export default () => {
const router = useRouter();
return {
tableData,
filterData,
pagination,
columns,
modelVisible,
model,
drawerVisible,
drawer,
dialogRef,
drawerRef,
openAddDialog,
}
}

52
packages/screen/src/views/ProjectManagement_Rebuild/index.vue Normal file
View File

@ -0,0 +1,52 @@
<template>
<div class="root">
<div class="search-box">
<el-date-picker v-model="script.filterData.year" type="year" placeholder="年度" format="YYYY"
style="width: 240px; margin-right: 10px" size="large" />
<el-input v-model="script.filterData.code" style="width: 240px; margin-right: 10px" size="large"
placeholder="路线编码" :suffix-icon="Search" />
</div>
<div class="event-box">
<el-button type="primary" @click="script.openAddDialog">项目填报</el-button>
<el-button type="primary" color="#952DE6" @click="">导出</el-button>
</div>
<DynamicTable :dataSource="script.tableData.value" :columns="script.columns" :autoHeight="true"
:pagination="script.pagination">
</DynamicTable>
<div class="model-box">
<MyDialog v-model="script.modelVisible.value" :title="script.model?.title"
:dynamicComponent="script.model?.content" :component-props="script.model?.props"
:onConfirm="script.model?.onConfirm" :onCancel="script.model?.onCancel" ref="dialogRef"
:width="script.model?.width">
</MyDialog>
<MyDrawer v-model="script.drawerVisible.value" :title="script.drawer?.title"
:dynamicComponent="script.drawer?.content" :component-props="script.drawer?.props"
:onConfirm="script.drawer?.onConfirm" :onCancel="script.drawer?.onCancel" ref="drawerRef"
:direction="script.drawer?.direction" :size="script.drawer?.size">
</MyDrawer>
</div>
</div>
</template>
<script setup>
import DynamicTable from "../../component/DynamicTable";
import { Search } from "@element-plus/icons-vue";
import MyDialog from "../../component/MyDialog";
import MyDrawer from "../../component/MyDrawer";
import scriptFn from "./index.js";
const script = scriptFn();
</script>
<style scoped>
.root {
height: 100%;
padding: 25px;
}
.event-box {
margin: 20px 0;
display: flex;
justify-content: flex-end;
}
</style>