444 lines
13 KiB
Vue
444 lines
13 KiB
Vue
<!-- 编辑弹窗 -->
|
||
<template>
|
||
<ele-modal
|
||
:width="900"
|
||
:visible="visible"
|
||
:maskClosable="false"
|
||
:maxable="maxable"
|
||
:confirm-loading="loading"
|
||
:title="isUpdate ? '编辑分销商用户' : '添加分销商用户'"
|
||
:body-style="{ paddingBottom: '28px' }"
|
||
@update:visible="updateVisible"
|
||
@ok="save"
|
||
>
|
||
<a-form
|
||
ref="formRef"
|
||
:model="form"
|
||
:rules="rules"
|
||
:label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
|
||
:wrapper-col="
|
||
styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
|
||
"
|
||
>
|
||
<a-divider orientation="left">
|
||
<span style="color: #1890ff; font-weight: 600">基础信息</span>
|
||
</a-divider>
|
||
|
||
<a-row :gutter="16">
|
||
<a-col :span="24" v-if="!isUpdate">
|
||
<a-form-item label="关联用户" name="userId">
|
||
<SelectUser
|
||
:key="selectedUserText"
|
||
:value="selectedUserText"
|
||
:placeholder="`选择用户`"
|
||
@done="onChooseUser"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="类型" name="type">
|
||
<a-select v-model:value="form.type" placeholder="请选择类型">
|
||
<a-select-option :value="0">经销商</a-select-option>
|
||
<a-select-option :value="1">门店</a-select-option>
|
||
<!-- <a-select-option :value="2">集团</a-select-option>-->
|
||
</a-select>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="手机号" name="mobile">
|
||
<a-input
|
||
allow-clear
|
||
:maxlength="11"
|
||
placeholder="请输入手机号"
|
||
:disabled="true"
|
||
v-model:value="form.mobile"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="真实姓名" name="realName">
|
||
<a-input
|
||
allow-clear
|
||
:maxlength="20"
|
||
placeholder="请输入真实姓名"
|
||
v-model:value="form.realName"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<!-- <a-col :span="12">-->
|
||
<!-- <a-form-item-->
|
||
<!-- label="支付密码"-->
|
||
<!-- name="payPassword"-->
|
||
<!-- :help="isUpdate ? '留空表示不修改' : undefined"-->
|
||
<!-- >-->
|
||
<!-- <a-input-password-->
|
||
<!-- allow-clear-->
|
||
<!-- :maxlength="20"-->
|
||
<!-- placeholder="请输入支付密码"-->
|
||
<!-- v-model:value="form.payPassword"-->
|
||
<!-- />-->
|
||
<!-- </a-form-item>-->
|
||
<!-- </a-col>-->
|
||
<a-col :span="12">
|
||
<a-form-item label="头像" name="image">
|
||
<a-image :src="form.avatar" :width="50" :preview="false" />
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
|
||
<a-divider orientation="left">
|
||
<span style="color: #1890ff; font-weight: 600">佣金信息</span>
|
||
</a-divider>
|
||
|
||
<a-row :gutter="16">
|
||
<a-col :span="12">
|
||
<a-form-item label="可提现" name="money">
|
||
<a-input-number
|
||
class="ele-fluid"
|
||
:min="0"
|
||
:precision="2"
|
||
stringMode
|
||
placeholder="0.00"
|
||
:disabled="true"
|
||
v-model:value="form.money"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="已冻结" name="freezeMoney">
|
||
<a-input-number
|
||
class="ele-fluid"
|
||
:min="0"
|
||
:precision="2"
|
||
stringMode
|
||
placeholder="0.00"
|
||
:disabled="true"
|
||
v-model:value="form.freezeMoney"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="累积提现" name="totalMoney">
|
||
<a-input-number
|
||
class="ele-fluid"
|
||
:min="0"
|
||
:precision="2"
|
||
stringMode
|
||
placeholder="0.00"
|
||
:disabled="true"
|
||
v-model:value="form.totalMoney"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="佣金比例" name="rate">
|
||
<a-input-number
|
||
class="ele-fluid"
|
||
:min="0"
|
||
:max="1"
|
||
:precision="4"
|
||
stringMode
|
||
:disabled="true"
|
||
placeholder="例如 0.007"
|
||
v-model:value="form.rate"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<!-- <a-col :span="12">-->
|
||
<!-- <a-form-item label="单价" name="price">-->
|
||
<!-- <a-input-number-->
|
||
<!-- class="ele-fluid"-->
|
||
<!-- :min="0"-->
|
||
<!-- :precision="2"-->
|
||
<!-- stringMode-->
|
||
<!-- placeholder="0.00"-->
|
||
<!-- v-model:value="form.price"-->
|
||
<!-- />-->
|
||
<!-- </a-form-item>-->
|
||
<!-- </a-col>-->
|
||
</a-row>
|
||
|
||
<!-- <a-row :gutter="16">-->
|
||
<!-- <a-col :span="12">-->
|
||
<!-- <a-form-item label="排序号" name="sortNumber">-->
|
||
<!-- <a-input-number-->
|
||
<!-- :min="0"-->
|
||
<!-- :max="9999"-->
|
||
<!-- class="ele-fluid"-->
|
||
<!-- placeholder="请输入排序号"-->
|
||
<!-- v-model:value="form.sortNumber"-->
|
||
<!-- />-->
|
||
<!-- </a-form-item>-->
|
||
<!-- </a-col>-->
|
||
<!-- <a-col :span="12">-->
|
||
<!-- <a-form-item label="备注" name="comments">-->
|
||
<!-- <a-textarea-->
|
||
<!-- :rows="3"-->
|
||
<!-- :maxlength="200"-->
|
||
<!-- show-count-->
|
||
<!-- placeholder="请输入备注"-->
|
||
<!-- v-model:value="form.comments"-->
|
||
<!-- />-->
|
||
<!-- </a-form-item>-->
|
||
<!-- </a-col>-->
|
||
<!-- </a-row>-->
|
||
</a-form>
|
||
</ele-modal>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { computed, ref, reactive, watch } from 'vue';
|
||
import { Form, message } from 'ant-design-vue';
|
||
import { assignObject, toDateString, uuid } from 'ele-admin-pro';
|
||
import { addShopDealerUser, updateShopDealerUser } from '@/api/shop/shopDealerUser';
|
||
import { ShopDealerUser } from '@/api/shop/shopDealerUser/model';
|
||
import { useThemeStore } from '@/store/modules/theme';
|
||
import { storeToRefs } from 'pinia';
|
||
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
|
||
import { FormInstance } from 'ant-design-vue/es/form';
|
||
import { FileRecord } from '@/api/system/file/model';
|
||
import type { User } from '@/api/system/user/model';
|
||
|
||
// 是否是修改
|
||
const isUpdate = ref(false);
|
||
const useForm = Form.useForm;
|
||
// 是否开启响应式布局
|
||
const themeStore = useThemeStore();
|
||
const { styleResponsive } = storeToRefs(themeStore);
|
||
|
||
const props = defineProps<{
|
||
// 弹窗是否打开
|
||
visible: boolean;
|
||
// 修改回显的数据
|
||
data?: ShopDealerUser | null;
|
||
}>();
|
||
|
||
const emit = defineEmits<{
|
||
(e: 'done'): void;
|
||
(e: 'update:visible', visible: boolean): void;
|
||
}>();
|
||
|
||
// 提交状态
|
||
const loading = ref(false);
|
||
// 是否显示最大化切换按钮
|
||
const maxable = ref(true);
|
||
// 表格选中数据
|
||
const formRef = ref<FormInstance | null>(null);
|
||
const images = ref<ItemType[]>([]);
|
||
|
||
// 用户信息
|
||
const form = reactive<ShopDealerUser>({
|
||
id: undefined,
|
||
userId: undefined,
|
||
avatar: undefined,
|
||
type: 0,
|
||
realName: undefined,
|
||
mobile: undefined,
|
||
payPassword: '',
|
||
money: undefined,
|
||
freezeMoney: undefined,
|
||
totalMoney: undefined,
|
||
rate: undefined,
|
||
price: undefined,
|
||
refereeId: undefined,
|
||
firstNum: undefined,
|
||
secondNum: undefined,
|
||
thirdNum: undefined,
|
||
qrcode: undefined,
|
||
isDelete: undefined,
|
||
tenantId: undefined,
|
||
createTime: undefined,
|
||
updateTime: undefined,
|
||
status: 0,
|
||
comments: '',
|
||
sortNumber: 100
|
||
});
|
||
|
||
/* 更新visible */
|
||
const updateVisible = (value: boolean) => {
|
||
emit('update:visible', value);
|
||
};
|
||
|
||
const createTimeText = computed(() => {
|
||
return form.createTime ? toDateString(form.createTime, 'yyyy-MM-dd HH:mm:ss') : '';
|
||
});
|
||
|
||
const updateTimeText = computed(() => {
|
||
return form.updateTime ? toDateString(form.updateTime, 'yyyy-MM-dd HH:mm:ss') : '';
|
||
});
|
||
|
||
const selectedUserText = ref<string>('');
|
||
|
||
// 表单验证规则
|
||
const rules = reactive({
|
||
userId: [
|
||
{
|
||
validator: (_rule: unknown, value: number | undefined) => {
|
||
if (!isUpdate.value && !value) {
|
||
return Promise.reject(new Error('请选择关联用户'));
|
||
}
|
||
return Promise.resolve();
|
||
},
|
||
trigger: 'change'
|
||
}
|
||
],
|
||
type: [
|
||
{
|
||
required: true,
|
||
type: 'number',
|
||
message: '请选择类型',
|
||
trigger: 'change'
|
||
}
|
||
],
|
||
realName: [
|
||
{
|
||
required: true,
|
||
type: 'string',
|
||
message: '请填写真实姓名',
|
||
trigger: 'blur'
|
||
}
|
||
],
|
||
// mobile: [
|
||
// {
|
||
// required: true,
|
||
// type: 'string',
|
||
// message: '请填写手机号',
|
||
// trigger: 'blur'
|
||
// },
|
||
// {
|
||
// pattern: /^1\\d{10}$/,
|
||
// message: '手机号格式不正确',
|
||
// trigger: 'blur'
|
||
// }
|
||
// ],
|
||
payPassword: [
|
||
{
|
||
validator: (_rule: unknown, value: string) => {
|
||
if (!isUpdate.value && !value) {
|
||
return Promise.reject(new Error('请输入支付密码'));
|
||
}
|
||
return Promise.resolve();
|
||
},
|
||
trigger: 'blur'
|
||
}
|
||
]
|
||
});
|
||
|
||
const onChooseUser = (user?: User) => {
|
||
if (!user) {
|
||
selectedUserText.value = '';
|
||
form.userId = undefined;
|
||
return;
|
||
}
|
||
form.userId = user.userId;
|
||
// 新增时尽量帮用户填充，避免重复输入
|
||
if (!form.realName) {
|
||
form.realName = user.realName ?? user.nickname;
|
||
}
|
||
if (!form.mobile) {
|
||
form.mobile = user.phone ?? user.mobile;
|
||
}
|
||
const name = user.realName ?? user.nickname ?? '';
|
||
const phone = user.phone ?? user.mobile ?? '';
|
||
selectedUserText.value = phone ? `${name}（${phone}）` : name;
|
||
};
|
||
|
||
const chooseImage = (data: FileRecord) => {
|
||
images.value.push({
|
||
uid: data.id,
|
||
url: data.path,
|
||
status: 'done'
|
||
});
|
||
form.image = data.path;
|
||
};
|
||
|
||
const onDeleteItem = (index: number) => {
|
||
images.value.splice(index, 1);
|
||
form.image = '';
|
||
};
|
||
|
||
const { resetFields } = useForm(form, rules);
|
||
|
||
/* 保存编辑 */
|
||
const save = () => {
|
||
if (!formRef.value) {
|
||
return;
|
||
}
|
||
formRef.value
|
||
.validate()
|
||
.then(() => {
|
||
loading.value = true;
|
||
// 不在弹窗里编辑的字段不提交，避免误更新（如自增ID、删除标识等）
|
||
const {
|
||
isDelete,
|
||
tenantId,
|
||
createTime,
|
||
updateTime,
|
||
...rest
|
||
} = form;
|
||
const formData: ShopDealerUser = { ...rest };
|
||
// userId 新增需要，编辑不允许修改
|
||
if (isUpdate.value) {
|
||
delete formData.userId;
|
||
}
|
||
// 编辑时留空表示不修改密码
|
||
if (isUpdate.value && !formData.payPassword) {
|
||
delete formData.payPassword;
|
||
}
|
||
const saveOrUpdate = isUpdate.value ? updateShopDealerUser : addShopDealerUser;
|
||
saveOrUpdate(formData)
|
||
.then((msg) => {
|
||
loading.value = false;
|
||
message.success(msg);
|
||
updateVisible(false);
|
||
emit('done');
|
||
})
|
||
.catch((e) => {
|
||
loading.value = false;
|
||
message.error(e.message);
|
||
});
|
||
})
|
||
.catch(() => {});
|
||
};
|
||
|
||
watch(
|
||
() => props.visible,
|
||
(visible) => {
|
||
if (visible) {
|
||
formRef.value?.clearValidate();
|
||
images.value = [];
|
||
if (props.data) {
|
||
assignObject(form, props.data);
|
||
// 不回显密码，避免误操作
|
||
form.payPassword = '';
|
||
selectedUserText.value = '';
|
||
if(props.data.image){
|
||
images.value.push({
|
||
uid: uuid(),
|
||
url: props.data.image,
|
||
status: 'done'
|
||
})
|
||
}
|
||
isUpdate.value = true;
|
||
} else {
|
||
// 新增时确保表单是干净的默认值
|
||
resetFields();
|
||
form.payPassword = '';
|
||
form.type = 0;
|
||
form.status = 0;
|
||
form.comments = '';
|
||
form.sortNumber = 100;
|
||
selectedUserText.value = '';
|
||
isUpdate.value = false;
|
||
}
|
||
} else {
|
||
resetFields();
|
||
formRef.value?.clearValidate();
|
||
images.value = [];
|
||
selectedUserText.value = '';
|
||
}
|
||
},
|
||
{ immediate: true }
|
||
);
|
||
</script>
|