You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
143 lines
4.1 KiB
143 lines
4.1 KiB
<template>
|
|
<el-dialog v-model="visible" title="选择商品">
|
|
<table-list
|
|
ref="refsTable"
|
|
v-loading="loading"
|
|
:code="code"
|
|
:config="config"
|
|
:data="list"
|
|
:operation="['search']"
|
|
:reset="handleReset"
|
|
:total="total"
|
|
@search="handleSearch"
|
|
>
|
|
<template #search>
|
|
<el-form inline>
|
|
<el-form-item label="商品名称" prop="name">
|
|
<el-input v-model="state.condition.name" />
|
|
</el-form-item>
|
|
<el-form-item label="商品分类" prop="categoryId">
|
|
<el-cascader
|
|
v-model="state.condition.categoryId"
|
|
:options="opts.category"
|
|
:props="{
|
|
checkStrictly: true,
|
|
expandTrigger: 'hover',
|
|
label: 'name',
|
|
value: 'id',
|
|
children: 'childList',
|
|
emitPath: false,
|
|
}"
|
|
/>
|
|
</el-form-item>
|
|
</el-form>
|
|
</template>
|
|
</table-list>
|
|
<template #footer>
|
|
<el-button @click="handleClose">取消</el-button>
|
|
<el-button type="primary" @click="handlePick">确认选择</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup lang="jsx">
|
|
import ElImage from '@/components/extra/ElImage.vue';
|
|
const emits = defineEmits(['pick']);
|
|
const store = useStore();
|
|
const loading = ref(false);
|
|
const visible = ref(false);
|
|
const refsTable = ref(null);
|
|
const code = computed(() => store.state.productPicker.code);
|
|
const list = computed(() => store.state.productPicker.list);
|
|
const total = computed(() => store.state.productPicker.total);
|
|
const opts = computed(() => store.state.productPicker.opts);
|
|
if (!unref(opts).init) {
|
|
store.dispatch('productPicker/load');
|
|
}
|
|
|
|
/* 列表查询 */
|
|
const state = reactive({
|
|
condition: {
|
|
name: null,
|
|
categoryId: null,
|
|
},
|
|
picked: null,
|
|
});
|
|
watch(
|
|
() => state.condition,
|
|
(value) => {
|
|
store.commit('productPicker/setCondition', _.cloneDeep(value));
|
|
},
|
|
{ immediate: true, deep: true }
|
|
);
|
|
const handleReset = () => {
|
|
state.condition = {
|
|
name: null,
|
|
categoryId: null,
|
|
};
|
|
};
|
|
const handleSearch = async () => {
|
|
loading.value = true;
|
|
await store.dispatch('productPicker/search');
|
|
loading.value = false;
|
|
};
|
|
|
|
/* 操作 */
|
|
// 显示
|
|
const handleShow = () => {
|
|
visible.value = true;
|
|
handleSearch();
|
|
};
|
|
// 取消
|
|
const handleClose = () => {
|
|
visible.value = false;
|
|
};
|
|
// 确定
|
|
const handlePick = async () => {
|
|
emits('pick', [...unref(refsTable).selection]);
|
|
handleClose();
|
|
};
|
|
defineExpose({
|
|
show: handleShow,
|
|
close: handleClose,
|
|
});
|
|
|
|
/* 列表配置 */
|
|
const config = reactive({
|
|
columns: [
|
|
{
|
|
type: 'selection',
|
|
width: 60,
|
|
},
|
|
{
|
|
label: '编号',
|
|
prop: 'id',
|
|
width: 100,
|
|
},
|
|
{
|
|
label: '商品图片',
|
|
minWidth: 100,
|
|
slots: {
|
|
default: ({ row }) => <ElImage src={row.mainPicture} alt={row.name} height="100px" />,
|
|
},
|
|
},
|
|
{
|
|
label: '商品名称',
|
|
prop: 'name',
|
|
minWidth: 160,
|
|
},
|
|
{
|
|
label: '商品价格',
|
|
prop: 'startingPrice',
|
|
minWidth: 160,
|
|
},
|
|
],
|
|
});
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.common-list {
|
|
height: 500px;
|
|
}
|
|
</style>
|