gphm/PHM-web/src/views/manage/sortie/selectParameters.vue

<template>
  <div class="app-container selectParameters">
    <el-button type="primary" @click="back" class="backBtn">返回</el-button>
    <p style="text-align: center; margin: 0 0 20px">请选择该架次信息回放的参数</p>
    <div class="transfer">
      <el-transfer v-model="value"
        :props="{ key: 'value', label: 'desc' }" 
        :data="data"
        filterable
        filter-placeholder="请输入参数名称"
        :titles="['所有参数', '展示参数']"
        @change="handleChange"
      >
      </el-transfer>
    </div>
    <div class="footer">
      <el-button :disabled="isDisable" type="primary" @click="submitFileForm">确 定</el-button>
    </div>
    <!-- 数据回放弹出框 -->
    <el-dialog
      :visible.sync="dialogVisible"
      :fullscreen="true"
      class="thisDialog"
      >
      <dataPlayBack @closeDialog="closeDialog"/>
    </el-dialog>
  </div>
</template>

<script>
import dataPlayBack from '@/views/manage/sortie/dataPlayBack'
export default {
  name: 'SelectParameters',
  components: {
    dataPlayBack
  },
  data() {
    const generateData = _ => {
      const data = [];
      for (let i = 1; i <= 15; i++) {
        data.push({
          value: i,
          desc: `备选项 ${ i }`
        });
      }
      return data;
    };
    return {
      // 遮罩层
      loading: true,
      // 判断选择参数为空时
      isDisable:false,
      data: generateData(),
      value: [1],
      // 最后选择的参数
      selectData:[],
      dialogVisible: false
    };
  },
  methods: {
    handleChange(value, direction, movedKeys) {
      this.selectData=value
      console.log('value', value);
      console.log('direction', direction);
      console.log('movedKeys', movedKeys);
      if(value.length===0){
        this.isDisable=true
      }else{
        this.isDisable=false
      }
    },
    submitFileForm(){
      this.dialogVisible=true
    },
    back(){
      this.$router.push({
        name: 'Sortie'
      })
    },
    // 关闭弹框
    closeDialog(){
      this.dialogVisible=false
    },
  }
}
</script>

<style scoped>
.selectParameters{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.transfer >>> .el-transfer-panel{
  width: 300px;
  height: 450px;
}
.transfer >>> .el-transfer-panel__list.is-filterable{
  height: 350px;
}
.footer{
  width: 42vw;
  margin-top: 20px;
  position: relative;
}
.footer >>> .el-button{
  position: absolute;
  right: 0;
}
::v-deep .thisDialog .el-dialog__body {
    padding: 0;
}
::v-deep .thisDialog .el-dialog__header {
    padding: 0;
}
.backBtn{
  position: absolute;
  top: 20px;
  left: 40px;
}
/* ::v-deep .el-dialog__body{
  padding: 0 !important;
} */
</style>