m-eleplus-crud 0.0.2 → 0.0.3

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

@@ -1,30 +1,627 @@
-import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
-import { useSizeProp } from '../../../hooks/use-size/index.mjs';
+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';
 
-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
+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 formEmits = {};
+var Form = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "form.vue"]]);
 
-export { formEmits, formProps };
+export { Form as default };
 //# sourceMappingURL=form.mjs.map