Parent Component
- example
<EditGoods :goodIds="goodIds ? [goodIds] : []" :goodsType="goodsType" />
<script setup lang="ts">
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import PListPageLayout from '@/bizComponents/PListPageLayout/index.vue';
import { queryByPageUrl, batchDelete } from './service';
import { TabsType } from './interface';
import { FormOpts } from '@/basicComponents/PForm/interface';
import Cookies from 'js-cookie';
import hasAuth from '@/utils/auth';
import SettingsForm from './components/SettingsForm.vue';
import EditGoods from './components/EditGoods.vue';
import { message } from 'ant-design-vue';
const listPageLayoutRef = ref();
const router = useRouter();
const checkboxList = ref<Array<any>>();
const requestHeader = { 'Forward-System': 'swipgateway' };
const batchEditVisible = ref(false);
const goodIds = ref<string>();
const goodsType = ref<string>();
// 根据路由获取user信息
const getUserInfo = () => {
const { curTab } = router.currentRoute.value.query || {};
return {
createUser: curTab === 'my' ? Cookies.get('userCode') : '',
};
};
//Tabs配置
const tabs = reactive<TabsType>([
{
name: 'all',
title: '政府消费券',
handle: () => ({}),
},
]);
//查询表单配置
const formOpts = reactive<FormOpts>({
ref: null,
formData: {},
fieldList: [
{
label: '商品ID类型',
value: 'goodsType',
comp: 'a-select',
bind: () => ({
type: 'select-arr',
options: [
{ value: 'POSKEY', label: 'POSKEY' },
{ value: 'FAMILYGROUP', label: 'FAMILYGROUP' },
{ value: 'MAJORGROUP', label: 'MAJORGROUP' },
],
}),
},
{
label: '商品黑名单',
value: 'storeId',
comp: 'a-input',
bind: () => ({
type: 'input',
event: 'account',
placeholder: '请输入商品ID',
maxLength: 40,
}),
},
],
});
//表头配置
const columns = reactive([
{
title: '',
type: 'checkbox',
field: 'checkId',
minWidth: 50,
fixed: 'left',
},
{
title: '商品ID类型',
field: 'goodsType',
minWidth: 100,
fixed: 'left',
},
{
title: '商品ID',
field: 'goodsId',
minWidth: 120,
fixed: 'left',
slots: { default: 'custom_render' },
},
{
title: '名称',
field: 'goodsName',
minWidth: 280,
slots: { default: 'custom_render' },
},
]);
//头部按钮配置
const toolsBtn = reactive([
{
code: 'editBatch',
type: 'primary',
label: '批量编辑商品',
handler: async (btn: any) => {
console.log('selection', checkboxList.value);
if (checkboxList.value?.length === 0) {
message.error('请选择商品');
return;
}
// 判断是否有重复的商品ID类型
const goodsTypeSet = new Set();
checkboxList.value.forEach((item: any) => {
goodsTypeSet.add(item.goodsType);
});
if (goodsTypeSet.size > 1) {
message.error('请选择相同的商品ID类型');
return;
}
goodIds.value = checkboxList.value
.map((item: any) => item.goodsId)
.join(',');
goodsType.value = checkboxList.value[0].goodsType;
console.log('goodIds', goodIds.value);
console.log('goodsType', goodsType.value);
batchEditVisible.value = true;
},
},
{
code: 'delete',
type: 'primary',
label: '删除选中商品',
disabled: () => {
return !hasAuth('Swip_Store_Management_Download');
},
handler: async (btn: any) => {
btn.loading = true;
const goodsInfoList = checkboxList.value?.map((i: any) => ({
goodsType: i.goodsType,
goodsId: i.goodsId,
}));
const reqParam = {
goodsInfoList: goodsInfoList,
userName: Cookies.get('userCode'),
};
const res = await batchDelete(reqParam);
if (res.statusCode === 100) {
message.success('删除成功');
} else {
message.error('删除失败');
}
btn.loading = false;
listPageLayoutRef.value.handlePageData();
},
},
]);
// 表格数据按钮配置
const rowsAction = reactive([]);
const getCheckboxDatas = (checkboxData: Array<any>) => {
checkboxList.value = checkboxData;
};
</script>
<template>
<div>
<SettingsForm />
</div>
<PListPageLayout
ref="listPageLayoutRef"
:tabs="tabs"
:columns="columns"
:tools-btn="toolsBtn"
:rowsAction="rowsAction"
:formOpts="formOpts"
:sourceUrl="queryByPageUrl"
:requestHeader="requestHeader"
:fieldName="{
startTime: 'effectRangeStart',
endTime: 'effectRangeEnd',
}"
:sourceParams="getUserInfo()"
@getCheckboxDatas="getCheckboxDatas"
>
<template #custom_render="{ row, column }">
<a-tooltip placement="top">
<template #title>{{ row[column.field] }}</template>
<span>{{ row[column.field] ? row[column.field] : '-' }}</span>
</a-tooltip>
</template>
</PListPageLayout>
<a-modal
:title="'批量编辑商品黑名单'"
:visible="batchEditVisible"
:width="600"
:footer="null"
@ok="batchEditVisible = false"
@cancel="batchEditVisible = false"
>
// paramters passing to child component
<EditGoods :goodIds="goodIds ? [goodIds] : []" :goodsType="goodsType" />
</a-modal>
</template>
<style lang="less">
.switch_con {
display: flex;
align-items: center;
color: #707683;
span:first-child {
margin-right: 5px;
}
span.highlight {
color: #006241;
}
}
.detail-link-style {
color: #006241;
cursor: pointer;
text-decoration: underline;
text-underline-position: under;
}
</style>
Child Component
- example
` const prop = defineProps({
goodsType: { type: String, required: true },
goodIds: { type: String, required: true },
});
`
<template>
<div class="edit-goods-container">
<a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
<a-form-item label="商品ID类型">
<a-input
:disabled="true"
v-model:value="goodsType"
class="goods-input"
/>
</a-form-item>
<a-form-item label="商品ID">
<a-textarea :rows="4" v-model:value="goodIds" class="goods-textarea" />
</a-form-item>
<a-form-item :wrapper-col="{ offset: 6, span: 16 }">
<a-space>
<a-button type="primary" @click="submit">确定</a-button>
<!-- <a-button @click="cancel">取消</a-button> -->
</a-space>
</a-form-item>
</a-form>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref, watch, defineProps } from 'vue';
import { updateGoodsInfoByType } from '../service';
import { message } from 'ant-design-vue';
import Cookies from 'js-cookie';
// accept parmeter from the parent compoenet
const prop = defineProps({
goodsType: { type: String, required: true },
goodIds: { type: String, required: true },
});
const goodsType = ref<string>();
const goodIds = ref<string>();
// watch parameters
watch(
() => [prop.goodsType, prop.goodIds],
() => {
goodsType.value = prop.goodsType;
goodIds.value = prop.goodIds;
}
);
onMounted(() => {
goodsType.value = prop.goodsType;
goodIds.value = prop.goodIds;
});
const submit = () => {
const reqParam = {
goodsType: goodsType.value,
goodsIdList: goodIds.value,
userName: Cookies.get('userCode'),
};
updateGoodsInfoByType(reqParam).then((res: any) => {
if (res.statusCode === 100) {
message.success('修改成功');
} else {
message.error('修改失败');
}
});
};
</script>
<style lang="less" scoped>
.edit-goods-container {
padding: 24px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
.goods-input,
.goods-textarea {
width: 100%;
}
}
.a-form-item :deep(.ant-form-item-control-input-content) {
display: flex;
justify-content: center;
}
</style>
