FE-V2-PC/src/views/medicUniversity-3_1/chemicalManagement/deviceManagement/smartLocker/associatedCabinetLock.vue

<!--关联化学品柜-->
<template>
    <div class="associatedCabinetLock">
      <div class="title-box">
        <p>关联化学品柜</p>
        <p class="reset-button-one" @click="backPage"><i class="el-icon-arrow-left"></i>返回</p>
      </div>
      <div class="associatedCabinetLock-min-page">
        <el-form style="flex: 1;flex-direction: column;display: flex;overflow: hidden;" ref="form" :model="form" label-width="0px">
          <el-table  border :data="tableList" ref="multipleTable">
          <el-table-column label="柜锁编号" align="center" prop="hardwareNum" width="300px"/>
          <el-table-column label="柜锁名称" align="center" prop="name" width="200px"/>
          <el-table-column label="学院" align="center" prop="deptName" width="200px"/>
          <el-table-column label="所在位置" align="center" prop="posi"/>
          <el-table-column label="化学品柜" align="center" width="240" >
            <template slot-scope="scope">
              <el-form-item label="" prop="joinCabinetId">
                <el-select v-model="scope.row.joinCabinetId" clearable placeholder="请选择化学品柜" style="width:200px;">
                  <el-option
                    v-for="item in scope.row.cabinetList"
                    :key="item.id"
                    :label="item.cabinetName"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
        </el-form>
        <div class="table-button-p">
          <p class="inquire-button-one" @click="submitForm">确定</p>
        </div>
      </div>
    </div>
</template>

<script>
import { setLockJoinCabinet } from "@/api/medicUniversity-3_1/index";
  export default {
    name: "associatedCabinetLock",
    props:{
      associatedCabinetLockPropsData:{},
    },
    data() {
      return {
        tableList:[],
        form:{},
        rules:{
          joinCabinetId: [
            { required: true, trigger: "blur", message: "请选择化学品柜" },
          ],
        },
      }
    },
    created() {

    },
    mounted(){
      this.tableList = JSON.parse(JSON.stringify(this.associatedCabinetLockPropsData))
    },
    methods:{
      //提交按钮
      submitForm(){
        let self = this;
        this.$refs["form"].validate((valid) => {
          if (valid) {
            self.$confirm(`确认提交吗?`, "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(async () => {
              let list = [];
              for(let i=0;i<self.tableList.length;i++){
                let obj = {
                  id:self.tableList[i].id,
                  joinCabinet:self.tableList[i].joinCabinetId,
                }
                list.push(obj);
              }
              setLockJoinCabinet(list).then(response => {
                if (response.code == 200){
                  self.msgSuccess(response.msg);
                  self.$parent.pageToggle(0);
                }
              });
            }).catch(() => {})
          }
        })
      },
      //返回
      backPage(){
        this.$parent.pageToggle(0);
      },
    }
  }
</script>

<style scoped lang="scss">
  .associatedCabinetLock{
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    p{
      margin:0;
    }
    .title-box{
      display: flex;
      height:90px;
      border-bottom: 1px solid #D8D8D8;
      p:nth-child(1){
        flex:1;
        font-size:16px;
        line-height:90px;
        margin-left:18px;
        color:#0045AF;
      }
      p:nth-child(2){
        margin:25px 25px 0 0;
      }
    }
    .associatedCabinetLock-min-page{
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding:20px !important;
      .el-form-item{
        margin:0;
      }
      .table-button-p{
        margin:20px auto 0;
        p{
          margin-right:72px;
        }
      }
    }
  }
</style>