调整
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,311 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="880"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:maxable="maxAble"
|
||||
:title="'设置商品区域价格'"
|
||||
:body-style="{ paddingBottom: '8px' }"
|
||||
@update:visible="updateVisible"
|
||||
:maskClosable="false"
|
||||
@ok="save"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="{ md: { span: 8 }, sm: { span: 24 } }"
|
||||
:wrapper-col="{ md: { span: 24 }, sm: { span: 24 } }"
|
||||
layout="vertical"
|
||||
>
|
||||
<a-row style="margin-bottom: 1rem">
|
||||
<a-col :span="12">
|
||||
<span v-if="props.data" class="ml-10">成本价: {{ props.data.cost }}元</span>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<span v-if="props.data && form.amount"
|
||||
class="ml-10">利润:{{ (form.amount - props.data.cost).toFixed(2)
|
||||
}}元</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-form-item label="价格区域">
|
||||
<a-cascader v-model:value="selectedArea" :options="areaList" placeholder="请选择区域"
|
||||
:disabled="loginUser.cityId"
|
||||
@change="selectArea" :fieldNames="{label: 'name', value: 'id'}" />
|
||||
</a-form-item>
|
||||
<template v-if="form.city">
|
||||
<a-form-item label="商品价格" name="amount">
|
||||
<a-input-number :min="0.01" :precision="2" style="width: 200px" v-model:value="form.amount">
|
||||
<template #addonAfter>
|
||||
<span>元</span>
|
||||
</template>
|
||||
</a-input-number>
|
||||
</a-form-item>
|
||||
<!-- <a-form-item :label="form.level3commissionMode === 1 ? '零售店长返利比例' : '零售店长返利金额'" name="level3commissionRate">-->
|
||||
<!-- <a-input-number :min="0.01" :max="100" :precision="2" style="width: 200px"-->
|
||||
<!-- v-model:value="form.level3commissionRate" >-->
|
||||
<!-- <template #addonAfter>-->
|
||||
<!-- <a-select v-model:value="form.level3commissionMode" style="width: 60px;">-->
|
||||
<!-- <a-select-option :value="0">元</a-select-option>-->
|
||||
<!-- <a-select-option :value="1">%</a-select-option>-->
|
||||
<!-- </a-select>-->
|
||||
<!-- </template>-->
|
||||
<!-- </a-input-number>-->
|
||||
<!-- </a-form-item>-->
|
||||
<a-form-item :label="form.level4commissionMode === 1 ? '导购返利比例' : '导购返利金额'"
|
||||
name="level4commissionRate">
|
||||
<a-input-number :min="0.01" :max="100" :precision="2" style="width: 200px"
|
||||
v-model:value="form.level4commissionRate">
|
||||
<template #addonAfter>
|
||||
<a-select v-model:value="form.level4commissionMode" style="width: 60px;">
|
||||
<a-select-option :value="0">元</a-select-option>
|
||||
<a-select-option :value="1">%</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item :label="form.level6commissionMode === 1 ? '散户返利比例' : '散户返利金额'"
|
||||
name="level6commissionRate">
|
||||
<a-input-number :min="0.01" :max="100" :precision="2" style="width: 200px"
|
||||
v-model:value="form.level6commissionRate">
|
||||
<template #addonAfter>
|
||||
<a-select v-model:value="form.level6commissionMode" style="width: 60px;">
|
||||
<a-select-option :value="0">元</a-select-option>
|
||||
<a-select-option :value="1">%</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item :label="form.level7commissionMode === 1 ? '编外合伙人返利比例' : '编外合伙人返利金额'"
|
||||
name="level7commissionRate">
|
||||
<a-input-number :min="0.01" :max="100" :precision="2" style="width: 200px"
|
||||
v-model:value="form.level7commissionRate">
|
||||
<template #addonAfter>
|
||||
<a-select v-model:value="form.level7commissionMode" style="width: 60px;">
|
||||
<a-select-option :value="0">元</a-select-option>
|
||||
<a-select-option :value="1">%</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label="售后返利比例" name="level5commissionRate">
|
||||
<a-input-number :min="0.01" :max="100" :precision="2" style="width: 200px"
|
||||
v-model:value="form.level5commissionRate">
|
||||
<template #addonAfter>
|
||||
<span>%</span>
|
||||
</template>
|
||||
</a-input-number>
|
||||
</a-form-item>
|
||||
<!-- <a-form-item label="售后店长返利比例" name="level8commissionRate">-->
|
||||
<!-- <a-input-number :min="0.01" :max="100" :precision="2" style="width: 200px"-->
|
||||
<!-- v-model:value="form.level8commissionRate" >-->
|
||||
<!-- <template #addonAfter>-->
|
||||
<!-- <span>%</span>-->
|
||||
<!-- </template>-->
|
||||
<!-- </a-input-number>-->
|
||||
<!-- </a-form-item>-->
|
||||
<!-- <a-form-item label="售后店长门店返利比例(基于门店售后返利比例)" name="fixStoreLeaderCommissionRate">-->
|
||||
<!-- <a-input-number :min="0.01" :max="100" :precision="2" style="width: 200px"-->
|
||||
<!-- v-model:value="form.fixStoreLeaderCommissionRate" >-->
|
||||
<!-- <template #addonAfter>-->
|
||||
<!-- <span>%</span>-->
|
||||
<!-- </template>-->
|
||||
<!-- </a-input-number>-->
|
||||
<!-- </a-form-item>-->
|
||||
|
||||
</template>
|
||||
</a-form>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch, computed } from "vue";
|
||||
import { message } from "ant-design-vue";
|
||||
import { FormInstance, Rule, RuleObject } from "ant-design-vue/es/form";
|
||||
import { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
|
||||
import useFormData from "@/utils/use-form-data";
|
||||
import { Category } from "@/api/goods/category/model";
|
||||
import { useThemeStore } from "@/store/modules/theme";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { GoodsPrice } from "@/api/order/goodsPrice/model";
|
||||
import { addGoodsPrice, goodsPriceByGoodsNCity, updateGoodsPrice } from "@/api/order/goodsPrice";
|
||||
import { Goods } from "@/api/goods/model";
|
||||
import { Area } from "@/api/system/area/model";
|
||||
import { listArea, listAreaByParent } from "@/api/system/area";
|
||||
import { useUserStore } from "@/store/modules/user";
|
||||
import { User } from "@/api/system/user/model";
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
// 是否显示最大化切换按钮
|
||||
const maxAble = ref(true);
|
||||
const disabled = ref(false);
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: Goods | null;
|
||||
categoryList?: Category[];
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "done"): void;
|
||||
(e: "update:visible", visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
// 已上传数据
|
||||
const images = ref<ItemType[]>([]);
|
||||
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
// 选项卡位置
|
||||
const activeKey = ref("1");
|
||||
// 编辑器内容，双向绑定
|
||||
const content = ref<any>("");
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit("update:visible", value);
|
||||
};
|
||||
|
||||
const userStore = useUserStore();
|
||||
const loginUser = computed(() => userStore.info ?? {});
|
||||
|
||||
// 表单数据
|
||||
const { form, resetFields, assignFields } = useFormData<GoodsPrice>({
|
||||
id: 0,
|
||||
goodsId: 0,
|
||||
amount: 0,
|
||||
city: 0,
|
||||
level3commissionRate: 0,
|
||||
level4commissionRate: 0,
|
||||
level5commissionRate: 0,
|
||||
level6commissionRate: 0,
|
||||
level7commissionRate: 0,
|
||||
level8commissionRate: 0,
|
||||
fixStoreLeaderCommissionRate: 0
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive<Record<string, Rule[]>>({});
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
loading.value = true;
|
||||
const saveOrUpdate = isUpdate.value ? updateGoodsPrice : addGoodsPrice;
|
||||
saveOrUpdate(form)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
updateVisible(false);
|
||||
emit("done");
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
const selectedArea = ref<String[]>([]);
|
||||
|
||||
const areaList = ref<Area[]>([]);
|
||||
const getAreaList = async () => {
|
||||
areaList.value = await listAreaByParent();
|
||||
};
|
||||
|
||||
const selectArea = async value => {
|
||||
form.city = value[0];
|
||||
const res = await goodsPriceByGoodsNCity({
|
||||
goodsId: props.data?.goodsId,
|
||||
cityId: value[0]
|
||||
});
|
||||
if (res) {
|
||||
form.id = res.id;
|
||||
form.amount = res.amount;
|
||||
form.level3commissionRate = res.level3commissionRate;
|
||||
form.level3commissionMode = res.level3commissionMode;
|
||||
form.level4commissionRate = res.level4commissionRate;
|
||||
form.level4commissionMode = res.level4commissionMode;
|
||||
form.level5commissionRate = res.level5commissionRate;
|
||||
form.level6commissionRate = res.level6commissionRate;
|
||||
form.level6commissionMode = res.level6commissionMode;
|
||||
form.level7commissionRate = res.level7commissionRate;
|
||||
form.level7commissionMode = res.level7commissionMode;
|
||||
form.level8commissionRate = res.level8commissionRate;
|
||||
form.fixStoreLeaderCommissionRate = res.fixStoreLeaderCommissionRate;
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
form.id = 0;
|
||||
if (props?.data && props?.data.goodsPriceMin) form.amount = props.data.goodsPriceMin;
|
||||
form.level3commissionRate = 0;
|
||||
form.level3commissionMode = 0;
|
||||
form.level4commissionRate = 0;
|
||||
form.level4commissionMode = 0;
|
||||
form.level5commissionRate = 0;
|
||||
form.level6commissionRate = 0;
|
||||
form.level6commissionMode = 0;
|
||||
form.level7commissionRate = 0;
|
||||
form.level7commissionMode = 0;
|
||||
form.level8commissionRate = 0;
|
||||
form.fixStoreLeaderCommissionRate = 0;
|
||||
isUpdate.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
async (visible) => {
|
||||
await getAreaList();
|
||||
if (visible) {
|
||||
isUpdate.value = false;
|
||||
if (props.data) {
|
||||
loading.value = false;
|
||||
if (props.data.goodsId) form.goodsId = props.data.goodsId;
|
||||
if (props.data.goodsPrice) {
|
||||
form.id = props.data.goodsPrice.id;
|
||||
form.city = props.data.goodsPrice.city;
|
||||
form.amount = props.data.goodsPrice.amount;
|
||||
form.level3commissionRate = props.data.goodsPrice.level3commissionRate;
|
||||
form.level3commissionMode = props.data.goodsPrice.level3commissionMode;
|
||||
form.level4commissionRate = props.data.goodsPrice.level4commissionRate;
|
||||
form.level4commissionMode = props.data.goodsPrice.level4commissionMode;
|
||||
form.level5commissionRate = props.data.goodsPrice.level5commissionRate;
|
||||
form.level6commissionRate = props.data.goodsPrice.level6commissionRate;
|
||||
form.level6commissionMode = props.data.goodsPrice.level6commissionMode;
|
||||
form.level7commissionRate = props.data.goodsPrice.level7commissionRate;
|
||||
form.level7commissionMode = props.data.goodsPrice.level7commissionMode;
|
||||
form.level8commissionRate = props.data.goodsPrice.level8commissionRate;
|
||||
form.fixStoreLeaderCommissionRate = props.data.goodsPrice.fixStoreLeaderCommissionRate;
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
if (props?.data && props?.data.goodsPriceMin) form.amount = props.data.goodsPriceMin;
|
||||
}
|
||||
if (loginUser.value.cityId) {
|
||||
const cityItem = areaList.value.find((item) => item.id === loginUser.value.cityId);
|
||||
if (cityItem) selectedArea.value = [cityItem.fid, cityItem.id];
|
||||
}
|
||||
}
|
||||
} else {
|
||||
selectedArea.value = [];
|
||||
resetFields();
|
||||
formRef.value?.clearValidate();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style lang="less">
|
||||
.tab-pane {
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.ml-10 {
|
||||
margin-left: 5px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user