zhgdyun/src/views/projectFront/smartBeamField/planManage.vue

<!-- 计划管理 -->
<template>
  <div class="plan-manage">
    <div class="plan-content" v-if="!showBeamDetail">
      <div class="left-plan">
        <div class="input-box">
          <el-input
            placeholder="请输入桥段"
            suffix-icon="el-icon-search"
            v-model="searchForm.bridgeSectionName"
            size="small"
            class="plan-search"
            @change="sectionChange"
            clearable
          >
          </el-input>
          <div class="add-icon" @click="handle">
            <img src="@/assets/images/carPosition/add.png" alt="" />
          </div>
        </div>
        <div class="bridge-section">
          <vue-scroll>
            <div class="section-list">
              <div
                class="section-item"
                v-for="(item, index) in bridgeSectionList"
                :key="item.id"
                :class="{ active: activeBuildIndex == index }"
                @click="changeBuildFn(item, index)"
              >
                <div class="bridge-title">{{ item.bridgeSectionName }}</div>
                <div class="bridge-tool">
                  <img @click.stop="editBuildFn(item)" src="@/assets/images/icon-edit.png" style="margin-right:16px" class="icon" />
                  <img @click.stop="deleteBuildFn(item)" src="@/assets/images/icon-delete.png" class="icon" />
                </div>
              </div>
            </div>
          </vue-scroll>
        </div>
        <div class="add-icon"></div>
      </div>

      <!-- 右侧列表 梁列表 -->
      <div class="right-plan">
        <div class="fullHeight whiteBlock">
          <div style="padding: 15px 15px 0">
            <p class="pageTitle">梁列表</p>
            <el-form :inline="true" ref="searchForm" :model="searchForm" size="medium">
              <el-form-item label="梁号">
                <el-input v-model="searchForm.beamNo" placeholder="请输入" clearable></el-input>
              </el-form-item>
              <el-form-item label="梁型" style="margin-left:40px">
                <el-input v-model="searchForm.beamAndPlateType" placeholder="请输入" clearable></el-input>
              </el-form-item>
              <el-form-item label="制梁状态" style="margin-left:40px">
                <el-select v-model="searchForm.beamMakeStatus" placeholder="请选择" clearable>
                  <el-option v-for="(item, index) in beamMakeOptions" :key="index" :label="item.label" :value="item.value"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" plain @click="getList">{{ $t('message.energyManage.waybill.query') }}</el-button>
                <el-button type="warning" plain @click="refresh">{{ $t('message.deviceManage.refresh') }}</el-button>
                <el-button type="primary" size="medium" @click="add">新增</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="table_wrap whiteBlock">
            <el-table class="tables" :data="bridgeBeamList">
              <el-table-column type="index" label="序号" align="center" width="60">
                <!-- <template slot-scope="scope">
                  <div>
                    {{scope.row}}
                  </div>
                </template> -->
              </el-table-column>
              <el-table-column prop="beamNo" align="center" label="梁号" width="80"></el-table-column>
              <el-table-column prop="bridgeSectionName" align="center" label="所属桥段" width="100"></el-table-column>
              <el-table-column prop="beamAndPlateType" align="center" label="梁板类型" width="100"></el-table-column>
              <el-table-column prop="beamMakeStatus" align="center" label="制梁状态"  width="90">
                <template slot-scope="scope">
                  <div>
                    {{ beamMakeOptions[scope.row.beamMakeStatus - 1].label }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" label="计划制梁时间">
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.plannedMakeBeamBeginTime + ' ~ ' + scope.row.plannedMakeBeamEndTime }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" label="计划架梁时间">
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.plannedErectionBeamBeginTime + ' ~ ' + scope.row.plannedErectionBeamEndTime }}
                  </div>
                </template>
              </el-table-column>

              <el-table-column label="操作" align="center" width="470">
                <template slot-scope="scope">
                  <div class="table-btn">
                    <div @click="downloadFn(scope.row)" class="operationText" style="margin-right: 30px">
                      <img src="@/assets/images/icon-qrcode.png" width="15px" height="15px" />
                      <span>二维码</span>
                    </div>
                    <div @click="startProduct(scope.row)" class="operationText" style="margin-right: 30px" v-if="scope.row.beamMakeStatus === 1">
                      <img src="@/assets/images/icon-product.png" width="15px" height="15px" />
                      <span>开始生产</span>
                    </div>
                    <div class="operationText" style="margin-right: 30px" @click="showBeamDetailFn(scope.row)">
                      <i class="el-icon-tickets" style="color: #8dacfa; font-size: 16px; margin-right: 2px"></i>
                      <span>详情</span>
                    </div>
                    <div @click="editBeam(scope.row)" class="operationText" style="margin-right: 30px">
                      <img src="@/assets/images/icon-edit.png" width="15px" height="15px" />
                      <span>编辑</span>
                    </div>
                    <div @click="deleteDev(scope.row)" class="operationText">
                      <img src="@/assets/images/icon-delete.png" width="15px" height="15px" />
                      <span>删除</span>
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              class="pagerBox"
              @size-change="SizeChange"
              @current-change="CurrentChange"
              :current-page="pagInfo.pageNo"
              :page-sizes="$store.state.PAGESIZRS"
              :page-size="pagInfo.pageSize"
              layout="total, sizes, prev, pager, next"
              :total="Number(pagInfo.total)"
              background
            ></el-pagination>
          </div>
          <!-- 梁列表 新增 编辑 弹窗 -->
          <el-dialog :modal-append-to-body="false" @close="close" :title="title" :visible.sync="dialogShow" width="667px">
            <div class="dialog_content">
              <el-form size="medium" ref="addEditForm" :model="addEditForm" :rules="addEditRules" label-width="120px" class="dialogFormBox">
                <el-form-item label="梁号" prop="beamNo">
                  <el-input v-model="addEditForm.beamNo" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="梁板类型" prop="beamAndPlateType">
                  <el-input v-model="addEditForm.beamAndPlateType" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="计划制梁时间" prop="markTime">
                  <el-date-picker
                    @change="planMakeTimeChange"
                    v-model="addEditForm.markTime"
                    type="datetimerange"
                    :range-separator="$t('message.energyManage.to')"
                    :start-placeholder="$t('message.energyManage.start')"
                    :end-placeholder="$t('message.energyManage.end')"
                    value-format="yyyy-MM-dd hh:mm:ss"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="计划架梁时间" prop="erectTime">
                  <el-date-picker
                    @change="planErectTimeChange"
                    v-model="addEditForm.erectTime"
                    type="datetimerange"
                    :range-separator="$t('message.energyManage.to')"
                    :start-placeholder="$t('message.energyManage.start')"
                    :end-placeholder="$t('message.energyManage.end')"
                    value-format="yyyy-MM-dd hh:mm:ss"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="跨" prop="stepAstride">
                  <el-input v-model="addEditForm.stepAstride" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="幅" prop="width">
                  <el-select v-model="addEditForm.width" placeholder="请选择" clearable>
                    <el-option v-for="(item, index) in beamTypeOption" :key="index" :label="item.label" :value="item.value"> </el-option>
                  </el-select>
                </el-form-item>
                <div class="dialog-footer">
                  <el-button class="cancleBtn" @click="dialogShow = false" icon="el-icon-circle-close" size="medium"
                    >{{ $t('message.deviceManage.cancel') }}
                  </el-button>
                  <el-button type="primary" icon="el-icon-circle-check" @click="submit" size="medium">生成二维码 </el-button>
                </div>
              </el-form>
            </div>
          </el-dialog>

          <!-- 新增桥段 -->
          <el-dialog
            :modal-append-to-body="false"
            :title="cardDialogTitle"
            :visible.sync="showLeftDialog"
            width="667px"
            @close="closeEvent"
          >
            <div class="dialog_content">
              <el-form
                size="medium"
                :model="bridgeSectionForm"
                ref="bridgeSectionForm"
                :rules="bridgeSectionFormRules"
                label-width="150px"
                class="dialogFormBox"
              >
                <el-form-item label="桥段名称" prop="bridgeSectionName">
                  <el-input
                    :disabled="cardDialogTitle == '详情'"
                    v-model="bridgeSectionForm.bridgeSectionName"
                    :placeholder="'请输入'"
                  ></el-input>
                </el-form-item>

                <div class="dialog-footer">
                  <el-button class="cancleBtn" @click="closeEvent" icon="el-icon-circle-close" size="medium">取消</el-button>
                  <el-button type="primary" icon="el-icon-circle-check" @click="bridgeSectionSubmit" size="medium">确认</el-button>
                </div>
              </el-form>
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
    <div class="beam-detail" v-if="showBeamDetail">
      <div class="return-list">
        <div @click="showBeamDetail = false" style="cursor: pointer">
          <i class="el-icon-back"></i>
        </div>
        <div class="return-tool" @click="showBeamDetail = false" style="cursor: pointer">返回</div>
        <div class="detail-title">梁体信息</div>
      </div>
      <beam-detail :beamDetailId="beamDetailId"></beam-detail>
    </div>
  </div>
</template>
<script>
import {
  smartBeamFieldBeamAdd,
  smartBeamFieldBeamDelete,
  smartBeamFieldBeamEdit,
  smartBeamFieldBeamPage,
  smartBridgeSectionAdd,
  smartBridgeSectionEdit,
  smartBridgeSectionDelete,
  smartBridgeSectionPage,
  smartBridgeSectionList,
  smartBeamFieldBeamStart, // 开始生产
} from '@/assets/js/api/smartBeamField.js'
import beamDetail from '@/views/projectFront/smartBeamField/beam-detail.vue'
export default {
  components: {
    beamDetail
  },
  mounted() {
    this.getBridgeSectionList()
  },
  data() {
    return {
      beamDetailId: "",
      showLeftDialog: false,
      showBeamDetail: false,
      dateSelect: '',
      // 幅：1左幅 2右幅
      beamTypeOption: [
        {
          label: '左幅',
          value: 1
        },
        {
          label: '右幅',
          value: 2
        }
      ],
      // 制梁状态:1未开始2进行中3已完成
      beamMakeOptions: [
        {
          label: '未开始',
          value: 1
        },
        {
          label: '进行中',
          value: 2
        },
        {
          label: '已完成',
          value: 3
        }
      ],
      bridgeSectionList: [],
      input1: '', // 桥段
      currentBridgeInfo: '', //桥段item
      activeBuildIndex: '', //当前选中桥段

      //   梁列表相关 *************
      title: '',
      dialogShow: false,
      pagInfo: {
        pageNo: 1, //页数
        pageSize: 10, //条数
        total: 0 //总条数
      },
      bridgeBeamList: [],
      addEditForm: {
        erectTime: '',
        markTime: '',
        beamNo: '',
        beamAndPlateType: '',
        plannedErectionBeamBeginTime: '',
        plannedErectionBeamEndTime: '',
        plannedMakeBeamBeginTime: '',
        plannedMakeBeamEndTime: '',
        stepAstride: '',
        width: '',
        beamQrCodeUrl: '梁的二维码url',
        makeBeamProcessQrCodeUrl: '梁和制梁进度的二维码页面url'
      },
      addEditRules: {
        beamNo: [
          {
            required: true,
            message: '必填',
            trigger: 'blur'
          }
        ],
        beamAndPlateType: [
          {
            required: true,
            message: '必填',
            trigger: 'blur'
          }
        ],
        plannedMakeBeamBeginTime: [
          {
            required: true,
            message: '必填',
            trigger: 'blur'
          }
        ],
        plannedErectionBeamBeginTime: [
          {
            required: true,
            message: '必填',
            trigger: 'blur'
          }
        ]
      },
      bridgeSectionForm: {
        bridgeSectionName: ''
      },
      bridgeSectionFormRules: {
        bridgeSectionName: [
          {
            required: true,
            message: '必填',
            trigger: 'blur'
          }
        ]
      },
      searchForm: {
        bridgeSectionName: '',
        beamNo: '',
        beamAndPlateType: '',
        beamMakeStatus: ''
      },
      cardDialogTitle: ''
    }
  },
  methods: {
    planMakeTimeChange(e) {
      if (e.length > 0) {
        this.addEditForm.plannedMakeBeamBeginTime = e[0]
        this.addEditForm.plannedMakeBeamEndTime = e[1]
      }
      console.log('计划制梁时间', e)
    },
    planErectTimeChange(e) {
      if (e.length > 0) {
        this.addEditForm.plannedErectionBeamBeginTime = e[0]
        this.addEditForm.plannedErectionBeamEndTime = e[1]
      }
      console.log('计划架梁时间', e)
    },
    getBridgeSectionList() {
      smartBridgeSectionList({
        projectSn: this.$store.state.projectSn,
        bridgeSectionName: this.searchForm.bridgeSectionName
      }).then(res => {
        if (res.result.length > 0) {
          console.log('获取桥段列表', res)
          this.bridgeSectionList = res.result
          this.smartBeamFieldBridgeSectionId = res.result[0].id
          this.activeBuildIndex = 0
          this.getList()
        }
      })
    },
    closeEvent() {
      this.bridgeSectionForm = {}
      this.$nextTick(() => {
        this.$refs.bridgeSectionForm.clearValidate()
      })
    },
    // 桥段搜索
    sectionChange(e) {
      this.getBridgeSectionList()
      console.log("搜索桥段",e)
    },
    // 打开新增桥段弹窗
    handle() {
      console.log('打开弹窗')
      this.showLeftDialog = true
      this.cardDialogTitle = '新增桥段'
    },
    changeBuildFn(item, index) {
      this.activeBuildIndex = index
      this.currentBridgeInfo = item
      this.smartBeamFieldBridgeSectionId = item.id
      this.getList()
    },
    // 编辑桥段弹窗
    editBuildFn(item) {
      console.log('编辑桥段', item)
      this.cardDialogTitle = '编辑桥段'
      this.showLeftDialog = true
      this.bridgeSectionForm = JSON.parse(JSON.stringify(item))
    },
    bridgeSectionSubmit() {
      let params = JSON.parse(JSON.stringify(this.bridgeSectionForm))
      params.projectSn = this.$store.state.projectSn
      this.$refs.bridgeSectionForm.validate(valid => {
        if (valid) {
          if (this.cardDialogTitle == '新增桥段') {
            smartBridgeSectionAdd(params).then(result => {
              if (result.success) {
                this.$message.success(result.message)
                this.getBridgeSectionList()
              }
            })
          } else if (this.cardDialogTitle === '编辑桥段') {
            smartBridgeSectionEdit(params).then(result => {
              if (result.success) {
                this.$message.success(result.message)
                this.getBridgeSectionList()
              }
            })
          }
          this.showLeftDialog = false
        } else {
          return false
        }
      })
    },
    deleteBuildFn(obj) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          smartBridgeSectionDelete({ id: obj.id }).then(res => {
            if (res.success) {
              this.getBridgeSectionList()
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            } else {
              this.$message({
                type: 'error',
                message: res.message
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },

    // 梁列表相关 **************************
    showBeamDetailFn(item) {
      // console.log("打开梁体详情",item)
      this.beamDetailId = item.id
      this.showBeamDetail = true
    },
    startProduct(obj) {
      this.$confirm('是否确认开始生产?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          smartBeamFieldBeamStart({ id: obj.id }).then(res => {
            if (res.success) {
              this.getList()
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
            } else {
              this.$message({
                type: 'error',
                message: res.message
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },

    getList() {
      smartBeamFieldBeamPage({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        projectSn: this.$store.state.projectSn,
        smartBeamFieldBridgeSectionId: this.smartBeamFieldBridgeSectionId,
        beamNo: this.searchForm.beamNo,
        beamAndPlateType: this.searchForm.beamAndPlateType,
        beamMakeStatus: this.searchForm.beamMakeStatus
      }).then(res => {
        if (res.success) {
          console.log('获取梁列表', res)
          this.bridgeBeamList = res.result.records
          this.pagInfo.total = res.result.total
        }
      })
    },

    add() {
      this.title = '新增梁'
      this.dialogShow = true
    },

    editBeam(obj) {
      this.title = '编辑梁'
      this.dialogShow = true
      this.addEditForm = JSON.parse(JSON.stringify(obj))
      this.addEditForm.markTime = [obj.plannedMakeBeamBeginTime,obj.plannedMakeBeamEndTime]
      this.addEditForm.erectTime = [obj.plannedErectionBeamBeginTime,obj.plannedErectionBeamEndTime]
      console.log("编辑梁信息",this.addEditForm)
    },
    submit() {
      let params = JSON.parse(JSON.stringify(this.addEditForm))
      params.projectSn = this.$store.state.projectSn
      params.smartBeamFieldBridgeSectionId = this.smartBeamFieldBridgeSectionId
      console.log('新增梁保存', params)
      this.$refs.addEditForm.validate(valid => {
        if (valid) {
          delete params.erectTime
          delete params.markTime
          if (this.title == '新增梁') {
            smartBeamFieldBeamAdd(params).then(result => {
              if (result.success) {
                this.$message.success(result.message)
                this.getList()
              }
            })
          } else if (this.title === '编辑梁') {
            smartBeamFieldBeamEdit(params).then(result => {
              if (result.success) {
                this.$message.success(result.message)
                this.getList()
              }
            })
          }
          this.dialogShow = false
        } else {
          return false
        }
      })
    },
    deleteDev(obj) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          smartBeamFieldBeamDelete({ id: obj.id }).then(res => {
            if (res.success) {
              this.getList()
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            } else {
              this.$message({
                type: 'error',
                message: res.message
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },

    close() {
      this.addEditForm = {
        erectTime: '',
        markTime: '',
        beamNo: '',
        beamAndPlateType: '',
        plannedErectionBeamBeginTime: '',
        plannedErectionBeamEndTime: '',
        plannedMakeBeamBeginTime: '',
        plannedMakeBeamEndTime: '',
        stepAstride: '',
        width: '',
        makeBeamProcessQrCodeUrl: '梁和制梁进度的二维码页面url',
        beamQrCodeUrl: '梁的二维码url'
      }
      this.$nextTick(() => {
        this.$refs.addEditForm.clearValidate()
      })
    },
    SizeChange(val) {
      this.pagInfo.pageSize = val
      this.getList()
    },
    CurrentChange(val) {
      this.pagInfo.pageNo = val
      this.getList()
    },
    refresh() {
      this.searchForm = {}
      this.pagInfo.pageNo = 1 //页数
      this.pagInfo.pageSize = 10 //条数
      this.getList()
    },
    // 下载二维码
    downloadFn(item) {
      console.log(item)
      let x = new XMLHttpRequest()
      console.log(this.$store.state.FILEURL + item.beamQrCode)
      x.open('GET', this.$store.state.FILEURL + item.beamQrCode, true)
      x.responseType = 'blob'
      x.onload = function(e) {
        let url = window.URL.createObjectURL(x.response)
        let a = document.createElement('a')
        console.log(url)
        a.href = url
        a.download = item.bridgeName
        a.click()
        document.removeChild(a)
      }
      x.send()
    },
  }
}
</script>
<style lang="scss" scoped>
.plan-manage {
  width: 100%;
  height: 100%;
  .plan-content {
    display: flex;
    width: 100%;
    height: 100%;
    .left-plan {
      width: 17%;
      margin-right: 1%;
      background: #fff;
      .input-box {
        display: flex;
        margin: 20px 0 0px 20px;
        .plan-search {
          width: 80%;
          margin-right: 5%;
        }
        .add-icon {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 30px;
          height: 30px;
          cursor: pointer;
          border: 1px solid #c7d4f8;
          img {
            width: 75%;
            height: 75%;
          }
        }
      }
      .bridge-section {
        width: 100%;
        height: 90%;
        margin-top: 5%;
        .section-list {
          width: 100%;
          .section-item {
            padding: 10px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            &.active {
              background: #c7d4f8;
              color: #5181f6;
              border-left: 4px solid #5181f6;
              .bridge-title {
                margin-left: 0px;
              }
            }
            .bridge-title {
              font-size: 14px;
              margin-left: 4px;
              cursor: pointer;
            }
            .bridge-tool {
              display: flex;
              .icon {
                width: 15px;
                height: 15px;
                cursor: pointer;
              }
            }
          }
        }
      }
    }
    .right-plan {
      width: 82%;
      background: #fff;
    }
  }
}
.table-btn {
  display: flex;
  justify-content: center;
}
.beam-detail {
  width: 100%;
  height: 100%;
  .return-list {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    .return-tool {
      font-size: 14px;
      padding-right: 10px;
      padding-left: 5px;
      border-right: 1px solid #ddd;
    }
    .detail-title {
      padding-left: 10px;
      font-weight: bold;
    }
  }
}
</style>