m-eleplus-crud 0.0.3 → 0.0.4

package/es/packages/components/form/src/form.mjs

@@ -1,627 +1,30 @@
-import { defineComponent, useSlots, ref, computed, watch, resolveComponent, openBlock, createElementBlock, createCommentVNode, createBlock, unref, withModifiers, withCtx, createVNode, Fragment, renderList, renderSlot, mergeProps, createTextVNode, toDisplayString, createElementVNode, normalizeStyle } from 'vue';
-import { get, set, cloneDeep } from 'lodash-unified';
-import { formProps, formEmits } from './form2.mjs';
-import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.mjs';
-import { useGlobalConfig } from '../../config-provider/src/hooks/use-global-config.mjs';
-import { debugWarn } from '../../../utils/error.mjs';
+import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
+import { useSizeProp } from '../../../hooks/use-size/index.mjs';
 
-const COMPONENT_NAME = "MForm";
-const __default__ = defineComponent({
-  name: COMPONENT_NAME
-});
-const _sfc_main = defineComponent({
-  ...__default__,
-  props: formProps,
-  emits: formEmits,
-  setup(__props, { expose: __expose }) {
-    const props = __props;
-    const slots = useSlots();
-    const globalConfig = useGlobalConfig();
-    const formRef = ref();
-    const INPUT_TYPES = [
-      "input",
-      "textarea",
-      "number",
-      "password",
-      "qrcode",
-      "barcode"
-    ];
-    const DATE_TYPES = [
-      "year",
-      "month",
-      "date",
-      "datetime",
-      "week",
-      "datetimerange",
-      "daterange",
-      "monthrange",
-      "yearrange",
-      "time",
-      "timerange"
-    ];
-    const NEED_DIC_TYPE = ["select", "checkbox", "radio", "switch"];
-    const formOption = ref({
-      labelWidth: "80px",
-      column: []
-    });
-    const detailTableRows = computed(() => {
-      const rows = [];
-      let currentRow = [];
-      let currentTotal = 0;
-      for (const item of formOption.value.column || []) {
-        const req = item.span || 12;
-        if (currentTotal + req > 24) {
-          rows.push(currentRow);
-          currentRow = [];
-          currentTotal = 0;
-        }
-        currentRow.push(item);
-        currentTotal += req;
-      }
-      if (currentRow.length)
-        rows.push(currentRow);
-      return rows;
-    });
-    const proxys = new Proxy(props.model, {
-      get(target, property) {
-        return get(target, property);
-      },
-      set(target, property, value) {
-        set(target, property, value);
-        return true;
-      }
-    });
-    const initValue = () => {
-      var _a;
-      if (formOption.value && formOption.value.column) {
-        for (let i = 0; i < ((_a = formOption.value.column) == null ? void 0 : _a.length); i++) {
-          const column = formOption.value.column[i];
-          if (column.prop && proxys[column.prop] === void 0) {
-            if (column.value) {
-              proxys[column.prop] = column.value;
-            } else {
-              const ARR_TYPES = [
-                "checkbox",
-                "datetimerange",
-                "daterange",
-                "monthrange",
-                "yearrange",
-                "timerange"
-              ];
-              if (column.type === "select" && column.multiple || ARR_TYPES.includes(column.type || "")) {
-                proxys[column.prop] = [];
-              } else {
-                proxys[column.prop] = "";
-              }
-            }
-          }
-        }
-      }
-    };
-    const getValueFormatByType = (type) => {
-      let format = "";
-      switch (type) {
-        case "yearrange":
-        case "year":
-          format = "YYYY";
-          break;
-        case "monthrange":
-        case "month":
-          format = "YYYY-MM";
-          break;
-        case "daterange":
-        case "week":
-        case "date":
-          format = "YYYY-MM-DD";
-          break;
-        case "datetimerange":
-        case "datetime":
-          format = "YYYY-MM-DD HH:mm:ss";
-          break;
-        case "time":
-          format = "HH:mm:ss";
-          break;
-      }
-      return format;
-    };
-    const getAllRemoteDics = () => {
-      var _a, _b, _c, _d;
-      const hasDicUrl = (_b = (_a = formOption.value) == null ? void 0 : _a.column) == null ? void 0 : _b.some((column) => column.dicUrl);
-      if (hasDicUrl && !((_c = globalConfig.value) == null ? void 0 : _c.httpGet)) {
-        debugWarn("MForm", "global config httpGet is null");
-        return;
-      }
-      const updateRemoteDic = (column) => {
-        return new Promise((resolve) => {
-          let isSuccess = false;
-          globalConfig.value.httpGet(column.dicUrl, column.dicQuery, column.dicHeaders).then((e) => {
-            const { list, label, value } = column.dicFormatter(e);
-            if (list && Array.isArray(list)) {
-              column["dicData"] = list.map((item) => {
-                const lastLabel = label.replace(/\{(\w+)\}/g, (match, key) => {
-                  return item[key] || match;
-                });
-                return {
-                  label: lastLabel,
-                  value: item[value]
-                };
-              });
-              isSuccess = true;
-            }
-          }).finally(() => {
-            if (!isSuccess) {
-              column["dicData"] = [];
-            }
-            resolve(null);
-          });
-        });
-      };
-      for (let i = 0; i < (((_d = formOption.value) == null ? void 0 : _d.column) || []).length; i++) {
-        const column = formOption.value.column[i];
-        if (column.dicUrl) {
-          if (!column.dicFormatter) {
-            debugWarn("MForm", "dicUrl and dicFormatter must be used together");
-            continue;
-          }
-          updateRemoteDic(column);
-        }
-      }
-    };
-    const formatDicValue = (row, column) => {
-      let dictLabel = "";
-      const findLabelByValue = (dicData, value) => {
-        const dictItem = (dicData || []).find((dict) => dict.value === value);
-        if (dictItem === void 0) {
-          return dictLabel;
-        }
-        return dictItem.label;
-      };
-      if (column.type === "select" && column.multiple || column.type === "checkbox") {
-        let values = [];
-        if (row[column.prop || ""] != null && row[column.prop || ""] != void 0 && row[column.prop || ""] !== "") {
-          if (Array.isArray(row[column.prop || ""])) {
-            values = row[column.prop || ""];
-          } else if (typeof row[column.prop || ""] === "string") {
-            values = row[column.prop || ""].split(",");
-          } else {
-            values = [row[column.prop || ""]];
-          }
-        }
-        const result = [];
-        for (const value of values) {
-          dictLabel = findLabelByValue(column.dicData || [], value);
-          if (dictLabel === void 0) {
-            break;
-          }
-          result.push(dictLabel);
-        }
-        return result.join(",");
-      }
-      dictLabel = findLabelByValue(column.dicData || [], row[column.prop || ""]);
-      return dictLabel;
-    };
-    const getDetailPic = (row, column) => {
-      if (!row || !row[column.prop || ""]) {
-        return [];
-      }
-      const pics = row[column.prop || ""].split(column.imgSuffix || ";").map((pic) => (column.imgPrefix || "") + pic);
-      return pics;
-    };
-    const getValueColspan = (item, rows, index) => {
-      const getRemaining = (row) => {
-        const used = row.reduce((acc, item2) => acc + (item2.span || 12), 0);
-        return 24 - used;
-      };
-      if (index === rows.length - 1) {
-        return (item.span || 12) + getRemaining(rows) - 1;
-      }
-      return (item.span || 12) - 1;
-    };
-    const validForm = () => {
-      return new Promise((resolve) => {
-        formRef.value.validate((valid) => {
-          resolve(valid);
-        });
-      });
-    };
-    const clear = () => {
-      var _a, _b;
-      (_a = formRef.value) == null ? void 0 : _a.clearValidate();
-      (_b = formRef.value) == null ? void 0 : _b.resetFields();
-    };
-    watch(
-      () => props.option,
-      (newVal) => {
-        if (newVal) {
-          formOption.value = Object.assign({}, formOption.value, newVal);
-          if (newVal.column) {
-            formOption.value.column = cloneDeep(
-              newVal.column.filter(
-                (column) => !(props.permission[column.prop || ""] === false)
-              ).sort((a, b) => (b.order || 0) - (a.order || 0))
-            );
-            getAllRemoteDics();
-            if (!props.readonly) {
-              initValue();
-            }
-          }
-        }
-      },
-      {
-        immediate: true,
-        deep: true
-      }
-    );
-    __expose({
-      validForm,
-      clear
-    });
-    return (_ctx, _cache) => {
-      const _component_el_input = resolveComponent("el-input");
-      const _component_el_option = resolveComponent("el-option");
-      const _component_el_select = resolveComponent("el-select");
-      const _component_el_radio = resolveComponent("el-radio");
-      const _component_el_radio_group = resolveComponent("el-radio-group");
-      const _component_el_checkbox = resolveComponent("el-checkbox");
-      const _component_el_checkbox_group = resolveComponent("el-checkbox-group");
-      const _component_el_switch = resolveComponent("el-switch");
-      const _component_el_date_picker = resolveComponent("el-date-picker");
-      const _component_el_time_picker = resolveComponent("el-time-picker");
-      const _component_el_form_item = resolveComponent("el-form-item");
-      const _component_el_col = resolveComponent("el-col");
-      const _component_el_row = resolveComponent("el-row");
-      const _component_el_form = resolveComponent("el-form");
-      const _component_MPicture = resolveComponent("MPicture");
-      const _component_MQrcode = resolveComponent("MQrcode");
-      const _component_MBarcode = resolveComponent("MBarcode");
-      return openBlock(), createElementBlock("div", { class: "m-form" }, [
-        createCommentVNode("\u7F16\u8F91\u6A21\u5F0F"),
-        !_ctx.readonly ? (openBlock(), createBlock(_component_el_form, {
-          key: 0,
-          ref_key: "formRef",
-          ref: formRef,
-          model: unref(proxys),
-          disabled: _ctx.loading,
-          size: _ctx.size || unref(globalConfig).size,
-          "label-width": formOption.value.labelWidth,
-          style: { "width": "100%" },
-          onSubmit: withModifiers(() => {
-          }, ["prevent"])
-        }, {
-          default: withCtx(() => [
-            createVNode(_component_el_row, { gutter: 0 }, {
-              default: withCtx(() => [
-                (openBlock(true), createElementBlock(
-                  Fragment,
-                  null,
-                  renderList(formOption.value.column, (column, columnIndex) => {
-                    return openBlock(), createBlock(_component_el_col, {
-                      key: columnIndex,
-                      span: column.span || 12
-                    }, {
-                      default: withCtx(() => [
-                        createVNode(_component_el_form_item, {
-                          style: { "width": "100%" },
-                          label: column.label + ":",
-                          prop: column.prop,
-                          rules: column.rules,
-                          "label-width": column.labelWidth || formOption.value.labelWidth
-                        }, {
-                          default: withCtx(() => [
-                            createCommentVNode("\u63D2\u69FD\u4FE1\u606F"),
-                            unref(slots)[column.prop || ""] ? renderSlot(_ctx.$slots, column.prop, mergeProps({
-                              key: 0,
-                              ref_for: true
-                            }, { size: _ctx.size || unref(globalConfig).size, loading: _ctx.loading })) : !column.type || INPUT_TYPES.includes(column.type) ? (openBlock(), createElementBlock(
-                              Fragment,
-                              { key: 1 },
-                              [
-                                createCommentVNode(""),
-                                createCommentVNode("\u8F93\u5165\u6846"),
-                                createVNode(_component_el_input, {
-                                  modelValue: unref(proxys)[column.prop || ""],
-                                  "onUpdate:modelValue": ($event) => unref(proxys)[column.prop || ""] = $event,
-                                  modelModifiers: { trim: true },
-                                  style: { "width": "100%" },
-                                  placeholder: column.placeholder,
-                                  maxlength: column.maxlength,
-                                  "show-word-limit": column.showWordLimit,
-                                  "show-password": column.showPassword,
-                                  type: !column.type || column.type === "input" ? "text" : column.type
-                                }, null, 8, ["modelValue", "onUpdate:modelValue", "placeholder", "maxlength", "show-word-limit", "show-password", "type"])
-                              ],
-                              2112
-                            )) : column.type === "select" ? (openBlock(), createElementBlock(
-                              Fragment,
-                              { key: 2 },
-                              [
-                                createCommentVNode(""),
-                                createCommentVNode("\u4E0B\u62C9\u6846"),
-                                createVNode(_component_el_select, {
-                                  modelValue: unref(proxys)[column.prop || ""],
-                                  "onUpdate:modelValue": ($event) => unref(proxys)[column.prop || ""] = $event,
-                                  modelModifiers: { trim: true },
-                                  style: { "width": "100%" },
-                                  placeholder: column.placeholder,
-                                  multiple: column.multiple,
-                                  clearable: column.clearable,
-                                  filterable: column.filterable,
-                                  "filter-method": column.filterMethod,
-                                  remote: column.remote,
-                                  "remote-method": column.remoteMethod,
-                                  loading: column.loading
-                                }, {
-                                  default: withCtx(() => [
-                                    (openBlock(true), createElementBlock(
-                                      Fragment,
-                                      null,
-                                      renderList(column.dicData || [], (dicItem, dicIndex) => {
-                                        return openBlock(), createBlock(_component_el_option, {
-                                          key: dicIndex,
-                                          label: dicItem.label,
-                                          value: dicItem.value
-                                        }, null, 8, ["label", "value"]);
-                                      }),
-                                      128
-                                    ))
-                                  ]),
-                                  _: 2
-                                }, 1032, ["modelValue", "onUpdate:modelValue", "placeholder", "multiple", "clearable", "filterable", "filter-method", "remote", "remote-method", "loading"])
-                              ],
-                              2112
-                            )) : column.type === "radio" ? (openBlock(), createElementBlock(
-                              Fragment,
-                              { key: 3 },
-                              [
-                                createCommentVNode(""),
-                                createCommentVNode("radio"),
-                                createVNode(_component_el_radio_group, {
-                                  modelValue: unref(proxys)[column.prop || ""],
-                                  "onUpdate:modelValue": ($event) => unref(proxys)[column.prop || ""] = $event,
-                                  style: { "width": "100%" }
-                                }, {
-                                  default: withCtx(() => [
-                                    (openBlock(true), createElementBlock(
-                                      Fragment,
-                                      null,
-                                      renderList(column.dicData || [], (dicItem, dicIndex) => {
-                                        return openBlock(), createBlock(_component_el_radio, {
-                                          key: dicIndex,
-                                          value: dicItem.value,
-                                          label: dicItem.value
-                                        }, {
-                                          default: withCtx(() => [
-                                            createTextVNode(
-                                              toDisplayString(dicItem.label),
-                                              1
-                                            )
-                                          ]),
-                                          _: 2
-                                        }, 1032, ["value", "label"]);
-                                      }),
-                                      128
-                                    ))
-                                  ]),
-                                  _: 2
-                                }, 1032, ["modelValue", "onUpdate:modelValue"])
-                              ],
-                              2112
-                            )) : column.type === "checkbox" ? (openBlock(), createElementBlock(
-                              Fragment,
-                              { key: 4 },
-                              [
-                                createCommentVNode(""),
-                                createCommentVNode("checkbox"),
-                                createVNode(_component_el_checkbox_group, {
-                                  modelValue: unref(proxys)[column.prop || ""],
-                                  "onUpdate:modelValue": ($event) => unref(proxys)[column.prop || ""] = $event,
-                                  style: { "width": "100%" }
-                                }, {
-                                  default: withCtx(() => [
-                                    (openBlock(true), createElementBlock(
-                                      Fragment,
-                                      null,
-                                      renderList(column.dicData || [], (dicItem, dicIndex) => {
-                                        return openBlock(), createBlock(_component_el_checkbox, {
-                                          key: dicIndex,
-                                          label: dicItem.label,
-                                          value: dicItem.value
-                                        }, null, 8, ["label", "value"]);
-                                      }),
-                                      128
-                                    ))
-                                  ]),
-                                  _: 2
-                                }, 1032, ["modelValue", "onUpdate:modelValue"])
-                              ],
-                              2112
-                            )) : column.type === "switch" ? (openBlock(), createElementBlock(
-                              Fragment,
-                              { key: 5 },
-                              [
-                                createCommentVNode(""),
-                                createCommentVNode("switch"),
-                                !column.dicData || column.dicData.length != 2 ? (openBlock(), createElementBlock("span", {
-                                  key: 0,
-                                  style: { "color": "var(--el-text-color-placeholder)", "line-height": "32px", "height": "32px" }
-                                }, '"dicData/dicUrl\u7684\u7ED3\u679C"\u672A\u8BBE\u7F6E\u6216\u957F\u5EA6\u4E0D\u7B49\u4E8E2')) : (openBlock(), createElementBlock(
-                                  Fragment,
-                                  { key: 1 },
-                                  [
-                                    createVNode(_component_el_switch, {
-                                      modelValue: unref(proxys)[column.prop || ""],
-                                      "onUpdate:modelValue": ($event) => unref(proxys)[column.prop || ""] = $event,
-                                      "active-value": column.dicData[0].value,
-                                      "inactive-value": column.dicData[1].value
-                                    }, null, 8, ["modelValue", "onUpdate:modelValue", "active-value", "inactive-value"]),
-                                    createElementVNode(
-                                      "span",
-                                      { style: { "font-size": "var(--el-font-size-base)", "color": "var(--el-text-color-regular)", "margin-left": "6px" } },
-                                      toDisplayString(unref(proxys)[column.prop || ""] === column.dicData[0].value ? column.dicData[0].label : column.dicData[1].label),
-                                      1
-                                    )
-                                  ],
-                                  64
-                                ))
-                              ],
-                              64
-                            )) : DATE_TYPES.includes(column.type) ? (openBlock(), createElementBlock(
-                              Fragment,
-                              { key: 6 },
-                              [
-                                createCommentVNode(""),
-                                createCommentVNode("\u65F6\u95F4"),
-                                column.type !== "time" && column.type !== "timerange" ? (openBlock(), createBlock(_component_el_date_picker, {
-                                  key: 0,
-                                  modelValue: unref(proxys)[column.prop || ""],
-                                  "onUpdate:modelValue": ($event) => unref(proxys)[column.prop || ""] = $event,
-                                  type: column.type,
-                                  clearable: column.clearable,
-                                  "start-placeholder": column.startPlaceholder,
-                                  "end-placeholder": column.endPlaceholder,
-                                  format: column.format,
-                                  "value-format": column.valueFormat || getValueFormatByType(column.type)
-                                }, null, 8, ["modelValue", "onUpdate:modelValue", "type", "clearable", "start-placeholder", "end-placeholder", "format", "value-format"])) : (openBlock(), createBlock(_component_el_time_picker, {
-                                  key: 1,
-                                  modelValue: unref(proxys)[column.prop || ""],
-                                  "onUpdate:modelValue": ($event) => unref(proxys)[column.prop || ""] = $event,
-                                  "is-range": column.type === "timerange",
-                                  clearable: column.clearable,
-                                  "start-placeholder": column.startPlaceholder,
-                                  "end-placeholder": column.endPlaceholder,
-                                  "value-format": column.valueFormat || getValueFormatByType(column.type)
-                                }, null, 8, ["modelValue", "onUpdate:modelValue", "is-range", "clearable", "start-placeholder", "end-placeholder", "value-format"]))
-                              ],
-                              64
-                            )) : column.type === "picture" ? (openBlock(), createElementBlock(
-                              Fragment,
-                              { key: 7 },
-                              [
-                                createCommentVNode(""),
-                                createCommentVNode("picture"),
-                                createElementVNode("span", { style: { "color": "var(--el-text-color-regular)", "line-height": "32px", "height": "32px" } }, " \u6682\u4E0D\u652F\u6301picture\uFF0C\u8BF7\u4F7F\u7528\u63D2\u69FD\u81EA\u884C\u5B9E\u73B0 ")
-                              ],
-                              2112
-                            )) : createCommentVNode("v-if", true),
-                            createCommentVNode("")
-                          ]),
-                          _: 2
-                        }, 1032, ["label", "prop", "rules", "label-width"])
-                      ]),
-                      _: 2
-                    }, 1032, ["span"]);
-                  }),
-                  128
-                ))
-              ]),
-              _: 3
-            })
-          ]),
-          _: 3
-        }, 8, ["model", "disabled", "size", "label-width", "onSubmit"])) : (openBlock(), createElementBlock(
-          Fragment,
-          { key: 1 },
-          [
-            createCommentVNode(""),
-            createCommentVNode("\u8BE6\u60C5\u6A21\u5F0F"),
-            createElementVNode("table", { class: "detail-desc" }, [
-              createElementVNode("tbody", null, [
-                (openBlock(true), createElementBlock(
-                  Fragment,
-                  null,
-                  renderList(detailTableRows.value, (row, rowIndex) => {
-                    return openBlock(), createElementBlock("tr", { key: rowIndex }, [
-                      (openBlock(true), createElementBlock(
-                        Fragment,
-                        null,
-                        renderList(row, (column, index) => {
-                          return openBlock(), createElementBlock(
-                            Fragment,
-                            { key: index },
-                            [
-                              createElementVNode(
-                                "td",
-                                {
-                                  style: normalizeStyle({ width: column.labelWidth || formOption.value.labelWidth }),
-                                  colspan: "1",
-                                  class: "label"
-                                },
-                                toDisplayString(column.label),
-                                5
-                              ),
-                              createElementVNode("td", {
-                                colspan: getValueColspan(column, row, index)
-                              }, [
-                                column.type === "picture" ? (openBlock(), createBlock(_component_MPicture, {
-                                  key: 0,
-                                  src: getDetailPic(unref(proxys), column)[0],
-                                  "preview-src-list": getDetailPic(unref(proxys), column)[0],
-                                  "img-width": "100px",
-                                  "img-height": "100px"
-                                }, null, 8, ["src", "preview-src-list"])) : NEED_DIC_TYPE.includes(column.type || "") ? (openBlock(), createElementBlock(
-                                  Fragment,
-                                  { key: 1 },
-                                  [
-                                    createTextVNode(
-                                      toDisplayString(formatDicValue(unref(proxys), column)),
-                                      1
-                                    )
-                                  ],
-                                  64
-                                )) : column.type === "qrcode" ? (openBlock(), createElementBlock(
-                                  Fragment,
-                                  { key: 2 },
-                                  [
-                                    unref(proxys)[column.prop || ""] ? (openBlock(), createBlock(_component_MQrcode, {
-                                      key: 0,
-                                      text: unref(proxys)[column.prop || ""],
-                                      align: "center"
-                                    }, null, 8, ["text"])) : createCommentVNode("v-if", true)
-                                  ],
-                                  64
-                                )) : column.type === "barcode" ? (openBlock(), createElementBlock(
-                                  Fragment,
-                                  { key: 3 },
-                                  [
-                                    unref(proxys)[column.prop || ""] ? (openBlock(), createBlock(_component_MBarcode, {
-                                      key: 0,
-                                      text: unref(proxys)[column.prop || ""],
-                                      align: "center"
-                                    }, null, 8, ["text"])) : createCommentVNode("v-if", true)
-                                  ],
-                                  64
-                                )) : (openBlock(), createElementBlock(
-                                  Fragment,
-                                  { key: 4 },
-                                  [
-                                    createTextVNode(
-                                      toDisplayString(unref(proxys)[column.prop || ""]),
-                                      1
-                                    )
-                                  ],
-                                  64
-                                ))
-                              ], 8, ["colspan"])
-                            ],
-                            64
-                          );
-                        }),
-                        128
-                      ))
-                    ]);
-                  }),
-                  128
-                ))
-              ])
-            ])
-          ],
-          64
-        ))
-      ]);
-    };
+const formProps = buildProps({
+  size: useSizeProp,
+  model: {
+    type: Object,
+    required: true
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  permission: {
+    type: Object,
+    default: {}
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  option: {
+    type: definePropType(Object),
+    required: false
   }
 });
-var Form = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "form.vue"]]);
+const formEmits = {};
 
-export { Form as default };
+export { formEmits, formProps };
 //# sourceMappingURL=form.mjs.map