文章目录
Slider滑块
<template>
<div class="simple_slider_container">
<div v-if="title" :style="{ fontSize: fontSize, width: titleWidth }">{{ prop.title }}</div>
<el-slider
v-model="sliderValue"
:max="prop.max * Math.pow(10, prop.precision)"
:min="prop.min * Math.pow(10, prop.precision)"
:format-tooltip="(val) => val / Math.pow(10, prop.precision)"
style="margin-left: 10px"
/>
<div :style="{ fontSize: fontSize, minWidth: '45px', textAlign: 'center' }">{{ data }}</div>
<el-icon v-if="prop.setDefaultButton" class="simple_slider_refresh" @click="setDefault">
<RefreshRight />
</el-icon>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
// 计算属性：转换真实值 ↔ 滑块原始值
import { onMounted } from 'vue'
const sliderValue = computed({
get() {
// 真实值 → 滑块值（乘以10）
return data.value * Math.pow(10, prop.precision)
},
set(val) {
// 滑块值 → 真实值（除以10）
data.value = val / Math.pow(10, prop.precision)
},
})
const prop = defineProps({
defaultValue: {
type: Number,
default: 0,
},
setDefaultButton: {
type: Boolean,
default: true,
},
max: {
type: Number,
default: 100,
},
min: {
type: Number,
default: 0,
},
name: {
type: Number,
default: 0,
},
title: String,
fontSize: {
type: String,
default: '16px',
},
titleWidth: {
type: String,
default: '6rem',
},
precision: {
type: Number,
default: 0,
},
})
const data = defineModel()
const setDefault = () => {
data.value = prop.defaultValue
}
onMounted(() => {
if (data.value == null) {
data.value = prop.defaultValue
}
})
</script>
<style scoped lang="less">
.simple_slider_container {
width: 100%;
display: flex;
align-items: center;
}
.simple_slider_refresh {
}
.simple_slider_refresh:hover {
cursor: pointer;
}
</style>
Select选择器
<template>
<div class="simple_slider_container">
<div v-if="title" :style="{ fontSize: fontSize, width: titleWidth }">{{ prop.title }}</div>
<el-select v-model="data" style="width: 150px">
<el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value" />
</el-select>
</div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
const prop = defineProps({
defaultValue: {
type: Number,
default: 0,
},
options: {
type: Array,
default: () => [],
},
title: String,
fontSize: {
type: String,
default: '16px',
},
titleWidth: {
type: String,
default: '6rem',
},
})
const data = defineModel()
onMounted(() => {
if (data.value == null) {
data.value = prop.defaultValue
}
})
</script>
<style scoped lang="less">
.simple_slider_container {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
</style>
Antd选择
<template>
<FormSearch v-model:value="queryParam"
:columns="boutiqueSolutionSearchArgs"
@on-search="getList" />
<a-table
ref="sTableRef"
:columns="columns.filter(i=>i.dataIndex !== 'action')"
:data-source="list"
:loading="loading"
:pagination="false"
:row-selection="rowSelection"
:rowKey="record => record.solutionId"
bordered>
<template #bodyCell="{ column, text }">
<template v-if="column.dataIndex === 'boutiqueSolutionState'">
{{ text === "LAUNCHED" ? "上架" : "下架" }}
</template>
</template>
<template #footer>
<div style="display:flex;justify-content: flex-end;">
<a-pagination v-model:current="pageNum"
v-model:page-size="pageSize"
:total="total"
show-quick-jumper
@change="onChange"/>
</div>
</template>
</a-table>
</template>
<script lang="ts" setup>
import {boutiqueSolutionSearchArgs, columns} from "@/views/solution";
import {
pageSolution
} from "@/api/solution";
import {onMounted, ref} from "vue";
import {FormSearch} from "@/components";
// const emits = defineEmits(["selectSolutionIdList"]);
let sTableRef = ref()
const queryParam = ref<any>({ueVersion: "V5_5"});
let list = ref()
const selectedSolutionIdList = defineModel()
const loading = ref(false)
const rowSelection = ref({
selectedRowKeys: selectedSolutionIdList,
onChange: (selectedRowKeys: (string | number)[], selectedRows: any[]) => {
console.log(selectedRowKeys)
selectedSolutionIdList.value=selectedRowKeys
// emits('selectSolutionIdList', selectedSolutionIdList.value)
},
});
// 获取列表
const getList = async () => {
const param = {pageNum: pageNum.value, pageSize: pageSize.value, ...queryParam.value};
const res = await pageSolution(param);
list.value = res.data.list;
total.value = res.data.total;
};
const pageNum = ref<number>(1);
const pageSize = ref<number>(10);
const total = ref<number>(0);
const onChange = (pageNumber: number) => {
loading.value = true
getList().finally(() => {loading.value=false})
};
onMounted(async () => {
loading.value = true
await getList().finally(() => {loading.value=false})
})
</script>
<style lang="less" scoped>
</style>
<template>
<FormSearch v-model:value="queryParam"
:columns="boutiqueSolutionSearchArgs"
@on-search="getList"/>
<a-table
ref="sTableRef"
:columns="columns.filter(i=>i.dataIndex !== 'action')"
:data-source="list"
:loading="loading"
:pagination="false"
:row-selection="rowSelection"
:rowKey="record => record.solutionId"
bordered>
<template #bodyCell="{ column, text }">
<template v-if="column.dataIndex === 'boutiqueSolutionState'">
{{ text === "LAUNCHED" ? "上架" : "下架" }}
</template>
</template>
<template #footer>
<div style="display:flex;justify-content: flex-end;">
<a-pagination v-model:current="pageNum"
v-model:page-size="pageSize"
:total="total"
show-quick-jumper
@change="onChange"/>
</div>
</template>
</a-table>
</template>
<script lang="ts" setup>
import {boutiqueSolutionSearchArgs, columns} from "@/views/solution";
import {
pageSolution
} from "@/api/solution";
import {onMounted, ref} from "vue";
import {FormSearch} from "@/components";
// const emits = defineEmits(["selectSolutionIdList"]);
let sTableRef = ref()
const queryParam = ref<any>({ueVersion: "V5_5"});
let list = ref()
const selectedSolutionIdList = ref()
const selectedSolutionRow = ref([])
const loading = ref(false)
const rowSelection = ref({
selectedRowKeys: selectedSolutionIdList,
onChange: (selectedRowKeys: (string | number)[], selectedRows: any[]) => {
console.log(selectedRowKeys)
selectedSolutionIdList.value = selectedRowKeys
// emits('selectSolutionIdList', selectedSolutionIdList.value)
},
onSelect: (record: any, selected: boolean, selectedRows: []) => {
// console.log("==============1",selectedRows);
selectedSolutionRow.value.push(selectedRows)
},
onSelectAll: (selected: boolean, selectedRows: any[], changeRows: []) => {
selectedSolutionRow.value.push(selectedRows)
},
preserveSelectedRowKeys: true // 关键：否则翻页就清空
});
// 获取列表
const getList = async () => {
const param = {pageNum: pageNum.value, pageSize: pageSize.value, ...queryParam.value};
const res = await pageSolution(param);
list.value = res.data.list;
total.value = res.data.total;
};
const pageNum = ref<number>(1);
const pageSize = ref<number>(10);
const total = ref<number>(0);
const onChange = (pageNumber: number) => {
loading.value = true
getList().finally(() => {
loading.value = false
})
};
onMounted(async () => {
loading.value = true
await getList().finally(() => {
loading.value = false
})
})
</script>
<style lang="less" scoped>
</style>
<a-input-number
v-model:value="goodsState.price"
:formatter="(value: number) => value / 100"
:max="999999"
:min="0"
:parser="(value: number) => value * 100"
:precision="2"
style="width: 100%"
suffix="元"
/>