Merge remote-tracking branch 'origin/master'

wayne

2021-11-12 505f666d3ecf3688778c079a8bbfb366d695cf22

 PAMapp/components/multiSelectBtn.vue

@@ -4,13 +4,21 @@
      <el-checkbox
        v-for="(option, index) in options"
        :key="index"
        :label="option"
        :name="option"
      ></el-checkbox>
        :label="option.label">
          {{option.title}}
        </el-checkbox>
      <template v-if="nameOfSelectAll">
        <button class="pam-selectAll-btn cursor--pointer" :class="{'selected':isSelectAll}" :model="isSelectAll" @click="selectAll">
         <span>{{nameOfSelectAll}}</span>
       </button>
      </template>
      <template v-if="nameOfOtherOption">
        <button class="pam-selectAll-btn cursor--pointer" :class="{'selected':isSelectOtherOption}" :model="isSelectOtherOption" @click="selectOther">
         <span>{{nameOfOtherOption}}</span>
        </button>
        <div>
          <input class="pam-muti-select-other cursor--pointer" v-if="isSelectOtherOption" v-model="syncOtherSelect" placeholder="請輸入,限20字">
        </div>
      </template>
    </el-checkbox-group>
  </div>
@@ -18,12 +26,16 @@

<script lang="ts">
  import { Vue, Component, Prop, PropSync} from 'vue-property-decorator';
  import { OptionBtnDto } from './singleSelectBtn.vue';

  @Component
  export default class MultiSelectBtn extends Vue {
    @PropSync('mutiSelect',{type:Array,default:()=>[]}) syncMutiSelect!:string[];
    @Prop({default:()=>[]}) options!:OptionBtnDto[];
    @Prop({default:''}) nameOfSelectAll!:string;
    @Prop({default:()=>[]}) options!:string[]|[];
    @PropSync('otherSelect',{default:''}) syncOtherSelect!:string;
    @Prop({type:String,default:''}) nameOfOtherOption!:string;
    isSelectOtherOption=false;
    isSelectAll=false;

    updated() {
@@ -32,9 +44,17 @@

    selectAll():void{
      this.isSelectAll= !this.isSelectAll;
      this.syncMutiSelect = this.isSelectAll ? this.options:[];
      this.syncMutiSelect = this.isSelectAll ? this.optionsFormat(this.options):[];
    }

    optionsFormat(optios:OptionBtnDto[]):string[]{
      return optios.map(o=>o.title);
    }
    selectOther():void{
      this.isSelectOtherOption = !this.isSelectOtherOption;
      if(!this.isSelectOtherOption){
        this.syncOtherSelect = '';
      }
    }
  }
</script>

@@ -52,4 +72,13 @@
      color: $PRIMARY_WHITE;
    }
  }
  .pam-muti-select-other {
    height: 50px;
    padding: 5px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;
    width: 316px;
    border: 1px solid #CCCCCC;
  }
</style>