提交 ba19897f authored 作者: lidongxu's avatar lidongxu

feat(finance): 查询表单参数修改_封装全选选项下拉菜单

同上
上级 e2f90761
<template>
<el-select v-bind="$attrs"
v-model="selectedOptions"
@change="handleChange">
<el-option v-if="allOption"
:key="allSelectLabel"
:label="allSelectLabel"
:value="allSelectValue"></el-option>
<slot></slot>
</el-select>
</template>
<script setup>
const selectedOptions = ref([])
const props = defineProps({
allOption: { // 开启全选选项
type: Boolean,
default: false,
},
allSelectLabel: { // 全选文案
type: String,
default: '全选',
},
allSelectValue: { // 全选绑定值
type: [String, Number],
default: 'ALL',
},
allSingleValue: { // 全选模式(false:返回 option 组,true:返回 allSelectValue 值)
type: Boolean,
default: false,
},
modelValue: [String, Object, Array]
});
watch(() => props.modelValue, val => {
// if (props.allOption) {
// // 判断不是数组则转成数组
// if (!Array.isArray(val)) {
// emits('update:modelValue', [val]);
// selectedOptions.value = [val];
// }
// }
}, {
deep: true,
immediate: true
})
const handleChange = (val) => {
if (val.includes(props.allSelectValue)) {
selectedOptions.value = [props.allSelectValue];
} else {
selectedOptions.value = val;
}
// emit('update:modelValue', selectedOptions.value);
}
</script>
...@@ -12,19 +12,14 @@ ...@@ -12,19 +12,14 @@
</div> </div>
</template> </template>
<script> <script setup
export default { name="xl-tooltip">
name: 'MouseToolTip', const show = ref(false)
data() {
return {
show: false
}
}
}
</script> </script>
<style scoped lang="scss"> <style scoped
.wrap{ lang="scss">
display: inline-block; .wrap {
} display: inline-block;
}
</style> </style>
\ No newline at end of file
...@@ -49,7 +49,9 @@ import CategoryTree from '@/components/CategoryTree' ...@@ -49,7 +49,9 @@ import CategoryTree from '@/components/CategoryTree'
// 返回头部 // 返回头部
import BackToUp from '@/components/BackToUp' import BackToUp from '@/components/BackToUp'
// 自定义 toolTip // 自定义 toolTip
import CustomToolTip from '@/components/ToolTip' import XLToolTip from '@/components/XLToolTip'
// 自定义 select
import XlSelect from '@/components/XLSelect'
// 开窗查询组件 // 开窗查询组件
import OpenDialog from '@/components/OpenDialog' import OpenDialog from '@/components/OpenDialog'
...@@ -80,7 +82,8 @@ app.component('GroupLegend', GroupLegend) ...@@ -80,7 +82,8 @@ app.component('GroupLegend', GroupLegend)
app.component('NoData', NoData) app.component('NoData', NoData)
app.component('CategoryTree', CategoryTree) app.component('CategoryTree', CategoryTree)
app.component('BackToUp', BackToUp) app.component('BackToUp', BackToUp)
app.component('CustomToolTip', CustomToolTip) app.component('XlToolTip', XLToolTip)
app.component('XlSelect', XlSelect)
app.component('OpenDialog', OpenDialog) app.component('OpenDialog', OpenDialog)
// 全局插件 // 全局插件
......
...@@ -7,7 +7,8 @@ ...@@ -7,7 +7,8 @@
label-width="68px" label-width="68px"
inline> inline>
<el-form-item label="直播间"> <el-form-item label="直播间">
<el-select v-model="queryParams.brand" <xl-select v-model="queryParams.brand"
allOption
multiple multiple
clearable clearable
collapse-tags collapse-tags
...@@ -17,55 +18,55 @@ ...@@ -17,55 +18,55 @@
:label="str" :label="str"
:value="str"> :value="str">
</el-option> </el-option>
</el-select> </xl-select>
</el-form-item> </el-form-item>
<el-form-item label="口味"> <el-form-item label="口味">
<el-select v-model="queryParams.brand" <el-select v-model="queryParams.taste"
multiple multiple
clearable clearable
collapse-tags collapse-tags
collapse-tags-tooltip collapse-tags-tooltip
@change="getList"> @change="getList">
<el-option v-for="str in brandList" <el-option v-for="str in tasteList"
:label="str" :label="str"
:value="str"> :value="str">
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="规格"> <el-form-item label="规格">
<el-select v-model="queryParams.brand" <el-select v-model="queryParams.spec"
multiple multiple
clearable clearable
collapse-tags collapse-tags
collapse-tags-tooltip collapse-tags-tooltip
@change="getList"> @change="getList">
<el-option v-for="str in brandList" <el-option v-for="str in specList"
:label="str" :label="str"
:value="str"> :value="str">
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="系列"> <el-form-item label="系列">
<el-select v-model="queryParams.brand" <el-select v-model="queryParams.series"
multiple multiple
clearable clearable
collapse-tags collapse-tags
collapse-tags-tooltip collapse-tags-tooltip
@change="getList"> @change="getList">
<el-option v-for="str in brandList" <el-option v-for="str in seriesList"
:label="str" :label="str"
:value="str"> :value="str">
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="商品"> <el-form-item label="商品">
<el-select v-model="queryParams.brand" <el-select v-model="queryParams.goods"
multiple multiple
clearable clearable
collapse-tags collapse-tags
collapse-tags-tooltip collapse-tags-tooltip
@change="getList"> @change="getList">
<el-option v-for="str in brandList" <el-option v-for="str in goodsList"
:label="str" :label="str"
:value="str"> :value="str">
</el-option> </el-option>
...@@ -79,7 +80,7 @@ ...@@ -79,7 +80,7 @@
start-placeholder="开始日期" start-placeholder="开始日期"
end-placeholder="结束日期" end-placeholder="结束日期"
:shortcuts="pickerOptions" :shortcuts="pickerOptions"
@change="queryChangeFn('date')"> @change="queryChangeFn()">
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
</el-form> </el-form>
...@@ -118,10 +119,34 @@ ...@@ -118,10 +119,34 @@
<script setup> <script setup>
import { getFinanceListAPI } from '@/api' import { getFinanceListAPI } from '@/api'
import { useDatePickerOptions } from '@/hooks'
const { pickerOptions } = useDatePickerOptions()
const detailVisible = ref(false) // 详情
const brandList = ref(['a', 'b', 'c']) // 直播间
const tasteList = ref([]) // 口味
const specList = ref([]) // 规则
const seriesList = ref([]) // 系列
const goodsList = ref([]) // 商品
const data = reactive({
queryParams: {
brand: 'a', // 直播间
taste: '', // 口味
spec: '', // 规格
series: '', // 系列
goods: '', // 商品
date: [] // 日期
}
})
const { queryParams } = toRefs(data)
const queryChange = () => {
const detailVisible = ref(false) }
const aggregationList = ref(['料号', '规格', '口味', '直播间类型']) // 聚合条件
const brandList = ref([]) // 直播间列表 // 获取数据
const columns = ref([ const columns = ref([
{ {
label: '直播间', label: '直播间',
...@@ -166,113 +191,101 @@ const columns = ref([ ...@@ -166,113 +191,101 @@ const columns = ref([
]) ])
const tableData = ref([ const tableData = ref([
]) ])
const data = reactive({
queryParams: {
// aggregation: '料号', // 聚合条件
// brand: '' // 直播间
},
detailTableData: [],
detailColumns: [
{
label: '订单编号',
prop: 'id'
}, {
label: '店铺名称',
prop: 'name'
},
{
label: '原始单号',
prop: ''
}, {
label: '原始子单号',
prop: ''
}, {
label: '订单状态',
prop: ''
}, {
label: '交易时间',
prop: ''
}, {
label: '付款时间',
prop: ''
}, {
label: '发货时间',
prop: ''
}, {
label: '省市县',
prop: ''
}, {
label: '备注',
prop: ''
}, {
label: '应收金额',
prop: ''
}, {
label: '货品编号',
prop: ''
}, {
label: '货品名称',
prop: ''
}, {
label: '规格名称',
prop: ''
}, {
label: '分类',
prop: ''
}, {
label: '数量',
prop: ''
}, {
label: '优惠',
prop: ''
}, {
label: '分摊后总价',
prop: ''
}, {
label: '拆自组合装',
prop: ''
}, {
label: '组合装编码',
prop: ''
}, {
label: '组合装数量',
prop: ''
}, {
label: '赠品方式',
prop: ''
}, {
label: '分销商名称',
prop: ''
}, {
label: '分销商编号',
prop: ''
}, {
label: '平台货品名称',
prop: ''
}
]
})
const { queryParams } = toRefs(data)
const queryChange = () => {
}
// 获取数据
const getList = async () => { const getList = async () => {
const res = await getFinanceListAPI(queryParams.value) const res = await getFinanceListAPI(queryParams.value)
tableData.value = res.data.list tableData.value = res.data.list
} }
getList() getList()
const detailTableData = ref([])
const detailColumns = ref([
{
label: '订单编号',
prop: 'id'
}, {
label: '店铺名称',
prop: 'name'
},
{
label: '原始单号',
prop: ''
}, {
label: '原始子单号',
prop: ''
}, {
label: '订单状态',
prop: ''
}, {
label: '交易时间',
prop: ''
}, {
label: '付款时间',
prop: ''
}, {
label: '发货时间',
prop: ''
}, {
label: '省市县',
prop: ''
}, {
label: '备注',
prop: ''
}, {
label: '应收金额',
prop: ''
}, {
label: '货品编号',
prop: ''
}, {
label: '货品名称',
prop: ''
}, {
label: '规格名称',
prop: ''
}, {
label: '分类',
prop: ''
}, {
label: '数量',
prop: ''
}, {
label: '优惠',
prop: ''
}, {
label: '分摊后总价',
prop: ''
}, {
label: '拆自组合装',
prop: ''
}, {
label: '组合装编码',
prop: ''
}, {
label: '组合装数量',
prop: ''
}, {
label: '赠品方式',
prop: ''
}, {
label: '分销商名称',
prop: ''
}, {
label: '分销商编号',
prop: ''
}, {
label: '平台货品名称',
prop: ''
}
])
</script> </script>
<style scoped <style scoped
lang="scss"> lang="scss">
::v-deep(.el-form-item) { ::v-deep(.el-form-item) {
width: 250px; width: 250px;
&:last-of-type{
&:last-of-type {
width: 350px; width: 350px;
} }
} }
......
...@@ -162,7 +162,7 @@ ...@@ -162,7 +162,7 @@
class-name="small-padding fixed-width" class-name="small-padding fixed-width"
align="left"> align="left">
<template #default="scope"> <template #default="scope">
<custom-tool-tip content="修改" <xl-tool-tip content="修改"
placement="top" placement="top"
v-if="scope.row.userId !== 1"> v-if="scope.row.userId !== 1">
<el-button link <el-button link
...@@ -170,8 +170,8 @@ ...@@ -170,8 +170,8 @@
icon="Edit" icon="Edit"
@click="handleUpdate(scope.row)" @click="handleUpdate(scope.row)"
v-hasPermi="['system:user:edit']"></el-button> v-hasPermi="['system:user:edit']"></el-button>
</custom-tool-tip> </xl-tool-tip>
<custom-tool-tip content="删除" <xl-tool-tip content="删除"
placement="top" placement="top"
v-if="scope.row.userId !== 1"> v-if="scope.row.userId !== 1">
<el-button link <el-button link
...@@ -179,8 +179,8 @@ ...@@ -179,8 +179,8 @@
icon="Delete" icon="Delete"
@click="handleDelete(scope.row)" @click="handleDelete(scope.row)"
v-hasPermi="['system:user:remove']"></el-button> v-hasPermi="['system:user:remove']"></el-button>
</custom-tool-tip> </xl-tool-tip>
<custom-tool-tip content="重置密码" <xl-tool-tip content="重置密码"
placement="top" placement="top"
v-if="scope.row.userId !== 1"> v-if="scope.row.userId !== 1">
<el-button link <el-button link
...@@ -188,8 +188,8 @@ ...@@ -188,8 +188,8 @@
icon="Key" icon="Key"
@click="handleResetPwd(scope.row)" @click="handleResetPwd(scope.row)"
v-hasPermi="['system:user:resetPwd']"></el-button> v-hasPermi="['system:user:resetPwd']"></el-button>
</custom-tool-tip> </xl-tool-tip>
<custom-tool-tip content="分配角色" <xl-tool-tip content="分配角色"
placement="top" placement="top"
v-if="scope.row.userId !== 1"> v-if="scope.row.userId !== 1">
<el-button link <el-button link
...@@ -197,7 +197,7 @@ ...@@ -197,7 +197,7 @@
icon="CircleCheck" icon="CircleCheck"
@click="handleAuthRole(scope.row)" @click="handleAuthRole(scope.row)"
v-hasPermi="['system:user:edit']"></el-button> v-hasPermi="['system:user:edit']"></el-button>
</custom-tool-tip> </xl-tool-tip>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论