w-vue-middle/dataSourceService/wSelectColumns/service.js

统一公共服务组件

/*
 * @Author: Jason Liu
 * @Date: 2022-11-23 13:27:02
 * @Desc:
 */

const sourceColumnSelection = require('../sourceColumnSelection').default;

import draggable from 'vuedraggable';

export default {
  components: { sourceColumnSelection, draggable },
  props: {
    //选中的对象值
    value: {
      type: Array,
      default: undefined,
    },
    placeholder: {
      type: String,
      default: $t('请选择'),
    },
    loading: {
      type: Boolean,
      default: false,
    },
    //内容参数，value为关键字段
    options: {
      type: Array,
      default: () => {
        return [];
      },
    },
    //选中的数据对象
    selectedData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    //是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      inLoading: this.loading,
      sourceColumns: [], //选择的字段列表
      columnList: this.value || [],
      fieldList: [], //选择字段列表
      focused: false, //激活
      columnOptions: [],
    };
  },
  created() {
    this.getColumnOptions();
  },
  methods: {
    /**
     * @Author: Jason Liu
     * @description: 获取数据读取对象
     */
    getDataList() {
      this.fieldList = this.options.filter((column) => {
        return this.columnList.indexOf(column.columnName) > -1;
      });
    },
    /**
     * @Author: Jason Liu
     * @description: 获取配置信息
     */
    getColumnOptions() {
      this.columnOptions = this.options.map((option) => {
        return {
          ...option,
          parentId: undefined,
        };
      });
      this.getDataList();
    },
    /**
     * @Author: Jason Liu
     * @description: 点击行事件
     */
    clickColumn(row) {
      this.getDataList();
      this.$emit('change', row);
    },
    /**
     * @Author: Jason Liu
     * @description: 标准数据
     */
    standardField(row) {
      let index = this.columnList.indexOf(row.columnName);
      if (index > -1) {
        this.columnList.splice(index, 1);
      }
      this.$emit('change', row);
      this.getDataList();
    },
  },
  watch: {
    value(val) {
      this.columnList = val || [];
      this.getDataList();
    },
    columnList(val) {
      this.$emit('input', val);
    },
    options(val) {
      this.getColumnOptions();
    },
    loading(val) {
      this.inLoading = val;
    },
    inLoading(val) {
      this.$emit('update:loading', val);
    },
    fieldList(val) {
      this.$emit('update:selectedData', val);
    },
  },
};