feat(order): 重构订单页面- 新增 config.js 文件，定义订单搜索和表格配置
- 添加自定义搜索表单和内容组件 - 优化订单列表页面布局和功能 - 实现订单状态标签和操作按钮的自定义渲染
This commit is contained in:
182
src/components/searchForm/index.vue
Normal file
182
src/components/searchForm/index.vue
Normal file
@@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<div class="search-form">
|
||||
<!-- 头部搜索栏 -->
|
||||
<el-form v-model="formData" inline>
|
||||
<el-form-item
|
||||
v-for="(item, index) in searchFormData"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:prop="item.prop"
|
||||
>
|
||||
<template v-if="item.type === 'select'">
|
||||
<template v-if="item.remote">
|
||||
<el-select
|
||||
v-model="formData[item.prop]"
|
||||
:filterable="item.filterable ?? true"
|
||||
remote
|
||||
:placeholder="item.placeholder"
|
||||
:remote-method="item.remoteMethod"
|
||||
:clearable="item.clearable ?? true"
|
||||
:remote-show-suffix="item.remoteShowSuffix ?? true"
|
||||
:style="{ width: item.width || '100%' }"
|
||||
>
|
||||
<el-option
|
||||
v-for="val in options"
|
||||
:key="val.value"
|
||||
:label="val.label"
|
||||
:value="val.value"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-select
|
||||
v-model="formData[item.prop]"
|
||||
:filterable="item.filterable ?? true"
|
||||
:placeholder="item.placeholder"
|
||||
:clearable="item.clearable ?? true"
|
||||
:style="{ width: item.width || '100%' }"
|
||||
>
|
||||
<el-option
|
||||
v-for="val in item.children.list"
|
||||
:key="val.value"
|
||||
:label="val.label"
|
||||
:value="val.value"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'daterange'">
|
||||
<el-date-picker
|
||||
v-model="formData[item.prop]"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
value-format="YYYY-MM-DD"
|
||||
end-placeholder="结束日期"
|
||||
:style="{ width: item.width || '100%' }"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'monthrange'">
|
||||
<el-date-picker
|
||||
v-model="formData[item.prop]"
|
||||
type="monthrange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
value-format="YYYY-MM"
|
||||
end-placeholder="结束日期"
|
||||
:style="{ width: item.width || '100%' }"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'treeSelect'">
|
||||
<el-tree-select
|
||||
filterable
|
||||
v-model="formData[item.prop]"
|
||||
:data="treeData"
|
||||
placeholder="请选择"
|
||||
:render-after-expand="false"
|
||||
:style="{ width: item.width || '100%' }"
|
||||
:props="defaultProps"
|
||||
value-key="id"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<component
|
||||
:is="`el-${item.type}`"
|
||||
v-model="formData[item.prop]"
|
||||
:placeholder="item.placeholder"
|
||||
:style="{ width: item.width || '100%' }"
|
||||
>
|
||||
</component>
|
||||
</template>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="showBtn">
|
||||
<el-button type="primary" @click="searchForm">查询</el-button>
|
||||
<el-button @click="reset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onBeforeMount, watch, watchEffect, ref, reactive } from 'vue'
|
||||
let obj = {}
|
||||
const props = defineProps({
|
||||
/**
|
||||
* @param {Array} search 搜索栏
|
||||
*/
|
||||
search: { type: Array, default: () => [] },
|
||||
showBtn: {
|
||||
type: Boolean,
|
||||
default: () => true
|
||||
}
|
||||
})
|
||||
const treeData = ref([])
|
||||
const defaultProps = { value: 'id', label: 'label', children: 'children' }
|
||||
const options = ref([])
|
||||
const formData = ref({})
|
||||
const searchFormData = ref(props.search)
|
||||
const emits = defineEmits(['searchData'])
|
||||
watchEffect(() => {
|
||||
const items = props.search
|
||||
items.forEach((item) => {
|
||||
obj[item.prop] = undefined
|
||||
})
|
||||
formData.value = JSON.parse(JSON.stringify(obj))
|
||||
})
|
||||
|
||||
watch(
|
||||
() => formData.value,
|
||||
(newVal) => {
|
||||
console.log('newVal', newVal, !props.showBtn)
|
||||
!props.showBtn && searchForm()
|
||||
}
|
||||
)
|
||||
|
||||
function searchForm() {
|
||||
emits('searchData', formData.value)
|
||||
}
|
||||
|
||||
function reset() {
|
||||
formData.value = JSON.parse(JSON.stringify(obj))
|
||||
emits('resetData', formData.value)
|
||||
}
|
||||
|
||||
function createRemoteMethod(fn) {
|
||||
return async (query) => {
|
||||
const res = await fn(query)
|
||||
options.value = res.data
|
||||
}
|
||||
}
|
||||
|
||||
// const getTreeData = async () => {
|
||||
// const response = await getDeptTree()
|
||||
// treeData.value = response
|
||||
// }
|
||||
|
||||
onBeforeMount(() => {
|
||||
// Object.keys(obj).includes('treeSelect') && getTreeData()
|
||||
const findItem = searchFormData.value.find((item) => item.type === 'select' && item.remote)
|
||||
if (findItem) {
|
||||
findItem.remoteMethod = createRemoteMethod(findItem.remoteMethod)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search-form{
|
||||
background: white;
|
||||
padding: 1rem;
|
||||
//padding-bottom: 0;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
div {
|
||||
:deep(.el-form) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
row-gap: 20px;
|
||||
.el-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user