苏州-web:智能安全帽提交

unknown

2023-10-23 5672f352d0ba114e2ae96c8cefad6c74ae6d2934

 web/src/views/ProjectManage/SectionManage.vue

@@ -1,422 +1,637 @@
<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>
      </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>
      </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>
      </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">
          <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>
          </template>
        </el-table-column>
      </el-table>
    </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%">
      <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="segmentName">
          <el-input v-model="ruleForm.segmentName" :size="size" 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" :size="size" clearable placeholder="请输入盾构单位"></el-input>
        </el-form-item>
        <el-form-item label="站点：" prop="station">
          <el-input v-model="ruleForm.station" :size="size" 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>
      </el-form>
      <div slot="footer">
        <el-button @click="asyncVisible = false">取 消</el-button>
        <el-button class="submit_btn" @click="asyncTitle ? submitInsert() : submitUpdate()">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { buttonPinia } from '../../pinia/index';
import { throttle, changeSize } from '../../plugins/public'; // 导入节流、动态切换组件尺寸方法
  export default {
    data() {
      return {
        size: changeSize(), // 组件尺寸
        pageNum: 1,
        pageSize: 10,
        search:{},//查询条件
        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;
          }
          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();
      }
    }
  }
</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;
        }
    }
}

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



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