|
|
@@ -0,0 +1,229 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-drawer v-model="drawerVisible" size="80%" :close-on-click-modal="false">
|
|
|
+ <template #header>
|
|
|
+ <h4>新增销售反馈信息</h4>
|
|
|
+ </template>
|
|
|
+ <template #default>
|
|
|
+ <el-form
|
|
|
+ ref="baseInfoRef"
|
|
|
+ :model="saleForm"
|
|
|
+ label-width="120"
|
|
|
+ :rules="rules"
|
|
|
+ style="max-width: 600px"
|
|
|
+ >
|
|
|
+ <el-form-item label="顾客名称" prop="customer">
|
|
|
+ <el-input v-model="saleForm.customer" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="详细地址" prop="address">
|
|
|
+ <el-input v-model="saleForm.address" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="联系人" prop="contacts">
|
|
|
+ <el-input v-model="saleForm.contacts" />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="联系电话" prop="phoneNo">
|
|
|
+ <el-input v-model="saleForm.phoneNo" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="订单信息">
|
|
|
+ <el-select
|
|
|
+ v-model="selectOrderCode"
|
|
|
+ value-key="orderCode"
|
|
|
+ placeholder="请选择订单信息"
|
|
|
+ style="width: 100%"
|
|
|
+ @change="orderSelect"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in orders"
|
|
|
+ :key="item.orderCode"
|
|
|
+ :label="item.orderName"
|
|
|
+ :value="item"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <el-form
|
|
|
+ ref="remark1Ref"
|
|
|
+ :model="remark1"
|
|
|
+ label-width="120"
|
|
|
+ :rules="rules1"
|
|
|
+ style="max-width: 600px"
|
|
|
+ >
|
|
|
+ <el-form-item label="顾客投诉或建议" prop="content">
|
|
|
+ <el-input v-model="remark1.content" type="textarea" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="处理人" prop="contacts">
|
|
|
+ <el-select
|
|
|
+ v-model="remark1.user"
|
|
|
+ placeholder="请选择联系人"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in userList"
|
|
|
+ :key="item.userName"
|
|
|
+ :label="item.userName"
|
|
|
+ :value="item.userName"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="日期" prop="time">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="remark1.time"
|
|
|
+ type="date"
|
|
|
+ placeholder="请选择日期"
|
|
|
+ clearable
|
|
|
+ format="YYYY年MM月DD日"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </template>
|
|
|
+ <template #footer>
|
|
|
+ <div class="drawer-bottom">
|
|
|
+ <el-button @click="cancelClick">取消</el-button>
|
|
|
+ <el-button type="primary" @click="confirmClick">提交</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-drawer>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { addFeedback, getOrderList, getUserList } from "@/api/sales/index";
|
|
|
+
|
|
|
+const drawerVisible = ref(false);
|
|
|
+
|
|
|
+const baseInfoRef = ref(null);
|
|
|
+const saleForm = reactive({
|
|
|
+ customer: "",
|
|
|
+ address: "",
|
|
|
+ contacts: "",
|
|
|
+ phoneNo: "",
|
|
|
+});
|
|
|
+// 顾客投诉或建议
|
|
|
+const remark1Ref = ref(null);
|
|
|
+
|
|
|
+const remark1 = reactive({
|
|
|
+ content: "",
|
|
|
+ user: "",
|
|
|
+ time: "",
|
|
|
+});
|
|
|
+
|
|
|
+const rules = {
|
|
|
+ customer: [
|
|
|
+ { required: true, message: "请输入顾客名称", trigger: "blur" },
|
|
|
+ { min: 2, max: 50, message: "长度在 2 到 50 个字符", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ address: [
|
|
|
+ { required: true, message: "请输入详细地址", trigger: "blur" },
|
|
|
+ { min: 2, max: 200, message: "长度在 2 到 200 个字符", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ contacts: [
|
|
|
+ { required: true, message: "请输入联系人", trigger: "blur" },
|
|
|
+ { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ phoneNo: [
|
|
|
+ { required: true, message: "请输入联系电话", trigger: "blur" },
|
|
|
+ { min: 11, max: 11, message: "请输入正确的手机号", trigger: "blur" },
|
|
|
+ ],
|
|
|
+};
|
|
|
+const rules1 = {
|
|
|
+ content: [
|
|
|
+ { required: true, message: "请输入顾客投诉或建议", trigger: "blur" },
|
|
|
+ { min: 2, max: 200, message: "长度在 2 到 200 个字符", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ user: [
|
|
|
+ { required: true, message: "请输入姓名", trigger: "blur" },
|
|
|
+ { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ time: [{ required: true, message: "请选择日期", trigger: "change" }],
|
|
|
+};
|
|
|
+
|
|
|
+// 订单相关信息
|
|
|
+const orders = ref([]);
|
|
|
+const selectedOrder = ref({});
|
|
|
+const selectOrderCode = ref("");
|
|
|
+const getOrders = async () => {
|
|
|
+ const res = await getOrderList({
|
|
|
+ pageNo: 0,
|
|
|
+ pageSize: 200,
|
|
|
+ });
|
|
|
+ orders.value = res.data.records;
|
|
|
+ if (orders.value.length > 0) {
|
|
|
+ // selectOrderCode.value = orders.value[0].orderCode;
|
|
|
+
|
|
|
+ selectedOrder.value = orders.value[0];
|
|
|
+ }
|
|
|
+};
|
|
|
+const orderSelect = (value) => {
|
|
|
+ selectedOrder.value = value;
|
|
|
+};
|
|
|
+
|
|
|
+// 用户信息
|
|
|
+const userInfo = ref({});
|
|
|
+const userList = ref([]);
|
|
|
+const getUserInfo = async () => {
|
|
|
+ const res = await getUserList();
|
|
|
+ userList.value = res.data;
|
|
|
+ // if (userList.value.length > 0) {
|
|
|
+ // userInfo.value = userList.value[0];
|
|
|
+ // }
|
|
|
+};
|
|
|
+
|
|
|
+const showDrawer = () => {
|
|
|
+ getOrders();
|
|
|
+ getUserInfo();
|
|
|
+ drawerVisible.value = true;
|
|
|
+};
|
|
|
+
|
|
|
+defineExpose({ showDrawer });
|
|
|
+
|
|
|
+const cancelClick = () => {
|
|
|
+ drawerVisible.value = false;
|
|
|
+ baseInfoRef.value.resetFields();
|
|
|
+ remark1Ref.value.resetFields();
|
|
|
+};
|
|
|
+
|
|
|
+const confirmClick = () => {
|
|
|
+ console.log(saleForm);
|
|
|
+ console.log(remark1);
|
|
|
+ console.log(selectedOrder.value);
|
|
|
+
|
|
|
+ // drawerVisible.value = false;
|
|
|
+ //
|
|
|
+ // // 验证表单
|
|
|
+ baseInfoRef.value.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ console.log("baseInfoRef valid");
|
|
|
+ } else {
|
|
|
+ console.log("baseInfoRef invalid");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ remark1Ref.value.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ let p = {
|
|
|
+ ...saleForm,
|
|
|
+ ...selectedOrder.value,
|
|
|
+ remark1: JSON.stringify(remark1),
|
|
|
+ };
|
|
|
+
|
|
|
+ addFeedback(p).then(() => {
|
|
|
+ cancelClick();
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ console.log("remark1Ref invalid");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.drawer-bottom {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+</style>
|
jiaxiaoqiang