feat(customer): 新增客户交接功能并优化客户档案管理界面

chenhj

2 天以前 3d35d4292850d368666d5290d8e658c620e932ed

 src/views/basicData/customerFile/index.vue

@@ -22,19 +22,24 @@
        </el-select>
        <el-button type="primary"
                   @click="handleQuery"
                   style="margin-left: 10px">搜索</el-button>
                   style="margin-left: 10px">搜索
        </el-button>
      </div>
      <div>
        <el-button type="primary"
                   @click="openForm('add')">新增客户</el-button>
        <el-button @click="handleOut">导出</el-button>
                   @click="openForm('add')">新增客户
        </el-button>
        <el-button type="primary" @click="handleOut">导出</el-button>
        <el-button type="primary" @click="handleOutFollowUpList">导出跟进记录</el-button>
        <el-button type="info"
                   plain
                   icon="Upload"
                   @click="handleImport">导入</el-button>
                   @click="handleImport">导入
        </el-button>
        <el-button type="danger"
                   plain
                   @click="handleDelete">删除</el-button>
                   @click="handleDelete">删除
        </el-button>
      </div>
    </div>
    <div class="table_list">
@@ -164,7 +169,8 @@
          </el-col>
        </el-row>
        <el-button @click="addNewContact"
                   style="margin-bottom: 10px;">+ 新增联系人</el-button>
                   style="margin-bottom: 10px;">+ 新增联系人
        </el-button>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="维护人："
@@ -197,8 +203,40 @@
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary"
                     @click="submitForm">确认</el-button>
                     @click="submitForm">确认
          </el-button>
          <el-button @click="closeDia">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="transferDialogVisible"
               title="客户交接"
               width="500px"
               @close="closeTransferDialog">
      <el-form :model="transferForm"
               :rules="transferRules"
               ref="transferFormRef"
               label-width="100px">
        <el-form-item label="交接人员："
                      prop="createUser">
          <el-select v-model="transferForm.createUser"
                     placeholder="请选择"
                     clearable
                     filterable
                     style="width: 100%">
            <el-option v-for="item in userList"
                       :key="item.userId"
                       :label="item.userName || item.nickName"
                       :value="item.userId"/>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary"
                     @click="submitTransfer">确认
          </el-button>
          <el-button @click="closeTransferDialog">取消</el-button>
        </div>
      </template>
    </el-dialog>
@@ -220,7 +258,9 @@
                 :on-change="upload.onChange"
                 :auto-upload="false"
                 drag>
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <el-icon class="el-icon--upload">
          <upload-filled/>
        </el-icon>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip text-center">
@@ -228,14 +268,16 @@
            <el-link type="primary"
                     :underline="false"
                     style="font-size: 12px; vertical-align: baseline"
                     @click="importTemplate">下载模板</el-link>
                     @click="importTemplate">下载模板
            </el-link>
          </div>
        </template>
      </el-upload>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary"
                     @click="submitFileForm">确 定</el-button>
                     @click="submitFileForm">确 定
          </el-button>
          <el-button @click="upload.open = false">取 消</el-button>
        </div>
      </template>
@@ -621,12 +663,13 @@
    updateCustomerFollow,
    delCustomerFollow,
    addReturnVisit,
    getReturnVisit,
  getReturnVisit, transferCustomer,
  } from "@/api/basicData/customerFile.js";
  import { ElMessageBox } from "element-plus";
  import { userListNoPage } from "@/api/system/user.js";
  import useUserStore from "@/store/modules/user";
  import { getToken } from "@/utils/auth.js";

  const { proxy } = getCurrentInstance();
  const userStore = useUserStore();

@@ -691,6 +734,17 @@
    maintenanceTime: "",
  });
  const negotiationRecords = ref([]);

// 客户交接
const transferDialogVisible = ref(false);
const transferFormRef = ref();
const transferForm = reactive({
  id: 0,
  createUser: 0,
});
const transferRules = {
  userId: [{required: true, message: "请选择交接人员", trigger: "change"}],
};

  // 附件相关
  const attachmentDialogVisible = ref(false);
@@ -777,7 +831,7 @@
      label: "操作",
      align: "center",
      fixed: "right",
      width: 290,
    width: 360,
      operation: [
        {
          name: "编辑",
@@ -798,6 +852,13 @@
          type: "text",
          clickFun: row => {
            openReminderDialog(row);
        },
      },
      {
        name: "客户交接",
        type: "text",
        clickFun: row => {
          openTransferDialog(row);
          },
        },
            {
@@ -962,20 +1023,24 @@
  const handleSelectionChange = selection => {
    selectedRows.value = selection;
  };

  /** 提交上传文件 */
  function submitFileForm() {
    upload.isUploading = true;
    proxy.$refs["uploadRef"].submit();
  }

  /** 导入按钮操作 */
  function handleImport() {
    upload.title = "客户导入";
    upload.open = true;
  }

  /** 下载模板 */
  function importTemplate() {
    proxy.download("/basic/customer/downloadTemplate", {}, "客户导入模板.xlsx");
  }

  // 打开弹框
  const openForm = (type, row) => {
    operationType.value = type;
@@ -1054,6 +1119,31 @@
    proxy.resetForm("formRef");
    dialogFormVisible.value = false;
  };

const openTransferDialog = row => {
  userListNoPage().then(res => {
    userList.value = res.data;
  });
  transferForm.id = row.id;
  transferForm.createUser = row.createUser;
  transferDialogVisible.value = true;
};
const closeTransferDialog = () => {
  proxy.resetForm("transferFormRef");
  transferDialogVisible.value = false;
};
const submitTransfer = () => {
  proxy.$refs["transferFormRef"].validate(valid => {
    if (!valid) {
      return;
    }
    transferCustomer(transferForm).then(res => {
      proxy.$modal.msgSuccess("交接成功");
      getList();
    })
    closeTransferDialog();
  });
};
  // 导出
  const handleOut = () => {
    ElMessageBox.confirm("选中的内容将被导出，是否确认导出？", "导出", {
@@ -1063,6 +1153,21 @@
    })
      .then(() => {
        proxy.download("/basic/customer/export", {}, "客户档案.xlsx");
      })
      .catch(() => {
        proxy.$modal.msg("已取消");
      });
};

// 导出跟进记录
const handleOutFollowUpList = () => {
  ElMessageBox.confirm("选中的内容将被导出，是否确认导出？", "导出", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
      .then(() => {
        proxy.download("/basic/customer/exportFollowUpList", {}, "客户跟进记录.xlsx");
      })
      .catch(() => {
        proxy.$modal.msg("已取消");
@@ -1482,6 +1587,7 @@
    return `${year}-${month}-${day}`;
  }


  onMounted(() => {
    getList();
  });