gaoluyang
5 天以前 6216744c95c501f93d2c937228867b3cae5ad8cf
src/views/basicData/customerFileOpenSea/index.vue
@@ -9,17 +9,6 @@
                  @change="handleQuery"
                  clearable
                  :prefix-icon="Search" />
        <span class="search_title">客户分类:</span>
        <el-select v-model="searchForm.customerType"
                   placeholder="请选择"
                   style="width: 240px"
                   clearable
                   @change="handleQuery">
          <el-option label="零售客户"
                     value="零售客户" />
          <el-option label="进销商客户"
                     value="进销商客户" />
        </el-select>
        <el-button type="primary"
                   @click="handleQuery"
                   style="margin-left: 10px">搜索</el-button>
@@ -37,6 +26,17 @@
                   @click="handleDelete">删除</el-button>
      </div>
    </div>
    <!-- 按「客户分类」拆页签;「全部」不带分类查询,保证还没补分类的老数据也能看到 -->
    <el-tabs v-model="activeTab"
             @tab-change="handleTabChange"
             class="customer-tabs">
      <el-tab-pane label="全部"
                   name="全部" />
      <el-tab-pane label="销售客户"
                   name="销售客户" />
      <el-tab-pane label="代储客户"
                   name="代储客户" />
    </el-tabs>
    <div class="table_list">
      <PIMTable rowKey="id"
                :column="tableColumn"
@@ -125,10 +125,10 @@
              <el-select v-model="form.customerType"
                         placeholder="请选择"
                         clearable>
                <el-option label="零售客户"
                           value="零售客户" />
                <el-option label="进销商客户"
                           value="进销商客户" />
                <el-option v-for="dict in customer_type"
                           :key="dict.value"
                           :label="dict.label"
                           :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
@@ -679,7 +679,14 @@
</template>
<script setup>
  import { onMounted, ref, reactive, getCurrentInstance, toRefs } from "vue";
  import {
    onMounted,
    ref,
    reactive,
    getCurrentInstance,
    toRefs,
    watch,
  } from "vue";
  import { Search, Paperclip, Upload } from "@element-plus/icons-vue";
  import {
    addCustomerFollow,
@@ -705,6 +712,7 @@
  import { getToken } from "@/utils/auth.js";
  const { proxy } = getCurrentInstance();
  const userStore = useUserStore();
  const { customer_type } = proxy.useDict("customer_type");
  const assignDialogVisible = ref(false);
  const assignFormRef = ref();
  const assignForm = reactive({
@@ -809,6 +817,7 @@
      label: "客户分类",
      prop: "customerType",
      width: 120,
      formatData: value => proxy.selectDictLabel(customer_type.value, value),
    },
    {
      label: "客户名称",
@@ -917,8 +926,13 @@
        {
          name: "回收",
          type: "text",
          disabled: row => isCustomerRecoveryLocked(row),
          showHide: row => row.usageStatus == 1,
          clickFun: row => {
            if (isCustomerRecoveryLocked(row)) {
              proxy.$modal.msgWarning("已领用并且被销售模块引用的公海客户不能回收");
              return;
            }
            recycle(row);
          },
        },
@@ -933,7 +947,12 @@
            {
               name: "编辑",
               type: "text",
               clickFun: row => {
          disabled: row => isCustomerEditLocked(row),
          clickFun: row => {
            if (isCustomerEditLocked(row)) {
              proxy.$modal.msgWarning("已领用并且被销售模块引用的公海客户不能编辑");
              return;
            }
                  openForm("edit", row);
               },
            },
@@ -973,7 +992,6 @@
  const data = reactive({
    searchForm: {
      customerName: "",
      customerType: "",
      type: 1
    },
    form: {
@@ -1092,15 +1110,38 @@
    page.size = obj.limit;
    getList();
  };
  // 全部 / 销售客户 / 代储客户三个页签,各自带客户分类查同一个列表接口
  const activeTab = ref("全部");
  // 「全部」不传分类(undefined 会被 axios 丢掉),销售/代储按字典值筛;
  // 字典的 value 未必就是中文标签,按 label 反查真实取值再传接口
  const activeCustomerType = () => {
    if (activeTab.value === "全部") {
      return undefined;
    }
    const list = customer_type.value || [];
    const hit = list.find(item => item.label === activeTab.value);
    return hit ? hit.value : activeTab.value;
  };
  // 页签切换:换客户分类重新查列表
  const handleTabChange = () => {
    page.current = 1;
    getList();
  };
  const getList = () => {
    tableLoading.value = true;
    const { total, ...queryPage } = page;
    listCustomer({ ...searchForm.value, ...queryPage }).then(res => {
    listCustomer({
      ...searchForm.value,
      ...queryPage,
      customerType: activeCustomerType(),
    }).then(res => {
      tableLoading.value = false;
      tableData.value = res.data.records;
      page.total = res.data.total;
    });
  };
  // 字典是异步拉的,到达后按真实字典值重查一次,避免首屏用中文标签筛不到数据
  watch(customer_type, () => getList());
  // 表格选择数据
  const handleSelectionChange = selection => {
    selectedRows.value = selection;
@@ -1121,6 +1162,10 @@
  }
  // 打开弹框
  const openForm = (type, row) => {
    if (type === "edit" && isCustomerEditLocked(row)) {
      proxy.$modal.msgWarning("已领用并且被销售模块引用的公海客户不能编辑");
      return;
    }
    operationType.value = type;
    form.value = {};
    form.value.maintainer = userStore.nickName;
@@ -1132,6 +1177,8 @@
    ];
    form.value.maintenanceTime = getCurrentDate();
    form.value.type = 1;
    // 客户分类默认跟随当前页签
    form.value.customerType = activeCustomerType();
    userListNoPage().then(res => {
      userList.value = res.data;
    });
@@ -1150,6 +1197,11 @@
    }
    dialogFormVisible.value = true;
  };
  const isCustomerSalesReferenced = row => Number(row?.salesReferenceFlag || 0) === 1;
  const isCustomerRecoveryLocked = row => Number(row?.usageStatus || 0) === 1 && isCustomerSalesReferenced(row);
  const isCustomerEditLocked = row => isCustomerSalesReferenced(row) && (
    Number(row?.type) === 0 || (Number(row?.type) === 1 && Number(row?.usageStatus || 0) === 1)
  );
  // 提交表单
  const submitForm = () => {
    proxy.$refs["formRef"].validate(valid => {
@@ -1292,7 +1344,12 @@
      type: "warning",
    })
      .then(() => {
        proxy.download("/basic/customer/export", {type: 1}, "客户档案.xlsx");
        // 导出跟随当前页签的客户分类
        proxy.download(
          "/basic/customer/export",
          { type: 1, customerType: activeCustomerType() },
          "客户档案.xlsx"
        );
      })
      .catch(() => {
        proxy.$modal.msg("已取消");
@@ -1718,6 +1775,19 @@
</script>
<style scoped lang="scss">
  /* 销售客户 / 代储客户页签:只要标签栏,内容由下方列表展示 */
  .customer-tabs {
    margin-bottom: 8px;
    :deep(.el-tabs__header) {
      margin-bottom: 0;
    }
    :deep(.el-tabs__content) {
      display: none;
    }
  }
  .detail-section {
    margin-bottom: 20px;
    padding: 15px;