vd/frontend/src/views/virtual/properties/js/agent.js

export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default() {
        return null;
      }
    },
    isUpdate: {
      type: Boolean,
      default() {
        return false;
      }
    },
    agents: {
      type: Array,
      default() {
        return [];
      }
    },
    platforms: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      my_show: false,
      loading: false,
      dataAgent: [],
      columns: [
        {
          title: '代理商',
          key: 'agent',
          minWidth: 180,
          render: (h, context) => {
            let options = [];

            for (let index = 0; index < this.agents.length; index++) {
              const element = this.agents[index];
              options.push(h('Option', {
                props: {
                  label: element.name,
                  value: element.id
                }
              }, element.name));
            }

            return h('Select', {
              props: {
                disabled: !this.isUpdate,
                value: context.row.agent,
                size: 'small',
                transfer: true
              },
              on: {
                input: (val) => {
                  context.row.agent = val;
                  this.dataAgent[context.index]['agent'] = val;
                }
              }
            }, options);
          }
        },
        {
          title: '平台/API',
          key: 'platform',
          minWidth: 180,
          render: (h, context) => {
            let options = [];

            for (let index = 0; index < this.platforms.length; index++) {
              const element = this.platforms[index];
              options.push(h('Option', {
                props: {
                  label: element,
                  value: index
                }
              }, element));
            }

            return h('Select', {
              props: {
                disabled: !this.isUpdate,
                value: context.row.platform,
                size: 'small',
                transfer: true
              },
              on: {
                input: (val) => {
                  context.row.platform = val;
                  this.dataAgent[context.index]['platform'] = val;
                }
              }
            }, options);
          }
        },
        {
          title: '占比',
          minWidth: 120,
          render: (h, context) => {
            return h('InputNumber', {
              props: {
                max: 100,
                min: 0,
                value: context.row.percentages,
                disabled: !this.isUpdate
              },
              on: {
                'on-change': (val) => {
                  context.row.percentages = val;
                  this.dataAgent[context.index]['percentages'] = val;
                }
              }
            });
          }
        },
        {
          title: '平台名称',
          minWidth: 120,
          render: (h, context) => {
            return h('Input', {
              props: {
                value: context.row.name,
                disabled: !this.isUpdate
              },
              on: {
                'on-change': (event) => {
                  context.row.name = event.data;
                  this.dataAgent[context.index]['name'] = event.data;
                }
              }
            });
          }
        }
      ]
    };
  },
  watch: {
    show(bool) {
      this.my_show = bool;
      if (bool) {
        if (this.data) {
          this.dataAgent = this.data.agent ? this.data.agent : [];
        }
      }
    }
  },
  methods: {
    ok() {
      let total = this.dataAgent.reduce((acc, cur) => {
        return acc + cur.percentages;
      }, 0);

      if (total !== 100) {
        return this.$Message.error('占比总和必须为100');
      }

      let agent = [];

      for (const key in this.dataAgent) {
        const element = this.dataAgent[key];

        if (element.agent === undefined) {
          return this.$Message.error('请选择代理商');
        }

        if (element.platform === undefined) {
          return this.$Message.error('请选择平台');
        }

        if (element.percentages < 0 || element.percentages > 100) {
          return this.$Message.error('百分比填写不正确');
        }

        if (element.name === undefined) {
          return this.$Message.error('请输入平台名称');
        }

        agent.push(element);
      }

      let data = JSON.parse(JSON.stringify(this.data));
      data.agent = agent;

      console.log('agent-success', data);
      this.$emit('agent-success', data);
      this.clear();
    },
    visibleChange(bool) {
      if (!bool) {
        this.$emit('update:show', false);
      }
    },
    clear() {
      this.dataAgent = [];
      this.my_show = false;
    },
    add() {
      if (!this.agents.length) {
        return this.$Message.error('请先添加代理商');
      }

      if (!this.platforms.length) {
        return this.$Message.error('请先添加平台配置');
      }

      this.dataAgent.push({ percentages: 0 });
    }
  }
};