<template>
|
<div>
|
<el-dialog
|
v-model="dialogFormVisible"
|
:title="dialogTitle"
|
width="70%"
|
@close="closeDia"
|
>
|
<el-form
|
:model="form"
|
label-width="140px"
|
label-position="top"
|
:rules="rules"
|
ref="formRef"
|
>
|
<el-row :gutter="30">
|
<el-col :span="12">
|
<el-form-item label="临期产品名称：" prop="productName">
|
<el-input
|
v-model="form.productName"
|
placeholder="请输入产品名称"
|
clearable
|
:disabled="operationType === 'view'"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="产品批号：" prop="batchNumber">
|
<el-input
|
v-model="form.batchNumber"
|
placeholder="请输入产品批号"
|
clearable
|
:disabled="operationType === 'view'"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="12">
|
<el-form-item label="临期日期：" prop="expiryDate">
|
<el-date-picker
|
style="width: 100%"
|
v-model="form.expiryDate"
|
value-format="YYYY-MM-DD"
|
format="YYYY-MM-DD"
|
type="date"
|
placeholder="请选择临期日期"
|
clearable
|
:disabled="operationType === 'view'"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="库存数量：" prop="stockQuantity">
|
<el-input-number
|
v-model="form.stockQuantity"
|
:min="0"
|
placeholder="请输入库存数量"
|
style="width: 100%"
|
:disabled="operationType === 'view'"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="12">
|
<el-form-item label="客户名称：" prop="customerName">
|
<el-input
|
v-model="form.customerName"
|
placeholder="请输入客户名称"
|
clearable
|
:disabled="operationType === 'view'"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="联系电话：" prop="contactPhone">
|
<el-input
|
v-model="form.contactPhone"
|
placeholder="请输入联系电话"
|
clearable
|
:disabled="operationType === 'view'"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="24">
|
<el-form-item label="问题描述：" prop="problemDesc">
|
<el-input
|
v-model="form.problemDesc"
|
placeholder="请输入问题描述"
|
clearable
|
:disabled="operationType === 'view'"
|
type="textarea"
|
:rows="3"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="30" v-if="operationType !== 'add'">
|
<el-col :span="12">
|
<el-form-item label="处理人：" prop="handlerId">
|
<el-select
|
v-model="form.handlerId"
|
placeholder="请选择处理人"
|
clearable
|
:disabled="operationType === 'view'"
|
style="width: 100%"
|
>
|
<el-option
|
v-for="item in userList"
|
:key="item.userId"
|
:label="item.nickName"
|
:value="item.userId"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="处理日期：" prop="handleDate">
|
<el-date-picker
|
style="width: 100%"
|
v-model="form.handleDate"
|
value-format="YYYY-MM-DD"
|
format="YYYY-MM-DD"
|
type="date"
|
placeholder="请选择处理日期"
|
clearable
|
:disabled="operationType === 'view'"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="30" v-if="operationType !== 'add'">
|
<el-col :span="24">
|
<el-form-item label="处理结果：" prop="handleResult">
|
<el-input
|
v-model="form.handleResult"
|
placeholder="请输入处理结果"
|
clearable
|
:disabled="operationType === 'view'"
|
type="textarea"
|
:rows="3"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="primary" @click="submitForm" v-if="operationType !== 'view'">确认</el-button>
|
<el-button @click="closeDia">{{ operationType === 'view' ? '关闭' : '取消' }}</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import {ref, computed} from "vue";
|
import useUserStore from "@/store/modules/user.js";
|
// import {userListNoPageByTenantId} from "@/api/system/user.js"; // 暂时注释掉，使用假数据
|
// import {expiryAfterSalesAdd, expiryAfterSalesUpdate} from "@/api/customerService/index.js"; // 暂时注释掉，使用假数据
|
const { proxy } = getCurrentInstance()
|
const emit = defineEmits(['close'])
|
const dialogFormVisible = ref(false);
|
const operationType = ref('')
|
const userStore = useUserStore();
|
|
const dialogTitle = computed(() => {
|
switch (operationType.value) {
|
case 'add':
|
return '新增临期售后';
|
case 'edit':
|
return '编辑临期售后';
|
case 'view':
|
return '查看临期售后';
|
default:
|
return '临期售后管理';
|
}
|
});
|
|
const data = reactive({
|
form: {
|
id: "",
|
productName: "",
|
batchNumber: "",
|
expiryDate: "",
|
stockQuantity: 0,
|
customerName: "",
|
contactPhone: "",
|
problemDesc: "",
|
handlerId: "",
|
handleDate: "",
|
handleResult: "",
|
status: 1
|
},
|
rules: {
|
productName: [{required: true, message: "请输入产品名称", trigger: "blur"}],
|
batchNumber: [{required: true, message: "请输入产品批号", trigger: "blur"}],
|
expiryDate: [{required: true, message: "请选择临期日期", trigger: "change"}],
|
stockQuantity: [{required: true, message: "请输入库存数量", trigger: "blur"}],
|
customerName: [{required: true, message: "请输入客户名称", trigger: "blur"}],
|
contactPhone: [
|
{required: true, message: "请输入联系电话", trigger: "blur"},
|
{pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号码", trigger: "blur"}
|
],
|
problemDesc: [{required: true, message: "请输入问题描述", trigger: "blur"}],
|
}
|
})
|
const { form, rules } = toRefs(data);
|
const userList = ref([])
|
|
// 打开弹框
|
const openDialog = (type, row) => {
|
operationType.value = type;
|
dialogFormVisible.value = true;
|
|
// 模拟获取用户列表
|
userList.value = [
|
{ userId: 1, nickName: "张三" },
|
{ userId: 2, nickName: "李四" },
|
{ userId: 3, nickName: "王五" },
|
{ userId: 4, nickName: "赵六" },
|
{ userId: 5, nickName: "孙八" }
|
];
|
|
if (type === 'add') {
|
// 新增时重置表单
|
form.value = {
|
id: "",
|
productName: "",
|
batchNumber: "",
|
expiryDate: "",
|
stockQuantity: 0,
|
customerName: "",
|
contactPhone: "",
|
problemDesc: "",
|
handlerId: "",
|
handleDate: "",
|
handleResult: "",
|
status: 1
|
};
|
} else {
|
// 编辑或查看时填充数据
|
form.value = { ...row };
|
if (type === 'edit' && !form.value.handlerId) {
|
form.value.handlerId = userStore.id;
|
form.value.handleDate = getCurrentDate();
|
}
|
}
|
}
|
|
const submitForm = () => {
|
proxy.$refs["formRef"].validate(valid => {
|
if (valid) {
|
// 模拟提交操作
|
setTimeout(() => {
|
console.log("模拟提交的数据:", form.value);
|
proxy.$modal.msgSuccess(operationType.value === 'add' ? "新增成功" : "更新成功");
|
closeDia();
|
}, 300);
|
}
|
});
|
}
|
|
// 关闭弹框
|
const closeDia = () => {
|
proxy.resetForm("formRef");
|
dialogFormVisible.value = false;
|
emit('close')
|
};
|
|
// 获取当前日期并格式化为 YYYY-MM-DD
|
function getCurrentDate() {
|
const today = new Date();
|
const year = today.getFullYear();
|
const month = String(today.getMonth() + 1).padStart(2, "0");
|
const day = String(today.getDate()).padStart(2, "0");
|
return `${year}-${month}-${day}`;
|
}
|
|
defineExpose({
|
openDialog,
|
});
|
</script>
|
|
<style scoped>
|
|
</style>
|
