easybill-ui 0.0.13 → 0.0.14

package/components/ConstantStatus/src/types.ts

@@ -17,4 +17,5 @@ export interface OptionItem {
    * 供curd-form的单选或多选，选项上的tooltip
    */
   tooltip?: any
+  html?: string
 }

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

@@ -3,7 +3,10 @@
     <el-option v-if="props.all && !props.multiple" value="" label="全部"></el-option>
     <el-checkbox v-if="props.all && props.multiple" v-model="checked" label="全选" class="schema-form-select-check" @change="selectAll" />
     <template v-for="option in formItem.options" :key="option.value">
-      <el-option :value="option.value" :label="option.label" :disabled="option.disabled"></el-option>
+      <el-option :value="option.value" :label="option.label" :disabled="option.disabled">
+        <div v-if="option.html" v-html="option.html"></div>
+        <template v-else>{{ option.label }}</template>
+      </el-option>
     </template>
   </el-select>
 </template>

package/components/TableFilter/src/TableFilter.vue

@@ -18,7 +18,7 @@ export default {
 }
 </script>
 <script lang="ts" setup>
-import { PropType, provide, Ref, ref } from "vue"
+import { PropType, provide, Ref, ref, reactive } from "vue"
 import * as I from "../types"
 import FilterExternal from "./FilterExternal/FilterExternal.vue"
 import FilterSearchBox from "./FilterSearchBox.vue"
@@ -65,20 +65,6 @@ const onChange = (d: any) => {
     emit("search", listQuery.value, selectList.value)
     return
   }
-  // selectParams.value.forEach((a) => {
-  //   let i = selectList.value.findIndex((j) => a.prop == j.prop)
-  //   // selectList.value.splice(i, 1)
-
-  //   if (listQuery.value[a.prop] && !a.external) {
-  //     if (i > -1) {
-  //       selectList.value[i] = a
-  //     } else {
-  //       selectList.value.push(a)
-  //     }
-  //   }
-  // })
-  // console.log("selectList", selectList)
-  // console.log("listQuery.value", listQuery.value)
   emit("search", listQuery.value, selectList.value)
 }
 const onRemove = () => {
@@ -150,6 +136,11 @@ const setItem = (prop: string, paramsItem?: any) => {
     }
   })
 }
+//主动赋值
+const setValue = (prop: string, value: any) => {
+  listQuery.value[prop] = value
+  setItem(prop)
+}
 const state = ref({
   isFocus: false,
 })
@@ -187,7 +178,11 @@ const onTagClick = (item: I.ParamsItem) => {
   const i = selectParams.value.findIndex((a) => a.prop == item.prop && a.label == item.label)
   searchRef.value.setIndex(i)
 }
-
+const tableFilterContext = reactive<I.TableFilterContext>({
+  loadOptions,
+  setValue,
+})
+provide("tableFilter", tableFilterContext)
 provide("state", state)
 provide("selectList", selectList)
 defineExpose({ setItem, selectList, loadOptions, clear, refreshSelectParams, getCurrentIndex })

package/components/TableFilter/src/components/FilterItem.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, watch, Ref, PropType } from "vue"
+import { ref, watch, inject, reactive, Ref, PropType } from "vue"
 import * as I from "../../types"
 import container from "./containers"
 import * as Utils from "../../../../utils/common"
@@ -23,27 +23,10 @@ const props = defineProps({
   },
 })
 const emit = defineEmits(["change", "search"])
-const listQuery: Ref<ListQuery> = ref(props.listQuery)
+const listQuery = reactive<ListQuery>(props.listQuery)
 const query: Ref<ListQuery> = ref(Utils.deepClone(props.listQuery))
 const typeList = container
-// 两个watch导致循环无限调用问题，去掉了query的watch，该由change主动触发listQuery的改变
-// watch(
-//   () => query.value,
-//   (val) => {
-//     let q = val as I.ListQuery
-//     if (props.paramsItem.tableKey && props.paramsItem.tableKey.length) {
-//       props.paramsItem.tableKey.forEach((a, i) => {
-//         q[a] = val[props.paramsItem.prop][i]
-//       })
-//     }
-//     for (let i in q) {
-//       let item = q[i]
-//       listQuery.value[i] = item
-//     }
-//     console.log("query监听里面", JSON.stringify(listQuery.value))
-//   },
-//   { immediate: true }
-// )
+const tableFilter = inject("tableFilter")
 watch(
   () => props.listQuery,
   (val) => {
@@ -51,7 +34,7 @@ watch(
     let arr: Array<string> = []
     if (props.paramsItem.tableKey && props.paramsItem.tableKey.length) {
       props.paramsItem.tableKey.forEach((a) => {
-        arr.push(listQuery.value[a] + "")
+        arr.push(listQuery[a] + "")
       })
       q[props.paramsItem.prop] = arr
     }
@@ -74,17 +57,19 @@ const wrapperRef = ref()
 const onChange = (option: ChangeOption) => {
   if (props.paramsItem.tableKey && props.paramsItem.tableKey.length) {
     props.paramsItem.tableKey.forEach((a, i) => {
-      listQuery.value[a] = option.value[i]
+      listQuery[a] = option.value[i]
     })
   } else {
-    listQuery.value[option.prop] = option.value
+    listQuery[option.prop] = option.value
+  }
+  if (props.paramsItem.eventObject?.change) {
+    props.paramsItem.eventObject?.change(listQuery, props.paramsItem, tableFilter)
   }
-  // emit("change", option, props.paramsItem)
   emit("search", props.paramsItem)
   // close()
 }
-const setValue = (prop) => {
-  listQuery.value[prop] = query.value[prop]
+const setValue = (prop: string) => {
+  listQuery[prop] = query.value[prop]
 }
 const focus = () => {
   comRef.value && comRef.value.focus && comRef.value.focus()

package/components/TableFilter/types.ts

@@ -11,8 +11,14 @@ export interface ParamsItem {
   sortIndex?: number // 排序，数字越大越靠前
   tagNames?: string
   props?: ParamsItemProps
+  eventObject?: {
+    change?: (query: ListQuery, paramsItem: ParamsItem, context: TableFilterContext) => void
+  }
+}
+export interface TableFilterContext {
+  loadOptions: (prop: string) => void
+  setValue: (prop: string, value: any) => void
 }
-
 export interface ListQuery {
   [key: string]: any //string | boolean | number | Array<string> | Array<number>
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "easybill-ui",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "A component library for easybill",
   "author": "tuchongyang <779311998@qq.com>",
   "private": false,
@@ -14,5 +14,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f41aee744b7b9a741e40e2558fdb7486438b8f7a"
+  "gitHead": "17b80d6553dbd2a383f87a831afd57a1b50af101"
 }