yw-ui-vue2 1.1.7 → 1.1.8

package/lib/yw-ui-vue2.umd.js

@@ -94262,8 +94262,8 @@ YwTransfer.install = function (Vue) {
   Vue.component(YwTransfer.name, transfer);
 };
 /* harmony default export */ var packages_Transfer = (YwTransfer);
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/babel-loader/lib/index.js!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/lib/config/vue-loader-v15-resolve-compat/vue-loader.js??vue-loader-options!./packages/CusTransfer/src/index.vue?vue&type=template&id=14548353&scoped=true
-var srcvue_type_template_id_14548353_scoped_true_render = function render() {
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/babel-loader/lib/index.js!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/lib/config/vue-loader-v15-resolve-compat/vue-loader.js??vue-loader-options!./packages/CusTransfer/src/index.vue?vue&type=template&id=7474c683&scoped=true
+var srcvue_type_template_id_7474c683_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', [_c('a-button', {
@@ -94272,46 +94272,582 @@ var srcvue_type_template_id_14548353_scoped_true_render = function render() {
     }
   }, [_vm._v("open")]), _vm._v(" "), _c('a-modal', {
     attrs: {
-      "visible": _vm.show
+      "visible": _vm.show,
+      "width": "800px"
     },
     on: {
       "cancel": _vm.changeShow
     }
-  }, [_c('div', [_vm._v("测试")])])], 1);
+  }, [_c('div', {
+    staticClass: "transferModal"
+  }, [_c('a-form-model', {
+    ref: "transferForm",
+    attrs: {
+      "model": _vm.form,
+      "rules": _vm.rules,
+      "colon": false
+    }
+  }, [_c('a-form-model-item', {
+    staticClass: "pool",
+    attrs: {
+      "labelAlign": "left",
+      "label": "资源池",
+      "prop": "resourcePoolValue",
+      "required": ""
+    }
+  }, [_c('a-cascader', {
+    staticStyle: {
+      "flex": "0.6"
+    },
+    attrs: {
+      "options": _vm.resourcePoolList,
+      "change-on-selec": "",
+      "placeholder": "请选择资源池",
+      "allowClear": ""
+    },
+    on: {
+      "change": value => _vm.changeTransferData('pool', value)
+    },
+    model: {
+      value: _vm.form.resourcePoolValue,
+      callback: function ($$v) {
+        _vm.$set(_vm.form, "resourcePoolValue", $$v);
+      },
+      expression: "form.resourcePoolValue"
+    }
+  }), _vm._v(" "), _c('a-button', {
+    attrs: {
+      "icon": "filter"
+    },
+    on: {
+      "click": _vm.showIpModal
+    }
+  }, [_vm._v("批量搜索")])], 1), _vm._v(" "), _c('a-form-model-item', {
+    staticClass: "category",
+    attrs: {
+      "labelCol": {
+        span: 2
+      },
+      "labelAlign": "left",
+      "prop": "resourceTypeValue"
+    }
+  }, [_c('div', {
+    staticClass: "left"
+  }, [_c('a-select', {
+    staticClass: "selectType",
+    staticStyle: {
+      "min-width": "88px"
+    },
+    attrs: {
+      "placeholder": "请选择",
+      "options": _vm.selectOpt
+    },
+    on: {
+      "change": _vm.changeType
+    },
+    model: {
+      value: _vm.form.resourceType,
+      callback: function ($$v) {
+        _vm.$set(_vm.form, "resourceType", $$v);
+      },
+      expression: "form.resourceType"
+    }
+  }), _vm._v(" "), _vm.form.resourceType === 'serviceTree' ? _c('a-cascader', {
+    staticStyle: {
+      "flex": "1"
+    },
+    attrs: {
+      "options": _vm.serviceTreeList,
+      "change-on-selec": "",
+      "placeholder": "请选择服务树节点",
+      "allowClear": "",
+      "show-search": true
+    },
+    on: {
+      "change": value => _vm.changeTransferData('resourceType', value)
+    },
+    model: {
+      value: _vm.form.resourceTypeValue,
+      callback: function ($$v) {
+        _vm.$set(_vm.form, "resourceTypeValue", $$v);
+      },
+      expression: "form.resourceTypeValue"
+    }
+  }) : _vm.form.resourceType === 'projectDesc' ? _c('a-select', {
+    attrs: {
+      "allowClear": "",
+      "showSearch": "",
+      "placeholder": "请输入项目描述",
+      "options": _vm.descsriptionList,
+      "filterOption": false
+    },
+    on: {
+      "change": value => _vm.changeTransferData('resourceType', value),
+      "search": _vm.fetchApi
+    },
+    model: {
+      value: _vm.form.resourceTypeValue,
+      callback: function ($$v) {
+        _vm.$set(_vm.form, "resourceTypeValue", $$v);
+      },
+      expression: "form.resourceTypeValue"
+    }
+  }, [_c('template', {
+    slot: "notFoundContent"
+  }, [!_vm.descsriptionList.length > 0 ? _c('a-spin', {
+    attrs: {
+      "size": "small"
+    }
+  }) : _c('a-empty')], 1)], 2) : _vm.form.resourceType === 'customerDesc' ? _c('a-select', {
+    attrs: {
+      "allowClear": "",
+      "showSearch": "",
+      "placeholder": "请输入客户描述",
+      "options": _vm.descsriptionList,
+      "filterOption": false
+    },
+    on: {
+      "change": value => _vm.changeTransferData('resourceType', value),
+      "search": _vm.fetchApi
+    },
+    model: {
+      value: _vm.form.resourceTypeValue,
+      callback: function ($$v) {
+        _vm.$set(_vm.form, "resourceTypeValue", $$v);
+      },
+      expression: "form.resourceTypeValue"
+    }
+  }, [_c('template', {
+    slot: "notFoundContent"
+  }, [!_vm.descsriptionList.length > 0 ? _c('a-spin', {
+    attrs: {
+      "size": "small"
+    }
+  }) : _c('a-empty')], 1)], 2) : _vm._e()], 1), _vm._v(" "), _vm.form.resourceType === 'serviceTree' ? _c('div', [_c('a-checkbox', {
+    on: {
+      "change": _vm.bindService
+    }
+  }, [_vm._v("绑定服务")]), _vm._v(" "), _c('a-tooltip', {
+    attrs: {
+      "placement": "top",
+      "title": "所选资源随服务下挂载资源实时更新"
+    }
+  }, [_c('a-icon', {
+    attrs: {
+      "type": "question-circle"
+    }
+  })], 1)], 1) : _vm._e()]), _vm._v(" "), _c('a-form-model-item', {
+    attrs: {
+      "labelCol": {
+        span: 2
+      },
+      "labelAlign": "left",
+      "prop": "selectedKeys"
+    }
+  }, [_c('a-transfer', _vm._b({
+    attrs: {
+      "list-style": {
+        width: '45%',
+        height: '300px'
+      }
+    },
+    on: {
+      "change": _vm.handleChange,
+      "selectChange": _vm.handleSelectChange
+    }
+  }, 'a-transfer', {
+    ..._vm.transferConfig
+  }, false), [_c('span', {
+    attrs: {
+      "slot": "notFoundContent"
+    },
+    slot: "notFoundContent"
+  }, [_vm._v(" 暂无数据 ")])])], 1)], 1), _vm._v(" "), _c('BatchSelectIP', {
+    attrs: {
+      "visible": _vm.ipModalShow
+    },
+    on: {
+      "update:visible": function ($event) {
+        _vm.ipModalShow = $event;
+      },
+      "confirm": _vm.getIpList
+    }
+  })], 1)])], 1);
+};
+var srcvue_type_template_id_7474c683_scoped_true_staticRenderFns = [];
+
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/babel-loader/lib/index.js!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/lib/config/vue-loader-v15-resolve-compat/vue-loader.js??vue-loader-options!./packages/CusTransfer/src/BatchSelectIP.vue?vue&type=template&id=71ec47d2&scoped=true
+var BatchSelectIPvue_type_template_id_71ec47d2_scoped_true_render = function render() {
+  var _vm = this,
+    _c = _vm._self._c;
+  return _c('a-modal', {
+    attrs: {
+      "title": "批量搜索",
+      "visible": _vm.show
+    },
+    on: {
+      "ok": _vm.confirm,
+      "cancel": _vm.close
+    }
+  }, [_c('a-form-model', {
+    ref: "ipForm",
+    attrs: {
+      "model": _vm.form,
+      "rules": _vm.rules,
+      "colon": false
+    }
+  }, [_c('a-form-model-item', {
+    staticClass: "pool",
+    attrs: {
+      "labelAlign": "left",
+      "label": "资源池IP地址",
+      "prop": "ipList",
+      "required": ""
+    }
+  }, [_c('a-textarea', {
+    attrs: {
+      "rows": 4,
+      "placeholder": "请输入IP地址，可以输入多个，用英文逗号隔开",
+      "allow-clear": ""
+    },
+    model: {
+      value: _vm.form.ipList,
+      callback: function ($$v) {
+        _vm.$set(_vm.form, "ipList", $$v);
+      },
+      expression: "form.ipList"
+    }
+  })], 1)], 1)], 1);
 };
-var srcvue_type_template_id_14548353_scoped_true_staticRenderFns = [];
+var BatchSelectIPvue_type_template_id_71ec47d2_scoped_true_staticRenderFns = [];
 
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/babel-loader/lib/index.js!./node_modules/@vue/cli-service/lib/config/vue-loader-v15-resolve-compat/vue-loader.js??vue-loader-options!./packages/CusTransfer/src/BatchSelectIP.vue?vue&type=script&lang=js
+/* harmony default export */ var BatchSelectIPvue_type_script_lang_js = ({
+  name: "BatchSelect",
+  data() {
+    return {
+      form: {
+        ipList: ""
+      },
+      rules: {
+        ipList: [{
+          required: true,
+          message: "请输入IP地址"
+        }, {
+          pattern: /^[0-9,.]+$/,
+          message: "请按格式输入IP地址"
+        }]
+      },
+      show: false
+    };
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  watch: {
+    visible(val) {
+      this.show = val;
+    }
+  },
+  methods: {
+    confirm() {
+      this.$refs.ipForm.validate(valid => {
+        if (valid) {
+          const res = this.form.ipList.split(",");
+          // console.log(res)
+          this.$emit("confirm", res);
+          this.close();
+        }
+      });
+    },
+    /**
+     * @description: 关闭弹窗
+     */
+    close() {
+      this.$refs.ipForm.resetFields();
+      this.$emit("update:visible", false);
+    }
+  }
+});
+;// CONCATENATED MODULE: ./packages/CusTransfer/src/BatchSelectIP.vue?vue&type=script&lang=js
+ /* harmony default export */ var src_BatchSelectIPvue_type_script_lang_js = (BatchSelectIPvue_type_script_lang_js); 
+;// CONCATENATED MODULE: ./packages/CusTransfer/src/BatchSelectIP.vue
+
+
+
+
+
+/* normalize component */
+;
+var BatchSelectIP_component = normalizeComponent(
+  src_BatchSelectIPvue_type_script_lang_js,
+  BatchSelectIPvue_type_template_id_71ec47d2_scoped_true_render,
+  BatchSelectIPvue_type_template_id_71ec47d2_scoped_true_staticRenderFns,
+  false,
+  null,
+  "71ec47d2",
+  null
+  
+)
+
+/* harmony default export */ var BatchSelectIP = (BatchSelectIP_component.exports);
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/babel-loader/lib/index.js!./node_modules/@vue/cli-service/lib/config/vue-loader-v15-resolve-compat/vue-loader.js??vue-loader-options!./packages/CusTransfer/src/index.vue?vue&type=script&lang=js
+
+// type分类初始配置
+const selectOpt = [{
+  label: "服务树",
+  value: "serviceTree"
+}, {
+  label: "项目描述",
+  value: "projectDesc"
+}, {
+  label: "客户描述",
+  value: "customerDesc"
+}];
+// transfer默认配置
+const transferConfig = {
+  showSearch: true,
+  showSelectAll: true,
+  showArrow: true,
+  disabled: false,
+  titles: ["资源实列", "目标资源"],
+  searchPlaceholder: "请输入搜索内容",
+  render: item => `${item.title || item.description}`,
+  targetKeys: [],
+  selectedKeys: undefined,
+  dataSource: []
+};
+// modal弹框配置
+const modalConfig = {
+  visible: false,
+  title: "选择资源",
+  width: 700
+};
 /* harmony default export */ var CusTransfer_srcvue_type_script_lang_js = ({
   name: "YwCusTransfer",
+  components: {
+    BatchSelectIP: BatchSelectIP
+  },
+  props: {
+    // 显示资源
+    resourcePoolValue: {
+      type: Array,
+      default: () => []
+    },
+    // 资源池
+    resourcePoolList: {
+      type: Array,
+      default: () => []
+    },
+    // 类型--服务树，项目描述，客户描述
+    resourceType: {
+      type: String,
+      default: "serviceTree"
+    },
+    // 类型--值
+    resourceTypeValue: {
+      type: Array | String,
+      default: () => []
+    },
+    // 类型--列表
+    resourceTypeList: {
+      type: Array,
+      default: () => []
+    },
+    // 穿梭框配置参数
+    transferProps: {
+      type: Object,
+      default: () => {}
+    },
+    modalProps: {
+      type: Object,
+      default: () => {}
+    }
+  },
   data() {
     return {
+      // 表单数据
+      form: {},
+      rules: {
+        resourcePoolValue: [{
+          required: true,
+          message: "请选择资源池"
+        }]
+      },
+      selectOpt,
+      transferConfig,
+      ipModalShow: false,
+      serviceTreeList: [],
+      descsriptionList: [],
+      modalConfig,
       show: false
     };
   },
+  watch: {
+    // 资源显示
+    resourcePoolValue(newVal) {
+      // console.log(newVal, this.resourceTypeValue, "poolVal-哈哈-transfer");
+      this.form.resourcePoolValue = newVal;
+    },
+    // 类型分类type
+    resourceType(newVal) {
+      this.form.resourceType = newVal || "serviceTree";
+    },
+    // 分类list显示
+    resourceTypeValue(newVal) {
+      // console.log(newVal, this.resourceTypeValue, "poolVal-哈哈-transfer");
+      this.form.resourceTypeValue = newVal;
+    },
+    // 分类list
+    resourceTypeList(newVal) {
+      // 服务树list
+      if (this.form.resourceType === "serviceTree") {
+        this.serviceTreeList = newVal || [];
+        // 描述list
+      } else {
+        this.descsriptionList = newVal || [];
+      }
+    },
+    // 穿梭框配置信息
+    transferProps(newVal, oldVal) {
+      this.transferConfig = {
+        ...this.transferConfig,
+        ...newVal
+      };
+    },
+    // 弹窗配置信息
+    modalProps(newVal, oldVal) {
+      // console.log(newVal, oldVal, this.modalConfig, "modalProps");
+      this.$set(this, "modalConfig", {
+        ...modalConfig,
+        ...newVal
+      });
+    }
+  },
+  created() {
+    // 初始化
+    this.form = {
+      resourcePoolValue: this.resourcePoolValue,
+      // 显示资源池
+      resourceTypeValue: this.resourceTypeValue,
+      // 显示类型值名称
+      resourceType: this.resourceType,
+      // 类型
+      selectedKeys: this.transferProps?.targetKeys || [] // 选定的ip
+    };
+    // 穿梭框配置参数合并
+    this.transferConfig = {
+      ...transferConfig,
+      ...this.transferProps,
+      targetKeys: this.transferProps?.targetKeys ? this.transferProps?.targetKeys : []
+    };
+    // 弹窗配置参数合并
+    this.modalConfig = {
+      ...modalConfig,
+      ...this.modalProps
+    };
+    this.serviceTreeList = this.resourceTypeList || [];
+    // console.log(this.form, "this.form--transfer--");
+  },
+  mounted() {},
   methods: {
     changeShow() {
       this.show = !this.show;
+    },
+    // 模糊搜索描述列表
+    fetchApi(value) {
+      // console.log(value, "value");
+      value.trim() && this.$emit("updateTypeList", {
+        key: value,
+        type: this.form.resourceType
+      });
+    },
+    // changeType
+    changeType(key) {
+      this.form.resourceTypeValue = key === "serviceTree" ? [] : undefined;
+      this.descsriptionList = [];
+      this.transferConfig.disabled = false;
+      this.transferConfig.targetKeys = [];
+      this.transferConfig.selectedKeys = [];
+    },
+    // ip集合选中--批量确定
+    getIpList(value) {
+      this.transferConfig.selectedKeys = value;
+    },
+    // 批量搜索显示
+    showIpModal() {
+      this.ipModalShow = true;
+    },
+    // 穿梭
+    handleChange(targetKeys, direction, moveKeys) {
+      this.transferConfig.targetKeys = targetKeys;
+      this.form.selectedKeys = targetKeys;
+    },
+    // 穿梭框选中
+    handleSelectChange(sourceSelectedKeys, targetSelectedKeys) {
+      this.transferConfig.selectedKeys = [...sourceSelectedKeys, ...targetSelectedKeys];
+    },
+    // 提交确定
+    submit() {
+      this.$refs.transferForm.validate(valid => {
+        if (valid) {
+          this.modalConfig.ok(this.form);
+          this.cancel();
+        }
+      });
+    },
+    // 关闭
+    cancel() {
+      this.$refs.transferForm.resetFields();
+      this.modalConfig.cancel(false);
+      this.transferConfig.selectedKeys = [];
+      this.transferConfig.targetKeys = [];
+      this.form.resourceType = "serviceTree";
+      this.form.resourceTypeValue = [];
+    },
+    // 绑定服务
+    bindService() {
+      this.transferConfig.disabled = !this.transferConfig.disabled;
+    },
+    // 切换typeValue，更换TransferData
+    changeTransferData(type, value) {
+      // console.log("updateTransferData", {
+      // 	key: value,
+      // 	type: type,
+      // });
+      this.$emit("updateTransferData", {
+        key: value,
+        type: type
+      });
     }
   }
 });
 ;// CONCATENATED MODULE: ./packages/CusTransfer/src/index.vue?vue&type=script&lang=js
  /* harmony default export */ var packages_CusTransfer_srcvue_type_script_lang_js = (CusTransfer_srcvue_type_script_lang_js); 
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/@vue/cli-service/lib/config/vue-loader-v15-resolve-compat/vue-loader.js??vue-loader-options!./packages/CusTransfer/src/index.vue?vue&type=style&index=0&id=7474c683&prod&lang=less&scoped=true
+// extracted by mini-css-extract-plugin
+
+;// CONCATENATED MODULE: ./packages/CusTransfer/src/index.vue?vue&type=style&index=0&id=7474c683&prod&lang=less&scoped=true
+
 ;// CONCATENATED MODULE: ./packages/CusTransfer/src/index.vue
 
 
 
+;
 
 
 /* normalize component */
-;
+
 var CusTransfer_src_component = normalizeComponent(
   packages_CusTransfer_srcvue_type_script_lang_js,
-  srcvue_type_template_id_14548353_scoped_true_render,
-  srcvue_type_template_id_14548353_scoped_true_staticRenderFns,
+  srcvue_type_template_id_7474c683_scoped_true_render,
+  srcvue_type_template_id_7474c683_scoped_true_staticRenderFns,
   false,
   null,
-  "14548353",
+  "7474c683",
   null
   
 )