.

src/main/java/com/izouma/zhumj/domain/Construction.java

@@ -1,5 +1,6 @@
 package com.izouma.zhumj.domain;
 
+import com.izouma.zhumj.enums.ProcessStatus;
 import io.swagger.annotations.ApiModel;
 import io.swagger.annotations.ApiModelProperty;
 import lombok.AllArgsConstructor;
@@ -8,6 +9,8 @@ import lombok.Data;
 import lombok.NoArgsConstructor;
 
 import javax.persistence.Entity;
+import javax.persistence.EnumType;
+import javax.persistence.Enumerated;
 import java.time.LocalDate;
 
 @Data
@@ -30,12 +33,21 @@ public class Construction extends BaseEntity {
     @ApiModelProperty("工程监理")
     private String supervisor;
 
+    private LocalDate planStart;
+
+    private LocalDate planEnd;
+
     @ApiModelProperty("开工日期")
     private LocalDate start;
 
     @ApiModelProperty("竣工日期")
     private LocalDate end;
 
+    private int days;
+
+    @Enumerated(EnumType.STRING)
+    private ProcessStatus status;
+
     @ApiModelProperty("进度")
     private int progress;
 }

src/main/java/com/izouma/zhumj/repo/ConstructionProcessRepo.java

@@ -4,5 +4,8 @@ import com.izouma.zhumj.domain.ConstructionProcess;
 import org.springframework.data.jpa.repository.JpaRepository;
 import org.springframework.data.jpa.repository.JpaSpecificationExecutor;
 
+import java.util.List;
+
 public interface ConstructionProcessRepo extends JpaRepository<ConstructionProcess, Long>, JpaSpecificationExecutor<ConstructionProcess> {
+    List<ConstructionProcess> findByConstructionId(Long constructionId);
 }

src/main/java/com/izouma/zhumj/service/ConstructionProcessLogService.java

@@ -1,14 +1,33 @@
 package com.izouma.zhumj.service;
 
+import com.izouma.zhumj.domain.ConstructionProcess;
 import com.izouma.zhumj.domain.ConstructionProcessLog;
+import com.izouma.zhumj.exception.BusinessException;
 import com.izouma.zhumj.repo.ConstructionProcessLogRepo;
+import com.izouma.zhumj.repo.ConstructionProcessRepo;
+import com.izouma.zhumj.utils.SecurityUtils;
 import lombok.AllArgsConstructor;
 import org.springframework.stereotype.Service;
 
+import java.time.LocalDateTime;
+
 @Service
 @AllArgsConstructor
 public class ConstructionProcessLogService {
 
     private ConstructionProcessLogRepo constructionProcessLogRepo;
+    private ConstructionProcessRepo    constructionProcessRepo;
+
+    public ConstructionProcessLog saveLog(Long processId, String remark) {
+        ConstructionProcess process = constructionProcessRepo.findById(processId)
+                .orElseThrow(new BusinessException("无记录"));
+        return constructionProcessLogRepo.save(ConstructionProcessLog.builder()
+                .constructionProcessId(processId)
+                .constructionId(process.getConstructionId())
+                .remark(remark)
+                .time(LocalDateTime.now())
+                .operator(SecurityUtils.getAuthenticatedUser().getNickname())
+                .build());
+    }
 
 }

src/main/java/com/izouma/zhumj/service/ConstructionProcessService.java

@@ -1,11 +1,13 @@
 package com.izouma.zhumj.service;
 
+import com.izouma.zhumj.domain.Construction;
 import com.izouma.zhumj.domain.ConstructionProcess;
 import com.izouma.zhumj.domain.ConstructionProcessLog;
 import com.izouma.zhumj.enums.ProcessStatus;
 import com.izouma.zhumj.exception.BusinessException;
 import com.izouma.zhumj.repo.ConstructionProcessLogRepo;
 import com.izouma.zhumj.repo.ConstructionProcessRepo;
+import com.izouma.zhumj.repo.ConstructionRepo;
 import com.izouma.zhumj.utils.DateTimeUtils;
 import com.izouma.zhumj.utils.ObjUtils;
 import com.izouma.zhumj.utils.SecurityUtils;
@@ -14,23 +16,40 @@ import org.springframework.stereotype.Service;
 
 import java.text.DateFormat;
 import java.text.MessageFormat;
+import java.time.LocalDate;
 import java.time.LocalDateTime;
+import java.time.temporal.ChronoUnit;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
 
 @Service
 @AllArgsConstructor
 public class ConstructionProcessService {
+    private ConstructionRepo           constructionRepo;
     private ConstructionProcessRepo    constructionProcessRepo;
     private ConstructionProcessLogRepo constructionProcessLogRepo;
 
     public ConstructionProcess create(ConstructionProcess record) {
-        return constructionProcessRepo.save(record);
+        record = constructionProcessRepo.save(record);
+        updateConstruction(record.getConstructionId());
+        return record;
     }
 
     public ConstructionProcess update(ConstructionProcess record) {
         ConstructionProcess orig = constructionProcessRepo.findById(record.getId())
                 .orElseThrow(new BusinessException("无记录"));
         ObjUtils.merge(orig, record);
-        return constructionProcessRepo.save(orig);
+        record = constructionProcessRepo.save(orig);
+        updateConstruction(record.getConstructionId());
+        return record;
+    }
+
+    public void del(Long id) {
+        constructionProcessRepo.findById(id).ifPresent(constructionProcess -> {
+            constructionProcessRepo.delete(constructionProcess);
+            updateConstruction(constructionProcess.getConstructionId());
+        });
     }
 
     public ConstructionProcess updateStatus(Long id, ProcessStatus status) {
@@ -57,8 +76,59 @@ public class ConstructionProcessService {
                         .format("{0}将工序【{1}】标记为{2}，时间为{3}", operator, process.getName(), status
                                 .getDescription(), DateTimeUtils.format(time, DateTimeUtils.DATE_TIME_FORMAT)))
                 .build());
-
+        updateConstruction(process.getConstructionId());
         return process;
     }
 
+    private void updateConstruction(Long id) {
+        Construction construction = constructionRepo.findById(id).orElseThrow(new BusinessException("无记录"));
+        List<ConstructionProcess> processes = constructionProcessRepo.findByConstructionId(id);
+        LocalDate planStart = null;
+        LocalDate planEnd = null;
+        LocalDate start = null;
+        LocalDate end = null;
+        Map<ProcessStatus, Integer> map = new HashMap<>();
+        for (ProcessStatus value : ProcessStatus.values()) {
+            map.put(value, 0);
+        }
+        for (ConstructionProcess process : processes) {
+            if (planStart == null || (process.getPlanStart() != null && process.getPlanStart().isBefore(planStart))) {
+                planStart = process.getPlanStart();
+            }
+            if (planEnd == null || (process.getPlanEnd() != null && process.getPlanEnd().isAfter(planStart))) {
+                planEnd = process.getPlanEnd();
+            }
+            if (start == null || (process.getStart() != null && process.getStart().isBefore(start))) {
+                start = process.getStart();
+            }
+            if (end == null || (process.getEnd() != null && process.getEnd().isAfter(end))) {
+                end = process.getEnd();
+            }
+            map.put(process.getStatus(), map.get(process.getStatus()) + 1);
+        }
+        construction.setPlanStart(planStart);
+        construction.setPlanEnd(planEnd);
+        construction.setStart(start);
+        construction.setEnd(end);
+        if (planStart != null && planEnd != null) {
+            construction.setDays((int) (ChronoUnit.DAYS.between(planStart, planEnd) + 1));
+        }
+        if (map.get(ProcessStatus.IN_PROGRESS) + map.get(ProcessStatus.PAUSE) + map.get(ProcessStatus.FINISH) == 0) {
+            construction.setStatus(ProcessStatus.PENDING);
+        } else if (map.get(ProcessStatus.PENDING) + map.get(ProcessStatus.IN_PROGRESS)
+                + map.get(ProcessStatus.PAUSE) == 0) {
+            construction.setStatus(ProcessStatus.FINISH);
+        } else {
+            construction.setStatus(ProcessStatus.IN_PROGRESS);
+        }
+        if (processes.isEmpty()) {
+            construction.setProgress(0);
+        } else {
+            construction.setProgress(map.get(ProcessStatus.FINISH) * 100 / processes.size());
+        }
+        if (construction.getStatus() != ProcessStatus.FINISH) {
+            construction.setEnd(null);
+        }
+        constructionRepo.save(construction);
+    }
 }

src/main/java/com/izouma/zhumj/web/ConstructionProcessController.java

@@ -44,7 +44,7 @@ public class ConstructionProcessController extends BaseController {
 
     @PostMapping("/del/{id}")
     public void del(@PathVariable Long id) {
-        constructionProcessRepo.deleteById(id);
+        constructionProcessService.del(id);
     }
 
     @GetMapping("/excel")

src/main/java/com/izouma/zhumj/web/ConstructionProcessLogController.java

@@ -1,4 +1,5 @@
 package com.izouma.zhumj.web;
+
 import com.izouma.zhumj.domain.ConstructionProcessLog;
 import com.izouma.zhumj.service.ConstructionProcessLogService;
 import com.izouma.zhumj.dto.PageQuery;
@@ -20,13 +21,14 @@ import java.util.List;
 @AllArgsConstructor
 public class ConstructionProcessLogController extends BaseController {
     private ConstructionProcessLogService constructionProcessLogService;
-    private ConstructionProcessLogRepo constructionProcessLogRepo;
+    private ConstructionProcessLogRepo    constructionProcessLogRepo;
 
     //@PreAuthorize("hasRole('ADMIN')")
     @PostMapping("/save")
     public ConstructionProcessLog save(@RequestBody ConstructionProcessLog record) {
         if (record.getId() != null) {
-            ConstructionProcessLog orig = constructionProcessLogRepo.findById(record.getId()).orElseThrow(new BusinessException("无记录"));
+            ConstructionProcessLog orig = constructionProcessLogRepo.findById(record.getId())
+                    .orElseThrow(new BusinessException("无记录"));
             ObjUtils.merge(orig, record);
             return constructionProcessLogRepo.save(orig);
         }
@@ -35,7 +37,8 @@ public class ConstructionProcessLogController extends BaseController {
 
     @GetMapping("/all")
     public Page<ConstructionProcessLog> all(PageQuery pageQuery) {
-        return constructionProcessLogRepo.findAll(toSpecification(pageQuery,ConstructionProcessLog.class), toPageRequest(pageQuery));
+        return constructionProcessLogRepo
+                .findAll(toSpecification(pageQuery, ConstructionProcessLog.class), toPageRequest(pageQuery));
     }
 
     @GetMapping("/get/{id}")
@@ -54,5 +57,10 @@ public class ConstructionProcessLogController extends BaseController {
         List<ConstructionProcessLog> data = all(pageQuery).getContent();
         ExcelUtils.export(response, data);
     }
+
+    @PostMapping("/saveLog")
+    public ConstructionProcessLog saveLog(@RequestParam Long processId, @RequestParam String remark) {
+        return constructionProcessLogService.saveLog(processId, remark);
+    }
 }
 

src/main/vue/src/views/ConstructionGantt.vue

@@ -38,7 +38,7 @@
                             <el-dropdown-item :command="{ action: 'edit', data: row }">编辑任务</el-dropdown-item>
                             <el-dropdown-item
                                 :command="{ action: 'updateStatus', data: row, status: 'IN_PROGRESS' }"
-                                v-if="row.status === 'PENDING'"
+                                v-if="row.status === 'PENDING' || row.status === 'FINISH'"
                             >
                                 标记开工
                             </el-dropdown-item>
@@ -71,7 +71,7 @@
                     <el-date-picker
                         v-model="formData.planStart"
                         type="date"
-                        value-format="YYYY-MM-DD"
+                        value-format="yyyy-MM-dd"
                         placeholder="选择日期"
                     >
                     </el-date-picker>
@@ -80,7 +80,7 @@
                     <el-date-picker
                         v-model="formData.planEnd"
                         type="date"
-                        value-format="YYYY-MM-DD"
+                        value-format="yyyy-MM-dd"
                         placeholder="选择日期"
                     >
                     </el-date-picker>
@@ -144,16 +144,33 @@
                     </div>
                 </el-tab-pane>
                 <el-tab-pane label="施工纪录" name="2" class="detail-tab">
-                    <div class="log-item" v-for="item in logs" :key="item.id">
-                        <div class="remark">{{ item.remark }}</div>
-                        <div class="info">
-                            <div class="name">{{ item.operator }}</div>
-                            <div class="time">{{ item.time }}</div>
+                    <div class="btn-add">
+                        <el-button icon="el-icon-plus" @click="onAddLog">添加施工纪录</el-button>
+                    </div>
+                    <div class="log-list">
+                        <div class="log-item" v-for="item in logs" :key="item.id">
+                            <div class="remark">{{ item.remark }}</div>
+                            <div class="info">
+                                <div class="name">{{ item.operator }}</div>
+                                <div class="time">{{ item.time }}</div>
+                            </div>
                         </div>
                     </div>
                 </el-tab-pane>
             </el-tabs>
         </el-dialog>
+
+        <el-dialog width="600px" title="添加施工纪录" :visible.sync="showAddLogDialog">
+            <el-form :model="addLogForm" ref="addLogForm" :rules="addLogRules">
+                <el-form-item prop="remark">
+                    <el-input type="textarea" v-model="addLogForm.remark" placeholder="请输入施工纪录"></el-input>
+                </el-form-item>
+            </el-form>
+            <div slot="footer">
+                <el-button :disabled="savingLog" @click="showAddLogDialog = false">取消</el-button>
+                <el-button type="primary" :loading="savingLog" @click="onSaveLog"> 保存</el-button>
+            </div>
+        </el-dialog>
     </div>
 </template>
 <script>
@@ -251,7 +268,11 @@ export default {
             currentRow: {},
             showDetailDialog: false,
             tab: '1',
-            logs: []
+            logs: [],
+            showAddLogDialog: false,
+            addLogForm: {},
+            addLogRules: { remark: [{ required: true, message: '请输入内容' }] },
+            savingLog: false
         };
     },
     methods: {
@@ -385,20 +406,48 @@ export default {
             this.currentRow = row;
             this.showDetailDialog = true;
             this.logs = [];
+            this.getLogs();
+        },
+        getLogs() {
             this.$http
-                .get('/constructionProcessLog/all', { size: 1000, query: { constructionProcessId: row.id } })
+                .get('/constructionProcessLog/all', {
+                    size: 1000,
+                    sort: 'createdAt,desc',
+                    query: { constructionProcessId: this.currentRow.id }
+                })
                 .then(res => {
                     this.logs = res.content;
-                    this.logs = this.logs.concat(res.content);
-                    this.logs = this.logs.concat(res.content);
-                    this.logs = this.logs.concat(res.content);
-                    this.logs = this.logs.concat(res.content);
-                    this.logs = this.logs.concat(res.content);
-                    this.logs = this.logs.concat(res.content);
-                    this.logs = this.logs.concat(res.content);
-                    this.logs = this.logs.concat(res.content);
-                    this.logs = this.logs.concat(res.content);
-                    this.logs = this.logs.concat(res.content);
+                });
+        },
+        onAddLog() {
+            this.addLogForm = {};
+            if (this.$refs.addLogForm) {
+                this.$refs.addLogForm.clearValidate();
+            }
+            this.showAddLogDialog = true;
+        },
+        onSaveLog() {
+            this.$refs.addLogForm
+                .validate()
+                .then(() => {
+                    this.savingLog = true;
+                    return this.$http.post('/constructionProcessLog/saveLog', {
+                        processId: this.currentRow.id,
+                        remark: this.addLogForm.remark
+                    });
+                })
+                .then(res => {
+                    this.savingLog = false;
+                    this.showAddLogDialog = false;
+                    this.$message.success('保存成功');
+                    this.getLogs();
+                })
+                .catch(e => {
+                    console.log(e);
+                    this.savingLog = false;
+                    if (e !== false) {
+                        this.$message.error(e.error || '保存失败');
+                    }
                 });
         }
     }
@@ -432,24 +481,35 @@ export default {
         }
     }
 }
-.log-item {
-    padding: 20px 0;
-    border-bottom: 1px solid #f2f4f5;
-    .remark {
-        color: #333;
-        font-size: 14px;
+.btn-add {
+    margin: 10px 15px 0 15px;
+    .el-button {
+        width: 100%;
     }
-    .info {
-        margin-top: 10px;
-        display: flex;
-        align-items: center;
-        font-size: 12px;
-        color: #999999;
-        .name {
+}
+.log-list {
+    max-height: 50vh;
+    overflow: auto;
+    padding: 0 15px;
+    .log-item {
+        padding: 20px 0;
+        border-bottom: 1px solid #f2f4f5;
+        .remark {
+            color: #333;
+            font-size: 14px;
         }
-        .time {
-            flex-grow: 1;
-            text-align: right;
+        .info {
+            margin-top: 10px;
+            display: flex;
+            align-items: center;
+            font-size: 12px;
+            color: #999999;
+            .name {
+            }
+            .time {
+                flex-grow: 1;
+                text-align: right;
+            }
         }
     }
 }
@@ -472,10 +532,5 @@ export default {
             color: @success;
         }
     }
-    .detail-tab {
-        max-height: 50vh;
-        overflow: auto;
-        padding: 0 15px;
-    }
 }
 </style>

src/main/vue/src/views/ConstructionList.vue

@@ -25,14 +25,44 @@
         >
             <el-table-column v-if="multipleMode" align="center" type="selection" width="50"> </el-table-column>
             <el-table-column prop="id" label="ID" width="100"> </el-table-column>
-            <el-table-column prop="storeId" label="门店"> </el-table-column>
-            <el-table-column prop="name" label="项目名称"> </el-table-column>
-            <el-table-column prop="manager" label="店长"> </el-table-column>
-            <el-table-column prop="supervisor" label="工程监理"> </el-table-column>
-            <el-table-column prop="start" label="开工日期"> </el-table-column>
-            <el-table-column prop="end" label="竣工日期"> </el-table-column>
-            <el-table-column prop="progress" label="进度"> </el-table-column>
-            <el-table-column label="操作" align="center" fixed="right" min-width="150">
+            <el-table-column
+                prop="storeId"
+                label="门店"
+                :formatter="storeFormatter"
+                min-width="100"
+                show-overflow-tooltip
+            >
+            </el-table-column>
+            <el-table-column prop="name" label="项目名称" min-width="150" show-overflow-tooltip> </el-table-column>
+            <el-table-column prop="manager" label="店长" min-width="80"> </el-table-column>
+            <el-table-column prop="supervisor" label="工程监理" min-width="80"> </el-table-column>
+            <el-table-column prop="planStart" label="计划开工日期" min-width="100" align="center"> </el-table-column>
+            <el-table-column prop="planEnd" label="计划竣工日期" min-width="100" align="center"> </el-table-column>
+            <el-table-column prop="start" label="实际开工日期" min-width="100" align="center"> </el-table-column>
+            <el-table-column prop="end" label="实际竣工日期" min-width="100" align="center"> </el-table-column>
+            <el-table-column width="80" label="状态" prop="status" align="center" :formatter="statusFormatter">
+                <template v-slot="{ row }">
+                    <div class="gantt-status-tag" :class="row.status">
+                        {{ statusFormatter(null, null, row.status) }}
+                    </div>
+                </template>
+            </el-table-column>
+            <el-table-column prop="progress" label="进度" width="150">
+                <template v-slot="{ row }">
+                    <el-progress
+                        :percentage="row.progress"
+                        :status="row.progress === 100 ? 'success' : null"
+                    ></el-progress>
+                </template>
+            </el-table-column>
+            <el-table-column prop="days" label="总工期" min-width="80"> </el-table-column>
+            <el-table-column
+                prop="delayDays"
+                label="超期天数"
+                min-width="80"
+                :formatter="delayDaysFormatter"
+            ></el-table-column>
+            <el-table-column label="操作" align="center" fixed="right" min-width="250">
                 <template slot-scope="{ row }">
                     <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
                     <el-button @click="detail(row)" type="primary" size="mini" plain>施工详情</el-button>
@@ -98,7 +128,7 @@
                 <el-form-item prop="supervisor" label="工程监理">
                     <el-input v-model="formData.supervisor"></el-input>
                 </el-form-item>
-                <el-form-item prop="start" label="开工日期">
+                <!-- <el-form-item prop="start" label="开工日期">
                     <el-date-picker
                         v-model="formData.start"
                         type="date"
@@ -113,7 +143,7 @@
                 </el-form-item>
                 <el-form-item prop="progress" label="进度">
                     <el-input-number type="number" v-model="formData.progress"></el-input-number>
-                </el-form-item>
+                </el-form-item> -->
             </el-form>
             <div slot="footer">
                 <el-button @click="showEditDialog = false" :disabled="saving">取消</el-button>
@@ -125,6 +155,7 @@
 <script>
 import { mapState } from 'vuex';
 import pageableTable from '@/mixins/pageableTable';
+import { format, parse, isAfter, isBefore, differenceInDays } from 'date-fns';
 
 export default {
     name: 'ConstructionList',
@@ -202,7 +233,13 @@ export default {
                 ]
             },
             storeIdOptions: [],
-            showEditDialog: false
+            showEditDialog: false,
+            statusOptions: [
+                { label: '未开工', value: 'PENDING' },
+                { label: '已开工', value: 'IN_PROGRESS' },
+                { label: '已暂停', value: 'PAUSE' },
+                { label: '已完工', value: 'FINISH' }
+            ]
         };
     },
     computed: {
@@ -308,8 +345,37 @@ export default {
                     this.$message.error(e.error);
                     this.saving = false;
                 });
+        },
+        storeFormatter(row, column, value, index) {
+            return (this.storeIdOptions.find(i => i.value === value) || {}).label;
+        },
+        statusFormatter(row, column, value, index) {
+            return (this.statusOptions.find(i => i.value === value) || {}).label || '';
+        },
+        delayDaysFormatter(row, column, value, index) {
+            if (row.planEnd && row.end) {
+                let planEnd = parse(row.planEnd, 'yyyy-MM-dd', new Date());
+                let end = parse(row.end, 'yyyy-MM-dd', new Date());
+                if (isAfter(end, planEnd)) {
+                    return differenceInDays(end, planEnd);
+                }
+            }
+            return '';
         }
     }
 };
 </script>
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.gantt-status-tag {
+    font-weight: bold;
+    &.IN_PROGRESS {
+        color: @primary;
+    }
+    &.FINISH {
+        color: @success;
+    }
+    &.error {
+        color: #f56c6c;
+    }
+}
+</style>

src/main/vue/src/views/ConstructionProcessList.vue

@@ -1,19 +1,47 @@
 <template>
-    <div class="list-view">
+    <div class="list-view" v-loading="tableLoading">
         <div class="filters-container">
-            <el-input placeholder="输入关键字" v-model="search" clearable class="filter-item"></el-input>
-            <el-button @click="getData" type="primary" icon="el-icon-search" class="filter-item">搜索 </el-button>
-            <el-button @click="addRow" v-if="canEdit" type="primary" icon="el-icon-plus" class="filter-item"
-                >添加
-            </el-button>
-            <el-button
-                @click="download"
-                type="primary"
-                icon="el-icon-download"
-                :loading="downloading"
-                class="filter-item"
-                >导出EXCEL
-            </el-button>
+            <div class="filter-item">
+                <span class="radio-label">计划开工时间：</span>
+                <el-radio-group v-model="planStartRadio" size="small">
+                    <el-radio label="1" border>全部</el-radio>
+                    <el-radio label="2" border>今天</el-radio>
+                    <el-radio label="3" border>昨天</el-radio>
+                    <el-radio label="4" border>本周</el-radio>
+                    <el-radio label="5" border>本月</el-radio>
+                    <el-radio label="6" border>自定义时间</el-radio>
+                </el-radio-group>
+                <el-date-picker
+                    value-format="yyyy-MM-dd"
+                    type="daterange"
+                    v-model="planStart"
+                    style="margin-left:10px;position:relative;top:1px;"
+                    :disabled="planStartRadio !== '6'"
+                    start-placeholder="请选择"
+                    end-placeholder="请选择"
+                ></el-date-picker>
+            </div>
+            <div class="filter-item">
+                <span class="radio-label">计划完工时间：</span>
+                <el-radio-group v-model="planEndRadio" size="small">
+                    <el-radio label="1" border>全部</el-radio>
+                    <el-radio label="2" border>今天</el-radio>
+                    <el-radio label="3" border>昨天</el-radio>
+                    <el-radio label="4" border>本周</el-radio>
+                    <el-radio label="5" border>本月</el-radio>
+                    <el-radio label="6" border>自定义时间</el-radio>
+                </el-radio-group>
+                <el-date-picker
+                    value-format="yyyy-MM-dd"
+                    type="daterange"
+                    v-model="planEnd"
+                    d
+                    style="margin-left:10px;position:relative;top:1px;"
+                    :disabled="planEndRadio !== '6'"
+                    start-placeholder="请选择"
+                    end-placeholder="请选择"
+                ></el-date-picker>
+            </div>
         </div>
         <el-table
             :data="tableData"
@@ -27,7 +55,7 @@
         >
             <el-table-column v-if="multipleMode" align="center" type="selection" width="50"> </el-table-column>
             <el-table-column prop="id" label="ID" width="100"> </el-table-column>
-            <el-table-column prop="constructionId" label="项目"> </el-table-column>
+            <el-table-column prop="constructionId" label="项目" :formatter="constructionFormatter"> </el-table-column>
             <el-table-column prop="name" label="工序名称"> </el-table-column>
             <el-table-column prop="planStart" label="计划开工"> </el-table-column>
             <el-table-column prop="planEnd" label="计划结束"> </el-table-column>
@@ -35,12 +63,11 @@
             <el-table-column prop="principal" label="负责人"> </el-table-column>
             <el-table-column prop="start" label="开工时间"> </el-table-column>
             <el-table-column prop="end" label="结束时间"> </el-table-column>
-            <el-table-column prop="remark" label="模版"> </el-table-column>
+            <el-table-column prop="remark" label="备注"> </el-table-column>
             <el-table-column prop="status" label="状态" :formatter="statusFormatter"> </el-table-column>
-            <el-table-column label="操作" v-if="canEdit" align="center" fixed="right" min-width="150">
+            <el-table-column label="操作" align="center" fixed="right" width="150">
                 <template slot-scope="{ row }">
-                    <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
-                    <el-button @click="deleteRow(row)" type="danger" size="mini" plain>删除</el-button>
+                    <el-button @click="editRow(row)" type="primary" size="mini" plain>查看</el-button>
                 </template>
             </el-table-column>
         </el-table>
@@ -70,17 +97,28 @@
 <script>
 import { mapState } from 'vuex';
 import pageableTable from '@/mixins/pageableTable';
-
+import { format, parse, startOfWeek, endOfWeek, startOfMonth, endOfMonth, addDays } from 'date-fns';
+import { ca } from 'date-fns/locale';
+const f = (d, fmt) => {
+    return format(d, fmt || 'yyyy-MM-dd');
+};
+const p = (s, fmt) => {
+    return parse(s, fmt || 'yyyy-MM-dd', new Date());
+};
 export default {
     name: 'ConstructionProcessList',
     mixins: [pageableTable],
     created() {
         this.getData();
+        this.$http.get('/construction/all', { size: 10000 }).then(res => {
+            this.constructions = res.content;
+        });
     },
     data() {
         return {
             multipleMode: false,
             search: '',
+            sortStr: 'createdAt,desc',
             url: '/constructionProcess/all',
             downloading: false,
             statusOptions: [
@@ -88,7 +126,12 @@ export default {
                 { label: '已开工', value: 'IN_PROGRESS' },
                 { label: '已暂停', value: 'PAUSE' },
                 { label: '已完工', value: 'FINISH' }
-            ]
+            ],
+            constructions: [],
+            planStartRadio: '1',
+            planEndRadio: '1',
+            planStart: [],
+            planEnd: []
         };
     },
     computed: {
@@ -105,9 +148,14 @@ export default {
             return '';
         },
         beforeGetData() {
-            if (this.search) {
-                return { search: this.search };
+            let data = { search: this.search, query: {} };
+            if (this.planStartRadio !== '1') {
+                data.query.planStart = this.planStart.join();
             }
+            if (this.planEndRadio !== '1') {
+                data.query.planEnd = this.planEnd.join();
+            }
+            return data;
         },
         toggleMultipleMode(multipleMode) {
             this.multipleMode = multipleMode;
@@ -125,9 +173,9 @@ export default {
         },
         editRow(row) {
             this.$router.push({
-                path: '/constructionProcessEdit',
+                path: '/constructionGantt',
                 query: {
-                    id: row.id
+                    id: row.constructionId
                 }
             });
         },
@@ -180,8 +228,58 @@ export default {
                         this.$message.error('删除失败');
                     }
                 });
+        },
+        constructionFormatter(row, column, value, index) {
+            return (this.constructions.find(i => i.id === value) || {}).name;
+        },
+        getRange(type) {
+            let d = new Date();
+            switch (type) {
+                case '1':
+                    return [];
+                case '2':
+                    return [f(d), f(d)];
+                case '3':
+                    d = addDays(d, -1);
+                    return [f(d), f(d)];
+                case '4':
+                    return [f(startOfWeek(d)), f(endOfWeek(d))];
+                case '5':
+                    return [f(startOfMonth(d)), f(endOfMonth(d))];
+            }
+        }
+    },
+    watch: {
+        planStartRadio(val) {
+            if (val !== '6') {
+                this.planStart = this.getRange(val);
+            }
+        },
+        planEndRadio(val) {
+            if (val !== '6') {
+                this.planEnd = this.getRange(val);
+            }
+        },
+        planStart(val) {
+            if ((val && val.length === 2) || this.planStartRadio === '1') {
+                this.getData();
+            }
+        },
+        planEnd(val) {
+            if ((val && val.length === 2) || this.planEndRadio === '1') {
+                this.getData();
+            }
         }
     }
 };
 </script>
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.radio-label {
+    color: #666;
+    font-weight: bold;
+    font-size: 13px;
+}
+.el-radio.is-bordered {
+    margin-right: 0;
+}
+</style>