项目工程管理

src/views/lot-manage/components/AddEditLot.vue

@@ -0,0 +1,313 @@
+<template>
+  <div>
+    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="70%">
+      <el-form :model="formData" ref="dialogForm" size="small" label-width="110px" :rules="rules">
+        <el-row :gutter="30">
+          <el-col :span="12" :offset="0">
+            <el-form-item label="标段名称" prop="lotName">
+              <el-input
+                v-model="formData.lotName"
+                placeholder="请输入标段名称"
+                clearable
+                maxlength="99"
+                style="width: 100%"
+              />
+            </el-form-item>
+            <el-form-item label="标段简称" prop="lotAbbreviation">
+              <el-input
+                v-model="formData.lotAbbreviation"
+                placeholder="请输入标段简称"
+                clearable
+                maxlength="99"
+                style="width: 100%"
+              />
+            </el-form-item>
+            <el-form-item label="所属项目部" prop="projectDepartment">
+              <el-select
+                v-model="formData.projectDepartment"
+                placeholder="请选择所属项目部 (输入项目部关键字搜索)"
+                clearable
+                filterable
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="item in projectDepartmentOpts"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="计划开工时间" prop="planStartTime">
+              <el-date-picker
+                v-model="formData.planStartTime"
+                type="date"
+                placeholder="选择日期"
+                clearable
+                value-format="yyyy-MM-dd"
+                style="width: 100%"
+                @change="changeDate(1)"
+              />
+            </el-form-item>
+            <el-form-item label="计划竣工时间" prop="planEndTime">
+              <el-date-picker
+                v-model="formData.planEndTime"
+                type="date"
+                placeholder="选择日期"
+                clearable
+                value-format="yyyy-MM-dd"
+                style="width: 100%"
+                @change="changeDate(2)"
+              />
+            </el-form-item>
+            <el-form-item label="项目经理" prop="projectManager">
+              <el-input
+                v-model="formData.projectManager"
+                placeholder="请输入项目经理"
+                clearable
+                maxlength="99"
+                style="width: 100%"
+              />
+            </el-form-item>
+            <el-form-item label="项目总工" prop="projectChiefEngineer">
+              <el-input
+                v-model="formData.projectChiefEngineer"
+                placeholder="请输入项目总工"
+                clearable
+                maxlength="99"
+                style="width: 100%"
+              />
+            </el-form-item>
+            <el-form-item label="工程规模" prop="projectScale">
+              <el-input
+                type="textarea"
+                v-model="formData.projectScale"
+                placeholder="请输入工程规模"
+                maxlength="300"
+                show-word-limit
+                :autosize="{ minRows: 5 }"
+                style="width: 100%"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" :offset="0">
+            <el-form-item label="所属项目" prop="projectName">
+              <el-select
+                v-model="formData.projectName"
+                placeholder="请选择所属项目"
+                clearable
+                filterable
+                style="width: 100%"
+              >
+                <el-option v-for="item in projectNameOpts" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="电压等级" prop="voltageLevel">
+              <el-select
+                v-model="formData.voltageLevel"
+                placeholder="请选择电压等级"
+                clearable
+                filterable
+                style="width: 100%"
+              >
+                <el-option v-for="item in voltageLevelOpts" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="工程类别" prop="proType">
+              <el-select
+                v-model="formData.proType"
+                placeholder="请选择工程类别"
+                clearable
+                filterable
+                style="width: 100%"
+              >
+                <el-option v-for="item in proTypeOpts" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="工程地址" prop="projectAddress">
+              <el-input
+                v-model="formData.projectAddress"
+                placeholder="请输入工程地址"
+                clearable
+                maxlength="99"
+                style="width: 100%"
+              />
+            </el-form-item>
+            <el-form-item label="工程状态" prop="status">
+              <el-select
+                v-model="formData.status"
+                placeholder="请选择工程状态"
+                clearable
+                filterable
+                style="width: 100%"
+              >
+                <el-option v-for="item in statusOpts" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="技术员" prop="technician">
+              <el-input
+                v-model="formData.technician"
+                placeholder="请输入技术员"
+                clearable
+                maxlength="99"
+                style="width: 100%"
+              />
+            </el-form-item>
+            <el-form-item label="安全员" prop="safetyOfficer">
+              <el-input
+                v-model="formData.safetyOfficer"
+                placeholder='请输入安全员, 多人请使用" ，"分割'
+                clearable
+                maxlength="99"
+                style="width: 100%"
+              />
+            </el-form-item>
+            <el-form-item label="备注" prop="remark">
+              <el-input
+                type="textarea"
+                v-model="formData.remark"
+                placeholder="请输入备注"
+                maxlength="300"
+                show-word-limit
+                :autosize="{ minRows: 5 }"
+                style="width: 100%"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogConfirm">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      dialogTitle: '新建项目部',
+      formData: {
+        // 左
+        lotName: '', // 标段名称
+        lotAbbreviation: '', // 标段简称
+        projectDepartment: '', // 所属项目部
+        planStartTime: '', // 计划开工时间
+        planEndTime: '', // 计划竣工时间
+        projectManager: '', // 项目经理
+        projectChiefEngineer: '', // 项目总工
+        projectScale: '', // 工程规模
+        // 右
+        projectName: '', // 所属项目
+        voltageLevel: '', // 电压等级
+        proType: '', // 工程类别
+        projectAddress: '', // 工程地址
+        status: '', // 工程状态
+        technician: '', // 技术员
+        safetyOfficer: '', // 安全员
+        remark: '', // 备注
+      },
+      projectDepartmentOpts: [
+        { label: '项目部1', value: '1' },
+        { label: '项目部2', value: '2' },
+        { label: '项目部3', value: '3' },
+      ],
+      projectNameOpts: [
+        { label: '项目1', value: '1' },
+        { label: '项目2', value: '2' },
+        { label: '项目3', value: '3' },
+      ],
+      voltageLevelOpts: [
+        { label: '电压等级1', value: '1' },
+        { label: '电压等级2', value: '2' },
+        { label: '电压等级3', value: '3' },
+      ],
+      proTypeOpts: [
+        { label: '工程类别1', value: '1' },
+        { label: '工程类别2', value: '2' },
+        { label: '工程类别3', value: '3' },
+      ],
+      statusOpts: [
+        { label: '状态1', value: '1' },
+        { label: '状态2', value: '2' },
+        { label: '状态3', value: '3' },
+      ],
+      rules: {
+        lotName: [
+          { required: true, message: '请输入标段名称', trigger: 'blur' },
+          { min: 1, max: 99, message: '长度在 1 到 99 个字符', trigger: 'blur' },
+        ],
+        lotAbbreviation: [{ required: true, message: '请选择分公司', trigger: 'change' }],
+        projectDepartment: [{ required: true, message: '请选择所属项目部', trigger: 'change' }],
+        planStartTime: [{ required: true, message: '请选择计划开工时间', trigger: 'change' }],
+        planEndTime: [{ required: true, message: '请选择计划竣工时间', trigger: 'change' }],
+        projectName: [{ required: true, message: '请选择所属项目', trigger: 'change' }],
+        voltageLevel: [{ required: true, message: '请选择电压等级', trigger: 'change' }],
+        proType: [{ required: true, message: '请选择工程类别', trigger: 'change' }],
+        projectAddress: [{ required: true, message: '请输入工程地址', trigger: 'blur' }],
+        status: [{ required: true, message: '请选择工程状态', trigger: 'change' }],
+      },
+    }
+  },
+  created() {},
+  methods: {
+    openDialog(data) {
+      console.log('🚀 ~ openDialog ~ data:', data)
+      this.dialogTitle = data.dialogTitle
+      this.dialogVisible = true
+      this.$nextTick(() => {
+        this.$refs.dialogForm.resetFields()
+        if (!data.isAdd) {
+          this.handleEditDetail(data)
+        }
+      })
+    },
+    changeDate(type) {
+      // 开工时间不能晚于竣工时间
+      const { planStartTime, planEndTime } = this.formData
+      if (planStartTime && planEndTime) {
+        if (planEndTime < planStartTime) {
+          this.$message({
+            type: 'error',
+            message: type === 1 ? '计划开工时间不能晚于计划竣工时间' : '计划竣工时间不能早于计划开工时间',
+          })
+          this.formData[type === 1 ? 'planStartTime' : 'planEndTime'] = ''
+        }
+      }
+    },
+    // 编辑详情
+    async handleEditDetail(row) {
+      console.log('🚀 ~ handleEditDetail ~ row:', row)
+      try {
+        // const params = {
+        //   id: row.id,
+        // }
+        // this.formData = await
+      } catch (error) {
+        console.log('🚀 ~ handleEditDetail ~ error:', error)
+      }
+    },
+    dialogConfirm() {
+      console.log('🚀 ~ dialogConfirm ~ :', this.formData)
+      this.$refs.dialogForm.validate((valid) => {
+        if (valid) {
+          this.dialogVisible = false
+          this.$message({
+            type: 'success',
+            message: '操作成功!',
+          })
+          this.$emit('getList')
+        } else {
+          return false
+        }
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped></style>

src/views/lot-manage/index.vue

@@ -1,7 +1,7 @@
 <template>
     <!-- 标段管理 -->
     <div class="app-container">
-        <TableModel :formLabel="formLabel" :columnsList="columnsList">
+        <TableModel ref="tableModel" :formLabel="formLabel" :columnsList="columnsList">
             <template slot="btn">
                 <el-button
                     size="mini"
@@ -44,32 +44,46 @@
                 </el-button>
             </template>
         </TableModel>
+
+        <AddEditLot ref="addEditLot" @getList="getList" />
+        <LotListDetails ref="lotListDetails" />
     </div>
 </template>
 
 <script>
 import TableModel from '@/components/TableModel'
-import { formLabel, columnsList, dialogConfig } from './config'
+import { formLabel, columnsList } from './config'
 export default {
     components: {
         TableModel,
+        AddEditLot: () => import('./components/AddEditLot'),
+        LotListDetails: () => import('@/views/project-manage/components/LotListDetails.vue'),
     },
     data() {
         return {
             formLabel,
             columnsList,
-            dialogConfig,
         }
     },
     methods: {
+        getList() {
+            this.$refs.tableModel.getTableList()
+        },
         handleExport() {
             console.log('导出')
         },
         handleAddData() {
             console.log('新增')
+            this.$refs.addEditLot.openDialog({ dialogTitle: '新增标段', isAdd: true })
+        },
+        handleDetails(row) {
+            console.log('详情', row)
+            this.$refs.lotListDetails.openDialog(row)
+        },
+        handleEditData(row) {
+            console.log('修改', row)
+            this.$refs.addEditLot.openDialog({ dialogTitle: '修改标段', isAdd: false, ...row })
         },
-        handleDetails() {},
-        handleEditData() {},
         handleDeleteData() {},
     },
 }

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

@@ -0,0 +1,114 @@
+<template>
+  <div>
+    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="40%">
+      <el-form :model="formData" ref="dialogForm" size="small" label-width="100px" :rules="rules">
+        <el-form-item label="所属公司" prop="company">
+          <el-input v-model="formData.company" placeholder="请输入所属公司" style="width: 100%" disabled />
+        </el-form-item>
+        <el-form-item label="分公司" prop="subCompany">
+          <el-select v-model="formData.subCompany" placeholder="请选择分公司" clearable style="width: 100%">
+            <el-option v-for="item in subCompanyOpts" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="项目部名称" prop="proName">
+          <el-input
+            v-model="formData.proName"
+            placeholder="请输入项目部名称"
+            clearable
+            style="width: 100%"
+            maxlength="99"
+            show-word-limit
+          />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input
+            type="textarea"
+            v-model="formData.remark"
+            placeholder="请输入备注"
+            clearable
+            style="width: 100%"
+            maxlength="300"
+            show-word-limit
+            :autosize="{ minRows: 5 }"
+          />
+        </el-form-item>
+      </el-form>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogConfirm">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      dialogTitle: '新建项目部',
+      formData: {
+        company: '', // 所属公司
+        subCompany: '', // 分公司
+        proName: '', // 项目部名称
+        remark: '', // 备注
+      },
+      subCompanyOpts: [
+        { label: '分公司1', value: '1' },
+        { label: '分公司2', value: '2' },
+        { label: '分公司3', value: '3' },
+      ],
+      rules: {
+        subCompany: [{ required: true, message: '请选择分公司', trigger: 'change' }],
+        proName: [
+          { required: true, message: '请输入项目部名称', trigger: 'blur' },
+          { min: 1, max: 99, message: '长度在 1 到 99 个字符', trigger: 'blur' },
+        ],
+      },
+    }
+  },
+  created() {},
+  methods: {
+    openDialog(data) {
+      console.log('🚀 ~ openDialog ~ data:', data)
+      this.dialogTitle = data.dialogTitle
+      this.dialogVisible = true
+      this.$nextTick(() => {
+        this.$refs.dialogForm.resetFields()
+        if (!data.isAdd) {
+          this.handleEditDetail(data)
+        }
+      })
+    },
+    // 编辑详情
+    async handleEditDetail(row) {
+      console.log('🚀 ~ handleEditDetail ~ row:', row)
+      try {
+        // const params = {
+        //   id: row.id,
+        // }
+        // this.formData = await
+      } catch (error) {
+        console.log('🚀 ~ handleEditDetail ~ error:', error)
+      }
+    },
+    dialogConfirm() {
+      this.$refs.dialogForm.validate((valid) => {
+        if (valid) {
+          this.dialogVisible = false
+          this.$message({
+            type: 'success',
+            message: '操作成功!',
+          })
+          this.$emit('getList')
+        } else {
+          return false
+        }
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="60%">
-      <el-form v-if="showSearch" :model="queryParams" ref="queryForm" size="small" inline @submit.native.prevent>
+      <el-form v-if="dialogVisible" :model="queryParams" ref="queryForm" size="small" inline @submit.native.prevent>
         <el-form-item label="" prop="companyName">
           <el-select class="w240" v-model="queryParams.companyName" placeholder="请选择分公司" clearable filterable>
             <el-option v-for="item in companyNameOpts" :key="item.value" :label="item.label" :value="item.value" />
@@ -76,12 +76,6 @@ export default {
   components: {
     LotListDetails: () => import('./LotListDetails.vue'),
   },
-  props: {
-    showSearch: {
-      type: Boolean,
-      default: false,
-    },
-  },
   data() {
     return {
       loading: false,

src/views/project-manage/index.vue

@@ -72,7 +72,7 @@ export default {
         handleAddData() {
             console.log('新增')
             this.addEditRow = {}
-            this.dialogConfig.outerTitle = '新建工程'
+            this.dialogConfig.outerTitle = '新建项目'
             this.dialogType = 1
             this.dialogConfig.outerVisible = true
         },
@@ -85,7 +85,7 @@ export default {
         },
         handleEditData(data) {
             this.addEditRow = data
-            this.dialogConfig.outerTitle = '修改工程'
+            this.dialogConfig.outerTitle = '修改项目'
             this.dialogType = 2
             this.dialogConfig.outerVisible = true
         },

src/views/project-manage/projectdePartment.vue

@@ -48,12 +48,7 @@
         <!-- 插槽 -->
         <template v-slot="{ row }" v-if="column.prop == 'status'">
           <span>
-            <el-switch
+            <el-switch v-model="row.status" active-value="1" inactive-value="0" @change="changeSwitch(row)"></el-switch>
-              v-model="row.status"
-              active-value="1"
-              inactive-value="0"
-              @change="changeSwitch(row)"
-            ></el-switch>
           </span>
         </template>
         <template v-slot="{ row }" v-else-if="column.prop == 'lotCount'">
@@ -84,7 +79,8 @@
       @pagination="getList"
     />
 
-    <LotList ref="lotList" :showSearch="true" />
+    <LotList ref="lotList" />
+    <AddEditProDep ref="addEditProDep" @getList="getList" />
   </div>
 </template>
 
@@ -92,6 +88,7 @@
 export default {
   components: {
     LotList: () => import('./components/LotList'),
+    AddEditProDep: () => import('./components/AddEditProDep'),
   },
   data() {
     return {
@@ -188,9 +185,11 @@ export default {
     },
     handleAdd() {
       console.log('🚀 ~ handleAdd ~:')
+      this.$refs.addEditProDep.openDialog({ dialogTitle: '新增项目部', isAdd: true })
     },
     handleEdit(row) {
       console.log('🚀 ~ handleEdit ~ row:', row)
+      this.$refs.addEditProDep.openDialog({ ...row, dialogTitle: '编辑项目部', isAdd: false })
     },
     handleDelete(row) {
       console.log('🚀 ~ handleDelete ~ row:', row)