项目工程管理

src/views/project-manage/components/LotList.vue

@@ -0,0 +1,132 @@
+<template>
+  <div>
+    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="60%">
+      <el-table :data="tableList" fit highlight-current-row style="width: 100%" v-loading="loading">
+        <!-- 多选 -->
+        <el-table-column
+          type="index"
+          width="55"
+          label="序号"
+          align="center"
+          :index="(index) => (queryParams.pageNum - 1) * queryParams.pageSize + index + 1"
+        />
+        <el-table-column
+          v-for="(column, index) in tableColumns"
+          show-overflow-tooltip
+          :key="index"
+          :label="column.label"
+          :prop="column.prop"
+          align="center"
+        >
+        </el-table-column>
+        <!-- 操作 -->
+        <el-table-column label="操作" align="center" width="150">
+          <template slot-scope="{ row }">
+            <el-button type="text" size="mini" @click="handleDetails(row)">详情</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getDialogList"
+      />
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">关 闭</el-button>
+      </span>
+    </el-dialog>
+
+    <LotListDetails ref="lotListDetails" />
+  </div>
+</template>
+
+<script>
+import LotListDetails from './LotListDetails.vue'
+
+export default {
+  components: {
+    LotListDetails,
+  },
+  data() {
+    return {
+      loading: false,
+      dialogVisible: false,
+      dialogTitle: '标段工程',
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      total: 0, // 总条数
+      // 表头
+      tableColumns: [
+        { label: '标段名称', prop: 'lotName' },
+        { label: '工程类别', prop: 'proType' },
+        { label: '电压等级', prop: 'voltageLevel' },
+        { label: '计划开工时间', prop: 'planStartTime' },
+        { label: '计划竣工时间', prop: 'planEndTime' },
+        { label: '工程地址', prop: 'address' },
+        { label: '工程状态', prop: 'status' },
+        { label: '分公司', prop: 'branchOffice' },
+      ],
+      // 表格数据
+      tableList: [
+        {
+          lotName: '标段1',
+          proType: '工程类别1',
+          voltageLevel: '电压等级1',
+          planStartTime: '2023-01-01',
+          planEndTime: '2023-12-31',
+          address: '地址1',
+          status: '状态1',
+          branchOffice: '分公司1',
+        },
+        {
+          lotName: '标段2',
+          proType: '工程类别2',
+          voltageLevel: '电压等级2',
+          planStartTime: '2023-02-01',
+          planEndTime: '2023-11-30',
+          address: '地址2',
+          status: '状态2',
+          branchOffice: '分公司2',
+        },
+      ],
+    }
+  },
+  created() {},
+  methods: {
+    openDialog(data) {
+      console.log('🚀 ~ openDialog ~ data:', data)
+      this.dialogVisible = true
+      this.getDialogList()
+    },
+    // 获取列表数据
+    async getDialogList() {
+      console.log('列表-查询', this.queryParams)
+      this.loading = true
+      try {
+        const params = { ...this.queryParams }
+        // const res = await
+        // console.log('🚀 ~ 获取列表 ~ res:', res)
+        // this.tableList = res.rows
+        // this.total = res.total
+        this.loading = false
+      } catch (error) {
+        console.log('🚀 ~ 获取列表 ~ error:', error)
+        this.loading = false
+        this.tableList = []
+        this.total = 0
+      }
+    },
+    handleDetails(row) {
+      this.$refs.lotListDetails.openDialog(row)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped></style>

src/views/project-manage/components/LotListDetails.vue

@@ -0,0 +1,85 @@
+<template>
+  <div>
+    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="60%">
+      <TitleTip titleText="标段信息" />
+      <el-descriptions :column="2" border :labelStyle="{ width: '120px' }">
+        <el-descriptions-item label="标段名称">{{ formData.lotName }}</el-descriptions-item>
+        <el-descriptions-item label="标段简称">{{ formData.lotShortName }}</el-descriptions-item>
+        <el-descriptions-item label="项目部">{{ formData.projectDepartment }}</el-descriptions-item>
+        <el-descriptions-item label="项目经理">{{ formData.projectManager }}</el-descriptions-item>
+        <el-descriptions-item label="项目总工">{{ formData.projectChiefEngineer }}</el-descriptions-item>
+        <el-descriptions-item label="技术员">{{ formData.technician }}</el-descriptions-item>
+        <el-descriptions-item label="安全员">{{ formData.safetyOfficer }}</el-descriptions-item>
+        <el-descriptions-item label="工程规模">{{ formData.projectScale }}</el-descriptions-item>
+        <el-descriptions-item label="所属项目">{{ formData.projectName }}</el-descriptions-item>
+        <el-descriptions-item label="电压等级">{{ formData.voltageLevel }}</el-descriptions-item>
+        <el-descriptions-item label="工程类别">{{ formData.proType }}</el-descriptions-item>
+        <el-descriptions-item label="工程地址">{{ formData.projectAddress }}</el-descriptions-item>
+        <el-descriptions-item label="计划开工时间">{{ formData.planStartTime }}</el-descriptions-item>
+        <el-descriptions-item label="计划竣工时间">{{ formData.planEndTime }}</el-descriptions-item>
+        <el-descriptions-item label="工程状态">{{ formData.status }}</el-descriptions-item>
+        <el-descriptions-item label="备注">{{ formData.remark }}</el-descriptions-item>
+      </el-descriptions>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">关 闭</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      loading: false,
+      dialogVisible: false,
+      dialogTitle: '',
+      queryParams: {},
+      formData: {
+        lotName: '', // 标段名称
+        lotShortName: '', // 标段简称
+        projectDepartment: '', // 项目部
+        projectManager: '', // 项目经理
+        projectChiefEngineer: '', // 项目总工
+        technician: '', // 技术员
+        safetyOfficer: '', // 安全员
+        projectScale: '', // 工程规模
+        projectName: '', // 所属项目
+        voltageLevel: '', // 电压等级
+        proType: '', // 工程类别
+        projectAddress: '', // 工程地址
+        planStartTime: '', // 计划开工时间
+        planEndTime: '', // 计划竣工时间
+        status: '', // 工程状态
+        remark: '', // 备注
+      },
+    }
+  },
+  created() {},
+  methods: {
+    openDialog(data) {
+      console.log('🚀 ~ openDialog ~ data:', data)
+      this.queryParams = data
+      this.dialogTitle = data.lotName
+      this.dialogVisible = true
+      this.getData()
+    },
+    // 获取数据
+    async getData() {
+      console.log('🚀  ~ this.queryParams:', this.queryParams)
+      this.loading = true
+      try {
+        const params =
+          // const res = await
+          // console.log('🚀 ~ 获取列表 ~ res:', res)
+          (this.loading = false)
+      } catch (error) {
+        console.log('🚀 ~ 获取列表 ~ error:', error)
+        this.loading = false
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped></style>

src/views/project-manage/components/add-edit-form.vue

@@ -8,6 +8,9 @@
             ref="addOrEditFormRef"
         >
             <TitleTip :titleText="`基本信息`" />
+            <el-form-item label="所属公司：" prop="company">
+                <el-input v-model="addOrEditForm.company" disabled />
+            </el-form-item>
             <el-form-item label="项目名称：" prop="projectName">
                 <el-input v-model="addOrEditForm.projectName" clearable />
             </el-form-item>
@@ -66,6 +69,12 @@
 <script>
 import { addProjectAPI } from '@/api/project-manage/index.js'
 export default {
+    props: {
+        row: {
+            type: Object,
+            default: () => {},
+        },
+    },
     data() {
         const validatePlanStartTime = (rule, value, callback) => {
             if (!value) {
@@ -88,6 +97,7 @@ export default {
             callback()
         }
         return {
+            queryParams: {},
             // 新增或修改接口
             addOrEditForm: {
                 projectName: '', // 项目名称
@@ -145,7 +155,13 @@ export default {
             },
         }
     },
-
+    created() {
+        console.log('🚀 ~ created ~ row:', this.row)
+        if (this.row.projectId) {
+            this.queryParams = this.row
+            console.log('🚀 ~ created ~ this.queryParams:', this.queryParams)
+        }
+    },
     methods: {
         handleClose() {
             this.$refs.addOrEditFormRef.resetFields()

src/views/project-manage/components/project-details.vue

@@ -1,31 +1,58 @@
 <template>
-    <div>
+  <div>
-        <el-descriptions :column="2" border>
+    <TitleTip titleText="基本信息" />
-            <el-descriptions-item label="项目名称"></el-descriptions-item>
+    <el-descriptions :column="2" border :labelStyle="{ width: '120px' }">
-            <el-descriptions-item label="业主单位"></el-descriptions-item>
+      <el-descriptions-item label="项目名称">{{ formData.projectName }}</el-descriptions-item>
-            <el-descriptions-item label="项目地址">苏州市</el-descriptions-item>
+      <el-descriptions-item label="业主单位">{{ formData.ownerUnit }}</el-descriptions-item>
-            <el-descriptions-item label="项目金额(万元)">
+      <el-descriptions-item label="项目地址">{{ formData.projectAddress }}</el-descriptions-item>
-            </el-descriptions-item>
+      <el-descriptions-item label="项目金额(万元)">{{ formData.projectAmount }}</el-descriptions-item>
-            <el-descriptions-item
+      <el-descriptions-item label="计划开工日期">{{ formData.planStartDate }}</el-descriptions-item>
-                label="计划开工日期"
+      <el-descriptions-item label="计划竣工日期">{{ formData.planEndDate }}</el-descriptions-item>
-                :contentStyle="{ 'text-align': 'right' }"
+      <el-descriptions-item label="项目负责人">{{ formData.projectManager }}</el-descriptions-item>
-                >江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item
+      <el-descriptions-item label="项目规模">{{ formData.projectScale }}</el-descriptions-item>
-            >
+    </el-descriptions>
-            <el-descriptions-item label="计划竣工日期"
+  </div>
-                >苏州市</el-descriptions-item
-            >
-            <el-descriptions-item label="计划竣工日期"
-                >项目负责人</el-descriptions-item
-            >
-            <el-descriptions-item label="计划竣工日期"
-                >项目规模</el-descriptions-item
-            >
-        </el-descriptions>
-    </div>
 </template>
 
 <script>
-export default {}
+export default {
+  props: {
+    row: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      formData: {
+        projectName: '', // 项目名称
+        ownerUnit: '', // 业主单位
+        projectAddress: '', // 项目地址
+        projectAmount: '', // 项目金额(万元)
+        planStartDate: '', // 计划开工日期
+        planEndDate: '', // 计划竣工日期
+        projectManager: '', // 项目负责人
+        projectScale: '', // 项目规模
+      },
+    }
+  },
+  created() {
+    console.log('🚀 ~ created ~ row:', this.row)
+  },
+  methods: {
+    // 获取数据
+    async getData() {
+      const params = {
+        projectId: this.row.projectId,
+      }
+      try {
+        // const res = await
+      } catch (error) {
+        console.error('获取数据失败:', error)
+      }
+    },
+  },
+}
 </script>
 
 <style></style>

src/views/project-manage/config.js

@@ -15,7 +15,7 @@ export const columnsList = [
     { t_props: 'planEndTime', t_label: '计划竣工日期' },
     { t_props: 'ownerUnit', t_label: '业主单位' },
     { t_props: 'projectStatus', t_label: '项目状态', t_slot: 'status' },
-    { t_props: 'auditStatus', t_label: '标段工程数量' },
+    { t_props: 'auditStatus', t_label: '标段工程数量', t_slot: 'auditStatus' },
 ]
 
 export const dialogConfig = {

src/views/project-manage/index.vue

@@ -1,70 +1,40 @@
 <template>
     <!-- 项目管理 -->
     <div class="app-container">
-        <TableModel
+        <TableModel ref="tableModel" :formLabel="formLabel" :columnsList="columnsList" :request-api="getProjectListAPI">
-            :formLabel="formLabel"
-            :columnsList="columnsList"
-            :request-api="getProjectListAPI"
-        >
             <template slot="btn">
-                <el-button
+                <el-button size="mini" type="primary" icon="el-icon-download" @click="handleExport()"> 导出 </el-button>
-                    size="mini"
+                <el-button size="mini" type="primary" icon="el-icon-plus" @click="handleAddData()"> 新增 </el-button>
-                    type="primary"
-                    icon="el-icon-download"
-                    @click="handleExport()"
-                >
-                    导出
-                </el-button>
-                <el-button
-                    size="mini"
-                    type="primary"
-                    icon="el-icon-plus"
-                    @click="handleAddData()"
-                >
-                    新增
-                </el-button>
             </template>
             <template slot="handle" slot-scope="{ data }">
-                <el-button
+                <el-button size="mini" type="primary" @click="handleDetails(data)"> 详情 </el-button>
-                    size="mini"
+                <el-button size="mini" type="primary" @click="handleEditData(data)"> 修改 </el-button>
-                    type="primary"
+                <el-button size="mini" type="danger" @click="handleDeleteData(data)"> 删除 </el-button>
-                    @click="handleDetails(data)"
-                >
-                    详情
-                </el-button>
-                <el-button
-                    size="mini"
-                    type="primary"
-                    @click="handleEditData(data)"
-                >
-                    修改
-                </el-button>
-                <el-button
-                    size="mini"
-                    type="danger"
-                    @click="handleDeleteData(data.id, deleteWarningApi)"
-                >
-                    删除
-                </el-button>
             </template>
 
             <template slot="status" slot-scope="{ data }">
                 <el-tag size="mini">状态 </el-tag>
             </template>
+            <template slot="auditStatus" slot-scope="{ data }">
+                <span v-if="data.projectAmount > 0" @click="handleLot(data)" style="color: #409eff; cursor: pointer">{{
+                    data.projectAmount
+                }}</span>
+                <span v-else>-</span>
+            </template>
         </TableModel>
 
-        <DialogModel
+        <DialogModel :dialogConfig="dialogConfig" @closeDialogOuter="closeDialogOuter">
-            :dialogConfig="dialogConfig"
-            @closeDialogOuter="closeDialogOuter"
-        >
             <template slot="outerContent">
                 <AddEditForm
                     @onCloseDialog="closeDialogOuter"
                     v-if="dialogType === 1 || dialogType === 2"
+                    :row="addEditRow"
                 />
-                <ProjectDetails v-else />
+                <ProjectDetails v-else :row="proDetail" />
             </template>
         </DialogModel>
+
+        <LotList ref="lotList" />
     </div>
 </template>
 
@@ -73,6 +43,7 @@ import TableModel from '@/components/TableModel'
 import DialogModel from '@/components/DialogModel'
 import AddEditForm from './components/add-edit-form'
 import ProjectDetails from './components/project-details'
+import LotList from './components/LotList'
 import { formLabel, columnsList, dialogConfig } from './config'
 import { getProjectListAPI } from '@/api/project-manage/index.js'
 export default {
@@ -81,6 +52,7 @@ export default {
         DialogModel,
         AddEditForm,
         ProjectDetails,
+        LotList,
     },
     data() {
         return {
@@ -89,6 +61,8 @@ export default {
             dialogConfig,
             getProjectListAPI,
             dialogType: 1,
+            proDetail: {},
+            addEditRow: {},
         }
     },
     methods: {
@@ -97,18 +71,46 @@ export default {
         },
         handleAddData() {
             console.log('新增')
+            this.addEditRow = {}
+            this.dialogConfig.outerTitle = '新建工程'
             this.dialogType = 1
             this.dialogConfig.outerVisible = true
         },
-        handleDetails() {},
+        handleDetails(data) {
-        handleEditData() {
+            console.log('🚀 ~ handleDetails ~ data:', data)
-            this.dialogType = 2
+            this.proDetail = data
+            this.dialogType = 3
+            this.dialogConfig.outerVisible = true
+            this.dialogConfig.outerTitle = data.projectName
+        },
+        handleEditData(data) {
+            this.addEditRow = data
+            this.dialogConfig.outerTitle = '修改工程'
+            this.dialogType = 2
+            this.dialogConfig.outerVisible = true
+        },
+        handleDeleteData(data) {
+            console.log('删除', data)
+            // 确认
+            this.$confirm('是否删除?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning',
+            })
+                .then(() => {
+                    this.$refs.tableModel.getTableList()
+                })
+                .catch(() => {
+                    console.log('取消删除')
+                })
         },
-        handleDeleteData() {},
         /** 关闭外侧弹框 */
         closeDialogOuter() {
             this.dialogConfig.outerVisible = false
         },
+        handleLot(data) {
+            this.$refs.lotList.openDialog(data)
+        },
     },
 }
 </script>