明树Git Lab

Commit 1691ab65 authored by zhanghan's avatar zhanghan

1

parent d27fdd74
...@@ -437,9 +437,23 @@ const routes = [ ...@@ -437,9 +437,23 @@ const routes = [
path: "/costAdd", path: "/costAdd",
name: "costAdd", name: "costAdd",
title: "成本管理", title: "成本管理",
meta: { title: "成本管理详情" }, // 修改:成本管理 → 成本管理详情 meta: { title: "成本管理详情" },
component: () => import("@/views/elseManage/costAdd.vue"), component: () => import("@/views/elseManage/costAdd.vue"),
}, },
{
path: "/workForHousing",
name: "workForHousing",
title: "工抵房管理",
meta: { title: "工抵房管理" },
component: () => import("@/views/elseManage/workForHousing.vue"),
},
{
path: "/workForHousingAdd",
name: "workForHousingAdd",
title: "工抵房管理详情",
meta: { title: "工抵房管理详情" },
component: () => import("@/views/elseManage/workForHousingAdd.vue"),
},
{ {
path: "/property", path: "/property",
name: "property", name: "property",
......
<template>
<div class="manage-container">
<div class="manage-wrap">
<search-form @search="handleSearch" />
<div class="manage-header">
<div class="header-left"></div>
<div class="header-right">
<el-button type="primary" @click="workForHousingAdd">新增</el-button>
</div>
</div>
<div class="manage-content" v-loading="loading">
<common-table
:autoHeight="true"
:maxRows="10"
:data="tableData"
:columns="tableColumns"
:total="total"
:current-page="currentPage"
:page-size="pageSize"
:index="true"
:indexLabel="'序号'"
title=""
:border="true"
@size-change="handleSizeChange"
@current-page-change="handleCurrentPageChange"
>
<template #operations="{ row, index }">
<el-button
link
type="primary"
size="small"
@click="previewRecord(row)"
>查看</el-button
>
<el-button
link
type="primary"
size="small"
@click="editRecord(row)"
>编辑</el-button
>
<el-button
link
type="danger"
size="small"
@click="deleteRecord(row)"
>删除</el-button
>
</template>
</common-table>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import CommonTable from "@/components/common/commonTable.vue";
import SearchForm from "@/components/common/SearchForm.vue";
const handleSearch = (formData) => {
currentPage.value = 1;
getProjectData(formData);
};
const router = useRouter();
const { proxy } = getCurrentInstance();
let tableData = ref([]);
let tableColumns = ref([
{
prop: "djbh",
label: "登记编号",
showOverflowTooltip: true,
},
{
prop: "xmmc",
label: "项目名称",
showOverflowTooltip: true,
},
{
prop: "htbh",
label: "合同编号",
showOverflowTooltip: true,
},
{
prop: "kklx",
label: "抵扣类型",
width: 100,
},
{
prop: "htje",
label: "合同金额",
width: 120,
},
{
prop: "djrq",
label: "登记日期",
width: 120,
},
{
prop: "jbr",
label: "经办人",
width: 100,
},
{
prop: "operations",
label: "操作",
width: 170,
slot: "operations",
fixed: "right",
align: "center",
},
]);
let loading = ref(false);
let total = ref(0);
let currentPage = ref(1);
let pageSize = ref(10);
// 获取列表数据
const getProjectData = (params = {}) => {
loading.value = true;
// TODO: 替换为实际的后端接口
// proxy.$post({
// url: "/api/workForHousing/getList",
// data: {
// page: currentPage.value,
// pagesize: pageSize.value,
// ...params,
// },
// callback: (data) => {
// tableData.value = data.rows;
// total.value = data.count;
// loading.value = false;
// },
// });
// 临时模拟数据
setTimeout(() => {
tableData.value = [
{
id: 1,
djbh: "DJ202403001",
xmmc: "某某工程项目",
htbh: "HT202403001",
kklx: "工程款",
htje: "1000000",
djrq: "2024-03-15",
jbr: "张三",
},
{
id: 2,
djbh: "DJ202403002",
xmmc: "另一个工程项目",
htbh: "HT202403002",
kklx: "材料款",
htje: "500000",
djrq: "2024-03-16",
jbr: "李四",
},
];
total.value = 2;
loading.value = false;
}, 500);
};
// 分页
const handleSizeChange = (size) => {
pageSize.value = size;
currentPage.value = 1;
getProjectData();
};
const handleCurrentPageChange = (page) => {
currentPage.value = page;
getProjectData();
};
// 新增
const workForHousingAdd = () => {
router.push("/workForHousingAdd");
};
// 编辑
const editRecord = (item) => {
router.push({
name: "workForHousingAdd",
query: {
id: item.id,
},
});
};
// 查看
const previewRecord = (item) => {
router.push({
name: "workForHousingAdd",
query: {
isPreview: true,
id: item.id,
},
});
};
// 删除
const deleteRecord = (item) => {
ElMessageBox.confirm("确认删除该项?", "提示", {
confirmButtonText: "确认",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
// TODO: 替换为实际的后端接口
// proxy.$post({
// url: "/api/workForHousing/delete",
// data: {
// id: item.id,
// },
// callback: (data) => {
// ElMessage.success("删除成功");
// getProjectData();
// },
// });
// 临时模拟删除
ElMessage.success("删除成功");
getProjectData();
})
.catch(() => {});
};
onMounted(() => {
getProjectData();
});
</script>
<style scoped lang="less"></style>
<template>
<div class="add-project-container">
<div class="add-project-content" v-loading="loading">
<routerBack />
<div class="tabs-content">
<div class="project-tab-content">
<div class="tab-content">
<el-form :model="formData" label-width="150" :disabled="isPreview">
<el-collapse v-model="activeCollapse">
<!-- 步骤1:合同基本信息 -->
<el-collapse-item title="1 合同基本信息" name="合同基本信息">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="登记编号">
<el-input
v-model="formData.djbh"
placeholder="输入登记编号"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="登记日期">
<el-date-picker
v-model="formData.djrq"
type="date"
placeholder="选择登记日期"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="项目名称">
<el-input
v-model="formData.xmmc"
placeholder="输入项目名称"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="抵扣类型">
<el-radio-group v-model="formData.kklx">
<el-radio label="工程款">工程款</el-radio>
<el-radio label="材料款">材料款</el-radio>
<el-radio label="其他">其他</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="合同金额">
<el-input
v-model="formData.htje"
placeholder="输入合同金额"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="抵扣比例">
<el-input
v-model="formData.dkbl"
placeholder="输入抵扣比例"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="抵扣金额">
<el-input
v-model="formData.dkje"
placeholder="输入抵扣金额"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="合同编号">
<el-input
v-model="formData.htbh"
placeholder="输入合同编号"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="合同扫描件">
<FileUploader
v-model="formData.htsmj"
:disabled="isPreview"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="工抵签订时间">
<el-date-picker
v-model="formData.gdqdsj"
type="date"
placeholder="选择工抵签订时间"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="经办人">
<el-input
v-model="formData.jbr"
placeholder="输入经办人"
/>
</el-form-item>
</el-col>
</el-row>
</el-collapse-item>
<!-- 步骤2:合同主体信息 -->
<el-collapse-item title="2 合同主体信息" name="合同主体信息">
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="甲方名称">
<el-input
v-model="formData.jfmc"
placeholder="输入甲方名称"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="甲方联系人">
<el-input
v-model="formData.jflxr"
placeholder="输入甲方联系人"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="甲方联系方式">
<el-input
v-model="formData.jflxfs"
placeholder="输入甲方联系方式"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="乙方名称">
<el-input
v-model="formData.yfmc"
placeholder="输入乙方名称"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="乙方联系人">
<el-input
v-model="formData.yflxr"
placeholder="输入乙方联系人"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="乙方联系方式">
<el-input
v-model="formData.yflxfs"
placeholder="输入乙方联系方式"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="丙方名称">
<el-input
v-model="formData.bfmc"
placeholder="输入丙方名称"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="丙方联系人">
<el-input
v-model="formData.bflxr"
placeholder="输入丙方联系人"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="丙方联系方式">
<el-input
v-model="formData.bflxfs"
placeholder="输入丙方联系方式"
/>
</el-form-item>
</el-col>
</el-row>
</el-collapse-item>
<!-- 步骤3:房源信息 -->
<el-collapse-item title="3 房源信息" name="房源信息">
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="项目名称">
<el-input
v-model="formData.fy_xmmc"
placeholder="输入项目名称"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="项目地址">
<el-input
v-model="formData.xmdz"
placeholder="输入项目地址"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="项目公司">
<el-input
v-model="formData.xmgs"
placeholder="输入项目公司"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="项目状态">
<el-radio-group v-model="formData.xmzt">
<el-radio label="在建">在建</el-radio>
<el-radio label="已竣工">已竣工</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="楼栋信息">
<el-input
v-model="formData.ldxx"
placeholder="输入楼栋信息"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="房源类型">
<el-radio-group v-model="formData.fylx">
<el-radio label="住宅">住宅</el-radio>
<el-radio label="公寓">公寓</el-radio>
<el-radio label="商铺">商铺</el-radio>
<el-radio label="车位">车位</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="建筑面积(㎡)">
<el-input
v-model="formData.jzmj"
placeholder="输入建筑面积(㎡)"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="单价(元/㎡)">
<el-input
v-model="formData.dj"
placeholder="输入单价(元/㎡)"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="总金额(元)">
<el-input
v-model="formData.zje"
placeholder="输入总金额(元)"
/>
</el-form-item>
</el-col>
</el-row>
</el-collapse-item>
<!-- 步骤4:相关附件 -->
<el-collapse-item title="4 相关附件" name="相关附件">
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="附件上传">
<FileUploader
v-model="formData.fjsc"
:disabled="isPreview"
/>
</el-form-item>
</el-col>
</el-row>
</el-collapse-item>
</el-collapse>
</el-form>
</div>
</div>
</div>
<div class="add-project-header">
<div class="header-left"></div>
<div class="header-right">
<el-button type="default" @click="backClick">返回</el-button>
<template v-if="!loading && !isPreview">
<el-button type="primary" @click="saveClick">保存</el-button>
</template>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import routerBack from "@/components/common/routerBack.vue";
import FileUploader from "@/components/FileUploader/index.vue";
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();
// 折叠面板默认展开项
const activeCollapse = ref([
"合同基本信息",
"合同主体信息",
"房源信息",
"相关附件",
]);
// 表单数据
const formData = reactive({});
// 加载状态
const loading = ref(false);
// 是否预览模式
const isPreview = ref(!!route.query.isPreview);
// 当前编辑的记录ID
const recordId = ref(route.query.id || "");
// 获取单条记录详情(编辑/预览)
const getRecordDetail = () => {
if (!recordId.value) return;
loading.value = true;
// TODO: 替换为实际的后端接口
// proxy.$post({
// url: "/api/workForHousing/getDetail",
// data: { id: recordId.value },
// callback: (data) => {
// loading.value = false;
// Object.assign(formData, data);
// },
// });
// 临时模拟数据
setTimeout(() => {
loading.value = false;
// 编辑时回显数据
}, 500);
};
// 返回按钮
const backClick = () => {
router.back(-1);
};
// 保存/提交表单
const saveClick = () => {
// TODO: 添加表单验证
loading.value = true;
// 区分新增/编辑
// TODO: 替换为实际的后端接口
// const url = recordId.value
// ? "/api/workForHousing/update"
// : "/api/workForHousing/create";
// TODO: 替换为实际的后端接口调用
// proxy.$post({
// url: url,
// data: formData,
// callback: (res) => {
// loading.value = false;
// ElMessage.success(recordId.value ? "编辑成功" : "新增成功");
// router.back(-1);
// },
// });
// 临时模拟保存
setTimeout(() => {
loading.value = false;
ElMessage.success(recordId.value ? "编辑成功" : "新增成功");
router.back(-1);
}, 500);
};
// 页面初始化
onMounted(() => {
// 如果有ID则加载详情
if (recordId.value) {
getRecordDetail();
}
});
</script>
<style scoped lang="less">
.tab-handle {
margin-bottom: 10px;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment