easybill-ui 0.1.17 → 0.1.19

package/components/CurdForm/src/CurdForm.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, provide, ref, Ref, computed, watch, PropType } from "vue"
+import { defineComponent, reactive, provide, ref, Ref, computed, watch, PropType, getCurrentInstance } from "vue"
 import { isFunction, isAsyncFunction } from "./utils/is"
 import { deepClone } from "./utils/common"
 import components from "./components"
@@ -65,6 +65,7 @@ export default defineComponent({
     const sFormSchema: Ref<FormSchema> = ref(props.formSchema)
     let formModel = reactive<Fields>(props.modelValue || {})
     const curdFormContext = reactive<FormContext>({} as FormContext)
+    const instance = getCurrentInstance()
     watch(
       () => props.modelValue,
       (val) => {
@@ -100,7 +101,7 @@ export default defineComponent({
       if (item.asyncOptions && (item.autoload || typeof item.autoload == "undefined") && (isFunction(item.asyncOptions) || isAsyncFunction(item.asyncOptions))) {
         item.loading = true
         item.options = await item.asyncOptions(formModel, item, curdFormContext).finally(() => (item.loading = false))
-        item.eventObject?.optionLoaded && item.eventObject?.optionLoaded(formModel, item, curdFormContext)
+        !instance?.isUnmounted && item.eventObject?.optionLoaded && item.eventObject?.optionLoaded(formModel, item, curdFormContext)
       } else if (item.prop && item.asyncValue && (isFunction(item.asyncValue) || isAsyncFunction(item.asyncValue))) {
         // 异步默认值
         item.loading = true
@@ -134,23 +135,23 @@ export default defineComponent({
     // 调用某个表单项的异步数据接口
     const loadOptions = async (prop: string, option?: any) => {
       const cur = sFormSchema.value.formItem.find((a) => a.prop == prop)
-      if (cur && cur.asyncOptions) {
+      if (cur && cur.asyncOptions && !instance?.isUnmounted) {
         cur.loading = true
         cur.options =
           (await cur
             .asyncOptions(formModel, cur, curdFormContext, option)
             .catch((err) => console.error("loadOptionError", err))
             .finally(() => (cur.loading = false))) || []
-        cur.eventObject?.optionLoaded && cur.eventObject?.optionLoaded(formModel, cur, curdFormContext, option)
+        !instance?.isUnmounted && cur.eventObject?.optionLoaded && cur.eventObject?.optionLoaded(formModel, cur, curdFormContext, option)
       }
       return cur
     }
     // 给某个item赋值options
-    const setOptions = async (prop: string, options: CurdFormOptionItem[]) => {
+    const setOptions = async (prop: string, options: CurdFormOptionItem[], option?: any) => {
       const cur = sFormSchema.value.formItem.find((a) => a.prop == prop)
       if (cur) {
         cur.options = options
-        cur.eventObject?.optionLoaded && cur.eventObject?.optionLoaded(formModel, cur, curdFormContext)
+        !instance?.isUnmounted && cur.eventObject?.optionLoaded && cur.eventObject?.optionLoaded(formModel, cur, curdFormContext, option)
       }
       // return cur
     }

package/components/CurdTable/src/CurdTable.vue

@@ -462,6 +462,9 @@ defineExpose({
   setTotal,
   search,
   listQuery,
+  fetchCreate: create,
+  fetchEdit: create,
+  fetchRemove: startremove,
   getEl() {
     return instance?.proxy?.$el
   },

package/components/DetailInfo/src/DetailInfo.vue

@@ -17,7 +17,7 @@
     <div v-if="!$slots.default" class="detail-info-body" :class="[props.showType]">
       <div class="table-detail-col" v-for="(item, i) in list" :key="i" :span="item.span" :style="getItemStyle(item)">
         <div class="item-col">
-          <div v-if="item.label" class="label" :style="{ width: getLabelWidth(item), justifyContent: props.labelPosition || item.labelPosition }">
+          <div v-if="item.label" class="label" :style="getLabelStyle(item)">
             <span>{{ item.label }}</span>
             <DetailInfoTooltip :tooltip="item.tooltip" />{{ props.showType == "table" ? "" : "：" }}
           </div>
@@ -30,6 +30,7 @@
               <template v-else-if="item.type == 'image'">
                 <el-image :src="item.value" :preview-src-list="[item.value]" style="width: 40px; height: 40px; vertical-align: top" :fit="'cover'" v-bind="item.props"></el-image>
               </template>
+              <component v-else-if="item.type" :is="item.type" v-model="item.value" v-bind="item.props"></component>
               <template v-else><DetailInfoContent :data="item" /></template>
             </template>
           </div>
@@ -52,8 +53,8 @@ import DetailInfoContent from "./DetailInfoContent.vue"
 
 const props = defineProps({
   data: {
-    type: Object as PropType<Array<DetailDataItem>>,
-    default: () => ({}),
+    type: Array as PropType<Array<DetailDataItem>>,
+    default: () => [],
   },
   title: {
     type: String,
@@ -74,7 +75,8 @@ const props = defineProps({
   },
 })
 const list = computed(() => {
-  return props.data.filter((item) => {
+  const d = props.data || []
+  return d.filter((item) => {
     if (typeof item.hidden == "function") return !item.hidden(props.data)
     if (typeof item.hidden != "undefined") return !item.hidden
     return true
@@ -85,6 +87,15 @@ const getLabelWidth = (dataItem: DetailDataItem): string => {
   const isNum = typeof labelWidth == "number" || (typeof labelWidth == "string" && /^\d+$/.test(labelWidth))
   return !isNum ? labelWidth + "" : labelWidth + "px"
 }
+const getLabelStyle = (item: DetailDataItem) => {
+  let s = item.labelStyle
+  if (typeof s == "object") {
+    s = Object.keys(item.labelStyle)
+      .map((a) => a + ":" + item.labelStyle[a])
+      .join(";")
+  }
+  return `width: ${getLabelWidth(item)}; justifyContent: ${item.labelPosition || props.labelPosition};` + s
+}
 const getItemStyle = (dataItem: DetailDataItem) => {
   const width = (100 * (dataItem.span || 24)) / 24 + "%"
   return { width: width, flex: "0 0 " + width }

package/components/DetailInfo/src/DetailInfoContent.vue

@@ -2,9 +2,6 @@
   <el-tooltip v-if="props.data.showOverflowTooltip" v-bind="getTooltipProps">
     <div v-if="props.data.rawContent" style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden" v-html="props.data.value"></div>
     <div v-else style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden">{{ props.data.value }}</div>
-    <!-- <template #content>
-      <div v-html="props.data.value"></div>
-    </template> -->
   </el-tooltip>
   <template v-else>
     <div v-if="props.data.rawContent" v-html="props.data.value"></div>

package/components/DetailInfo/src/types.ts

@@ -1,5 +1,6 @@
 import { ElTooltipProps } from "element-plus"
 import { OptionItem } from "../../ConstantStatus/src/types"
+import { defineComponent } from "vue"
 
 export interface DetailDataItem extends Record<string, any> {
   label?: string
@@ -9,12 +10,13 @@ export interface DetailDataItem extends Record<string, any> {
   /** 当前数据的选项，里面包含的图标、颜色信息会自动显示 */
   options?: Array<OptionItem>
   /** type为image时，会把value当做image的url来显示图片 */
-  type?: string
+  type?: string | ReturnType<typeof defineComponent>
   labelWidth?: number
   props?: Record<string, string>
   slot?: string
   tooltip?: string | import("element-plus/es/components/tooltip").ElTooltipProps
   labelPosition?: "left" | "right" | "center"
+  labelStyle?: string | Record<string, any>
   showOverflowTooltip?: boolean | ElTooltipProps
   rawContent?: boolean
   hidden?: boolean | ((data: DetailDataItem[]) => boolean)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "easybill-ui",
-  "version": "0.1.17",
+  "version": "0.1.19",
   "description": "A component library for easybill",
   "author": "tuchongyang <779311998@qq.com>",
   "private": false,
@@ -14,5 +14,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d252ca9411fe5b50332c38f62cb719ea98bf2fc9"
+  "gitHead": "e4c25822f2d7360b65b9d5721415af2ee8e1a6a2"
 }