~zhangleilei/supipe.git

<template> 
  <!-- 工程项目管理 ==> 单位工程管理--> 
  <div class="main"> 
    <div class="main_header"> 
      <div class="header_item"> 
        <span class="header_label">标段名称：</span> 
        <el-input v-model="queryInfo.segmentName" clearable placeholder="请输入标段名称"></el-input> 
      </div> 
      <div class="header_item"> 
        <span class="header_label">项目名称：</span> 
        <el-select v-model="queryInfo.proId" placeholder="请选择项目名称" clearable> 
          <el-option v-for="item in optionsProject" :key="item.proId" :label="item.proName" :value="item.proId"> 
          </el-option> 
        </el-select> 
      </div> 
      <div class="header_item"> 
        <el-button icon="el-icon-search" v-permission="'search'" @click="queryReset">查询</el-button> 
        <el-button class="search_btn" icon="el-icon-plus" v-permission="'insert'" @click="addRow">新增</el-button> 
      </div> 
    </div> 
    <div class="main_content"> 
      <cpnTable :table-index="true" :table-loading="loading" :table-data="dataList" :table-columns="tableColumns" 
        :page-total="total" :page-num.sync="queryInfo.pageNum" :page-size.sync="queryInfo.pageSize" 
        :page-change="pageChange"> 
 
        <template #finished="{ row }"> 
          <div style="cursor: pointer;" @click="showDetail(row)">{{ row.completedQuantity }}</div> 
        </template> 
      </cpnTable> 
    </div> 
    <!-- dialog --> 
    <el-dialog class="prop_dialog" v-if="isRender" :title="dialogTitle" :visible.sync="asyncVisible" width="660px" 
      @close="closeForm"> 
      <!-- form组件未开发完 --> 
      <!-- <cpnForm :form-config="formConfig"></cpnForm> --> 
 
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="auto" class="rule_form"> 
        <el-form-item label="项目名称:" prop="proId"> 
          <el-select v-model="ruleForm.proId" placeholder="请选择" @change="changeNeed"> 
            <el-option v-for="item in optionsProject" :key="item.proId" :label="item.proName" :value="item.proId"> 
            </el-option> 
          </el-select> 
        </el-form-item> 
        <el-form-item label="起讫里程:" prop="mileage"> 
          <el-input v-model="ruleForm.mileage" clearable placeholder="请输入起讫里程"></el-input> 
        </el-form-item> 
        <el-form-item label="单位工程名称:" prop="unitProjectName"> 
          <el-input v-model="ruleForm.unitProjectName" clearable placeholder="请输入单位工程名称"></el-input> 
        </el-form-item> 
        <el-form-item label="需求负责人:" prop="segmentAdmin"> 
          <el-select v-model="ruleForm.segmentAdmin" placeholder="请选择求负责人"> 
            <el-option v-for="item in optionsUser" :key="item.userId" :label="item.realName" :value="item.userId"> 
            </el-option> 
          </el-select> 
        </el-form-item> 
        <el-form-item label="盾构单位:" prop="shieldEnp"> 
          <el-input v-model="ruleForm.shieldEnp" clearable placeholder="请输入盾构单位"></el-input> 
        </el-form-item> 
        <el-form-item label="开始时间:" prop="startTime"> 
          <el-date-picker v-model="ruleForm.startTime" value-format="yyyy-MM-dd" placeholder="请选择开始日期"></el-date-picker> 
        </el-form-item> 
        <el-form-item label="结束时间:" prop="endTime"> 
          <el-date-picker v-model="ruleForm.endTime" value-format="yyyy-MM-dd" placeholder="请选择结束日期"></el-date-picker> 
        </el-form-item> 
        <el-form-item label="工期:" prop="duration"> 
          <el-input v-model="ruleForm.duration" clearable placeholder="请输入工期"></el-input> 
        </el-form-item> 
        <el-form-item label="站点:" prop="station"> 
          <el-input v-model="ruleForm.station" clearable placeholder="请输入站点"></el-input> 
        </el-form-item> 
        <div class="section_needs">标段需求</div> 
        <div class="section_needs_content"> 
          <div v-for="item in ruleForm.segmentList" :key="item.dictId" class="needs_items"> 
            <div class="needs_text">{{ item.dictName }}</div> 
            <el-input placeholder="请输入数量" type="number" v-model="item.needNum" class="needs_num"> 
              <template slot="append">块</template> 
            </el-input> 
          </div> 
        </div> 
      </el-form> 
      <div slot="footer"> 
        <el-button @click="asyncVisible = false">取 消</el-button> 
        <el-button class="submit_btn" @click="onSubmit('ruleForm')">提 交</el-button> 
      </div> 
    </el-dialog> 
    <!-- detail dialog --> 
    <el-dialog class="prop_dialog" v-if="detail.isRenderDetail" title="管片数量" :visible.sync="detail.asyncVisible" 
      width="1000px"> 
      <el-card> 
        <div class="titles" v-for="item in detail.infoMap" :key="item.key"> 
          {{ item.name }}&nbsp;: 
          <template v-if="item.key === 'waterproofType'"> 
            <span>{{ detail.infos[item.key] === 0 ? '有' : '无' }} </span> 
          </template> 
          <template v-else-if="item.key === 'proHas'"> 
            <span v-for="val in detail.infos[item.key]" :key="val.hasSteel"> 
              {{ val.dictName }} 
            </span> 
          </template> 
          <template v-else> 
            <span>{{ detail.infos[item.key] }}</span> 
          </template> 
        </div> 
      </el-card> 
      <cpnTable :table-index="true" :table-data="detail.tableData" :table-columns="detail.tableColumns" 
        :page-total="detail.total" :page-num.sync="detail.pageNum" :page-size.sync="detail.pageSize" 
        :page-change="detailPageChange"> 
      </cpnTable> 
    </el-dialog> 
  </div> 
</template> 
 
<script> 
import {throttle} from '../../plugins/public'; // 导入节流、动态切换组件尺寸方法 
import cpnTable from '@/components/element/Table' 
// import cpnForm from '@/components/element/Form' 
export default { 
  data() { 
    return { 
      isRender: false, 
      loading: false, 
      asyncVisible: false, 
      submitMode: '', // add update 
      total: 0, 
      queryInfo: { 
        pageNum: 1, 
        pageSize: 10, 
        segmentName: '', 
        proId: '', 
      }, 
      dataList: [], 
      tableColumns: [], 
      optionsUser: [], //需求负责人 
      optionsProject: [], // 项目名称 
      ruleForm: {}, // 按钮表单 
      rules: { 
        proId: [{required: true, message: '请选择', trigger: 'change'}], 
        mileage: [{required: true, message: '请输入', trigger: 'blur'}], 
        unitProjectName: [{required: true, message: '请输入', trigger: 'blur'}], 
        segmentAdmin: [{required: true, message: '请选择', trigger: 'change'}], 
        shieldEnp: [{required: true, message: '请输入', trigger: 'blur'}], 
        startTime: [{required: true, message: '请选择', trigger: 'change'}], 
        endTime: [{required: true, message: '请选择', trigger: 'change'}], 
        duration: [{required: true, message: '请输入', trigger: 'blur'}], 
        station: [{required: true, message: '请输入', trigger: 'blur'}], 
      }, 
      detail: { 
        rowId: '', 
        isRenderDetail: false, 
        asyncVisible: false, 
        pageNum: 1, 
        pageSize: 10, 
        total: 0, 
        tableData: [], 
        tableColumns: [], 
        infos: [], 
        infoMap: [ 
          { 
            name: '项目名称', 
            key: 'proName', 
          }, 
          { 
            name: '单位工程名称', 
            key: 'createUnit', 
          }, 
          { 
            name: '外径', 
            key: 'outsideDiameter', 
          }, 
          { 
            name: '內径', 
            key: 'innerDiameter', 
          }, 
          { 
            name: '厚度', 
            key: 'thickness', 
          }, 
          { 
            name: '环宽', 
            key: 'ringWidth', 
          }, 
          { 
            name: '混凝土强度等级', 
            key: 'concreteStrengthGrade', 
          }, 
          { 
            name: '抗渗等级', 
            key: 'impermeabilityLevel', 
          }, 
          { 
            name: '配筋型号', 
            key: 'proHas', 
          }, 
          { 
            name: '有无外弧面防水', 
            key: 'waterproofType', 
          } 
        ] 
      }, 
      // formConfig: { 
      //   formModels: { 
      //     proId: '', // 项目名称id 
      //     mileage: '', // 起讫里程 
      //     unitProjectName: '',  // 单位工程名称 
      //     segmentAdmin: '', // 需求负责人 
      //     shieldEnp: '', // 盾构单位 
      //     startTime: null, // 开始时间 
      //     endTime: null, // 结束时间 
      //     duration: '', // 工期 
      //     station: '', // 站点 
      //     segmentList: [], // 标段需求 
      //   }, 
      //   formItems: [ 
      //     { 
      //       type: 'input', label: '用户id' 
      //     }, 
      //     { 
      //       type: 'input', label: '用户名' 
      //     }, 
 
      //     { 
      //       type: 'input', label: '真实姓名' 
      //     }, 
      //     { 
      //       type: 'input', label: '电话号码' 
      //     }, 
      //     { 
      //       type: 'select', label: '用户状态', options: [ 
      //         {label: '禁用', value: 0}, 
      //         {label: '启用', value: 1} 
      //       ] 
      //     }, 
      //     { 
      //       type: 'datepicker', label: '创建时间', otherOptions: { 
      //         startPlaceholder: '开始时间', 
      //         endPlaceholder: '结束时间', 
      //         type: 'daterange', 
      //         'unlink-panels': true 
      //       } 
      //     } 
      //   ], 
      //   itemColLayout: { 
      //     span: 8 
      //   } 
      // } 
    } 
  }, 
  components: { 
    cpnTable, 
    // cpnForm 
  }, 
  computed: { 
    isUpdate() { 
      return this.submitMode === 'update' 
    }, 
    dialogTitle() { 
      return this.isUpdate ? '修改新增单位工程' : '新增单位工程' 
    }, 
  }, 
  created() { 
    this.setFormProps() 
    this.setTableColumn() 
    this.getLists() 
    this.getAllProjects() 
    this.getAllPersons() 
    // this.getAllBlocks() // 暂时没用,先屏蔽 
  }, 
  methods: { 
    // 获取table列表数据 
    getLists() { 
      this.loading = true 
      let params = this.queryInfo 
      this.$api.Engineer.searchSegment(params).then(res => { 
        if (res.statusMsg === 'ok') { 
          this.total = res.data.total 
          this.dataList = res.data.list 
        } 
        this.loading = false 
      }) 
    }, 
    //获得所有人员 
    getAllPersons() { 
      this.$api.Engineer.getPersonsList({}).then(res => { 
        if (res.statusMsg === 'ok') { 
          this.optionsUser = res.data 
        } else { 
          this.$message.warning('人员名称获取失败') 
        } 
      }) 
    }, 
    //获得所有项目名称 
    getAllProjects() { 
      let obj = { 
        pageNum: 1, 
        pageSize: 100000000 
      } 
      this.$api.Engineer.searchProjects(obj).then(res => { 
        if (res.statusMsg === 'ok') { 
          this.optionsProject = res.data.list 
        } else { 
          this.$message.warning('项目名称获取失败') 
        } 
      }) 
    }, 
    //字典里获取所有标段块号 
    getAllBlocks() { 
      let params = { 
        pageNum: 1, 
        pageSize: 100000000 
      } 
      this.$api.Dictionary.searchDictionary(params).then(res => { 
        if (res.statusMsg === 'ok') { 
          const segmentList = [] 
          res.data.list.forEach(item => { 
            if (item.dictType === '5') { 
              segmentList.push({ 
                dictName: item.dictName, 
                needType: item.dictId, 
                needNum: 0, 
                segmentId: '' 
              }) 
            } 
          }) 
          this.ruleForm.segmentList = segmentList 
        } else { 
          this.$message.warning('标段获取失败') 
        } 
      }) 
    }, 
    // 已完成 table信息 
    getDetailLists() { 
      let detailData = this.detail 
      this.$api.DuctpiecePLM.searchDuctpiecePLMList({ 
        segmentId: detailData.rowId, 
        pageNum: detailData.pageNum, 
        pageSize: detailData.pageSize 
      }).then(res => { 
        if (res.success) { 
          detailData.total = res.data.total 
          detailData.tableData = res.data.list 
        } 
      }) 
    }, 
    // 已完成 title信息 
    getDetailInfos(id) { 
      this.$api.Engineer.detailsProjects({proId: id}).then(res => { 
        if (res.success) { 
          this.detail.infos = res.data 
        } 
      }) 
    }, 
    // 初始化 ruleform 
    setFormProps(options = {}) { 
      let _form = { 
        proId: '', // 项目名称id 
        mileage: '', // 起讫里程 
        unitProjectName: '',  // 单位工程名称 
        segmentAdmin: '', // 需求负责人 
        shieldEnp: '', // 盾构单位 
        startTime: null, // 开始时间 
        endTime: null, // 结束时间 
        duration: '', // 工期 
        station: '', // 站点 
        segmentList: [], // 标段需求 
      } 
      this.ruleForm = Object.keys(options).length ? options : _form 
    }, 
    // 初始化 table 配置 
    setTableColumn() { 
      this.tableColumns = [ 
        {index: true}, 
        {slot: "finished", name: "已完成（块）"}, 
        {name: "项目名称", key: "proName", width: 160}, 
        {name: "起讫里程", key: "mileage"}, 
        {name: "单位工程名称", key: "unitProjectName"}, 
        {name: "盾构单位", key: "shieldEnp"}, 
        {name: "开始时间", key: "startTime", width: 100}, 
        {name: "结束时间", key: "endTime", width: 100}, 
        {name: "工期", key: "duration"}, 
        {name: "站点", key: "station"}, 
        {name: "负责人", key: "realName"}, 
        { 
          operation: true, name: "操作", width: 140, value: [ 
            {name: "修改", class: "table_btn", permission: "update", handleRow: this.updateRow}, 
            {name: "删除", class: "delete_btn", permission: "delete", handleRow: this.deleteRow}, 
          ] 
        }, 
      ] 
      this.detail.tableColumns = [ 
        {index: true}, 
        {name: "环号", key: "ringNum"}, 
        {name: "管片编号", key: "pipeNum", width: 140}, 
        {name: "转向", key: "turnName", width: 106}, 
        {name: "配筋", key: "reinforcementName"}, 
        {name: "注浆孔", key: "groutingHolesName"}, 
        {name: "块号", key: "blockNumName"}, 
        {name: "模具", key: "mouldNum"}, 
        {name: "入模时间", key: "intoModTime", width: 136}, 
        {name: "浇筑时间", key: "pouringTime"}, 
        {name: "质检时间", key: "checkTime", width: 136}, 
        {name: "生产班组", key: "groupName"}, 
        {name: "项目", key: "proName", width: 240}, 
        {name: "质量标注", key: "checkResultStr"}, 
      ] 
    }, 
    // 重置表单 
    resetForm(formName) { 
      this.$refs[formName].resetFields() 
    }, 
    // 显示表单 
    showForm() { 
      !this.isRender && (this.isRender = true) 
      this.asyncVisible = true 
    }, 
    // 隐藏表单 
    closeForm() { 
      this.asyncVisible = false 
      this.resetForm('ruleForm') 
      this.setFormProps() 
    }, 
    // 查询按钮列表信息 
    queryReset() { 
      this.queryInfo.pageNum = 1 
      this.queryInfo.pageSize = 10 
      this.getLists() 
    }, 
    // 添加数据 
    addRow() { 
      this.submitMode = 'add' 
      this.showForm() 
    }, 
    // 更新数据 
    async updateRow(row) { 
      this.submitMode = 'update' 
      this.showForm() 
      const segmentList = await this.getProjectBlocks(row.segmentId) 
      Object.keys(this.ruleForm).forEach(item => { 
        if (row.hasOwnProperty.call(row, item)) { 
          this.ruleForm[item] = row[item] 
        } 
      }) 
      this.ruleForm.segmentId = row.segmentId 
      this.ruleForm.segmentList = segmentList 
    }, 
    // 删除数据 
    deleteRow(row) { 
      this.$confirm("该操作将删除该信息，是否继续删除?", "提示", { 
        confirmButtonText: "确定", 
        cancelButtonText: "取消", 
        type: "warning" 
      }).then(() => { 
        this.$api.Engineer.deleteSegment({segmentId: row.segmentId}).then(res => { 
          if (res.statusMsg === 'ok') { 
            this.queryReset(); 
            this.$message.success("删除成功！") 
          } else { 
            this.$message.warning(res.statusMsg) 
          } 
        }) 
      }).catch(() => { 
        this.$message.warning("您已取消") 
      }) 
    }, 
    //获取项目标段 
    getProjectBlocks(id) { 
      return new Promise(resolve => { 
        this.$api.Engineer.detailsSegment({segmentId: id}).then(res => { 
          let outData = [] 
          if (res.statusMsg === 'ok') { 
            outData.push(...res.data.segmentNeeds) 
          } 
          resolve(outData) 
        }) 
      }) 
    }, 
    //通过不同的项目展示不同的标段需求 
    changeNeed(val) { 
      this.$api.Reinforce.searchProjectBears({proId: val}).then(res => { 
        if (res.statusMsg === 'ok') { 
          const segmentList = [] 
          res.data.blokDtos.forEach(item => { 
            segmentList.push({ 
              dictName: item.blockName, 
              needType: item.blockNum, 
              needNum: 0, 
              segmentId: '' 
            }) 
          }) 
          this.ruleForm.segmentList = segmentList 
        } else { 
          this.$message.warning('标段获取失败') 
        } 
      }) 
    }, 
    // 提交表单 
    onSubmit: throttle(function () { 
      this.$refs.ruleForm.validate(valid => { 
        if (!valid) return 
        const params = this.ruleForm 
        if (this.isUpdate) { 
          // 更新 
          this.$api.Engineer.updateSegment(params).then((res) => { 
            if (res.statusMsg === 'ok') { 
              this.closeForm() 
              this.getLists() 
              this.$message.success('更新成功！') 
            } else { 
              this.$message.warning(res.statusMsg) 
            } 
          }) 
        } else { 
          // 添加 
          this.$api.Engineer.insertSegment(params).then((res) => { 
            if (res.statusMsg === 'ok') { 
              this.closeForm() 
              this.getLists() 
              this.$message.success('添加成功！') 
            } else { 
              this.$message.warning(res.statusMsg) 
            } 
          }) 
        } 
      }) 
    }, 1000), 
    showDetail(row) { 
      let detailData = this.detail 
      !detailData.isRenderDetail && (detailData.isRenderDetail = true) 
      detailData.asyncVisible = true 
      detailData.rowId = row.segmentId 
      detailData.total = 0 
      detailData.tableData = [] 
      detailData.infos = [] 
      this.getDetailInfos(row.proId) 
      this.getDetailLists() 
    }, 
    // 分页改变 
    pageChange() { 
      this.getLists(); 
    }, 
    // 已完成の分页改变 
    detailPageChange() { 
      this.getDetailLists(); 
    }, 
  } 
} 
</script> 
 
<style lang="scss" scoped> 
@import '../../style/layout-main.scss'; 
 
/deep/ { 
  &::-webkit-scrollbar { 
    width: 8px; 
    height: 8px; 
  } 
 
  &::-webkit-scrollbar-corner { 
    background-color: transparent; 
  } 
 
  &::-webkit-scrollbar-thumb { 
    border-radius: 10px; 
    box-shadow: inset 0 0 5px transparent; 
    background: #39B5FE; 
  } 
 
  &::-webkit-scrollbar-track { 
    box-shadow: inset 0 0 5px transparent; 
    border-radius: 10px; 
    background: rgba(76, 188, 254, .3); 
  } 
} 
 
.el-card { 
  margin-bottom: 20px; 
  border: none; 
  color: #fff; 
  background: rgba(9, 64, 101, 1); 
 
  .titles { 
    float: left; 
    width: 25%; 
    min-height: 36px; 
    padding-right: 6px; 
    margin-bottom: 6px; 
    line-height: 18px; 
    box-sizing: border-box; 
  } 
 
  span { 
    color: #39B5FE; 
  } 
} 
 
.section_needs { 
  position: relative; 
  color: #18F5F7; 
  padding: 20px 20px 10px 15px; 
  border-bottom: 1px solid #1949A3; 
 
  &::before { 
    position: absolute; 
    content: ""; 
    width: 2px; 
    height: 20px; 
    background-color: #18F5F7; 
    top: 20px; 
    left: 5px; 
  } 
} 
 
.section_needs_content { 
  display: flex; 
  flex-wrap: wrap; 
 
  .needs_items { 
    max-width: 190px; 
    min-width: 142px; 
    padding: 15px; 
    display: flex; 
 
    .needs_text { 
      // width: 50px; 
      flex: none; 
      align-self: center; 
      text-align: center; 
      padding-right: 15px; 
      color: #E1E3E9; 
    } 
 
    .needs_num { 
      align-self: center; 
    } 
  } 
} 
</style>