单位工程管理字段修改

叶松

2023-11-30 d814b3c278a2a9c455aa92a49aa6a89bf85d45ec

 web/src/views/ProjectManage/SectionManage.vue

@@ -1,584 +1,636 @@
<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-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">
      <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'
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',
          }
        ]
      }
    }
  },
  components: {
    cpnTable
  },
  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;
    }
  }
}
<template>

  <!-- 工程项目管理 ==> 单位工程管理-->

  <div class="main">

    <div class="main_header">

      <div class="header_item">

        <span class="header_label">单位工程名称：</span>

        <el-input v-model="queryInfo.unitProjectName" 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,

        unitProjectName: '',

        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>