easybill-ui 1.0.13 → 1.0.15

package/components/CurdForm/index.ts

@@ -1,6 +1,8 @@
 import Instance from "./src/index"
+import FormItem from "./src/CurdFormItem.vue"
 import { withInstall } from "../../utils"
 export const CurdForm = withInstall(Instance)
+export const CurdFormItem = withInstall(FormItem)
 export default CurdForm
 export * from "./src/types"
 export * from "./src/directive"

package/components/CurdForm/src/CurdFormItem.vue

@@ -0,0 +1,66 @@
+<template>
+  <FormItemVue :form-model="model" :form-item="props.formItem" @change="onChange"></FormItemVue>
+</template>
+<script lang="ts">
+export default {
+  name: "CurdFormItem",
+}
+</script>
+<script lang="ts" setup>
+import { PropType, ref, watch, getCurrentInstance, reactive } from "vue"
+import FormItemVue from "./FormItem.vue"
+import { FormItem, Fields } from "./types"
+const props = defineProps({
+  formItem: {
+    required: true,
+    type: Object as PropType<FormItem>,
+  },
+  formModel: {
+    type: Object as PropType<Fields>,
+    default: () => ({}),
+  },
+  modelValue: {
+    type: [String, Array, Object],
+    default: "",
+  },
+})
+const emit = defineEmits(["update:modelValue"])
+const model = ref(props.formModel || {})
+const onChange = () => {
+  emit("update:modelValue", model.value[props.formItem.prop])
+}
+watch(
+  () => props.modelValue,
+  (val) => {
+    model.value[props.formItem.prop] = val
+  },
+)
+const instance = getCurrentInstance()
+const curdFormContext = reactive({})
+// 调用某个表单项的异步数据接口
+const loadOptions = async (cur) => {
+  if (cur && cur.asyncOptions && !instance?.isUnmounted) {
+    cur.loading = true
+    cur.options =
+      (await cur
+        .asyncOptions(model.value, cur, curdFormContext)
+        .catch((err) => console.error("loadOptionError", err))
+        .finally(() => (cur.loading = false))) || []
+    !instance?.isUnmounted && cur.eventObject?.optionLoaded && cur.eventObject?.optionLoaded(model.value, cur, curdFormContext)
+  }
+  return cur?.options || []
+}
+const init = () => {
+  if (props.formItem.asyncOptions) {
+    loadOptions(props.formItem)
+  }
+}
+curdFormContext.loadOptions = loadOptions
+init()
+watch(
+  () => props.formItem,
+  () => {
+    init()
+  },
+)
+</script>

package/components/CurdForm/src/components/schema-form-input.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-input v-model="model" v-trim :disabled="formItem.disabled || false" v-bind="props" :placeholder="(props.placeholder && String(props.placeholder)) || '请输入' + (props.label || formItem.label)" autocomplete="new-password" v-on="eventObject" />
+  <el-input v-model="model" v-trim :disabled="formItem.disabled || false" v-bind="props" :placeholder="(props.placeholder && String(props.placeholder)) || '请输入' + (props.label || formItem.label || '')" autocomplete="new-password" v-on="eventObject" />
 </template>
 <script lang="ts">
 import { defineComponent, computed } from "vue"

package/components/CurdForm/src/components/schema-form-tree-select.vue

@@ -15,11 +15,11 @@
 <script lang="ts">
 import { defineComponent, computed, PropType, toRaw } from "vue"
 import { Loading, Warning } from "@element-plus/icons-vue"
-import { ElCheckbox, ElCheckboxButton, ElCheckboxGroup, ElIcon } from "element-plus"
+import { ElTreeSelect, ElIcon } from "element-plus"
 import { FormItemProps } from "../types"
 export default defineComponent({
   name: "SchemaFormTreeSelect",
-  components: { Loading, ElCheckbox, ElCheckboxButton, ElCheckboxGroup, ElIcon, Warning },
+  components: { Loading, ElTreeSelect, ElIcon, Warning },
   props: {
     ...FormItemProps,
     modelValue: {

package/index.ts

@@ -1,14 +1,14 @@
 import type { Plugin } from "vue"
 import ConstantStatus from "./components/ConstantStatus"
 import FormDialog from "./components/FormDialog"
-import CurdForm from "./components/CurdForm"
+import CurdForm, { CurdFormItem } from "./components/CurdForm"
 import CurdTable from "./components/CurdTable"
 import TableFilter from "./components/TableFilter"
 import DetailInfo from "./components/DetailInfo"
 import { makeInstaller } from "./utils/vue/make-installer"
 
-const Components = [ConstantStatus, FormDialog, CurdForm, CurdTable, TableFilter, DetailInfo] as Plugin[]
-export { ConstantStatus, FormDialog, CurdForm, CurdTable, TableFilter, DetailInfo }
+const Components = [ConstantStatus, FormDialog, CurdForm, CurdTable, TableFilter, DetailInfo, CurdFormItem] as Plugin[]
+export { ConstantStatus, FormDialog, CurdForm, CurdFormItem, CurdTable, TableFilter, DetailInfo }
 export * from "./components/ConstantStatus/src/types"
 export * from "./components/FormDialog/src/types"
 export * from "./components/CurdForm"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "easybill-ui",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "description": "A component library for easybill",
   "author": "tuchongyang <779311998@qq.com>",
   "private": false,
@@ -14,5 +14,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "75d923efaa2e17dfe45fffec428285dba90f472c"
+  "gitHead": "89c3817a8770757734e0496bb5de89ddb9544f59"
 }