qingban-SPC/src/views/sales/add.vue

<template>
  <div>
    <el-drawer v-model="drawerVisible" size="800" :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="阶段" prop="stage">
            <el-input v-model="saleForm.stage" />
          </el-form-item>
          <el-form-item label="订单信息">
            <el-select
              v-model="selectOrderCode"
              value-key="orderNo"
              placeholder="请选择订单信息"
              style="width: 100%"
              @change="orderSelect"
            >
              <el-option
                v-for="item in orders"
                :key="item.orderNo"
                :label="item.orderName + `(批号: ${item.workOrderCode})`"
                :value="item"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="检验批号">
            <div>{{ selectedOrder.workOrderCode }}</div>
          </el-form-item>

          <el-form-item label="流转卡号" prop="seqs">
            <el-select
              v-model="saleForm.seqs"
              value-key="orderCode"
              placeholder="请选择流转卡号"
              style="width: 100%"
              multiple
            >
              <el-option
                v-for="item in seqList"
                :key="item"
                :label="item"
                :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="user">
            <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日"
              value-format="YYYY年MM月DD日"
              style="width: 100%"
            />
          </el-form-item>
          <el-form-item label="下一步处理人" prop="nextRemarkUser">
            <el-select
              v-model="remark1.nextRemarkUser"
              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>
      </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: "",
  stage: "",
  seqs: [],
});
// 顾客投诉或建议
const remark1Ref = ref(null);

const remark1 = reactive({
  content: "",
  user: "",
  time: "",
  nextRemarkUser: "",
});

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" },
  ],
  seqs: [{ required: true, message: "请选择订单信息", trigger: "change" }],
};
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" }],
  nextRemarkUser: [
    { required: true, message: "请选择处理人", trigger: "change" },
    { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" },
  ],
};

// 订单相关信息
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;
  seqList.value = selectedOrder.value.seqs;
  saleForm.seqs = [];
};

const seqList = ref([]);

// 用户信息
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 = () => {
  selectedOrder.value = {};
  selectOrderCode.value = {};
  getOrders();
  getUserInfo();
  drawerVisible.value = true;
};

defineExpose({ showDrawer });

const cancelClick = () => {
  drawerVisible.value = false;
  baseInfoRef.value.resetFields();
  remark1Ref.value.resetFields();
  selectedOrder.value = {};
};

const feedBackEmit = defineEmits(["finish"]);

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 remark1Copy = {
        content: remark1.content,
        user1: remark1.user,
        time: remark1.time,
      };
      let remark2 = {
        content: "",
        user2: remark1.nextRemarkUser,
        time: "",
      };

      let p = {
        ...saleForm,
        ...selectedOrder.value,
        remark1: JSON.stringify(remark1Copy),
        remark2: JSON.stringify(remark2),
      };

      p.seqs = p.seqs.join(",");

      addFeedback(p).then(() => {
        feedBackEmit("finish");
        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>