erp_jxst/src/views/salesMange/salesMange/afterSales/index.vue

<template>
  <div class="tenant">
    <!-- <Banner /> -->
    <div class="content">
      <byTable :source="sourceList.data" :pagination="sourceList.pagination" :config="config" :loading="loading" highlight-current-row
               :selectConfig="selectConfig" :table-events="{
          //element talbe事件都能传
        }" :action-list="[
          {
            text: '添加售后',
            disabled: false,
            action: () => clickAdd(),
          },
        ]" @get-list="getList">
      </byTable>
    </div>

    <el-dialog title="添加售后" v-model="dialogVisible" width="40%" destroy-on-close v-if="dialogVisible">
      <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="formDom" v-loading="submitLoading">
        <template #productSn>
          <div style="width: 100%; display: flex">
            <el-input v-model="formData.data.productSn" placeholder="请输入产品Sn" />
            <el-button @click="handleQuery" style="margin-left: 10px">查询</el-button>
          </div>
        </template>

        <template #file>
          <div style="width: 100%">
            <el-upload v-model:fileList="formData.data.fileList" action="https://winfaster.obs.cn-south-1.myhuaweicloud.com" :data="uploadData"
                       multiple :before-upload="handleBeforeUpload" :on-success="handleSuccess" :on-preview="onPreviewFile">
              <el-button type="primary" plain>选择</el-button>
            </el-upload>
          </div>
        </template>
      </byForm>
      <template #footer>
        <el-button @click="dialogVisible = false" size="large">取 消</el-button>
        <el-button type="primary" @click="submitForm()" size="large" :loading="submitLoading">
          确 定
        </el-button>
      </template>
    </el-dialog>

    <el-dialog title="售后跟进" v-model="openFollow" width="80%" destroy-on-close v-if="openFollow">
      <div style="width: 100%; display: flex">
        <div style="width: 48%; height: 70vh; overflow: auto; margin-right: 2%">
          <byForm :formConfig="formConfigDetail" :formOption="formOption" v-model="formData.detailData" ref="detailDom">
            <template #title1>
              <div style="width: 100%">
                <TitleInfo content="产品信息"></TitleInfo>
              </div>
            </template>
            <template #title2>
              <div style="width: 100%">
                <TitleInfo content="售后信息"></TitleInfo>
              </div>
            </template>
            <template #file>
              <div style="width: 100%">
                <el-upload v-model:fileList="formData.detailData.fileList" action="https://winfaster.obs.cn-south-1.myhuaweicloud.com"
                           :data="uploadData" multiple :before-upload="handleBeforeUpload" :on-success="handleSuccess" :on-preview="onPreviewFile">
                  <el-button type="primary" plain disabled>选择</el-button>
                </el-upload>
              </div>
            </template>
          </byForm>
        </div>
        <div style="width: 50%; height: 70vh; overflow: auto; padding-right: 20px">
          <el-form :model="formData.followData" label-width="120px" label-position="top" ref="followDom" :rules="followRules"
                   v-loading="submitLoading">
            <div style="width: 100%">
              <TitleInfo content="配件问题" style="margin: 20px 0 20px 0"></TitleInfo>
              <el-collapse v-model="activeNames">
                <el-collapse-item v-for="(item, index) in formData.followData.bomDetailList" :key="item.id" :name="item.id">
                  <template #title>
                    <div style="width: 100%; display: flex">
                      <div style="flex: 1">
                        <el-icon color="red" v-if="
                            submitData[item.id].quantity &&
                            submitData[item.id].remark &&
                            submitData[item.id].fileList.length > 0
                          " style="margin-right: 10px">
                          <WarnTriangleFilled />
                        </el-icon>
                        {{ item.productName }}
                      </div>
                      <div style="margin-right: 10px">
                        [ {{ item.quantity }} ]
                      </div>
                    </div>
                  </template>
                  <div>
                    <el-form-item label="售后数量">
                      <el-input-number onmousewheel="return false;" v-model="submitData[item.id].quantity" placeholder="请输入" style="width: 100%"
                                       :precision="0" :controls="false" :min="0" :disabled="isDetail" />
                    </el-form-item>
                    <el-form-item label="售后说明">
                      <el-input v-model="submitData[item.id].remark" type="textarea" :disabled="isDetail" />
                    </el-form-item>
                    <el-form-item label="现场照片" style="margin-top: 20px">
                      <div>
                        <el-upload v-model:fileList="submitData[item.id].fileList" action="https://winfaster.obs.cn-south-1.myhuaweicloud.com"
                                   :data="uploadData" multiple :before-upload="handleBeforeUpload" :on-success="handleSuccess"
                                   :on-preview="onPreviewFile">
                          <el-button type="primary" plain :disabled="isDetail">选择</el-button>
                        </el-upload>
                      </div>
                    </el-form-item>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </div>

            <div style="width: 100%; margin-top: 20px">
              <TitleInfo content="其他问题"></TitleInfo>
            </div>
            <el-form-item label=" " prop="afterSalesRemark">
              <el-input v-model="formData.followData.afterSalesRemark" type="textarea" placeholder="请输入" :disabled="isDetail" />
            </el-form-item>
            <div style="width: 100%">
              <TitleInfo content="售后金额" style="margin-top: 20px"></TitleInfo>
            </div>
            <el-form-item label=" " prop="amount">
              <el-input-number onmousewheel="return false;" v-model="formData.followData.amount" placeholder="请输入" style="width: 100%" :precision="2"
                               :controls="false" :min="0" :disabled="isDetail" />
            </el-form-item>
            <div style="width: 100%">
              <TitleInfo content="程序文件" style="margin: 20px 0 20px 0"></TitleInfo>
              <el-upload v-model:fileList="formData.followData.fileListOne" action="https://winfaster.obs.cn-south-1.myhuaweicloud.com"
                         :data="uploadData" multiple :before-upload="handleBeforeUpload" :on-success="handleSuccess" :on-preview="onPreviewFile">
                <el-button type="primary" plain disabled>选择</el-button>
              </el-upload>
            </div>
            <div style="width: 100%">
              <TitleInfo content="申请物料" style="margin: 20px 0 20px 0"></TitleInfo>
              <div style="width: 100%">
                <el-button type="primary" plain @click="openMaterial = true" v-if="!isDetail">
                  添加物料/半成品
                </el-button>
                <el-table :data="formData.followData.afterSalesMaterialsList" style="margin-top: 15px">
                  <el-table-column prop="productName" label="产品名称" min-width="200" />
                  <el-table-column prop="productSpec" label="规格型号" width="120" />
                  <el-table-column prop="quantity" label="数量" width="150">
                    <template #default="{ row, $index }">
                      <el-form-item :prop="'afterSalesMaterialsList.' + $index + '.quantity'" :rules="rules.quantity" :inline-message="true">
                        <el-input-number onmousewheel="return false;" v-model="row.quantity" :disabled="isDetail" :precision="0" :controls="false"
                                         :min="0" @change="changeAmount" style="width:80%" />
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <!-- <el-table-column prop="productRemark" label="备注" min-width="150">
                    <template #default="{ row, $index }">
                      <el-form-item :prop="
                      'afterSalesMaterialsList.' + $index + '.productRemark'
                    " :rules="rules.productRemark" :inline-message="true">
                        <el-input v-model="row.productRemark" placeholder="请输入" type="textarea" :rows="3" />
                      </el-form-item>
                    </template>
                  </el-table-column> -->
                  <el-table-column prop="zip" label="操作" width="60" v-if="!isDetail">
                    <template #default="{ $index }">
                      <el-button type="primary" link @click="handleRemove($index)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-form>
        </div>
      </div>

      <template #footer>
        <el-button @click="openFollow = false" size="large">取 消</el-button>
        <el-button type="primary" @click="submitFollow()" size="large" :loading="submitLoading" v-if="!isDetail">确 定</el-button>
      </template>
    </el-dialog>

    <el-dialog v-model="openMaterial" title="选择物料/半成品" width="70%" append-to-body>
      <SelectMaterial @handleSelect="handleSelect"></SelectMaterial>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="openMaterial = false">取消</el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>
  
<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import byTable from "@/components/byTable/index";
import byForm from "@/components/byForm/index";
import useUserStore from "@/store/modules/user";
import TitleInfo from "@/components/TitleInfo/index.vue";
import SelectMaterial from "@/components/product/SelectMaterial";

const { proxy } = getCurrentInstance();
const uploadData = ref({});
const loading = ref(false);
const submitLoading = ref(false);
const sourceList = ref({
  data: [],
  pagination: {
    total: 3,
    pageNum: 1,
    pageSize: 10,
    keyword: "",
  },
});
const openMaterial = ref(false);
const dialogVisible = ref(false);
const openFollow = ref(false);
const rules = ref({
  productSn: [{ required: true, message: "请输入产品Sn", trigger: "blur" }],
  type: [{ required: true, message: "请选择售后类型", trigger: "change" }],
  remark: [{ required: true, message: "请输入售后说明", trigger: "blur" }],
  contactName: [
    { required: true, message: "请输入客户联系人", trigger: "blur" },
  ],
  contactInfo: [
    { required: true, message: "请输入客户联系方式", trigger: "blur" },
  ],
  afterSalesPersonId: [
    { required: true, message: "请选择售后人员", trigger: "change" },
  ],
  quantity: [{ required: true, message: "请输入数量", trigger: "blur" }],
});
const userList = ref([]);
const afterSalesType = ref([]);
const selectConfig = computed(() => [
  // {
  //   label: "售后类型",
  //   prop: "type",
  //   data: afterSalesType.value,
  // },
  // {
  //   label: "售后状态",
  //   prop: "status",
  //   data: [
  //     {
  //       label: "进行中",
  //       value: 0,
  //     },
  //     {
  //       label: "完成",
  //       value: 1,
  //     },
  //   ],
  // },
]);
const config = computed(() => {
  return [
    {
      attrs: {
        label: "售后编码",
        prop: "code",
      },
    },
    {
      attrs: {
        label: "产品Sn",
        prop: "productSn",
      },
    },

    {
      attrs: {
        label: "产品名称",
        prop: "productName",
      },
    },

    {
      attrs: {
        label: "规格型号",
        prop: "productSpec",
      },
    },
    {
      attrs: {
        label: "售后金额",
        prop: "amount",
      },
    },
    {
      attrs: {
        label: "售后状态",
        prop: "status",
      },
      render(status) {
        return status == "0" ? "进行中" : "完成";
      },
    },
    {
      attrs: {
        label: "操作",
        width: "200",
        align: "center",
        fixed: "right",
      },
      renderHTML(row) {
        return [
          {
            attrs: {
              label: row.status == 0 ? "跟进" : "查看",
              type: "primary",
              text: true,
              disabled: false,
            },
            el: "button",
            click() {
              handleFollow(row);
            },
          },
        ];
      },
    },
  ];
});
const formData = reactive({
  data: {
    afterSalesDetailList: [],
  },
  followData: {},
  detailData: {},
});
const formOption = reactive({
  inline: true,
  labelWidth: 100,
  itemWidth: 100,
  rules: [],
});
const formConfig = computed(() => {
  return [
    {
      type: "slot",
      slotName: "productSn",
      prop: "productSn",
      label: "产品Sn",
    },
    {
      type: "input",
      itemType: "text",
      prop: "productName",
      label: "产品名称",
      disabled: true,
    },
    {
      type: "input",
      itemType: "text",
      prop: "productSpec",
      label: "规格型号",
      disabled: true,
    },
    {
      type: "input",
      itemType: "text",
      prop: "customerName",
      label: "客户名称",
      disabled: true,
    },
    {
      type: "input",
      itemType: "text",
      prop: "code",
      label: "合同编码",
      disabled: true,
    },
    {
      type: "select",
      prop: "type",
      label: "售后类型",
      required: true,
      itemWidth: 100,
      // multiple: true,
      data: afterSalesType.value,
      style: {
        width: "100%",
      },
      disabled: false,
    },
    {
      type: "input",
      itemType: "textarea",
      prop: "remark",
      label: "售后说明",
      required: true,
    },
    {
      type: "input",
      itemType: "text",
      prop: "contactName",
      label: "客户联系人",
      disabled: false,
    },
    {
      type: "input",
      itemType: "text",
      prop: "contactInfo",
      label: "客户联系方式",
      disabled: false,
    },
    {
      type: "select",
      prop: "afterSalesPersonId",
      label: "售后人员",
      itemWidth: 100,
      // multiple: true,
      filterable: true,
      data: userList.value,
      style: {
        width: "100%",
      },
      disabled: false,
    },
    {
      type: "slot",
      slotName: "file",
      label: "售后附件",
    },
  ];
});
const formConfigDetail = computed(() => {
  return [
    {
      type: "slot",
      slotName: "title1",
    },
    {
      type: "input",
      itemType: "text",
      label: "售后编码",
      prop: "code",
      itemWidth: 100,
      disabled: true,
    },
    {
      type: "input",
      itemType: "text",
      label: "产品Sn",
      prop: "productSn",
      itemWidth: 100,
      disabled: true,
    },
    {
      type: "input",
      itemType: "text",
      label: "产品名称",
      prop: "productName",
      itemWidth: 100,
      disabled: true,
    },
    {
      type: "input",
      itemType: "text",
      label: "规格型号",
      prop: "productSpec",
      itemWidth: 100,
      disabled: true,
    },
    {
      type: "slot",
      slotName: "title2",
    },
    {
      type: "select",
      prop: "type",
      label: "售后类型",
      required: true,
      itemWidth: 100,
      // multiple: true,
      data: afterSalesType.value,
      style: {
        width: "100%",
      },
      disabled: true,
    },
    {
      type: "input",
      itemType: "textarea",
      prop: "remark",
      label: "售后说明",
      disabled: true,
    },
    {
      type: "input",
      itemType: "text",
      prop: "contactName",
      label: "客户联系人",
      disabled: true,
    },
    {
      type: "input",
      itemType: "text",
      prop: "contactInfo",
      label: "客户联系方式",
      disabled: true,
    },
    {
      type: "select",
      prop: "afterSalesPersonId",
      label: "售后人员",
      itemWidth: 100,
      // multiple: true,
      filterable: true,
      data: userList.value,
      style: {
        width: "100%",
      },
      disabled: true,
    },
    {
      type: "slot",
      slotName: "file",
      label: "售后附件",
    },
  ];
});
const formConfigFollow = computed(() => {
  return [
    {
      type: "slot",
      slotName: "listSlot",
    },
    {
      type: "slot",
      slotName: "title1",
    },
    {
      type: "input",
      itemType: "textarea",
      prop: "remark",
      label: "",
      disabled: false,
    },
    {
      type: "slot",
      slotName: "fileSlot",
    },
  ];
});

const followRules = ref({
  afterSalesRemark: [
    { required: true, message: "请输入其他问题", trigger: "blur" },
  ],
  amount: [{ required: true, message: "请输入售后金额", trigger: "blur" }],
});
const formDom = ref(null);
const followDom = ref(null);
const getList = (req) => {
  sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  loading.value = true;
  proxy
    .post("/afterSalesRecord/page", sourceList.value.pagination)
    .then((res) => {
      sourceList.value.data = res.rows;
      sourceList.value.pagination.total = res.total;
      setTimeout(() => {
        loading.value = false;
      }, 200);
    });
};

const submitForm = () => {
  formDom.value.handleSubmit(() => {
    // if (formData.data.fileList && formData.data.fileList.length > 0) {
    // } else {
    //   return ElMessage({
    //     message: "请上传售后附件",
    //     type: "info",
    //   });
    // }
    formData.data.fileList = formData.data.fileList.map((x) => x.raw);
    submitLoading.value = true;
    proxy.post("/afterSalesRecord/add", formData.data).then(
      (res) => {
        ElMessage({
          message: "操作成功",
          type: "success",
        });
        dialogVisible.value = false;
        submitLoading.value = false;
        getList();
      },
      (err) => {
        submitLoading.value = false;
      }
    );
  });
};

const submitFollow = () => {
  followDom.value.validate((valid) => {
    if (valid) {
      let arr = Object.values(submitData.value);
      for (let i = 0; i < arr.length; i++) {
        const e = arr[i];
        if (e.quantity || e.remark.trim() || e.fileList.length > 0) {
          if (!e.quantity) {
            return ElMessage({
              message: `请填写${e.productName}配件的售后数量`,
              type: "info",
            });
          }
          if (!e.remark.trim()) {
            return ElMessage({
              message: `请填写${e.productName}配件的售后说明`,
              type: "info",
            });
          }
          if (e.fileList.length == 0) {
            return ElMessage({
              message: `请上传${e.productName}配件的现场照片`,
              type: "info",
            });
          }
        }
      }

      if (!(Number(formData.followData.amount) > 0)) {
        return ElMessage({
          message: `售后金额需大于0`,
          type: "info",
        });
      }
      for (let i = 0; i < arr.length; i++) {
        const e = arr[i];
        e.fileList = e.fileList.map((x) => x.raw);
      }
      submitLoading.value = true;
      proxy
        .post("/afterSalesRecord/afterSales", {
          id: formData.followData.id,
          afterSalesRemark: formData.followData.afterSalesRemark,
          amount: formData.followData.amount,
          afterSalesRecordDetailList: arr,
          afterSalesMaterialsList: formData.followData.afterSalesMaterialsList,
        })
        .then(
          (res) => {
            ElMessage({
              message: "操作成功",
              type: "success",
            });
            openFollow.value = false;
            submitLoading.value = false;
            getList();
          },
          (err) => {
            submitLoading.value = false;
          }
        );
    }
  });
};

const getDict = () => {
  proxy
    .get("/tenantUser/list", {
      pageNum: 1,
      pageSize: 10000,
      tenantId: useUserStore().user.tenantId,
    })
    .then((res) => {
      userList.value = res.rows.map((item) => {
        return {
          label: item.nickName,
          value: item.userId,
        };
      });
    });

  proxy.getDictOne(["after_sales_type"]).then((res) => {
    afterSalesType.value = res["after_sales_type"].map((x) => ({
      label: x.dictValue,
      value: x.dictKey,
    }));
  });
};
getDict();
getList();
const clickAdd = (type) => {
  formData.data = {
    afterSalesPersonId: useUserStore().user.userId,
    fileList: [],
  };
  dialogVisible.value = true;
};
const activeNames = ref([]);
const submitData = ref({});
const isDetail = ref(false);
const handleFollow = (row) => {
  isDetail.value = row.status == 0 ? false : true;
  proxy.post("/afterSalesRecord/detail", { id: row.id }).then(async (res) => {
    // 左侧售后信息
    formData.detailData = res;

    proxy
      .post("/fileInfo/getList", {
        businessIdList: [row.id],
      })
      .then((fileObj) => {
        if (fileObj && fileObj[row.id]) {
          formData.detailData.fileList = fileObj[row.id].map((x) => ({
            raw: x,
            name: x.fileName,
            url: x.fileUrl,
          }));
        }
      });
    // 右侧跟进
    if (row.status == 0) {
      for (let i = 0; i < res.bomDetailList.length; i++) {
        const e = res.bomDetailList[i];
        submitData.value[e.id] = {
          bomDetailId: e.id,
          accessoriesId: e.productId,
          productName: e.productName,
          quantity: null,
          remark: "",
          fileList: [],
        };
      }
      formData.followData = res;
      formData.followData.id = row.id;
      formData.followData.afterSalesMaterialsList = [];
      openFollow.value = true;
    } else {
      let arr = res.bomDetailList.map((x) => x.afterSalesRecordDetail.id);
      for (let i = 0; i < res.bomDetailList.length; i++) {
        const e = res.bomDetailList[i];
        submitData.value[e.id] = {
          bomDetailId: e.id,
          accessoriesId: e.productId,
          productName: e.productName,
          quantity: e.afterSalesRecordDetail.quantity,
          remark: e.afterSalesRecordDetail.remark,
          fileList: [],
        };
      }
      formData.followData = res;
      formData.followData.id = row.id;
      // formData.followData.afterSalesMaterialsList = [];
      openFollow.value = true;
      const fileObj = await proxy.post("/fileInfo/getList", {
        businessIdList: arr,
      });
      for (let i = 0; i < res.bomDetailList.length; i++) {
        const e = res.bomDetailList[i];
        for (const key in fileObj) {
          if (e.afterSalesRecordDetail.id == key) {
            submitData.value[e.id].fileList = fileObj[key].map((item) => ({
              raw: item,
              name: item.fileName,
              url: item.fileUrl,
            }));
          }
        }
      }
    }

    if (res.bomInfoId) {
      proxy
        .post("/fileInfo/getList", { businessIdList: [res.bomInfoId] })
        .then((fileObj) => {
          formData.followData.fileListOne = fileObj[res.bomInfoId].map(
            (item) => ({
              raw: item,
              name: item.fileName,
              url: item.fileUrl,
            })
          );
        });
    }
  });
};

const handleQuery = () => {
  proxy
    .post("/productionTaskDetail/snInfo", {
      productSn: formData.data.productSn,
    })
    .then((res) => {
      if (res && res.productId) {
        formData.data.productId = res.productId;
        formData.data.code = res.contractCode;
        formData.data.productName = res.productName;
        formData.data.productSpec = res.productSpec;
        formData.data.customerName = res.customerName;
      }
    });
};

const handleBeforeUpload = async (file) => {
  const res = await proxy.post("/fileInfo/getSing", { fileName: file.name });
  uploadData.value = res.uploadBody;
  file.id = res.id;
  file.fileName = res.fileName;
  file.fileUrl = res.fileUrl;
  file.uploadState = true;
  return true;
};

const handleSuccess = (any, UploadFile) => {
  UploadFile.raw.uploadState = false;
};

const onPreviewFile = (file) => {
  window.open(file.raw.fileUrl, "_blank");
};

const handleSelect = (row) => {
  const flag = formData.followData.afterSalesMaterialsList.some(
    (x) => x.productId === row.id
  );
  if (flag) {
    return ElMessage({
      message: "该物料已选择",
      type: "info",
    });
  } else {
    formData.followData.afterSalesMaterialsList.push({
      productId: row.id,
      productCode: row.code,
      productName: row.name,
      productSpec: row.spec,
      quantity: null,
    });
    return ElMessage({
      message: "选择成功",
      type: "success",
    });
  }
};

const handleRemove = (index, type) => {
  formData.followData.afterSalesMaterialsList.splice(index, 1);
  return ElMessage({
    message: "删除成功",
    type: "success",
  });
};
</script>
  
<style lang="scss" scoped>
.tenant {
  padding: 20px;
}
::v-deep {
  .el-form-item__content {
    display: block;
  }
}
::v-deep(.el-input-number .el-input__inner) {
  text-align: left;
}
</style>