Merge branch 'dev_HXSJ' of http://114.132.189.42:9002/r/product-inventory-m...

chenhj

4 天以前 4db45250f9e0e47b1df480eb4e325a931f40c9c6

 src/views/basicData/customerFile/index.vue

@@ -3,212 +3,211 @@
    <div class="search_form">
      <div>
        <span class="search_title">客户名称：</span>
        <el-input
          v-model="searchForm.customerName"
        <el-input v-model="searchForm.customerName"
          style="width: 240px;margin-right: 10px"
          placeholder="请输入"
          @change="handleQuery"
          clearable
          :prefix-icon="Search"
        />
                  :prefix-icon="Search" />
         <span class="search_title">客户分类：</span>
         <el-select
          v-model="searchForm.customerType"
        <el-select v-model="searchForm.customerType"
          placeholder="请选择"
          style="width: 240px"
          clearable
           @change="handleQuery"
        >
           <el-option  label="零售客户" value="零售客户" />
           <el-option  label="进销商客户" value="进销商客户" />
                   @change="handleQuery">
          <el-option label="零售客户"
                     value="零售客户" />
          <el-option label="经销商客户"
                     value="经销商客户" />
        </el-select>
        <el-button type="primary" @click="handleQuery" style="margin-left: 10px"
          >搜索</el-button
        >
        <el-button type="primary"
                   @click="handleQuery"
                   style="margin-left: 10px">搜索</el-button>
      </div>
      <div>
        <el-button type="primary" @click="openForm('add')">新增客户</el-button>
        <el-button type="primary"
                   @click="openForm('add')">新增客户</el-button>
        <el-button @click="handleOut">导出</el-button>
        <el-button type="info" plain icon="Upload" @click="handleImport"
          >导入</el-button
        >
        <el-button type="danger" plain @click="handleDelete">删除</el-button>
        <el-button type="info"
                   plain
                   icon="Upload"
                   @click="handleImport">导入</el-button>
        <el-button type="danger"
                   plain
                   @click="handleDelete">删除</el-button>
      </div>
    </div>
    <div class="table_list">
      <PIMTable
        rowKey="id"
      <PIMTable rowKey="id"
        :column="tableColumn"
        :tableData="tableData"
        :page="page"
        :isSelection="true"
        @selection-change="handleSelectionChange"
        :tableLoading="tableLoading"
        @pagination="pagination"
      ></PIMTable>
                @pagination="pagination"></PIMTable>
    </div>
    <el-dialog
      v-model="dialogFormVisible"
    <el-dialog v-model="dialogFormVisible"
      :title="operationType === 'add' ? '新增客户信息' : '编辑客户信息'"
      width="70%"
      @close="closeDia"
    >
      <el-form
        :model="form"
               @close="closeDia">
      <el-form :model="form"
        label-width="140px"
        label-position="top"
        :rules="rules"
        ref="formRef"
      >
               ref="formRef">
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="客户名称：" prop="customerName">
              <el-input
                v-model="form.customerName"
            <el-form-item label="客户名称："
                          prop="customerName">
              <el-input v-model="form.customerName"
                placeholder="请输入"
                clearable
              />
                        clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="纳税人识别号："
              prop="taxpayerIdentificationNumber"
            >
              <el-input
                v-model="form.taxpayerIdentificationNumber"
            <el-form-item label="纳税人识别号："
                          prop="taxpayerIdentificationNumber">
              <el-input v-model="form.taxpayerIdentificationNumber"
                placeholder="请输入"
                clearable
              />
                        clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="公司地址：" prop="companyAddress">
              <el-input
                v-model="form.companyAddress"
            <el-form-item label="公司地址："
                          prop="companyAddress">
              <el-input v-model="form.companyAddress"
                placeholder="请输入"
                clearable
              />
                        clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公司电话：" prop="companyPhone">
              <el-input
                v-model="form.companyPhone"
            <el-form-item label="公司电话："
                          prop="companyPhone">
              <el-input v-model="form.companyPhone"
                placeholder="请输入"
                clearable
              />
                        clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="银行基本户：" prop="basicBankAccount">
              <el-input
                v-model="form.basicBankAccount"
            <el-form-item label="银行基本户："
                          prop="basicBankAccount">
              <el-input v-model="form.basicBankAccount"
                placeholder="请输入"
                clearable
              />
                        clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="银行账号：" prop="bankAccount">
              <el-input
                v-model="form.bankAccount"
            <el-form-item label="银行账号："
                          prop="bankAccount">
              <el-input v-model="form.bankAccount"
                placeholder="请输入"
                clearable
              />
                        clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="开户行号：" prop="bankCode">
              <el-input
                v-model="form.bankCode"
            <el-form-item label="开户行号："
                          prop="bankCode">
              <el-input v-model="form.bankCode"
                placeholder="请输入"
                clearable
              />
                        clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户分类：" prop="customerType">
               <el-select  v-model="form.customerType" placeholder="请选择" clearable>
                 <el-option  label="零售客户" value="零售客户" />
                 <el-option  label="进销商客户" value="进销商客户" />
            <el-form-item label="客户分类："
                          prop="customerType">
              <el-select v-model="form.customerType"
                         placeholder="请选择"
                         clearable>
                <el-option label="零售客户"
                           value="零售客户" />
                <el-option label="经销商客户"
                           value="经销商客户" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
            <el-row :gutter="30" v-for="(contact, index) in formYYs.contactList" :key="index">
        <el-row :gutter="30"
                v-for="(contact, index) in formYYs.contactList"
                :key="index">
               <el-col :span="12">
                  <el-form-item label="联系人：" prop="contactPerson">
                     <el-input v-model="contact.contactPerson" placeholder="请输入" clearable  />
            <el-form-item label="联系人："
                          prop="contactPerson">
              <el-input v-model="contact.contactPerson"
                        placeholder="请输入"
                        clearable />
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="联系电话：" prop="contactPhone">
            <el-form-item label="联系电话："
                          prop="contactPhone">
                     <div style="display: flex; align-items: center;width: 100%;">
                        <el-input v-model="contact.contactPhone" placeholder="请输入" clearable />
                        <el-button   @click="removeContact(index)" type="danger" circle style="margin-left: 5px;">
                           <el-icon><Close /></el-icon>
                <el-input v-model="contact.contactPhone"
                          placeholder="请输入"
                          clearable />
                <el-button @click="removeContact(index)"
                           type="danger"
                           circle
                           style="margin-left: 5px;">
                  <el-icon>
                    <Close />
                  </el-icon>
                        </el-button>
                     </div>
                  </el-form-item>
               </el-col>
            </el-row>
            <el-button @click="addNewContact" style="margin-bottom: 10px;">+ 新增联系人</el-button>
        <el-button @click="addNewContact"
                   style="margin-bottom: 10px;">+ 新增联系人</el-button>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="维护人：" prop="maintainer">
              <el-select
                v-model="form.maintainer"
            <el-form-item label="维护人："
                          prop="maintainer">
              <el-select v-model="form.maintainer"
                placeholder="请选择"
                clearable
                disabled
              >
                <el-option
                  v-for="item in userList"
                         disabled>
                <el-option v-for="item in userList"
                  :key="item.nickName"
                  :label="item.nickName"
                  :value="item.nickName"
                />
                           :value="item.nickName" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="维护时间：" prop="maintenanceTime">
              <el-date-picker
                style="width: 100%"
            <el-form-item label="维护时间："
                          prop="maintenanceTime">
              <el-date-picker style="width: 100%"
                v-model="form.maintenanceTime"
                value-format="YYYY-MM-DD"
                format="YYYY-MM-DD"
                type="date"
                placeholder="请选择"
                clearable
              />
                              clearable />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确认</el-button>
          <el-button type="primary"
                     @click="submitForm">确认</el-button>
          <el-button @click="closeDia">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 用户导入对话框 -->
    <el-dialog
      :title="upload.title"
    <el-dialog :title="upload.title"
      v-model="upload.open"
      width="400px"
      append-to-body
    >
      <el-upload
        ref="uploadRef"
               append-to-body>
      <el-upload ref="uploadRef"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
@@ -220,27 +219,75 @@
        :on-error="upload.onError"
        :on-change="upload.onChange"
        :auto-upload="false"
        drag
      >
                 drag>
        <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">
            <span>仅允许导入xls、xlsx格式文件。</span>
            <el-link
              type="primary"
            <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>
          <el-button type="primary"
                     @click="submitFileForm">确 定</el-button>
          <el-button @click="upload.open = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 客户画像弹窗 -->
    <el-dialog v-model="profileDialogVisible"
               title="客户画像"
               width="70%"
               @close="closeProfileDialog">
      <div class="profile-content">
        <div class="profile-info">
          <h3 class="profile-title">购买习惯</h3>
          <el-descriptions :column="2"
                           border>
            <el-descriptions-item label="客户名称">{{ currentCustomer.customerName || '-' }}</el-descriptions-item>
            <el-descriptions-item label="购买次数">{{ purchaseHabits.purchaseCount || 0 }}</el-descriptions-item>
            <el-descriptions-item label="平均金额"><span style="color:#ff6f00">{{ purchaseHabits.averageAmount || 0 }}</span> 元</el-descriptions-item>
            <el-descriptions-item label="最近购买时间">{{ purchaseHabits.latestPurchaseTime || '-' }}</el-descriptions-item>
            <el-descriptions-item label="常购品">
              <el-tag v-for="item in purchaseHabits.topProducts"
                      style="margin-right: 10px;"
                      :key="item">{{ item }}</el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="profile-form">
          <h3 class="profile-title">客户标签设置</h3>
          <el-form :model="profileForm"
                   label-width="120px">
            <el-form-item label="客户等级">
              <el-radio-group v-model="profileForm.isVip">
                <el-radio :label="true">VIP客户</el-radio>
                <el-radio :label="false">普通客户</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="价格敏感">
              <el-checkbox v-model="profileForm.isPriceSensitive">价格敏感</el-checkbox>
            </el-form-item>
            <el-form-item label="客户偏好">
              <el-input v-model="profileForm.preferences"
                        type="textarea"
                        :rows="4"
                        placeholder="请输入客户偏好，如：喜欢高品质产品、注重售后服务等" />
            </el-form-item>
          </el-form>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary"
                     @click="saveProfile">保存</el-button>
          <el-button @click="closeProfileDialog">取消</el-button>
        </div>
      </template>
    </el-dialog>
@@ -275,6 +322,7 @@
    prop: "customerName",
    width: 220,
  },

  {
    label: "纳税人识别码",
    prop: "taxpayerIdentificationNumber",
@@ -292,7 +340,7 @@
  {
    label: "联系电话",
    prop: "contactPhone",
    width:150
      width: 150,
  },
  {
    label: "银行基本户",
@@ -307,8 +355,9 @@
  {
    label: "开户行号",
    prop: "bankCode",
    width:220
      width: 220,
  },

  {
    label: "维护人",
    prop: "maintainer",
@@ -322,13 +371,25 @@
    dataType: "action",
    label: "操作",
    align: "center",
      fixed: 'right',
      width: 160,
      fixed: "right",
    operation: [
      {
        name: "编辑",
        type: "text",
        clickFun: (row) => {
          clickFun: row => {
          openForm("edit", row);
          },
        },
        {
          name: "客户画像",
          type: "text",
          color: "rgb(229 187 21)",
          showHide: row => {
            return row.customerType == "经销商客户";
          },
          clickFun: row => {
            openCustomerProfile(row);
        },
      },
    ],
@@ -348,13 +409,14 @@
// 用户信息表单弹框数据
const operationType = ref("");
const dialogFormVisible = ref(false);
const formYYs = ref({    // 其他字段...
  const formYYs = ref({
    // 其他字段...
  contactList: [
    {
      contactPerson: "",
      contactPhone: ""
    }
  ]
        contactPhone: "",
      },
    ],
});
const data = reactive({
  searchForm: {
@@ -406,10 +468,14 @@
  // 上传的地址
  url: import.meta.env.VITE_APP_BASE_API + "/basic/customer/importData",
  // 文件上传前的回调
  beforeUpload: (file) => {
    console.log('文件即将上传', file);
    beforeUpload: file => {
      console.log("文件即将上传", file);
    // 可以在此处做文件类型或大小校验
    const isValid = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.name.endsWith('.xlsx') || file.name.endsWith('.xls');
      const isValid =
        file.type ===
          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
        file.name.endsWith(".xlsx") ||
        file.name.endsWith(".xls");
    if (!isValid) {
      proxy.$modal.msgError("只能上传 Excel 文件");
    }
@@ -417,11 +483,11 @@
  },
  // 文件状态改变时的回调
  onChange: (file, fileList) => {
    console.log('文件状态改变', file, fileList);
      console.log("文件状态改变", file, fileList);
  },
  // 文件上传成功时的回调
  onSuccess: (response, file, fileList) => {
    console.log('上传成功', response, file, fileList);
      console.log("上传成功", response, file, fileList);
    upload.isUploading = false;
    if(response.code === 200){
      proxy.$modal.msgSuccess("文件上传成功");
@@ -436,24 +502,24 @@
  },
  // 文件上传失败时的回调
  onError: (error, file, fileList) => {
    console.error('上传失败', error, file, fileList);
      console.error("上传失败", error, file, fileList);
    upload.isUploading = false;
    proxy.$modal.msgError("文件上传失败");
  },
  // 文件上传进度回调
  onProgress: (event, file, fileList) => {
    console.log('上传中...', event.percent);
  }
      console.log("上传中...", event.percent);
    },
});
const { searchForm, form, rules } = toRefs(data);
const addNewContact = () => {
  formYYs.value.contactList.push({
    contactPerson: "",
    contactPhone: ""
      contactPhone: "",
  });
};

const removeContact = (index) => {
  const removeContact = index => {
  if (formYYs.value.contactList.length > 1) {
    formYYs.value.contactList.splice(index, 1);
  }
@@ -464,21 +530,21 @@
  page.current = 1;
  getList();
};
const pagination = (obj) => {
  const pagination = obj => {
  page.current = obj.page;
  page.size = obj.limit;
  getList();
};
const getList = () => {
  tableLoading.value = true;
  listCustomer({ ...searchForm.value, ...page }).then((res) => {
    listCustomer({ ...searchForm.value, ...page }).then(res => {
    tableLoading.value = false;
    tableData.value = res.records;
    page.total = res.total;
  });
};
// 表格选择数据
const handleSelectionChange = (selection) => {
  const handleSelectionChange = selection => {
  selectedRows.value = selection;
};
/** 提交上传文件 */
@@ -503,30 +569,31 @@
  formYYs.value.contactList = [
    {
      contactPerson: "",
      contactPhone: ""
    }
        contactPhone: "",
      },
  ];
  form.value.maintenanceTime = getCurrentDate();
  userListNoPage().then((res) => {
    userListNoPage().then(res => {
    userList.value = res.data;
  });
  if (type === "edit") {
    getCustomer(row.id).then((res) => {
      getCustomer(row.id).then(res => {
      form.value = { ...res.data };
      formYYs.value.contactList = res.data.contactPerson.split(",").map((item, index) => {
        formYYs.value.contactList = res.data.contactPerson
          .split(",")
          .map((item, index) => {
        return {
          contactPerson: item,
          contactPhone: res.data.contactPhone.split(",")[index]
        }
              contactPhone: res.data.contactPhone.split(",")[index],
            };
      });

    });
  }
  dialogFormVisible.value = true;
};
// 提交表单
const submitForm = () => {
  proxy.$refs["formRef"].validate((valid) => {
    proxy.$refs["formRef"].validate(valid => {
    if (valid) {
      if (operationType.value === "edit") {
        submitEdit();
@@ -541,9 +608,13 @@
  if(formYYs.value.contactList.length < 1){
    return proxy.$modal.msgWarning("请至少添加一个联系人");
  }
  form.value.contactPerson = formYYs.value.contactList.map(item => item.contactPerson).join(",");
  form.value.contactPhone = formYYs.value.contactList.map(item => item.contactPhone).join(",");
  addCustomer(form.value).then((res) => {
    form.value.contactPerson = formYYs.value.contactList
      .map(item => item.contactPerson)
      .join(",");
    form.value.contactPhone = formYYs.value.contactList
      .map(item => item.contactPhone)
      .join(",");
    addCustomer(form.value).then(res => {
    proxy.$modal.msgSuccess("提交成功");
    closeDia();
    getList();
@@ -551,9 +622,13 @@
};
// 提交修改
const submitEdit = () => {
   form.value.contactPerson = formYYs.value.contactList.map(item => item.contactPerson).join(",");
   form.value.contactPhone = formYYs.value.contactList.map(item => item.contactPhone).join(",");
  updateCustomer(form.value).then((res) => {
    form.value.contactPerson = formYYs.value.contactList
      .map(item => item.contactPerson)
      .join(",");
    form.value.contactPhone = formYYs.value.contactList
      .map(item => item.contactPhone)
      .join(",");
    updateCustomer(form.value).then(res => {
    proxy.$modal.msgSuccess("提交成功");
    closeDia();
    getList();
@@ -583,12 +658,14 @@
  let ids = [];
  if (selectedRows.value.length > 0) {
    // 检查是否有他人维护的数据
    const unauthorizedData = selectedRows.value.filter(item => item.maintainer !== userStore.nickName);
      const unauthorizedData = selectedRows.value.filter(
        item => item.maintainer !== userStore.nickName
      );
    if (unauthorizedData.length > 0) {
      proxy.$modal.msgWarning("不可删除他人维护的数据");
      return;
    }
    ids = selectedRows.value.map((item) => item.id);
      ids = selectedRows.value.map(item => item.id);
  } else {
    proxy.$modal.msgWarning("请选择数据");
    return;
@@ -601,7 +678,7 @@
    .then(() => {
      tableLoading.value = true;
      delCustomer(ids)
        .then((res) => {
          .then(res => {
          proxy.$modal.msgSuccess("删除成功");
          getList();
        })
@@ -623,9 +700,141 @@
  return `${year}-${month}-${day}`;
}

  // 客户画像相关
  const profileDialogVisible = ref(false);
  const currentCustomer = ref({});
  const purchaseHabits = ref({
    purchaseCount: 0,
    averageAmount: 1240,
    latestPurchaseTime: "",
    topProducts: [],
  });
  const profileForm = ref({
    isVip: false,
    isPriceSensitive: false,
    preferences: "",
  });

  // 打开客户画像弹窗
  const openCustomerProfile = row => {
    currentCustomer.value = { ...row };
    purchaseHabits.value = {
      purchaseCount: row.purchaseCount || 0,
      averageAmount: row.averageAmount || 0,
      latestPurchaseTime: row.latestPurchaseTime || "-",
      topProducts: row.topProducts || [],
    };
    profileForm.value = {
      isVip: row.isVip,
      isPriceSensitive: row.isPriceSensitive,
      preferences: row.preferences || "",
    };
    profileDialogVisible.value = true;
  };

  // 关闭客户画像弹窗
  const closeProfileDialog = () => {
    profileDialogVisible.value = false;
    currentCustomer.value = {};
  };

  // 保存客户画像
  const saveProfile = () => {
    const updateData = {
      id: currentCustomer.value.id,
      preferences: profileForm.value.preferences,
      isPriceSensitive: profileForm.value.isPriceSensitive,
      isVip: profileForm.value.isVip,
    };
    updateCustomer(updateData).then(res => {
      proxy.$modal.msgSuccess("客户画像保存成功");
      closeProfileDialog();
      getList();
    });
  };

onMounted(() => {
   getList();
});
</script>

<style scoped lang="scss"></style>
<style scoped lang="scss">
  .profile-content {
    .profile-title {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
      margin: 20px 0 15px 0;
      padding-bottom: 10px;
      border-bottom: 2px solid #409eff;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 60px;
        height: 2px;
        background-color: #409eff;
      }
    }

    .profile-info {
      margin-bottom: 30px;

      :deep(.el-descriptions) {
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      }

      :deep(.el-descriptions__label) {
        background-color: #f5f7fa;
        font-weight: 500;
        color: #606266;
      }

      :deep(.el-descriptions__content) {
        color: #303133;
        font-weight: 500;
      }
    }

    .profile-form {
      background-color: #f9f9f9;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

      :deep(.el-form-item__label) {
        font-weight: 500;
        color: #606266;
      }

      :deep(.el-radio-group) {
        display: flex;
        gap: 20px;
      }

      :deep(.el-radio) {
        margin-right: 0;
      }

      :deep(.el-checkbox) {
        font-weight: normal;
      }

      :deep(.el-textarea__inner) {
        border-radius: 6px;
        border: 1px solid #dcdfe6;
        transition: all 0.3s ease;

        &:focus {
          border-color: #409eff;
          box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
        }
      }
    }
  }
</style>