md

src/views/emis/EmisBaseTools/ProblemTypeMultiplePicker.vue

@@ -0,0 +1,144 @@
+<template>
+  <el-select
+    multiple
+    collapse-tags
+    clearable
+    ref="selectRef"
+    v-model="svalue"
+    :placeholder="placeholder"
+    @blur="onBlur"
+    @focus="onFocus"
+    style="width:100%"
+    class="mutiSelect"
+    :popper-append-to-body="false"
+    @change="onChange">
+    <div style="padding: 0px 8px 0 20px;width:100%;line-height:34px;display:inline-flex">
+       <div style="width:50%">
+        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
+      </div>
+      <div style="width:50%;text-align:right">
+        <el-button type="primary" size="mini" style="padding:2px 10px" @click="hideMe">确定</el-button>
+      </div>
+   </div>
+   <el-checkbox-group v-model="svalue">
+       <el-option v-for="item in optionItems" :key="item.id" :label="item.typeName" :value="item.id">
+           <el-checkbox  style="pointer-events: none"  :key="item.id"  :label="item.id+''">{{item.typeName}}</el-checkbox>
+       </el-option>
+       <!-- style="pointer-events: none" -->
+   </el-checkbox-group>
+  </el-select>
+
+
+  <!-- style="width:100%" multiple-->
+
+</template>
+<script>
+  import emitter from 'element-ui/src/mixins/emitter';
+  import { listEmisProblemType } from "@/api/emis/emisProblemType";
+
+  export default {
+    name: "ProblemTypeMultiplePicker",
+    mixins: [emitter],
+    props: {
+      value: {
+        type: [String],
+        required: false
+      },
+      placeholder:{
+        type: String,
+        required: false
+      },
+      isInitiated:{
+        type: [Boolean,String],
+        required: false,
+        default:false
+      }
+    },
+    data() {
+      return {
+        optionItems: [],
+        svalue: [],
+        isFistInit:true,
+        checkAll: false, //招标阶段 是否全选
+        isIndeterminate: false, //全选复选框标识
+        searchValue:this.value,
+      };
+    },
+    watch: {
+      value(newVal) {
+        if(this.value){
+          this.svalue = this.value.split(',');
+        }
+      },
+      transLineCode(newVal) {
+        this.queryData();
+      }
+    },
+    created() {
+      this.queryData();
+    },
+    methods: {
+      hideMe(){
+        this.$refs.selectRef.blur();
+      },
+      onFocus(){
+        this.searchValue=null;
+      },
+      onBlur(val){
+        this.$emit("input", this.svalue?this.svalue.join(','):null);
+        this.dispatch('ElFormItem', 'el.form.blur', [this.svalue]);
+      },
+      handleCheckAllChange(isCheckAll){
+        if(isCheckAll){
+          const data = this.optionItems.map(item => {
+            return item.id
+          })
+          this.svalue=data
+        }else{
+          this.svalue=[];
+        }
+
+        this.$emit("input", this.svalue?this.svalue.join(','):null);
+        this.isIndeterminate = false;
+      },
+      onChange(val) {
+        console.log(val)
+        const checkedCount = this.svalue.length;
+        this.checkAll = checkedCount === this.optionItems.length;
+        this.isIndeterminate = checkedCount > 0 && checkedCount < this.optionItems.length;
+
+        // this.$emit("input", this.svalue);
+        this.$emit("input", this.svalue?this.svalue.join(','):null);
+        let itemSelData =[]
+        this.optionItems.forEach(item=>{
+          if(item.prodCode === this.svalue){
+            itemSelData.push(item);
+          }
+        });
+        this.$emit("onChange",itemSelData);
+        this.dispatch('ElFormItem', 'el.form.change', [this.svalue]);
+      },
+      queryData() {
+
+        console.log("=====>this.value===",this.value);
+
+        let queryParams = {
+          pageNum: 1,
+          pageSize: 300,
+          id:this.searchValue,
+          status:1
+        };
+        listEmisProblemType(queryParams).then(response => {
+            this.optionItems = response.rows;
+        });
+      },
+
+    }
+  };
+</script>
+<style scoped>
+.mutiSelect :deep .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
+   	display: none;
+}
+
+</style>