{"remainingRequest":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/node_modules/vue-loader/lib/index.js??vue-loader-options!/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/src/tool/form/ConfigForm.vue?vue&type=style&index=0&id=78009953&scoped=true&lang=stylus","dependencies":[{"path":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/src/tool/form/ConfigForm.vue","mtime":1742646402774},{"path":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/node_modules/css-loader/dist/cjs.js","mtime":1743264596127},{"path":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":1743264597030},{"path":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/node_modules/postcss-loader/src/index.js","mtime":1743264596321},{"path":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/node_modules/stylus-loader/index.js","mtime":1743264596421},{"path":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/node_modules/style-resources-loader/lib/index.js","mtime":1743264596701},{"path":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/node_modules/cache-loader/dist/cjs.js","mtime":1743264595665},{"path":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/node_modules/vue-loader/lib/index.js","mtime":1743264596512}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:Ci5mb3JtLWNvbnRhaW5lciA+Pj4KICBkaXNwbGF5IGdyaWQKICBncmlkLXRlbXBsYXRlLWNvbHVtbnMgcmVwZWF0KGF1dG8tZmlsbCwgbWlubWF4KDI0MHB4LCAxZnIpKQogIGdyaWQtZ2FwIDEycHgKICBqdXN0aWZ5LWl0ZW1zIGNlbnRlcgoKLmZvcm0taXRlbQogIHdpZHRoIDEwMCUKICBkaXNwbGF5IGZsZXgKICBmbGV4LWRpcmVjdGlvbiBjb2x1bW4KCi5mb3JtLWl0ZW0tbGFiZWwgPj4+CiAgaGVpZ2h0IDIycHgKICBsaW5lLWhlaWdodCAyMnB4CiAgbWFyZ2luLWJvdHRvbSAxMHB4CiAgY29sb3IgcHJpbWFyeS10ZXh0LWNvbG9yCiAgZm9udC1zaXplIDE0cHgKICAuYnVpLXNlbGVjdC13cmFwcGVyLXBsYWluCiAgICBkaXNwbGF5IGZsZXgKICAgIGFsaWduLWl0ZW1zIGNlbnRlcgogICAgaGVpZ2h0IDIycHgKICAgIC5idWktc2VsZWN0LWljb24tcGxhaW4KICAgICAgbWFyZ2luLWJvdHRvbSAwCgouZm9ybS1pdGVtLWNvbnRlbnQKICAuY29udGVudAogICAgd2lkdGggMTAwJQogIC5lcnItbXNnCiAgICBtYXJnaW4tdG9wIDVweAogICAgZm9udC1zaXplIDEycHgKICAgIGNvbG9yIGVycm9yLWNvbG9yCg=="},{"version":3,"sources":["ConfigForm.vue"],"names":[],"mappings":";AAuSA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA","file":"ConfigForm.vue","sourceRoot":"src/tool/form","sourcesContent":["e<template lang=\"pug\">\n.form-container\n  .form-item(\n    v-for=\"option in options\",\n    :key=\"option.key\",\n    :class=\"{ [errorClass]: !!errors[option.key] }\"\n  )\n    .form-item-label\n      FormItemLabel(ref=\"formItem\", :option=\"option.label\")\n    .form-item-content\n      FormItemContent.content(ref=\"formItem\", :option=\"option\")\n      .err-msg(v-if=\"errors[option.key]\") {{ errors[option.key] }}\n</template>\n\n<script>\nimport FormItemLabel from './label';\nimport FormItemContent from './content';\nimport AsyncValidator from 'async-validator';\nimport {\n  isFunction,\n  isPlainObject,\n  cloneDeep,\n  isString,\n  omit,\n  noop,\n  has,\n} from 'lodash-es';\nimport {\n  getDefaultValue,\n  getInjectedEvents,\n  getFilterData,\n  notEmpty,\n} from './helpers';\n\nexport default {\n  name: 'ConfigForm',\n  components: {\n    FormItemLabel,\n    FormItemContent,\n  },\n  props: {\n    /**\n     * 组件核心配置项\n     */\n    options: {\n      type: Array,\n      default: () => [],\n    },\n    /**\n     * 用于匹配组件，用户可以根据接收到的组件名称返回想要的组件，返回结果将作为createElement的第一个参数\n     */\n    matcher: {\n      type: Function,\n      default: noop,\n    },\n    /**\n     * 简单的i18n处理函数\n     */\n    locale: {\n      type: Function,\n      default: key => key,\n    },\n    /**\n     * 为校验失败项添加的默认类名，外部可根据这个类名去定义/修改组件样式\n     */\n    errorClass: {\n      type: String,\n      default: 'form-item-error',\n    },\n  },\n  data() {\n    return {\n      formData: {},\n      flatOptions: {}, // 按key将原始选项存储\n      validator: null,\n      errors: {},\n    };\n  },\n  computed: {\n    result() {\n      const result = {};\n      const { formData, flatOptions } = this;\n      for (const [key, value] of Object.entries(flatOptions)) {\n        const { mapper } = value;\n\n        // mapper为false代表当前key值不需要加入最终结果\n        if (mapper === false) continue;\n\n        // mapper没有返回值的话默认使用当前值 formData[key] 兜底\n        const mapperValue = isFunction(mapper) ? mapper(formData) : formData[key];\n        // 空值过滤\n        if (isPlainObject(mapperValue)) {\n          Object.assign(result, getFilterData(mapperValue));\n        } else if (notEmpty(mapperValue)) {\n          result[key] = mapperValue;\n        }\n      }\n      return result;\n    },\n  },\n  watch: {\n    options: {\n      deep: true,\n      immediate: true,\n      handler() {\n        this.initFormData();\n      },\n    },\n    formData: {\n      deep: true,\n      handler(val) {\n        this.$emit('change', val);\n      },\n    },\n  },\n  methods: {\n    match(name) {\n      // 匹配组件\n      return this.matcher(name) ?? name;\n    },\n    initFormData() {\n      const formData = {};\n      const flatOptions = {};\n      const descriptor = {};\n\n      for (const item of this.options) {\n        const { label, key, rules } = item;\n\n        flatOptions[key] = item;\n        if (rules) {\n          // rules为函数时视为validator选项\n          descriptor[key] = isFunction(rules) ? { validator: rules } : rules;\n        }\n\n        // 设置默认值，考虑项目可能没有引入VueRouter\n        Object.assign(formData, getDefaultValue(item, this.$route?.query));\n\n        // 处理label\n        if (isPlainObject(label)) {\n          flatOptions[label.key] = label;\n        }\n      }\n\n      Object.assign(this, {\n        flatOptions,\n        formData,\n        validator: new AsyncValidator(descriptor),\n      });\n    },\n    getProps(key, options) {\n      const { formData } = this;\n      const {\n        props = {},\n        attrs = {},\n        on: event = {},\n        nativeOn: nativeEvent = {},\n        ...otherOptions\n      } = options;\n\n      /**\n       * 为事件处理函数注入setState参数\n       */\n      const on = getInjectedEvents(event, this.setState.bind(this));\n      const nativeOn = getInjectedEvents(nativeEvent, this.setState.bind(this));\n\n      const update = newVal => {\n        this.$set(this.errors, key, null); // 清除错误状态\n        this.setState({ [key]: newVal });\n      };\n\n      const allAttrs = Object.assign(attrs, props);\n\n      return {\n        ...otherOptions, // 其他选项直接原样传递，保证拓展性\n        formOption: this.flatOptions[key], // 基本信息，便于用户使用matcher自定义组件\n        key,\n        nativeOn,\n        on: Object.assign({}, on, {\n          input: isFunction(on.input)\n            ? newVal => { on.input(newVal); update(newVal); }\n            : update,\n        }),\n        /**\n         * 合并attrs/props，统一传给attrs\n         * Vue内部解析属性时，会将对应组件的`props从所有的attrs中提取出来\n         * 并将props传递给组件的props，剩下的attrs放进`$attrs`，所以默认传给attrs没有问题\n         * 但是如果默认传给props将可能会导致某些自定义组件无法正确解析得到`$attrs`\n         * 比如一些透传属性，组件中如果没有声明对应的props，没有被组件接搜的props属性将不会进入`$attrs`\n         * 从而导致内部使用到`$attrs`变量的地方出现问题\n         */\n        attrs: Object.assign({}, allAttrs, {\n          // 优先采用 value\n          value: has(allAttrs, 'value')\n            ? allAttrs.value\n            : formData[key],\n        }),\n      };\n    },\n    createComponent(options) {\n      const h = this.$createElement;\n      const { component, key, ...otherOptions } = options;\n\n      if (!key) {\n        console.error('Missing required prop \\'key\\'');\n      }\n\n      // component 要么是string要么是function\n      if (isString(component)) {\n        return h(\n          this.match(component),\n          this.getProps(key, otherOptions),\n        );\n      }\n\n      if (isFunction(component)) {\n        const result = component(h, this.formData, this.setState);\n        if (result instanceof this.$vnode.constructor) {\n          return result;\n        }\n        // 不是VNode就认为是对象，包含component、props、attrs、on等属性\n        return h(\n          this.match(result.component),\n          this.getProps(key, omit(result, 'component')),\n        );\n      }\n\n      console.warn('\\'component\\' must be string or function');\n    },\n    /**\n     * 下列函数外部可调用\n     */\n    getResult() {\n      return cloneDeep(this.result);\n    },\n    getFormData() {\n      return cloneDeep(this.formData);\n    },\n    setState(callback) {\n      const data = isFunction(callback) ? callback(this.formData) : callback;\n      if (isPlainObject(data)) {\n        Object.assign(this.formData, data);\n      }\n    },\n    reset() {\n      const formData = {};\n      for (const [key, value] of Object.entries(this.flatOptions)) {\n        const { default: defaultValue } = value;\n        formData[key] = isFunction(defaultValue)\n          ? defaultValue({}) // 外部可能解构，传入空对象防报错\n          : defaultValue;\n      }\n      this.formData = formData;\n      this.errors = {};\n    },\n    toQuery() {\n      const query = {};\n      for (const key of Object.keys(this.flatOptions)) {\n        const { toQuery, mapper } = this.flatOptions[key];\n        let value;\n        if (toQuery === true && isFunction(mapper)) {\n          value = mapper(this.formData) ?? this.formData[key];\n        } else if (isFunction(toQuery)) {\n          value = toQuery(this.formData);\n        }\n        // 空值过滤, value不为 undefined 或 null 或 ''\n        if (notEmpty(value)) {\n          if (isPlainObject(value)) {\n            Object.assign(query, getFilterData(value));\n          } else {\n            query[key] = value;\n          }\n        }\n      }\n      return query;\n    },\n    validate(options = {}) {\n      return this.validator?.validate(this.formData, options).then(() => {\n        this.errors = {};\n        return this.getResult();\n      }).catch(e => {\n        const { errors } = e;\n        if (Array.isArray(errors)) {\n          this.errors = errors.reduce((result, item) => {\n            result[item.field] = item.message;\n            return result;\n          }, {});\n        }\n        throw e;\n      });\n    },\n  },\n};\n</script>\n\n<style scoped lang=\"stylus\">\n.form-container >>>\n  display grid\n  grid-template-columns repeat(auto-fill, minmax(240px, 1fr))\n  grid-gap 12px\n  justify-items center\n\n.form-item\n  width 100%\n  display flex\n  flex-direction column\n\n.form-item-label >>>\n  height 22px\n  line-height 22px\n  margin-bottom 10px\n  color primary-text-color\n  font-size 14px\n  .bui-select-wrapper-plain\n    display flex\n    align-items center\n    height 22px\n    .bui-select-icon-plain\n      margin-bottom 0\n\n.form-item-content\n  .content\n    width 100%\n  .err-msg\n    margin-top 5px\n    font-size 12px\n    color error-color\n</style>\n"]}]}