Skip to content

Commit

Permalink
refactor:条件查询组件设置下拉选择数据指定的arrLabel及arrKey更新为label/key/日期范围之开始结束时间限制demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@wocwin
wocwin committed Jun 26, 2024
1 parent 503b835 commit 28851cf
Show file tree
Hide file tree
Showing 14 changed files with 754 additions and 776 deletions.
50 changes: 25 additions & 25 deletions docs/components/TQueryCondition/base.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ TQueryCondition/querybar

### 自定义按钮

::: demo 设置`footer`插槽，可以自定义按钮
::: demo 设置`footerBtn`插槽，可以自定义按钮,设置`:footer=null`,不展示按钮
TQueryCondition/footer
:::

Expand Down Expand Up @@ -90,24 +90,24 @@ TQueryCondition/dynamic

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

| 参数 | 说明 | 类型 | 默认值 |
| :----------------- | :---------------------------------------- | :---------- | :--------------------------------------------- |
| opts | 接收筛选器组件配置 | object | 无 |
| loading | 查询按钮 loading 状态，请求数据时需要体现 | Boolean | false |
| reset | 是否显示“重置”按钮 | Boolean | true |
| maxVisibleRows | 收起时设置默认展示行数 | Number | 1 |
| 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 | Number | 4 |
| 参数 | 说明 | 类型 | 默认值 |
| :----------------- | :---------------------------------------- | :------ | :--------------------------------------------- |
| opts | 接收筛选器组件配置 | object | 无 |
| loading | 查询按钮 loading 状态，请求数据时需要体现 | Boolean | false |
| reset | 是否显示“重置”按钮 | Boolean | true |
| maxVisibleRows | 收起时设置默认展示行数 | Number | 1 |
| 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 | - |
| configChangedReset | 更新opts是否重置（默认重置） | Boolean | false |
| isShowWidthSize | 是否开启动态设置每行显示数 | Boolean | false |
| widthSize | 每行显示多少项，最小值2 | Number | 4 |



Expand All @@ -123,8 +123,8 @@ TQueryCondition/dynamic
| slotName | 自定义输入框插槽(作用域插槽解构接收{param/scope}返回当前所有表单初始值) | string | - |
| comp | 组件名称，可直接指定全局注册的组件，也可引入'elmentUI'如：Button 或者'el-button' | string,component | - |
| span | 控件占用的列宽，默认占用 1 列，最多 4 列 (独占一行) | number | 1 |
| arrLabel | type=select-arr 时，每个下拉显示的中文 | String | dictLabel |
| arrKey | type=select-arr 时，每个下拉显示的中文传后台的数字 | String | dictValue |
| arrLabel | type=select-arr 时，每个下拉显示的中文 | String | label |
| arrKey | type=select-arr 时，每个下拉显示的中文传后台的数字 | String | key |
| defaultVal | 默认值 | - | - |
| bind | 渲染时组件会调用 v-bind 指定设置该配置更新元素的属性(继承第三方组件属性) | object，function | 无 |
| eventHandle | 配置组件事件，与写组件时change 等同理 | object | 本身值，当前formData数据 |
Expand All @@ -139,10 +139,10 @@ TQueryCondition/dynamic

#### 5、Slots

| 插槽名 | 说明 |
| :------- | :------------------------------- |
| querybar | 按钮操作插槽（位置基于重置后面） |
| footer | 按钮操作插槽 |
| 插槽名 | 说明 |
| :-------- | :------------------------------- |
| querybar | 按钮操作插槽（位置基于重置后面） |
| footerBtn | 按钮操作插槽 |

#### 6、Exposes（Method）

Expand Down
159 changes: 89 additions & 70 deletions docs/examples/TQueryCondition/base.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@
@submit="conditionEnter"
@handleEvent="handleEvent"
isExpansion
:btnResetBind="{ size: 'small', btnTxt: '搜索', icon: 'Search' }"
labelWidth="160px"
:btnResetBind="{ size: 'small', btnTxt: '重置', icon: 'Search' }"
>
<template #disabledDate="{ param }">
<el-date-picker
Expand All @@ -27,31 +28,32 @@
</template>

<script setup lang="tsx">
import { computed, onMounted, reactive, ref, toRefs } from 'vue'
import { computed, onMounted, reactive, ref, toRefs } from "vue"
let state: any = reactive({
queryData: {
userName: null, // 登录名
phonenumber: null, // 手机号码
workshopNum: null,
disabledDate: null,
date: null,
date1: null,
date2: null,
date1: null
},
listTypeInfo: {
sexList: [
{
label: '前纺一车间',
value: 'W1',
label: "前纺一车间",
value: "W1"
},
{
label: '前纺二车间',
value: 'W2',
},
],
},
label: "前纺二车间",
value: "W2"
}
]
}
})
// 禁用日期（只能选择7天内）
const firstChooseDate: any = ref('')
const firstChooseDate: any = ref("")
const disabledDate = (time: Date) => {
if (firstChooseDate.value) {
const timeRange = 1 * 24 * 60 * 60 * 1000 // 1天时间戳
Expand All @@ -63,119 +65,136 @@ const disabledDate = (time: Date) => {
}
}
const calendarChange = (val: any) => {
console.log("calendarChange----", val)
firstChooseDate.value = val[0].getTime() //点击第一次选中日期
if (val[1]) firstChooseDate.value = '' // 选中后必须清空
if (val[1]) firstChooseDate.value = "" // 选中后必须清空
}
const opts = computed(() => {
return {
userName: {
label: '登录名称',
comp: 'el-input',
label: "登录名称",
comp: "el-input"
},
phonenumber: {
label: '手机号码',
comp: 'el-input',
label: "手机号码",
comp: "el-input"
},
workshopNum: {
label: '车间',
comp: 'el-select',
changeEvent: 'change',
type: 'select-arr',
defaultVal: '',
label: "车间",
comp: "el-select",
changeEvent: "change",
type: "select-arr",
defaultVal: "",
span: 2,
list: 'sexList',
arrLabel: 'label',
arrKey: 'value',
listTypeInfo: state.listTypeInfo,
list: "sexList",
arrLabel: "label",
arrKey: "value",
listTypeInfo: state.listTypeInfo
},
disabledDate: {
labelRender: () => {
return <label style="color:red">禁用时间</label>
return <label style="color:red">插槽禁用时间</label>
},
span: 2,
slotName: 'disabledDate',
slotName: "disabledDate"
},
date1: {
label: '日期',
comp: 'el-date-picker',
date: {
label: "el-date-picker",
labelRender: () => {
return <label style="color:red">el-date-picker禁用</label>
},
comp: "el-date-picker",
span: 2,
event: "date",
bind: {
valueFormat: 'YYYY-MM-DD',
'disabled-date': (time) => {
return time.getTime() < new Date()
},
rangeSeparator: "-",
startPlaceholder: "开始日期",
endPlaceholder: "结束日期",
valueFormat: "YYYY-MM-DD",
type: "daterange",
"disabled-date": disabledDate
},
eventHandle: {
calendarChange: val => calendarChange(val)
}
},
date: {
label: '装炉时间',
comp: 'el-date-picker',
date2: {
label: "t-date-picker",
labelRender: () => {
return <label style="color:red">t-date-picker禁用</label>
},
comp: "t-date-picker",
span: 2,
event: 'date',
bind: {
rangeSeparator: '-',
startPlaceholder: '开始日期',
endPlaceholder: '结束日期',
valueFormat: 'YYYY-MM-DD',
type: 'daterange',
type: "daterange",
"disabled-date": disabledDate
},
eventHandle: {
calendarChange: val => calendarChange(val)
}
},
date1: {
label: "日期",
comp: "el-date-picker",
bind: {
valueFormat: "YYYY-MM-DD",
"disabled-date": time => {
return time.getTime() < new Date()
}
}
}
}
})
// 最终参数获取
const getQueryData = computed(() => {
const { userName, phonenumber, workshopNum, date, date1, disabledDate } =
toRefs(state.queryData)
const { userName, phonenumber, workshopNum, date, date1, date2, disabledDate } = toRefs(state.queryData)
return {
userName: userName.value,
workshopNum: workshopNum.value,
phonenumber: phonenumber.value,
start_time:
disabledDate.value && disabledDate.value[0]
? disabledDate.value[0]
: null,
end_time:
disabledDate.value && disabledDate.value[1]
? disabledDate.value[1]
: null,
start_time: disabledDate.value && disabledDate.value[0] ? disabledDate.value[0] : null,
end_time: disabledDate.value && disabledDate.value[1] ? disabledDate.value[1] : null,
date2: date2.value,
date1: date1.value,
beginDate: date.value && date.value[0] ? date.value[0] : null,
endDate: date.value && date.value[1] ? date.value[1] : null,
endDate: date.value && date.value[1] ? date.value[1] : null
}
})
// 查询条件change事件
const handleEvent = (type, val) => {
// console.log(111, type, val)
console.log("handleEvent", type, val)
switch (type) {
case 'date':
case "date":
const arr = [
{
label: '前纺一车间666',
value: 'W5',
label: "前纺一车间666",
value: "W5"
},
{
label: '前纺二车间999',
value: 'W6',
},
label: "前纺二车间999",
value: "W6"
}
]
state.listTypeInfo.sexList = [...state.listTypeInfo.sexList, ...arr]
console.log('获取event==date的数据', val)
console.log("获取event==date的数据", val)
break
}
}
onMounted(() => {
chageDefaultVal()
})
const chageDefaultVal = () => {
opts.value.workshopNum.defaultVal = 'W2'
console.log('opts.value.workshopNum', opts.value.workshopNum)
opts.value.workshopNum.defaultVal = "W2"
console.log("opts.value.workshopNum", opts.value.workshopNum)
const arr = [
{
label: '前纺一车间22',
value: 'W3',
label: "前纺一车间22",
value: "W3"
},
{
label: '前纺二车间33',
value: 'W4',
},
label: "前纺二车间33",
value: "W4"
}
]
state.listTypeInfo.sexList = [...state.listTypeInfo.sexList, ...arr]
// state.listTypeInfo.sexList = arr
Expand All @@ -184,6 +203,6 @@ const chageDefaultVal = () => {
const conditionEnter = (data: any) => {
console.log(1122, data)
state.queryData = data
console.log('最终参数', getQueryData.value)
console.log("最终参数", getQueryData.value)
}
</script>
24 changes: 12 additions & 12 deletions docs/examples/TQueryCondition/dynamic.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,12 @@ let state = reactive({
listTypeInfo: {
sexList: [
{
dictLabel: '前纺一车间',
dictValue: 'W1',
label: '前纺一车间',
key: 'W1',
},
{
dictLabel: '前纺二车间',
dictValue: 'W2',
label: '前纺二车间',
key: 'W2',
},
],
},
Expand All @@ -63,8 +63,8 @@ let state = reactive({
placeholder: '选择第一条数据才新增',
isSelfCom: true,
bind: {
valueCustom: 'dictValue',
labelCustom: 'dictLabel',
valueCustom: 'key',
labelCustom: 'label',
optionSource: [],
},
eventHandle: {
Expand Down Expand Up @@ -164,16 +164,16 @@ onMounted(() => {
const getList = () => {
listTypeInfo.value.sexList = [
{
dictLabel: '前纺一车间',
dictValue: 'W1',
label: '前纺一车间',
key: 'W1',
},
{
dictLabel: '前纺二车间',
dictValue: 'W2',
label: '前纺二车间',
key: 'W2',
},
{
dictLabel: '前纺三车间',
dictValue: 'W3',
label: '前纺三车间',
key: 'W3',
},
]
state.opt.workshopNum2.bind.optionSource = listTypeInfo.value.sexList
Expand Down
Loading

0 comments on commit 28851cf

Please sign in to comment.