| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284 | import { createNamespace } from '../utils';import Tab from '../tab';import Tabs from '../tabs';import Icon from '../icon';var _createNamespace = createNamespace('cascader'),    createComponent = _createNamespace[0],    bem = _createNamespace[1],    t = _createNamespace[2];export default createComponent({  props: {    title: String,    value: [Number, String],    fieldNames: Object,    placeholder: String,    activeColor: String,    options: {      type: Array,      default: function _default() {        return [];      }    },    closeable: {      type: Boolean,      default: true    },    showHeader: {      type: Boolean,      default: true    }  },  data: function data() {    return {      tabs: [],      activeTab: 0    };  },  computed: {    textKey: function textKey() {      var _this$fieldNames;      return ((_this$fieldNames = this.fieldNames) == null ? void 0 : _this$fieldNames.text) || 'text';    },    valueKey: function valueKey() {      var _this$fieldNames2;      return ((_this$fieldNames2 = this.fieldNames) == null ? void 0 : _this$fieldNames2.value) || 'value';    },    childrenKey: function childrenKey() {      var _this$fieldNames3;      return ((_this$fieldNames3 = this.fieldNames) == null ? void 0 : _this$fieldNames3.children) || 'children';    }  },  watch: {    options: {      deep: true,      handler: 'updateTabs'    },    value: function value(_value) {      var _this = this;      if (_value || _value === 0) {        var values = this.tabs.map(function (tab) {          var _tab$selectedOption;          return (_tab$selectedOption = tab.selectedOption) == null ? void 0 : _tab$selectedOption[_this.valueKey];        });        if (values.indexOf(_value) !== -1) {          return;        }      }      this.updateTabs();    }  },  created: function created() {    this.updateTabs();  },  methods: {    getSelectedOptionsByValue: function getSelectedOptionsByValue(options, value) {      for (var i = 0; i < options.length; i++) {        var option = options[i];        if (option[this.valueKey] === value) {          return [option];        }        if (option[this.childrenKey]) {          var selectedOptions = this.getSelectedOptionsByValue(option[this.childrenKey], value);          if (selectedOptions) {            return [option].concat(selectedOptions);          }        }      }    },    updateTabs: function updateTabs() {      var _this2 = this;      if (this.value || this.value === 0) {        var selectedOptions = this.getSelectedOptionsByValue(this.options, this.value);        if (selectedOptions) {          var optionsCursor = this.options;          this.tabs = selectedOptions.map(function (option) {            var tab = {              options: optionsCursor,              selectedOption: option            };            var next = optionsCursor.filter(function (item) {              return item[_this2.valueKey] === option[_this2.valueKey];            });            if (next.length) {              optionsCursor = next[0][_this2.childrenKey];            }            return tab;          });          if (optionsCursor) {            this.tabs.push({              options: optionsCursor,              selectedOption: null            });          }          this.$nextTick(function () {            _this2.activeTab = _this2.tabs.length - 1;          });          return;        }      }      this.tabs = [{        options: this.options,        selectedOption: null      }];    },    onSelect: function onSelect(option, tabIndex) {      var _this3 = this;      this.tabs[tabIndex].selectedOption = option;      if (this.tabs.length > tabIndex + 1) {        this.tabs = this.tabs.slice(0, tabIndex + 1);      }      if (option[this.childrenKey]) {        var nextTab = {          options: option[this.childrenKey],          selectedOption: null        };        if (this.tabs[tabIndex + 1]) {          this.$set(this.tabs, tabIndex + 1, nextTab);        } else {          this.tabs.push(nextTab);        }        this.$nextTick(function () {          _this3.activeTab++;        });      }      var selectedOptions = this.tabs.map(function (tab) {        return tab.selectedOption;      }).filter(function (item) {        return !!item;      });      var eventParams = {        value: option[this.valueKey],        tabIndex: tabIndex,        selectedOptions: selectedOptions      };      this.$emit('input', option[this.valueKey]);      this.$emit('change', eventParams);      if (!option[this.childrenKey]) {        this.$emit('finish', eventParams);      }    },    onClose: function onClose() {      this.$emit('close');    },    renderHeader: function renderHeader() {      var h = this.$createElement;      if (this.showHeader) {        return h("div", {          "class": bem('header')        }, [h("h2", {          "class": bem('title')        }, [this.slots('title') || this.title]), this.closeable ? h(Icon, {          "attrs": {            "name": "cross"          },          "class": bem('close-icon'),          "on": {            "click": this.onClose          }        }) : null]);      }    },    renderOptions: function renderOptions(options, selectedOption, tabIndex) {      var _this4 = this;      var h = this.$createElement;      var renderOption = function renderOption(option) {        var isSelected = selectedOption && option[_this4.valueKey] === selectedOption[_this4.valueKey];        var Text = _this4.slots('option', {          option: option,          selected: isSelected        }) || h("span", [option[_this4.textKey]]);        return h("li", {          "class": bem('option', {            selected: isSelected          }),          "style": {            color: isSelected ? _this4.activeColor : null          },          "on": {            "click": function click() {              _this4.onSelect(option, tabIndex);            }          }        }, [Text, isSelected ? h(Icon, {          "attrs": {            "name": "success"          },          "class": bem('selected-icon')        }) : null]);      };      return h("ul", {        "class": bem('options')      }, [options.map(renderOption)]);    },    renderTab: function renderTab(item, tabIndex) {      var h = this.$createElement;      var options = item.options,          selectedOption = item.selectedOption;      var title = selectedOption ? selectedOption[this.textKey] : this.placeholder || t('select');      return h(Tab, {        "attrs": {          "title": title,          "titleClass": bem('tab', {            unselected: !selectedOption          })        }      }, [this.renderOptions(options, selectedOption, tabIndex)]);    },    renderTabs: function renderTabs() {      var _this5 = this;      var h = this.$createElement;      return h(Tabs, {        "attrs": {          "animated": true,          "swipeable": true,          "swipeThreshold": 0,          "color": this.activeColor        },        "class": bem('tabs'),        "model": {          value: _this5.activeTab,          callback: function callback($$v) {            _this5.activeTab = $$v;          }        }      }, [this.tabs.map(this.renderTab)]);    }  },  render: function render() {    var h = arguments[0];    return h("div", {      "class": bem()    }, [this.renderHeader(), this.renderTabs()]);  }});
 |