zujian

packages/agCascadeOptional/index.js

@@ -0,0 +1,9 @@
+import agCascadeOptional from './src'
+
+// 为组件提供 install 安装方法，供按需引入
+agCascadeOptional.install = function (Vue) {
+    Vue.component(agCascadeOptional.name, agCascadeOptional)
+}
+
+// 导出组件
+export default agCascadeOptional

packages/agCascadeOptional/src/index.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="ag-CascadeOptional">
+    <ag-input
+      class="ag_input_group"
+      placeholder="请输入内容"
+      :value="value[1]"
+      v-bind="config.input"
+      v-on="Listeners.input"
+    >
+      <ag-select
+        slot="prepend"
+        :clearable="false"
+        placeholder="请选择"
+        :value="value[0]"
+        v-bind="config.select"
+        v-on="Listeners.select"
+        class="ag_select_group"
+      >
+        <template slot="prefix">
+          {{
+            (config.select.options.find((e) => e.value == value[0]) || {}).label
+          }}
+        </template>
+      </ag-select>
+    </ag-input>
+  </div>
+</template>
+
+<script>
+import agSelect from "../../agSelect/src/index.vue";
+import agInput from "../../agInput/src/index.vue";
+
+export default {
+  name: "agCascadeOptional",
+  components: {
+    agSelect,
+    agInput,
+  },
+  props: {
+    value: {
+      type: Array,
+      default: () => {
+        return [null, null];
+      },
+    },
+  },
+  data() {
+    return {
+      values: [null, null],
+    };
+  },
+  computed: {
+    config() {
+      const input_config = this.getAfterAgo(this.$attrs, "after_");
+      const input = {
+        ...this.$attrs,
+        ...input_config,
+      };
+      const select_configs = this.getAfterAgo(this.$attrs, "ago_");
+      const select = {
+        ...this.$attrs,
+        ...select_configs,
+      };
+      console.log(input, select);
+      return {
+        input,
+        select,
+      };
+    },
+    Listeners() {
+      const new_listeners = Object.assign({}, this.$listeners, {
+        after_input: (value) => {
+          this.$emit("input", [value, this.value[1] ? this.value[1] : ""]);
+        },
+        ago_input: (value) => {
+          this.$emit("input", [this.value[0] ? this.value[0] : "", value]);
+        },
+      });
+      const select = this.getAfterAgo(new_listeners, "after_");
+      const input = this.getAfterAgo(new_listeners, "ago_");
+      return {
+        select,
+        input,
+      };
+    },
+  },
+  watch: {
+    value: {
+      handler(newVal) {
+        if (!Array.isArray(newVal)) {
+          throw new Error("agDatePicker data请传入数组");
+        }
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    getAfterAgo(attr, prefix) {
+      const config = {};
+      for (const key in attr) {
+        if (attr.hasOwnProperty(key) && key.startsWith(prefix)) {
+          const newKey = key.substring(prefix.length);
+          config[newKey] = attr[key];
+        }
+      }
+      return config;
+    },
+  },
+};
+</script>
+
+<style scoped lang='scss'>
+::v-deep {
+  .el-input-group__prepend {
+    background-color: #fff;
+    border: none !important;
+  }
+  .el-input__suffix {
+    z-index: 99;
+    transition: none !important;
+  }
+  .el-input__inner {
+    position: relative;
+    left: 0;
+    border: 1px solid #dcdfe6 !important;
+    padding: 0 5px 0 15px !important;
+    &:hover {
+      position: relative;
+      z-index: 20 !important;
+      border: 1px solid #c0c4cc !important;
+    }
+    &:focus {
+      position: relative;
+      z-index: 20 !important;
+      border: 1px solid #1890ff !important;
+    }
+  }
+}
+
+::v-deep .ag_select_group {
+  min-width: 90px;
+  max-width: 140px;
+  color: #606266;
+  text-align: start;
+  .el-input__prefix {
+    position: relative;
+    left: 0;
+    padding: 0 5px 0 15px;
+    box-sizing: border-box;
+    color: #606266;
+    visibility: hidden;
+  }
+
+  .el-input__inner {
+    border-radius: 4px 0 0 4px;
+    z-index: 1;
+  }
+}
+::v-deep .el-select {
+  margin: 0 -21px !important;
+  box-sizing: border-box;
+}
+</style>

packages/agMultifunctionSearch/index.js

@@ -1,9 +1,9 @@
-// import pedestal from './src'
+import agMultifunctionSearch from './src'
 
-// // 为组件提供 install 安装方法，供按需引入
+// 为组件提供 install 安装方法，供按需引入
-// pedestal.install = function (Vue) {
+agMultifunctionSearch.install = function (Vue) {
-//     Vue.component(pedestal.name, pedestal)
+    Vue.component(agMultifunctionSearch.name, agMultifunctionSearch)
-// }
+}
 
-// // 导出组件
+// 导出组件
-// export default pedestal
+export default agMultifunctionSearch

packages/agMultifunctionSearch/src/index.vue

@@ -1,5 +1,20 @@
 <template>
   <div class="ag-MultifunctionSearch">
+    <ag-select
+      slot="prepend"
+      :clearable="false"
+      placeholder="请选择"
+      :value="value[0]"
+      v-bind="config.select"
+      v-on="Listeners.select"
+      class="ag_select_group"
+    >
+      <template slot="prefix">
+        {{
+          (config.select.options.find((e) => e.value == value[0]) || {}).label
+        }}
+      </template>
+    </ag-select>
     <ag-input
       class="ag_input_group"
       placeholder="请输入内容"
@@ -7,22 +22,6 @@
       v-bind="config.input"
       v-on="Listeners.input"
     >
-      <ag-select
-        slot="prepend"
-        :clearable="false"
-        placeholder="请选择"
-        :value="value[0]"
-        v-bind="config.select"
-        v-on="Listeners.select"
-        class="ag_select_group"
-      >
-        <template slot="prefix">
-          {{
-            (config.select.options.find((e) => e.value == value[0]) || {}).label
-          }}
-        </template>
-      </ag-select>
-      <i slot="append" class="el-icon-search">999</i>
     </ag-input>
   </div>
 </template>
@@ -111,54 +110,8 @@ export default {
 </script>
 
 <style scoped lang='scss'>
-::v-deep {
+.ag-MultifunctionSearch {
-  .el-input-group__prepend {
+  display: flex;
-    background-color: #fff;
+  align-items: center;
-    border: none !important;
-  }
-  .el-input__suffix {
-    z-index: 99;
-    transition: none !important;
-  }
-  .el-input__inner {
-    position: relative;
-    left: 0;
-    border: 1px solid #dcdfe6 !important;
-    padding: 0 5px 0 15px !important;
-    &:hover {
-      position: relative;
-      z-index: 20 !important;
-      border: 1px solid #c0c4cc !important;
-    }
-    &:focus {
-      position: relative;
-      z-index: 20 !important;
-      border: 1px solid #1890ff !important;
-    }
-  }
-}
-
-::v-deep .ag_select_group {
-  min-width: 90px;
-  max-width: 140px;
-  color: #606266;
-  text-align: start;
-  .el-input__prefix {
-    position: relative;
-    left: 0;
-    padding: 0 5px 0 15px;
-    box-sizing: border-box;
-    color: #606266;
-    visibility: hidden;
-  }
-
-  .el-input__inner {
-    border-radius: 4px 0 0 4px;
-    z-index: 1;
-  }
-}
-::v-deep .el-select {
-  margin: 0 -21px !important;
-  box-sizing: border-box;
 }
 </style>

src/App.vue

@@ -13,6 +13,24 @@
       </template> -->
     </ag-select>
     <ag-NumberRange v-model="values"> </ag-NumberRange>
+    <el-form
+      :model="ruleForm"
+      :rules="rules"
+      ref="ruleForm"
+      class="demo-ruleForm"
+    >
+      <el-form-item prop="pass">
+        <ag-CascadeOptional
+          size="small"
+          ref="ttt"
+          v-model="ruleForm.pass"
+          :after_clearable="true"
+          :ago_options="a_options"
+        >
+        </ag-CascadeOptional>
+      </el-form-item>
+    </el-form>
+
     <ag-MultifunctionSearch
       size="small"
       ref="ttt"
@@ -43,6 +61,7 @@ import agDatePicker from "../packages/agDatePicker/src/index.vue";
 import agInput from "../packages/agInput/src/index.vue";
 import agSelect from "../packages/agSelect/src/index.vue";
 import agNumberRange from "../packages/agNumberRange/src/index.vue";
+import agCascadeOptional from "../packages/agCascadeOptional/src/index.vue";
 import agMultifunctionSearch from "../packages/agMultifunctionSearch/src/index.vue";
 export default {
   components: {
@@ -51,13 +70,36 @@ export default {
     agInput,
     agSelect,
     agNumberRange,
+    agCascadeOptional,
     agMultifunctionSearch,
   },
   data() {
+    var validatePass = (rule, value, callback) => {
+      for (const key in value) {
+        if (!value[key]) {
+          alert("错误");
+          callback();
+        }
+      }
+
+      // if (value === "") {
+      //   callback(new Error("请输入密码"));
+      // } else {
+      //   if (this.ruleForm.checkPass !== "") {
+      //     this.$refs.ruleForm.validateField("checkPass");
+      //   }
+      // }
+    };
     return {
+      ruleForm: {
+        pass: [],
+      },
+      rules: {
+        pass: [{ validator: validatePass, trigger: "blur" }],
+      },
       value: "选项1",
       a_value: "59584",
-      values: ['选项1',999],
+      values: ["选项1", 999],
       options: [
         {
           label: "热门城市",