easybill-ui 0.1.16 → 0.1.18

package/components/CurdForm/src/FormTooltip.vue

@@ -1,17 +1,17 @@
 <template>
-  <el-tooltip :content="tooltip.content" v-bind="tooltip || {}">
+  <el-tooltip :content="tooltipModel.content" v-bind="tooltipModel || {}">
     <el-button class="tooltip" type="primary" link>
       <el-icon><Warning /></el-icon>
     </el-button>
     <template #content>
-      <div v-html="tooltip.content"></div>
+      <div v-html="tooltipModel.content"></div>
     </template>
   </el-tooltip>
 </template>
 <script lang="ts" setup>
 import { PropType, computed } from "vue"
 import { Warning } from "@element-plus/icons-vue"
-import { ElButton, ElIcon, ElTooltip } from "element-plus"
+import { ElButton, ElIcon, ElTooltip, ElTooltipProps } from "element-plus"
 import { FormItem, Fields } from "./types"
 const props = defineProps({
   tooltip: {
@@ -31,31 +31,25 @@ const props = defineProps({
 const is = (val: any, type: string) => {
   return Object.prototype.toString.call(val) === `[object ${type}]`
 }
-const tooltip = computed(() => {
-  const tooltip: any = props.tooltip
+const tooltipModel = computed(() => {
+  let tooltip: any = props.tooltip
   if (!tooltip) {
     return {}
   }
   if (is(tooltip, "Function")) {
-    return tooltip(props.formModel, props.formItem)
+    tooltip = tooltip(props.formModel, props.formItem)
+    return getTooltip(tooltip)
   }
-  if (is(tooltip, "String")) {
-    return { content: tooltip }
-  }
-  return tooltip
+  return getTooltip(tooltip)
 })
 // 获取组件tooltip内容
-const getTooltipContent = () => {
-  const tooltip: any = props.tooltip
+const getTooltip = (tooltip: ElTooltipProps | String) => {
   if (!tooltip) {
     return ""
   }
-  if (is(tooltip, "Function")) {
-    return tooltip(props.formModel, props.formItem)
-  }
   if (is(tooltip, "String")) {
-    return tooltip
+    return { content: tooltip }
   }
-  return ""
+  return tooltip
 }
 </script>

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

@@ -1,13 +1,15 @@
 <template>
-  <div v-if="formItem.loading" class="loading" style="color: #999; font-size: 12px">
-    <el-icon class="is-loading"><Loading /></el-icon> 加载中...
+  <div class="schema-form-radio">
+    <div v-if="formItem.loading" class="loading" style="color: #999; font-size: 12px">
+      <el-icon class="is-loading"><Loading /></el-icon> 加载中...
+    </div>
+    <el-checkbox-group v-else v-model="model" :class="[props?.showType]" style="width: 100%" v-bind="props" v-on="eventObject">
+      <template v-for="option in formItem.options" :key="option.value">
+        <el-checkbox-button v-if="props?.componentName == 'button'" :label="option.value" :disabled="option.disabled"> {{ option.label }} </el-checkbox-button>
+        <el-checkbox v-else :label="option.value" :disabled="option.disabled"> {{ option.label }} </el-checkbox>
+      </template>
+    </el-checkbox-group>
   </div>
-  <el-checkbox-group v-else v-model="model" :class="[props?.showType]" style="width: 100%" v-bind="props" v-on="eventObject">
-    <template v-for="option in formItem.options" :key="option.value">
-      <el-checkbox-button v-if="props?.componentName == 'button'" :label="option.value" :disabled="option.disabled"> {{ option.label }} </el-checkbox-button>
-      <el-checkbox v-else :label="option.value" :disabled="option.disabled"> {{ option.label }} </el-checkbox>
-    </template>
-  </el-checkbox-group>
 </template>
 <script lang="ts">
 import { defineComponent, computed, PropType } from "vue"

package/components/CurdForm/src/types.ts

@@ -25,7 +25,7 @@ export interface FormItem {
   labelWidth?: string
   span?: number
   disabled?: boolean
-  tooltip?: string | ((formModel: Fields, formItem: FormItem) => Partial<ElTooltipProps>) | Partial<ElTooltipProps>
+  tooltip?: string | ((formModel: Fields, formItem: FormItem) => Partial<ElTooltipProps> | String) | Partial<ElTooltipProps>
   autoload?: boolean
   prefix?: string | any
   suffix?: string | any

package/components/CurdTable/src/CurdTable.vue

@@ -368,7 +368,7 @@ const create = (row?: any) => {
     if (!a.form) return
     let formValue: FormItem
     if (a.form instanceof Function) {
-      formValue = a.form(a, row)
+      formValue = a.form(a, row, search)
     } else {
       formValue = a.form
     }
@@ -462,6 +462,9 @@ defineExpose({
   setTotal,
   search,
   listQuery,
+  fetchCreate: create,
+  fetchEdit: create,
+  fetchRemove: startremove,
   getEl() {
     return instance?.proxy?.$el
   },

package/components/CurdTable/src/types.ts

@@ -25,7 +25,7 @@ export interface ColumnItemCtx<T> {
   children?: Array<ColumnItem> // 暂时不支持
   options?: Array<OptionItem> //数据字典
   asyncOptions?: () => Promise<OptionItem[]>
-  form?: Partial<FormItemType> | ((formItem: FormItemType, row: T) => Partial<FormItemType>)
+  form?: Partial<FormItemType> | ((formItem: FormItemType, row: T, query: Fields) => Partial<FormItemType>)
   filter?: ColumnItemFilter
   detail?: ColumnItemDetail
   //继承自el-table-column属性

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.16",
+  "version": "0.1.18",
   "description": "A component library for easybill",
   "author": "tuchongyang <779311998@qq.com>",
   "private": false,
@@ -14,5 +14,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "129e1c03578672bd628c929d8e704dcef2e28d34"
+  "gitHead": "981dfbf919a069d2a103af0cb9b6618db2fdd3c5"
 }