Skip to content

Commit

Permalink
refactor:TQueryCondition组件新增每行显示多少项，最小值3
Browse files Browse the repository at this point in the history
  • Loading branch information
@wocwin
wocwin committed Jun 3, 2024
1 parent 9975474 commit 7cf082c
Show file tree
Hide file tree
Showing 5 changed files with 368 additions and 152 deletions.
40 changes: 25 additions & 15 deletions docs/components/TQueryCondition/base.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,12 @@ TQueryCondition/querybar
TQueryCondition/footer
:::

### 每行展示多少项

::: demo 开启`isShowWidthSize`；设置`widthSize`值最小值3，默认4
TQueryCondition/widthSize
:::

### TQueryCondition 参数配置

---
Expand All @@ -78,21 +84,25 @@ TQueryCondition/footer

### 2、配置参数（Attributes）

| 参数 | 说明 | 类型 | 默认值 |
| :-------------- | :---------------------------------------- | :---------- | :--------------------------------------------- |
| opts | 接收筛选器组件配置 | object | 无 |
| loading | 查询按钮 loading 状态，请求数据时需要体现 | Boolean | false |
| reset | 是否显示“重置”按钮 | Boolean | true |
| maxVisibleSpans | 设置展开的最大 span 数量 | Number | 4 |
| boolEnter | 是否敲回车查询 | Boolean | true |
| isShowOpen | 是否显示收起和展开 | Boolean | true |
| packUpTxt | 收起文案 | String | '收起' |
| unfoldTxt | 展开文案 | String | '展开' |
| isExpansion | 是否默认展开 | Boolean | false |
| labelWidth | labelWidth 宽度 | String | '120px' |
| btnCheckBind | 查询按钮配置（继承`el-button`所有属性） | object | `{type: primary, size: default,btnTxt:'查询'}` |
| btnResetBind | 重置按钮配置（继承`el-button`所有属性） | object | `{ size: default,btnTxt:'重置'}` |
| footer | 自定义按钮(设置:footer="null"不显示按钮) | object/slot | - |
| 参数 | 说明 | 类型 | 默认值 |
| :----------------- | :---------------------------------------- | :---------- | :--------------------------------------------- |
| opts | 接收筛选器组件配置 | object | 无 |
| loading | 查询按钮 loading 状态，请求数据时需要体现 | Boolean | false |
| reset | 是否显示“重置”按钮 | Boolean | true |
| maxVisibleSpans | 设置展开的最大 span 数量 | Number | 4 |
| boolEnter | 是否敲回车查询 | Boolean | true |
| isShowOpen | 是否显示收起和展开 | Boolean | true |
| packUpTxt | 收起文案 | String | '收起' |
| unfoldTxt | 展开文案 | String | '展开' |
| isExpansion | 是否默认展开 | Boolean | false |
| labelWidth | labelWidth 宽度 | String | '120px' |
| btnCheckBind | 查询按钮配置（继承`el-button`所有属性） | object | `{type: primary, size: default,btnTxt:'查询'}` |
| btnResetBind | 重置按钮配置（继承`el-button`所有属性） | object | `{ size: default,btnTxt:'重置'}` |
| footer | 自定义按钮(设置:footer="null"不显示按钮) | object/slot | - |
| configChangedReset | 更新opts是否重置（默认重置） | Boolean | false |
| isShowWidthSize | 是否开启动态设置每行显示数 | Boolean | false |
| widthSize | 每行显示多少项，最小值2最大值8 | Number | 4 |



### 3、opts Attributes
Expand Down
5 changes: 5 additions & 0 deletions docs/components/TSelectTable/base.md
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
# 下拉选择表格组件
::: warning 注意

使用此组件必须:`Element-plus`版本`v2.6`以上；`@wocwin/t-ui-plus`最新版本(`v1.3.1`以上)。

:::

### 单选

Expand Down
135 changes: 34 additions & 101 deletions docs/examples/TQueryCondition/base.vue
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,19 @@
<template>
<t-layout-page>
<t-layout-page-item>
<t-query-condition :opts="state.opts" @submit="conditionEnter" @handleEvent="handleEvent" isExpansion
:btnResetBind="{ size: 'small', btnTxt: '搜索', icon: 'Search' }" />
<t-query-condition
:opts="opts"
@submit="conditionEnter"
@handleEvent="handleEvent"
isExpansion
:btnResetBind="{ size: 'small', btnTxt: '搜索', icon: 'Search' }"
/>
</t-layout-page-item>
</t-layout-page>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue'
const listTypeInfo = ref({
sexList: [
{
label: '前纺一车间',
value: 'W1',
},
{
label: '前纺二车间',
value: 'W2',
},
],
})
let state: any = reactive({
queryData: {
userName: null, // 登录名
Expand All @@ -31,8 +24,26 @@ let state: any = reactive({
date: null,
date1: null,
},
opts: {
listTypeInfo: {
sexList: [
{
label: '前纺一车间',
value: 'W1',
},
{
label: '前纺二车间',
value: 'W2',
},
],
},
})
const disabledDate = (formData) => {
return (time) => {
return time.getTime() < new Date(formData.start_time).getTime() - 86400000
}
}
const opts = computed(() => {
return {
userName: {
label: '登录名称',
comp: 'el-input',
Expand All @@ -51,7 +62,7 @@ let state: any = reactive({
list: 'sexList',
arrLabel: 'label',
arrKey: 'value',
listTypeInfo: listTypeInfo.value,
listTypeInfo: state.listTypeInfo,
},
start_time: {
label: '开始时间',
Expand All @@ -70,12 +81,7 @@ let state: any = reactive({
formData.start_time == null || formData.start_time == ''
? true
: false,
'disabled-date': (time) => {
return (
time.getTime() <
new Date(formData.start_time).getTime() - 86400000
)
},
'disabled-date': disabledDate(formData),
}
},
},
Expand Down Expand Up @@ -104,79 +110,6 @@ let state: any = reactive({
},
}
})
// const opts = computed(() => {
// return {
// userName: {
// label: '登录名称',
// comp: 'el-input',
// },
// phonenumber: {
// label: '手机号码',
// comp: 'el-input',
// },
// workshopNum: {
// label: '车间',
// comp: 'el-select',
// changeEvent: 'change',
// type: 'select-arr',
// defaultVal: '',
// span: 2,
// list: 'sexList',
// arrLabel: 'label',
// arrKey: 'value',
// listTypeInfo: state.listTypeInfo,
// },
// start_time: {
// label: '开始时间',
// comp: 'el-date-picker',
// bind: {
// valueFormat: 'YYYY-MM-DD',
// },
// },
// end_time: {
// label: '结束时间',
// comp: 'el-date-picker',
// bind: (formData) => {
// return {
// valueFormat: 'YYYY-MM-DD',
// disabled:
// formData.start_time == null || formData.start_time == ''
// ? true
// : false,
// 'disabled-date': (time) => {
// return (
// time.getTime() <
// new Date(formData.start_time).getTime() - 86400000
// )
// },
// }
// },
// },
// date1: {
// label: '日期',
// comp: 'el-date-picker',
// bind: {
// valueFormat: 'YYYY-MM-DD',
// 'disabled-date': (time) => {
// return time.getTime() < new Date()
// },
// },
// },
// date: {
// label: '装炉时间',
// comp: 'el-date-picker',
// span: 2,
// event: 'date',
// bind: {
// rangeSeparator: '-',
// startPlaceholder: '开始日期',
// endPlaceholder: '结束日期',
// valueFormat: 'YYYY-MM-DD',
// type: 'daterange',
// },
// },
// }
// })
// 最终参数获取
const getQueryData = computed(() => {
const {
Expand Down Expand Up @@ -215,7 +148,7 @@ const handleEvent = (type, val) => {
value: 'W6',
},
]
listTypeInfo.value.sexList = [...listTypeInfo.value.sexList, ...arr]
state.listTypeInfo.sexList = [...state.listTypeInfo.sexList, ...arr]
console.log('获取event==date的数据', val)
break
}
Expand All @@ -224,8 +157,8 @@ onMounted(() => {
chageDefaultVal()
})
const chageDefaultVal = () => {
state.opts.workshopNum.defaultVal = 'W2'
console.log('opts.value.workshopNum', state.opts.workshopNum)
opts.value.workshopNum.defaultVal = 'W2'
console.log('opts.value.workshopNum', opts.value.workshopNum)
const arr = [
{
label: '前纺一车间22',
Expand All @@ -236,8 +169,8 @@ const chageDefaultVal = () => {
value: 'W4',
},
]
listTypeInfo.value.sexList = [...listTypeInfo.value.sexList, ...arr]
// listTypeInfo.value.sexList = arr
state.listTypeInfo.sexList = [...state.listTypeInfo.sexList, ...arr]
// state.listTypeInfo.sexList = arr
}
// 点击查询按钮
const conditionEnter = (data: any) => {
Expand Down

0 comments on commit 7cf082c

Please sign in to comment.