1

src/router/routes.js

@@ -437,9 +437,23 @@ const routes = [
             path: "/costAdd",
             name: "costAdd",
             title: "成本管理",
-            meta: { title: "成本管理详情" }, // 修改：成本管理 → 成本管理详情
+            meta: { title: "成本管理详情" },
             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",
             name: "property",

src/views/elseManage/workForHousing.vue

+<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>