Merge branch 'master' of http://111.30.93.211:10101/r/supipe

叶松

2023-09-27 95caf74f05712c6556128eca180d555f427e289e

 web/src/views/ProjectManage/SectionManage.vue

@@ -1,422 +1,579 @@
<template>
  <!-- 工程项目管理 ==> 单位工程管理-->
  <div class="main">
    <div class="main_header">
      <div class="header_item">
        <span class="header_label">标段名称：</span>
        <el-input v-model="search.segmentName" :size="size" clearable placeholder="请输入标段名称"></el-input>
        <el-input v-model="queryInfo.segmentName" clearable placeholder="请输入标段名称"></el-input>
      </div>
      <div class="header_item">
        <span class="header_label">项目名称：</span>
        <el-select v-model="search.proId" placeholder="请选择项目名称" clearable>
            <el-option
            v-for="item in optionsProject"
            :key="item.proId"
            :label="item.proName"
            :value="item.proId">
            </el-option>
        <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-if="showButton('search')" @click="searchButtonInfo(true)">查询</el-button>
        <el-button class="search_btn" icon="el-icon-plus" v-if="showButton('insert')" @click="insertProp">新增</el-button>
        <el-button icon="el-icon-search" v-if="showButton('search')" @click="queryReset">查询</el-button>
        <el-button class="search_btn" icon="el-icon-plus" v-if="showButton('insert')" @click="addRow">新增</el-button>
      </div>
    </div>
    <div class="main_content">
      <el-table
        v-loading="loading"
        :data="dataList"
        height="100%">
        <el-table-column align="center" label="序号" width="60">
          <template #default="scope">
            <span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="proName" label="项目名称" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="segmentName" label="标段名称" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="shieldEnp" label="盾构单位" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="station" label="站点" align="center"></el-table-column>
        <el-table-column prop="realName" label="负责人" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
      <cpnTable :table-index="true" :table-data="dataList" :table-columns-config="tableColumns" :page-total="total"
        :page-num.sync="queryInfo.pageNum" :page-size.sync="queryInfo.pageSize" :page-change="pageChange">
        <el-table-column slot="finished" label="已完成（块）" align="center">
          <template #default="{ row }">
            <el-button class="table_btn" size="mini" v-if="showButton('update')" @click="updateProp(row)">修改</el-button>
            <el-button class="delete_btn" size="mini" v-if="showButton('delete')" @click="deleteInfo(row)">删除</el-button>
            <div style="cursor: pointer;" @click="showDetail(row)">{{ row.completedQuantity }}</div>
          </template>
        </el-table-column>
      </el-table>
        <el-table-column slot="action" label="操作" width="140" align="center">
          <template #default="{ row }">
            <el-button class="table_btn" size="mini" v-if="showButton('update')" @click="updateRow(row)">修改</el-button>
            <el-button class="delete_btn" size="mini" v-if="showButton('delete')" @click="deleteRow(row)">删除</el-button>
          </template>
        </el-table-column>
      </cpnTable>
    </div>
    <div class="main_footer">
      <el-pagination
        background
        @current-change="changePageNum"
        @size-change="changePageSize"
        :current-page="pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <el-dialog
      class="prop_dialog"
      :title="asyncTitle ? '新增标段' : '修改标段'"
      :close-on-click-modal="false"
      :visible.sync="asyncVisible"
      width="35%">
    <!-- 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 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="segmentName">
          <el-input v-model="ruleForm.segmentName" :size="size" clearable placeholder="请输入标段名称"></el-input>
        <el-form-item label="起讫里程:" prop="mileage">
          <el-input v-model="ruleForm.mileage" 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 label="单位工程名称:" prop="unitProjectName">
          <el-input v-model="ruleForm.unitProjectName" clearable placeholder="请输入单位工程名称"></el-input>
        </el-form-item>
        <el-form-item label="盾构单位：" prop="shieldEnp">
          <el-input v-model="ruleForm.shieldEnp" :size="size" clearable placeholder="请输入盾构单位"></el-input>
        <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="station">
          <el-input v-model="ruleForm.station" :size="size" clearable placeholder="请输入站点"></el-input>
        <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 needBlocks" :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 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="asyncTitle ? submitInsert() : submitUpdate()">提 交</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-config="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 { buttonPinia } from '../../pinia/index';
import { throttle, changeSize } from '../../plugins/public'; // 导入节流、动态切换组件尺寸方法
  export default {
    data() {
      return {
        size: changeSize(), // 组件尺寸
import {buttonPinia} from '../../pinia/index';
import {throttle} from '../../plugins/public'; // 导入节流、动态切换组件尺寸方法
import cpnTable from '@/components/table/Table'
export default {
  data() {
    return {
      isRender: false,
      loading: false,
      asyncVisible: false,
      submitMode: '', // add update
      total: 0,
      queryInfo: {
        pageNum: 1,
        pageSize: 10,
        search:{},//查询条件
        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,
        loading: false,
        dataList: [], //标段信息列表
        optionsUser:[],//需求负责人
        optionsProject:[],//项目名称
        asyncTitle: true, // 对话框title 新增：true  修改：false
        asyncVisible: false, // 添加 修改对话框
        ruleForm: {}, // 按钮表单
        rules: {
          segmentName: [{
            required: true,
            message: '请输入标段名称',
            trigger: 'blur'
          }],
          shieldEnp: [{
            required: true,
            message: '请输入盾构单位',
            trigger: 'blur'
          }],
          station: [{
            required: true,
            message: '请输入站点',
            trigger: 'blur'
          }],
          proId: [{
            required: true,
            message: '请选择项目名称',
            trigger: 'change'
          }],
          segmentAdmin: [{
            required: true,
            message: '请选择需求负责人',
            trigger: 'change'
          }],
        },
        needBlocks:[],//标段需求
      }
    },
    watch: {
      asyncVisible(bol) {
        if(!bol) {
          this.ruleForm = {};
          this.$refs.ruleForm.resetFields();
        }
      }
    },
    mounted() {
      const that = this;
      // 根据窗口大小动态修改组件尺寸
      window.onresize = () => {
        that.size = changeSize();
      }
      that.searchButtonInfo(true);
      that.getAllProjects()
      that.getAllPersons()
    },
    methods: {
    //通过不同的项目展示不同的标段需求
    changeNeed(val){
        let obj = {
            proId:val
        }
        this.needBlocks = []
        this.$api.Reinforce.searchProjectBears(obj).then(res=>{
            if(res.statusMsg ==='ok'){
              if(this.ruleForm.proId ===''){
                this.needBlocks = []
              }else{
                res.data.blokDtos.forEach(item=>{
                    this.needBlocks.push({
                        dictName:item.blockName,
                        needType:item.blockNum,
                        needNum:0,
                        segmentId:''
                    })
                })
              }
            }else{
                this.$message.warning(res.statusMsg)
            }
        })
    },
     //获得所有人员
     getAllPersons(){
        this.$api.Engineer.getPersonsList({}).then(res=>{
            if(res.statusMsg === 'ok'){
                this.optionsUser = res.data
            }else{
                this.$message.warning(res.statusMsg)
            }
        })
     },
     //获得所有项目名称
     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(res.statusMsg)
            }
        })
     },
     //获取块号
      getAllBlocks(){
        let params = {
            pageNum: 1,
            pageSize: 100000000
        }
        this.$api.Dictionary.searchDictionary(params).then(res=>{
            if(res.statusMsg === 'ok'){
              if(this.ruleForm.proId===undefined){
                this.needBlocks = []
              }else{
                res.data.list.filter(item =>item.dictType === '5').forEach(iten=>{
                    this.needBlocks.push({
                        dictName:iten.dictName,
                        needType:iten.dictId,
                        needNum:0,
                        segmentId:''
                    })
                })
              }
            }else{
                this.$message.warning(res.statusMsg)
            }
        })
      },
      // 查询按钮列表信息
      searchButtonInfo(bol) {
        if(bol) {
          this.pageNum = 1;
        }
        let params = Object.assign({},this.search,{
          pageNum: this.pageNum,
          pageSize: this.pageSize
        })
        this.loading = true;
        this.$api.Engineer.searchSegment(params).then((res) => {
          if(res.statusMsg === 'ok') {
            this.total = res.data.total;
            this.dataList = res.data.list;
        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',
          }
          this.loading = false;
        })
      },
      // 新增按钮信息
      insertProp() {
        this.asyncTitle = true;
        this.asyncVisible = true;
        this.getAllBlocks()
        if(this.ruleForm.proId===undefined){
          this.needBlocks = []
        }else{
          this.needBlocks.forEach(item=>{
              item.needNum = 0
          })
        }
      },
      // 修改按钮信息
      updateProp(row) {
        this.asyncTitle = false;
        this.asyncVisible = true;
        this.$api.Engineer.detailsSegment({segmentId: row.segmentId}).then(res=>{
            if(res.statusMsg === 'ok'){
                this.ruleForm = res.data
                this.needBlocks = res.data.segmentNeeds
            }else{
                this.$message.warning(res.statusMsg)
            }
        })
      },
      // 删除按钮信息
      deleteInfo(row) {
        this.$confirm("该操作将删除该信息，是否继续删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
       })
       .then(() => {
         this.$api.Engineer.deleteSegment({segmentId: row.segmentId})
        .then(res => {
          if(res.statusMsg === 'ok') {
            this.searchButtonInfo(true);
            this.$message.success("删除成功！");
          } else {
            this.$message.warning(res.statusMsg);
          }
        })
       })
       .catch(() => {
         this.$message.warning("您已取消");
       })
      },
      // 提交添加按钮信息
      submitInsert: throttle(function() {
        this.$refs.ruleForm.validate((valid) => {
          if(valid) {
            const params = Object.assign({}, this.ruleForm);
            params.segmentList = this.needBlocks
            this.$api.Engineer.insertSegment(params).then((res) => {
              if(res.statusMsg === 'ok') {
                this.asyncVisible = false;
                this.searchButtonInfo(true);
                this.$message.success('添加成功！');
              } else {
                this.$message.warning(res.statusMsg);
              }
            })
          }
        })
      }, 3000),
      // 提交修改按钮信息
      submitUpdate: throttle(function() {
        this.$refs.ruleForm.validate((valid) => {
          if(valid) {
            const params = Object.assign({}, this.ruleForm);
            params.segmentList = this.needBlocks
            this.$api.Engineer.updateSegment(params).then((res) => {
              if(res.statusMsg === 'ok') {
                this.asyncVisible = false;
                this.searchButtonInfo(true);
                this.$message.success('添加成功！');
              } else {
                this.$message.warning(res.statusMsg);
              }
            })
          }
        })
      }, 3000),
      // 判断按钮权限信息
      showButton(str) {
        const pinia = buttonPinia();
        return pinia.$state.buttonInfo.includes(str);
      },      
      // 切换页数
      changePageNum(page) {
        this.pageNum = page;
        this.searchButtonInfo();
      },
      // 切换每页条数
      changePageSize(size) {
        this.pageSize = size;
        this.searchButtonInfo();
        ]
      }
    }
  },
  components: {
    cpnTable
  },
  computed: {
    dialogTitle() {
      return this.submitMode === 'update' ? '修改新增单位工程' : '新增单位工程'
    },
    isUpdate() {
      return this.submitMode === 'update'
    },
  },
  created() {
    this.setFormProps()
    this.setTableColumn()
    this.getLists()
    this.getAllProjects()
    this.getAllPersons()
    // this.getAllBlocks() // 暂时没用,先屏蔽
  },
  methods: {
    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('标段获取失败')
        }
      })
    },
    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
        }
      })
    },
    getDetailInfos(id) {
      this.$api.Engineer.detailsProjects({proId: id}).then(res => {
        if (res.success) {
          this.detail.infos = res.data
        }
      })
    },
    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
    },
    setTableColumn() {
      this.tableColumns = [
        {index: true},
        {slot: "finished"},
        {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"},
        {slot: 'action'},
      ]
      this.detail.tableColumns = [
        {index: true},
        {slot: "name"},
        {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),
    // 判断按钮权限信息
    showButton(str) {
      const pinia = buttonPinia();
      return pinia.$state.buttonInfo.includes(str);
    },
    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';
.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{
    height: 180px;
    overflow: auto;
    display: flex;
    // flex-direction: column;
    // justify-content: space-between;
    flex-wrap: wrap;
    // &:after{
    //     content: "";
    //     flex: 0 0 412px;
    // }
    .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;
        }
    }

/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>