laws-sinotruk-client/src/components/selection/WorkGroupSelection.vue

<template>
  <div class="selection-wrapper">
    <div class="box-title-text">
      <a-input class="box-input" :value="value" :title="value" @input="indexClick"
               :disabled="disabledInput" :placeholder="placeholder">
        <a-icon v-show="value" slot="suffix" type="close-circle" @click="handleEmpty" title="清空"/>
      </a-input>
      <a-button v-if="!disabled" type="primary" class="button-box" @click="workGroupClick">
        {{this.$t('workGroupSelect.select')}}
      </a-button>
    </div>
    <work-group-selection-modal ref="workGroupSelectionModal" v-bind="$attrs"
                                :modal-width="modalWidth"
                                :multi="multi"
                                :rootOpened="rootOpened"
                                :depart-id="value"
                                :store="storeField"
                                :text="textField"
                                :treeOpera="treeOpera"
                                @ok="handleOK"
                                @initComp="initComp"/>
  </div>
</template>

<script>
import WorkGroupSelectionModal from '@comp/selection/WorkGroupSelectionModal'
import { underLinetoHump } from '@comp/_util/StringUtil'
export default {
  name: 'WorkGroupSelection',
  components: { WorkGroupSelectionModal },
  props: {
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false
    },
    // 只禁用输入框
    disabledInput: {
      type: Boolean,
      default: false
    },
    modalWidth: {
      type: Number,
      default: 500,
      required: false
    },
    multi: {
      type: Boolean,
      default: false,
      required: false
    },
    rootOpened: {
      type: Boolean,
      default: true,
      required: false
    },
    // 自定义返回字段，默认返回 name
    customReturnField: {
      type: String,
      default: 'name'
    },
    backDepart: {
      type: Boolean,
      default: false,
      required: false
    },
    // 存储字段 [key field]
    store: {
      type: String,
      default: 'id',
      required: false
    },
    // 显示字段 [label field]
    text: {
      type: String,
      default: 'name',
      required: false
    },
    treeOpera: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data () {
    return {
      visible: false,
      confirmLoading: false,
      storeVals: '', // [key values]
      textVals: '' // [label values]
    }
  },
  computed: {
    storeField () {
      let field = this.customReturnField
      if (!field) {
        field = this.store
      }
      return underLinetoHump(field)
    },
    textField () {
      return underLinetoHump(this.text)
    }
  },
  mounted () {
    this.storeVals = this.value
  },
  watch: {
    value (val) {
      this.storeVals = val
    }
  },
  methods: {
    initComp (textVals) {
      this.textVals = textVals
    },
    // 返回选中的部门信息
    backDepartInfo () {
      if (this.backDepart === true) {
        if (this.storeVals && this.storeVals.length > 0) {
          const arr1 = this.storeVals.split(',')
          const arr2 = this.textVals.split(',')
          const info = []
          for (let i = 0; i < arr1.length; i++) {
            info.push({
              value: arr1[i],
              text: arr2[i]
            })
          }
          this.$emit('back', info)
        }
      }
    },
    handleOK (rows) {
      if (!rows && rows.length <= 0) {
        this.textVals = ''
        this.storeVals = ''
      } else {
        const arr1 = []
        const arr2 = []
        for (const dep of rows) {
          arr1.push(dep[this.storeField])
          arr2.push(dep[this.textField])
        }
        this.storeVals = arr1.join(',')
        this.textVals = arr2.join(',')
      }
      this.$emit('change', this.storeVals)
      this.backDepartInfo()
    },
    handleEmpty () {
      this.handleOK('')
    },
    // 点击选择按钮
    workGroupClick () {
      this.$refs.workGroupSelectionModal.show(this.textVals)
    },
    // 输入框输入监听
    indexClick (event) {
      this.$emit('change', event.target.value)
    },
    modalInput (value) {
      this.$emit('change', value)
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  }
}
</script>

<style scoped lang="less">
@import '~@assets/less/common.less';
.selection-wrapper {
  height: 40px;
  line-height: 40px;
}
.box-title-text {
  height: 100%;
  display: flex;
  align-items: center;
  .box-input {
    width: 100%;
  }
  .button-box {
    margin-left: 5px;
  }
}
.selection-wrapper .anticon-close-circle {
  cursor: pointer;
  color: #ccc;
  transition: color 0.3s;
  font-size: 12px;
}
.selection-wrapper .anticon-close-circle:hover {
  color: #f5222d;
}
.selection-wrapper .anticon-close-circle:active {
  color: #666;
}
</style>