Source/UBCS-WEB/src/views/integration/integrationTransfer.vue

@@ -1,141 +1,157 @@
<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" append-to-body="true" destroy-on-close width="30%"
        @close="handelClose">
        <el-form :model="form">
            <el-form-item label="查询条件" label-width="70px" size="small">
                <el-input v-model="inputVal" autocomplete="off" @change="handleQuery"></el-input>
            </el-form-item>
        </el-form>
        <p class="text_tip">*选择分类进行属性过滤, 或者输入属性的全拼或者简拼进行查询! 如: 姓名 (可输入xm或xinming )</p>
        <transfer v-model="transferValue" :data="newdata" :filter-method="filterMethod"
            :filter-placeholder="filterPlaceholder" :props="props"></transfer>
        <span slot="footer" class="dialog-footer">
  <el-dialog :title="title" :visible.sync="dialogVisible" append-to-body="true" destroy-on-close width="50%"
             @close="handelClose">
    <el-form :model="form">
      <el-form-item label="查询条件" label-width="70px" size="small">
        <el-input v-model="inputVal" autocomplete="off" @change="handleQuery"></el-input>
      </el-form-item>
    </el-form>
    <p class="text_tip">*选择分类进行属性过滤, 或者输入属性的全拼或者简拼进行查询! 如: 姓名 (可输入xm或xinming )</p>
    <div style="width: 100%; display: flex; justify-content: space-around">
      <transfer v-model="transferValue" :data="newdata" :filter-method="filterMethod"
                :filter-placeholder="filterPlaceholder" :props="props"></transfer>
    </div>
    <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false">取 消</el-button>
            <el-button type="primary" @click="handelTransferSave">保 存</el-button>
        </span>
    </el-dialog>
  </el-dialog>
</template>
<script>
import transfer from '@/components/transfer/index'
import pinyin from 'js-pinyin'

export default {
    components: {
        transfer
  components: {
    transfer
  },
  name: 'IntegrationTransfer',
  props: {
    // 是否打开
    visible: {
      typeof: Boolean,
      default: false
    },
    name: 'IntegrationTransfer',
    // 弹窗标题
    title: {
      typeof: String,
      default: '编码属性'
    },
    // 数据源
    data: {
      typeof: Array,
      default: () => []
    },
    // 数据默认值得props
    props: {
        // 是否打开
        visible: {
            typeof: Boolean,
            default: false
        },
        // 弹窗标题
        title: {
            typeof: String,
            default: '编码属性'
        },
        // 数据源
        data: {
            typeof: Array,
            default: () => []
        },
        // 数据默认值得props
        props: {
            typeof: Object,
            default: () => {
                return {
                    label: 'label',
                    key: 'key',
                    disabled: 'disabled'
                };
            }
        },
        // 如果有特殊操作，一条数据只能用一次的操作，就需要把禁用的数据字段用lebel对应的值传递过来
        disabledData: {
            typeof: Array,
            default: () => []
        },
        // 查询文本框的placeholder
        filterPlaceholder: {
            typeof: String,
            default: '请输入拼音全拼或者拼音缩写'
        }
    },
    data() {
      typeof: Object,
      default: () => {
        return {
            inputVal: '',
            transferValue: this.value,
            dialogVisible: this.visible,
        }
          label: 'label',
          key: 'key',
          disabled: 'disabled'
        };
      }
    },
    watch: {
        visible(n) {
            this.dialogVisible = n;
        },
        dialogVisible(n) {
            this.$emit('update:visible', n)
        },
    // 如果有特殊操作，一条数据只能用一次的操作，就需要把禁用的数据字段用lebel对应的值传递过来
    disabledData: {
      typeof: Array,
      default: () => []
    },
    computed: {
        newdata() {
            pinyin.setOptions({ checkPolyphone: false, charCase: 1 });
            let name = this.props.label
            let key = this.props.key
            let data = this.data.map(item => {
                let objitem = { disabled: false, ...item }
                if (this.disabledData.length !== 0) {
                    this.disabledData.forEach(element => {
                        if (objitem[name] === element)  objitem.disabled = true
                    });
                }
                return objitem
            })
            return data.map(item => {
                let pinYin = pinyin.getFullChars(item[this.props.label])
                let renPing = pinyin.getCamelChars(item[this.props.label])
                const obj = { pinyins: pinYin, renPing: renPing, [name]: item[this.props.label], [key]: item[this.props.key], disabled: item.disabled }
                return obj
            })
        }
    },
    methods: {
        // 新增弹窗查询按钮
        handleQuery(event) {
            this.inputVal = event
        },
        // 穿梭框查询数据过滤（双条件）
        filterMethod(query, item) {
            return item.pinyins.indexOf(this.inputVal) > -1 || item.renPing.indexOf(this.inputVal) > -1
        },
        // 关闭清除所有数据
        handelClose() {
            this.transferValue = []
            this.inputVal = ''
            this.visible = false
        },
        // 确定按钮，返回当前数据和修改后的数据
        handelTransferSave() {
            let that = this
            let datas = that.newdata
            const findtra = datas.findIndex(item => item.oid === that.transferValue[0].oid)
            datas[findtra].disabled = true
            const obj = {
                // 当前选择的数据
                value: this.transferValue,
                // 总数据
                data: datas
            }
            that.$emit('save', obj)
            that.transferValue = []
            that.inputVal = ''
        },
    // 查询文本框的placeholder
    filterPlaceholder: {
      typeof: String,
      default: '请输入拼音全拼或者拼音缩写'
    }
  },
  data() {
    return {
      inputVal: '',
      transferValue: this.value,
      dialogVisible: this.visible,
    }
  },
  watch: {
    visible(n) {
      this.dialogVisible = n;
    },
    dialogVisible(n) {
      this.$emit('update:visible', n)
    },
  },
  computed: {
    newdata() {
      pinyin.setOptions({checkPolyphone: false, charCase: 1});

      let name = this.props.label;
      let key = this.props.key;

      if (Array.isArray(this.data)) {
        let data = this.data.map(item => {
          let objitem = {disabled: false, ...item};
          if (this.disabledData.length !== 0) {
            this.disabledData.forEach(element => {
              if (objitem[name] === element) objitem.disabled = true;
            });
          }
          return objitem;
        });
        return data.map(item => {
          let pinYin = pinyin.getFullChars(item[this.props.label]);
          let renPing = pinyin.getCamelChars(item[this.props.label]);
          const obj = {
            pinyins: pinYin,
            renPing: renPing,
            [name]: item[this.props.label],
            [key]: item[this.props.key],
            disabled: item.disabled,
            id:item.id
          };
          return obj;
        });
      } else {
        return []; // 在没有数据时返回一个空数组
      }
    }
  },
  methods: {
    // 新增弹窗查询按钮
    handleQuery(event) {
      this.inputVal = event
    },
    // 穿梭框查询数据过滤（双条件）
    filterMethod(query, item) {
      return item.pinyins.indexOf(this.inputVal) > -1 || item.renPing.indexOf(this.inputVal) > -1
    },
    // 关闭清除所有数据
    handelClose() {
      this.transferValue = []
      this.inputVal = ''
      this.visible = false
    },
    // 确定按钮，返回当前数据和修改后的数据
    handelTransferSave() {
      let that = this
      let datas = that.newdata
      const findtra = datas.findIndex(item => item.oid === that.transferValue[0].oid)
      datas[findtra].disabled = true
      const obj = {
        // 当前选择的数据
        value: this.transferValue,
        // 总数据
        data: datas
      }
      that.$emit('save', obj)
      that.transferValue = []
      that.inputVal = ''
    },
  }
}

</script>
<style lang="scss" scoped>
.text_tip {
    padding: 10px 0;
    color: #F56C6C;
  padding: 10px 0;
  color: #F56C6C;
}
</style>
</style>