Skip to content

W
wangxiaolu-sfa-ui
提交 ba19897f authored 作者: lidongxu's avatar lidongxu
浏览文件
操作

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

同上
上级 e2f90761
隐藏空白字符变更
内嵌 并排
正在显示 包含 202 行增加 和 132 行删除
src/components/XLSelect/index.vue 0 → 100644
浏览文件 @ ba19897f
<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>
src/components/ToolTip/index.vue → src/components/XLToolTip/index.vue
浏览文件 @ ba19897f
......@@ -12,19 +12,14 @@
</div>
</template>
<script>
export default {
name: 'MouseToolTip',
data() {
return {
show: false
}
}
}
<script setup
name="xl-tooltip">
const show = ref(false)
</script>
<style scoped lang="scss">
.wrap{
display: inline-block;
}
<style scoped
lang="scss">
.wrap {
display: inline-block;
}
</style>
\ No newline at end of file
src/main.js
浏览文件 @ ba19897f
......@@ -49,7 +49,9 @@ import CategoryTree from '@/components/CategoryTree'
// 返回头部
import BackToUp from '@/components/BackToUp'
// 自定义 toolTip
import CustomToolTip from '@/components/ToolTip'
import XLToolTip from '@/components/XLToolTip'
// 自定义 select
import XlSelect from '@/components/XLSelect'
// 开窗查询组件
import OpenDialog from '@/components/OpenDialog'
......@@ -80,7 +82,8 @@ app.component('GroupLegend', GroupLegend)
app.component('NoData', NoData)
app.component('CategoryTree', CategoryTree)
app.component('BackToUp', BackToUp)
app.component('CustomToolTip', CustomToolTip)
app.component('XlToolTip', XLToolTip)
app.component('XlSelect', XlSelect)
app.component('OpenDialog', OpenDialog)
// 全局插件
......
src/views/bi/finance/index.vue
浏览文件 @ ba19897f
......@@ -7,7 +7,8 @@
label-width="68px"
inline>
<el-form-item label="直播间">
<el-select v-model="queryParams.brand"
<xl-select v-model="queryParams.brand"
allOption
multiple
clearable
collapse-tags
......@@ -17,55 +18,55 @@
:label="str"
:value="str">
</el-option>
</el-select>
</xl-select>
</el-form-item>
<el-form-item label="口味">
<el-select v-model="queryParams.brand"
<el-select v-model="queryParams.taste"
multiple
clearable
collapse-tags
collapse-tags-tooltip
@change="getList">
<el-option v-for="str in brandList"
<el-option v-for="str in tasteList"
:label="str"
:value="str">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="规格">
<el-select v-model="queryParams.brand"
<el-select v-model="queryParams.spec"
multiple
clearable
collapse-tags
collapse-tags-tooltip
@change="getList">
<el-option v-for="str in brandList"
<el-option v-for="str in specList"
:label="str"
:value="str">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="系列">
<el-select v-model="queryParams.brand"
<el-select v-model="queryParams.series"
multiple
clearable
collapse-tags
collapse-tags-tooltip
@change="getList">
<el-option v-for="str in brandList"
<el-option v-for="str in seriesList"
:label="str"
:value="str">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="商品">
<el-select v-model="queryParams.brand"
<el-select v-model="queryParams.goods"
multiple
clearable
collapse-tags
collapse-tags-tooltip
@change="getList">
<el-option v-for="str in brandList"
<el-option v-for="str in goodsList"
:label="str"
:value="str">
</el-option>
......@@ -79,7 +80,7 @@
start-placeholder="开始日期"
end-placeholder="结束日期"
:shortcuts="pickerOptions"
@change="queryChangeFn('date')">
@change="queryChangeFn()">
</el-date-picker>
</el-form-item>
</el-form>
......@@ -118,10 +119,34 @@
<script setup>
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([
{
label: '直播间',
......@@ -166,113 +191,101 @@ const columns = 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 res = await getFinanceListAPI(queryParams.value)
tableData.value = res.data.list
}
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>
<style scoped
lang="scss">
::v-deep(.el-form-item) {
width: 250px;
&:last-of-type{
&:last-of-type {
width: 350px;
}
}
......
src/views/system/user/index.vue
浏览文件 @ ba19897f
......@@ -162,7 +162,7 @@
class-name="small-padding fixed-width"
align="left">
<template #default="scope">
<custom-tool-tip content="修改"
<xl-tool-tip content="修改"
placement="top"
v-if="scope.row.userId !== 1">
<el-button link
......@@ -170,8 +170,8 @@
icon="Edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['system:user:edit']"></el-button>
</custom-tool-tip>
<custom-tool-tip content="删除"
</xl-tool-tip>
<xl-tool-tip content="删除"
placement="top"
v-if="scope.row.userId !== 1">
<el-button link
......@@ -179,8 +179,8 @@
icon="Delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:user:remove']"></el-button>
</custom-tool-tip>
<custom-tool-tip content="重置密码"
</xl-tool-tip>
<xl-tool-tip content="重置密码"
placement="top"
v-if="scope.row.userId !== 1">
<el-button link
......@@ -188,8 +188,8 @@
icon="Key"
@click="handleResetPwd(scope.row)"
v-hasPermi="['system:user:resetPwd']"></el-button>
</custom-tool-tip>
<custom-tool-tip content="分配角色"
</xl-tool-tip>
<xl-tool-tip content="分配角色"
placement="top"
v-if="scope.row.userId !== 1">
<el-button link
......@@ -197,7 +197,7 @@
icon="CircleCheck"
@click="handleAuthRole(scope.row)"
v-hasPermi="['system:user:edit']"></el-button>
</custom-tool-tip>
</xl-tool-tip>
</template>
</el-table-column>
</el-table>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论