wms / wms4_hefeiyongshen · Files

<template>
  <div class="components-input-demo-presuffix" v-if="avalid">
    <!---->
    <a-input @click="openModal" :placeholder="placeholder" v-model="showText" readOnly :disabled="disabled">
      <a-icon slot="prefix" type="cluster" :title="title"/>
      <a-icon v-if="showText" slot="suffix" type="close-circle" @click="handleEmpty" title="清空"/>
    </a-input>

    <j-popup-onl-report
      ref="jPopupOnlReport"
      :code="code"
      :multi="multi"
      :sorter="sorter"
      :groupId="uniqGroupId"
      :param="param"
      @ok="callBack"
    />

  </div>
</template>

<script>
import JPopupOnlReport from './modal/JPopupOnlReport'

export default {
  name: 'JPopup',
  components: {
    JPopupOnlReport
  },
  props: {
    code: {
      type: String,
      default: '',
      required: false
    },
    field: {
      type: String,
      default: '',
      required: false
    },
    orgFields: {
      type: String,
      default: '',
      required: false
    },
    destFields: {
      type: String,
      default: '',
      required: false
    },
    /** 排序列，指定要排序的列，使用方式：列名=desc|asc */
    sorter: {
      type: String,
      default: ''
    },
    width: {
      type: Number,
      default: 1200,
      required: false
    },
    placeholder: {
      type: String,
      default: '请选择',
      required: false
    },
    value: {
      type: String,
      required: false
    },
    triggerChange: {
      type: Boolean,
      required: false,
      default: false
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false
    },
    multi: {
      type: Boolean,
      required: false,
      default: false
    },
    //popup动态参数 支持系统变量语法
    param: {
      type: Object,
      required: false,
      default: () => {
      }
    },
    spliter: {
      type: String,
      required: false,
      default: ','
    },
    /** 分组ID，用于将多个popup的请求合并到一起，不传不分组 */
    groupId: String

  },
  data() {
    return {
      showText: '',
      title: '',
      avalid: true
    }
  },
  computed: {
    uniqGroupId() {
      if (this.groupId) {
        let {groupId, code, field, orgFields, destFields} = this
        return `${groupId}_${code}_${field}_${orgFields}_${destFields}`
      }
    }
  },
  watch: {
    value: {
      immediate: true,
      handler: function (val) {
        if (!val) {
          this.showText = ''
        } else {
          this.showText = val.split(this.spliter).join(',')
        }
      }
    }
  },
  created() {
  },
  mounted() {
    if (!this.orgFields || !this.destFields || !this.code) {
      this.$message.error('popup参数未正确配置!')
      this.avalid = false
    }
    if (this.destFields.split(',').length != this.orgFields.split(',').length) {
      this.$message.error('popup参数未正确配置,原始值和目标值数量不一致!')
      this.avalid = false
    }
  },
  methods: {
    openModal() {
      if (this.disabled === false) {
        this.$refs.jPopupOnlReport.show()
      }
    },
    handleEmpty() {
      // 禁用时，不允许清空内容
      if (this.disabled) {
        return
      }
      this.showText = ''
      let destFieldsArr = this.destFields.split(',')
      if (destFieldsArr.length === 0) {
        return
      }
      let res = {}
      for (let i = 0; i < destFieldsArr.length; i++) {
        res[destFieldsArr[i]] = ''
      }
      if (this.triggerChange) {
        this.$emit('callback', res)
      } else {
        this.$emit('input', '', res)
      }
    },
    callBack(rows) {
      // update--begin--autor:lvdandan-----date:20200630------for：多选时未带回多个值------
      let orgFieldsArr = this.orgFields.split(',')
      let destFieldsArr = this.destFields.split(',')
      let resetText = false
      if (this.field && this.field.length > 0) {
        this.showText = ''
        resetText = true
      }
      let res = {}
      if (orgFieldsArr.length > 0) {
        for (let i = 0; i < orgFieldsArr.length; i++) {
          let tempDestArr = []
          for (let rw of rows) {
            let val = rw[orgFieldsArr[i]]
            // update--begin--autor:liusq-----date:20210713------for：处理val等于0的情况issues/I3ZL4T------
            if (typeof val == 'undefined' || val == null || val.toString() == "") {
              val = ""
            }
            // update--end--autor:liusq-----date:20210713------for：处理val等于0的情况issues/I3ZL4T------
            tempDestArr.push(val)
          }
          res[destFieldsArr[i]] = tempDestArr.join(",")
        }
        if (resetText === true) {
          let tempText = []
          for (let rw of rows) {
            let val = rw[orgFieldsArr[destFieldsArr.indexOf(this.field)]]
            if (!val) {
              val = ""
            }
            tempText.push(val)
          }
          this.showText = tempText.join(",")
        }
        // update--end--autor:lvdandan-----date:20200630------for：多选时未带回多个值------
      }
      if (this.triggerChange) {
        //v-dec时即triggerChange为true时 将整个对象给form页面 让他自己setFieldsValue
        this.$emit('callback', res)
      } else {
        //v-model时 需要传一个参数field 表示当前这个字段 从而根据这个字段的顺序找到原始值
        // this.$emit("input",row[orgFieldsArr[destFieldsArr.indexOf(this.field)]])
        let str = ''
        if (this.showText) {
          str = this.showText.split(',').join(this.spliter)
        }
        this.$emit('input', str, res)
      }
    }
  }
}
</script>
<style scoped>
.components-input-demo-presuffix .anticon-close-circle {
  cursor: pointer;
  color: #ccc;
  transition: color 0.3s;
  font-size: 12px;
}

.components-input-demo-presuffix .anticon-close-circle:hover {
  color: #f5222d;
}

.components-input-demo-presuffix .anticon-close-circle:active {
  color: #666;
}
</style>