easybill-ui 1.2.16 → 1.2.18

package/components/CurdForm/src/CurdForm.vue

@@ -10,6 +10,10 @@
         :class="getFormItemStyle(formItem)"
         v-bind="getFormItemProps(formItem)"
       >
+        <template v-for="(item, key) in formItem.formItemProps?.slots" :key="key" #[key]="row">
+          <component :is="item" v-bind="row" />
+        </template>
+
         <slot :name="formItem.prop" :form-item="formItem" :form-model="formModel"></slot>
         <FormItem v-if="!(formItem.prop && $slots[formItem.prop])" :form-item="formItem" :form-model="formModel" @change="onChange">
           <template #prefix>
@@ -175,7 +179,7 @@ const getFormItemProps = (formItem: FormItemType) => {
     if (formItem.formItemProps instanceof Function) {
       return formItem.formItemProps(formModel, formItem)
     }
-    const { ...attrs } = formItem.formItemProps
+    const { slots, ...attrs } = formItem.formItemProps
     return { ...attrs }
   }
   return {}

package/components/CurdForm/src/components/index.ts

@@ -7,6 +7,7 @@ import SchemaFormDatePicker from "./schema-form-date-picker.vue"
 import SchemaFormInputNumber from "./schema-form-input-number.vue"
 import SchemaFormInput from "./schema-form-input.vue"
 import SchemaFormRadio from "./schema-form-radio.vue"
+import SchemaFormSelectV2 from "./schema-form-select-v2.vue"
 import SchemaFormSelect from "./schema-form-select.vue"
 import SchemaFormSwitch from "./schema-form-switch.vue"
 import SchemaFormTimePicker from "./schema-form-time-picker.vue"
@@ -18,6 +19,7 @@ interface PresetMap {
 const presetMap: PresetMap = {
   "schema-input": SchemaFormInput,
   "schema-select": SchemaFormSelect,
+  "schema-select-v2": SchemaFormSelectV2,
   "schema-radio": SchemaFormRadio,
   "schema-checkbox": SchemaFormCheckbox,
   "schema-input-number": SchemaFormInputNumber,

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

@@ -5,8 +5,8 @@
     </div>
     <el-checkbox-group v-if="!formItem.loading && formItem.options && formItem.options.length" 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'" :value="option.value" :disabled="option.disabled" v-bind="option"> {{ option.label }} </el-checkbox-button>
-        <el-checkbox v-else :value="option.value" :disabled="option.disabled" v-bind="option"> {{ option.label }} </el-checkbox>
+        <el-checkbox-button v-if="props?.componentName == 'button'" :disabled="option.disabled" :style="option.style" v-bind="option"> {{ option.label }} </el-checkbox-button>
+        <el-checkbox v-else :disabled="option.disabled" :style="option.style" v-bind="option"> {{ option.label }} </el-checkbox>
       </template>
     </el-checkbox-group>
     <div v-if="!formItem.loading && !formItem.options?.length" class="empty">

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

@@ -1,58 +1,59 @@
 <template>
   <div class="schema-form-radio">
-    <div v-if="formItem.loading" class="loading" style="color: #999; font-size: 12px">
+    <div v-if="props.formItem.loading" class="loading" style="color: #999; font-size: 12px">
       <el-icon class="is-loading"><Loading /></el-icon> {{ t("el.form.loading") }}
     </div>
-    <el-radio-group v-if="!formItem.loading && formItem.options && formItem.options.length" v-model="model" :class="[props?.showType]" v-bind="props" v-on="eventObject">
-      <template v-for="option in formItem.options" :key="option.value">
-        <el-radio-button v-if="props?.componentName == 'button'" :value="option.value" :disabled="option.disabled">
-          <span v-if="option.html" v-html="option.html"></span>
+    <el-radio-group v-if="!props.formItem.loading && options?.length" v-model="model" :class="[props?.props?.showType]" v-bind="props.props" v-on="props.eventObject">
+      <template v-for="(option, index) in options" :key="option.value">
+        <component :is="props?.props?.type == 'button' || props?.props?.componentName == 'button' ? 'el-radio-button' : 'el-radio'" :value="option.value" :disabled="option.disabled" :border="option.border" :size="option.size" :style="option.style">
+          <component v-if="option.component" :is="option.component" :row="option" :$index="index" :form-model="props.formModel" :form-item="props.formItem" :props="props.props" />
+          <span v-else-if="option.html" v-html="option.html"></span>
           <span v-else>{{ option.label }}</span>
-          <FormTooltip v-if="option.tooltip" :tooltip="option.tooltip" :form-item="formItem" :form-model="formModel" />
-        </el-radio-button>
-        <el-radio v-else :value="option.value" :disabled="option.disabled">
-          <span v-if="option.html" v-html="option.html"></span>
-          <span v-else>{{ option.label }}</span>
-          <FormTooltip v-if="option.tooltip" :tooltip="option.tooltip" :form-item="formItem" :form-model="formModel" />
-        </el-radio>
+          <FormTooltip v-if="option.tooltip" :tooltip="option.tooltip" :form-item="props.formItem" :form-model="props.formModel" />
+        </component>
       </template>
     </el-radio-group>
-    <div v-if="!formItem.loading && !formItem.options?.length" class="empty">
-      <component :is="empty" v-if="empty" :form-model="formModel" :form-item="formItem" :props="props" />
+    <div v-if="!props.formItem.loading && !options?.length" class="empty">
+      <component :is="empty" v-if="empty" :form-model="props.formModel" :form-item="props.formItem" :props="props.props" />
       <template v-else>
-        <el-icon><Warning /></el-icon> <span>{{ props.noDataText || t("el.form.nodata") }}</span>
+        <el-icon><Warning /></el-icon> <span>{{ props.props?.noDataText || t("el.form.nodata") }}</span>
       </template>
     </div>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 import { Loading, Warning } from "@element-plus/icons-vue"
 import { useLocale } from "easybill-ui"
-import { computed, defineComponent, toRaw } from "vue"
+import { computed, toRaw } from "vue"
 import FormTooltip from "../FormTooltip.vue"
-import { FormItemProps } from "../types"
-export default defineComponent({
-  name: "SchemaFormRadio",
-  components: { Loading, Warning, FormTooltip },
-  props: {
-    ...FormItemProps,
-    modelValue: {
-      type: [String, Number, Boolean],
-      default: null,
-    },
+import { FormItemProps, type CurdFormOptionItem } from "../types"
+
+const props = defineProps({
+  ...FormItemProps,
+  modelValue: {
+    type: [String, Number, Boolean],
+    default: null,
   },
-  emits: ["update:modelValue"],
-  setup(props, { emit }) {
-    const model = computed({
-      get: () => props.modelValue,
-      set: (val) => emit("update:modelValue", val),
-    })
-    const { t } = useLocale()
-    return {
-      model,
-      empty: toRaw(props.props.empty) || "",
-      t,
+})
+const emits = defineEmits(["update:modelValue"])
+const model = computed({
+  get: () => props.modelValue,
+  set: (val) => emits("update:modelValue", val),
+})
+const { t } = useLocale()
+const empty = computed(() => toRaw(props.props.empty) || "")
+const options = computed(() => {
+  const alloptions: CurdFormOptionItem[] = []
+  if (props.props.all) {
+    const optionItem: CurdFormOptionItem = { value: "", label: t("el.form.all") }
+    if (typeof props.props.all == "boolean") {
+      alloptions.push(optionItem)
+    } else if (typeof props.props.all == "object") {
+      Object.assign(optionItem, props.props.all)
+      alloptions.push(optionItem)
     }
-  },
+  }
+  const opts = props.formItem.options || []
+  return [...alloptions, ...opts]
 })
 </script>

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

@@ -0,0 +1,60 @@
+<template>
+  <el-select-v2 v-model="model" style="width: 100%" :options="list" :loading="props.formItem.loading || loading" v-bind="selectProps" v-on="props.eventObject">
+    <template v-for="(item, key) in props.props?.slots" :key="key" #[key]>
+      <component :is="item" v-model="model" :form-item="props.formItem" :form-model="props.formModel" :props="props.props" :event-object="props.eventObject" />
+    </template>
+  </el-select-v2>
+</template>
+<script lang="ts" setup>
+import { computed, onMounted, ref, watch } from "vue"
+import type { CurdFormOptionItem } from "../types"
+import { FormItemProps } from "../types"
+
+const props = defineProps({
+  ...FormItemProps,
+  modelValue: {
+    type: [String, Number, Boolean, Array],
+    default: null,
+  },
+})
+const emits = defineEmits(["update:modelValue"])
+const model = computed({
+  get: () => props.modelValue,
+  set: (val) => emits("update:modelValue", val),
+})
+const loading = ref(false)
+// 有的options是从接口里拿的，掉接口需要时间，初始全选的时候全选的按钮没有勾选上，所以监听options
+const list = ref(props.formItem.options || [])
+watch(
+  () => props.formItem.options,
+  (val) => {
+    list.value = val || []
+  },
+  {
+    deep: true,
+  },
+)
+onMounted(() => {})
+const { filterMethod, remoteMethod, ...selectProps } = props.props
+// 前端筛选
+if (filterMethod) {
+  selectProps.filterMethod = function (val: string) {
+    const remoteMehotd1 = filterMethod as (val: string, optionItem?: CurdFormOptionItem) => Promise<CurdFormOptionItem[]>
+    list.value = props.formItem?.options?.filter((a) => remoteMehotd1(val, a)) || []
+  }
+}
+// 远程筛选
+if (selectProps.remote && remoteMethod) {
+  selectProps.remoteMethod = function (val: string) {
+    loading.value = true
+    const remoteMehotd1 = remoteMethod as (val: string, optionItem?: CurdFormOptionItem) => Promise<CurdFormOptionItem[]>
+    remoteMehotd1(val)
+      .then((res) => {
+        list.value = res
+      })
+      .finally(() => {
+        loading.value = false
+      })
+  }
+}
+</script>

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

@@ -1,5 +1,5 @@
 <template>
-  <el-select v-model="model" style="width: 100%" :loading="formItem.loading || loading" v-bind="props" v-on="eventObject">
+  <el-select v-model="model" style="width: 100%" :loading="formItem.loading || loading" v-bind="selectProps" v-on="eventObject">
     <el-option v-if="props.all && !props.multiple" value="" :label="t('el.form.all')"></el-option>
     <el-checkbox v-if="props.all && props.multiple" v-model="checked" :label="t('el.form.allSelect')" class="schema-form-select-check" />
     <template v-for="option in list" :key="option.value">
@@ -8,8 +8,8 @@
         <template v-else>{{ option.label }}</template>
       </el-option>
     </template>
-    <template v-for="(item, key) in props.props?.slots" :key="key" #[key]="slotScope">
-      <component :is="item" v-model="model" :form-item="props.formItem" :form-model="props.formModel" :props="formItemProps" :event-object="eventObject" />
+    <template v-for="(item, key) in props?.slots" :key="key" #[key]>
+      <component :is="item" v-model="model" :form-item="props.formItem" :form-model="props.formModel" :props="props" :event-object="eventObject" />
     </template>
   </el-select>
 </template>
@@ -42,7 +42,7 @@ export default defineComponent({
       set(val) {
         const options = props.formItem.options || []
         model.value = val ? options.map((a) => a.value) : []
-        if (props?.eventObject?.change) props.eventObject.change()
+        if (props?.eventObject?.change) props.eventObject.change(props.formModel, props.formItem)
       },
     })
     const loading = ref(false)
@@ -62,7 +62,7 @@ export default defineComponent({
     // 前端筛选
     if (filterMethod) {
       selectProps.filterMethod = function (val: string) {
-        const remoteMehotd1 = remoteMethod as (val: string, optionItem?: CurdFormOptionItem) => Promise<CurdFormOptionItem[]>
+        const remoteMehotd1 = filterMethod as (val: string, optionItem?: CurdFormOptionItem) => Promise<CurdFormOptionItem[]>
         list.value = props.formItem?.options?.filter((a) => remoteMehotd1(val, a))
       }
     }

package/components/CurdForm/src/types.ts

@@ -44,8 +44,12 @@ export interface FormItem {
   sortIndex?: number
 }
 export type FormItemTypeEmun = "input" | "select" | "radio" | "checkbox" | "input-number" | "switch" | "file" | "date-picker" | "time-picker" | "color-picker" | "value" | "tree-select" | "autocomplete"
-export interface FormItemPropObject {
-  [key: string]: unknown
+export interface FormItemPropObject extends Fields {
+  slots?: Record<string, (props?: FormItemPropObject) => VNode | VNode[] | string | null>
+  all?: boolean | CurdFormOptionItem
+  empty?: string | VNode
+  noDataText?: string
+  style?: Record<string, string> | string
 }
 export interface TooltipProps {
   effect: "dark" | "light"
@@ -77,7 +81,10 @@ export interface Fields {
   [key: string]: unknown
 }
 export interface CurdFormOptionItem extends OptionItem {
-  [key: string]: unknown
+  component?: string | ReturnType<typeof defineComponent>
+  disabled?: boolean
+  type?: string | "radio" | "button"
+  rawContent?: boolean
 }
 // interface EventObjectDefault {
 //   change?: (formModel: Fields, formItem: FormItem, proxy: any) => void
@@ -104,11 +111,11 @@ export const FormItemProps = {
     default: () => ({}),
   },
   props: {
-    type: Object as PropType<Fields>,
+    type: Object as PropType<FormItemPropObject>,
     default: () => ({}),
   },
   eventObject: {
-    type: Object as PropType<Fields & { change: Function }>,
+    type: Object as PropType<Fields & { change: (formModel: Fields, formItem: FormItem) => void | boolean }>,
     default: () => ({}),
   },
   modelValue: {

package/components/CurdTable/src/CurdTable.vue

@@ -28,7 +28,7 @@
             </template>
           </STableItem>
         </template>
-        <el-table-column v-if="!option.hideOperation" :label="t('el.table.operation')" fixed="right" :width="option.operationWidth || '200'" align="left">
+        <!-- <el-table-column v-if="!option.hideOperation" :label="t('el.table.operation')" fixed="right" :width="option.operationWidth || '200'" align="left">
           <template #default="scope">
             <slot name="operation" v-bind="scope"></slot>
             <template v-if="!$slots.operationBtn">
@@ -61,7 +61,7 @@
               </el-dropdown>
             </template>
           </template>
-        </el-table-column>
+        </el-table-column> -->
         <template #empty>
           <slot name="empty"></slot>
           <el-empty v-if="!$slots.empty" :image-size="30" />

package/components/CurdTable/src/STableItem.vue

@@ -1,15 +1,16 @@
 <template>
   <el-table-column v-if="!props.schema.hidden" :fixed="props.schema.fixed" v-bind="getColumnAttrs">
-    <template #header>
+    <template #header="scope">
       <div class="header-td" :class="[props.schema.align]">
-        <slot name="header"></slot>
-        <STableItemHeader v-if="!props.isSlotHeader" :schema-item="props.schema" />
+        <slot name="header" v-bind="scope"></slot>
+        <component v-if="props.schema.headerComponent" :is="props.schema.headerComponent" v-bind="scope" />
+        <STableItemHeader v-else-if="!props.isSlotHeader" :schema-item="props.schema" />
         <STableItemFilter v-if="props.schema.filter && props.schema.filter.inner" ref="tableItemFilterRef" :filter="filterSchema" @change="onChange" />
       </div>
     </template>
     <template #default="scope">
-      <slot v-bind="scope"></slot>
-      <template v-if="props.schema.children?.length">
+      <slot name="default" v-bind="scope"></slot>
+      <!-- <template v-if="props.schema.children?.length">
         <template v-for="item in props.schema.children" :key="item.label">
           <STableItem :ref="(el) => (tableItemRefs[item.prop] = el)" :schema="item" :is-slot="props.isSlot" :is-slot-header="props.isSlotHeader" :option="option" @search="onItemChange">
             <template #default>
@@ -36,7 +37,7 @@
           </template>
           <template v-else>{{ getValue(scope.row) }}</template>
         </span>
-      </template>
+      </template> -->
     </template>
   </el-table-column>
 </template>

package/components/CurdTable/src/types.ts

@@ -38,6 +38,7 @@ export interface ColumnItemCtx<T> extends Partial<TableColumnCtx<T>> {
   copy?: boolean // 对某一列的单元格的值进行复制
   vHtml?: boolean //当前列是否v-html渲染
   header?: string | TableColumnHeader
+  headerComponent?: string | VNode
 }
 interface TableColumnCtx<T> {
   className: string

package/components/FormDialog/src/types.ts

@@ -11,7 +11,7 @@ export interface FormDialogOptions extends Partial<DialogProps> {
   handleClose?: (e: "close" | "cancel") => void
   setForm?: (form: Fields) => void
   stepProps?: Partial<StepProps & Fields>
-  extendContext?: FormContext
+  extendContext?: Partial<FormContext>
   confirmBtnText?: string
   cancelBtnText?: string
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "easybill-ui",
-  "version": "1.2.16",
+  "version": "1.2.18",
   "description": "A component library for easybill",
   "author": "tuchongyang <779311998@qq.com>",
   "private": false,
@@ -14,5 +14,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1f719fa073548650f5038e30ed7528570418b2e9"
+  "gitHead": "2b0e1faf36c35ade4d94791bda35a78ff5050239"
 }