新疆-融邦环保 1.大屏展示数据修改 2.销售台账展示字段修改

gaoluyang

4 天以前 84d7be872e96547becfbd1647ec77ed56f9f2dde

 src/views/basicData/customerFile/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 v-for="dict in customer_type"
                     :key="dict.value"
                     :label="dict.label"
                     :value="dict.value" />
        </el-select>
        <el-button type="primary"
                   @click="handleQuery"
                   style="margin-left: 10px">搜索</el-button>
@@ -40,6 +29,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"
@@ -48,7 +48,16 @@
                :isSelection="true"
                @selection-change="handleSelectionChange"
                :tableLoading="tableLoading"
                @pagination="pagination"></PIMTable>
                @pagination="pagination">
        <template #depositAmountSlot="{ row }">
          <el-tooltip v-if="row.exceedsTrustFund"
                      :content="`代储金额合计已超出该客户信托基金（信托基金：${row.trustFund}）`"
                      placement="top">
            <el-text type="danger">{{ formatAmount(row.depositTotalAmount) }}</el-text>
          </el-tooltip>
          <span v-else>{{ formatAmount(row.depositTotalAmount) }}</span>
        </template>
      </PIMTable>
    </div>
    <el-dialog v-model="dialogFormVisible"
               :title="operationType === 'add' ? '新增客户信息' : '编辑客户信息'"
@@ -133,6 +142,19 @@
                           :label="dict.label"
                           :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="信托基金(元)："
                          prop="trustFund">
              <el-input-number v-model="form.trustFund"
                               :min="0"
                               :precision="2"
                               :controls="false"
                               placeholder="请输入，可为空"
                               style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
@@ -461,6 +483,32 @@
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="info-item">
                <span class="info-label">信托基金(元)：</span>
                <span class="info-value">{{ formatAmount(detailForm.trustFund) }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <span class="info-label">代储金额(元)：</span>
                <span class="info-value"
                      :class="{ 'text-danger': detailForm.exceedsTrustFund }">
                  {{ formatAmount(detailForm.depositTotalAmount) }}
                </span>
              </div>
            </el-col>
          </el-row>
          <el-row v-if="detailForm.exceedsTrustFund"
                  :gutter="20">
            <el-col :span="24">
              <el-alert type="warning"
                        show-icon
                        :closable="false"
                        :title="`该客户代储金额合计 ${formatAmount(detailForm.depositTotalAmount)} 元，已超出信托基金 ${formatAmount(detailForm.trustFund)} 元`" />
            </el-col>
          </el-row>
        </div>
      </div>
      <!-- 洽谈进度记录 -->
@@ -613,7 +661,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,
@@ -675,6 +730,11 @@
    content: [{ required: true, message: "请输入内容", trigger: "blur" }],
  };

  const formatAmount = value => {
    return value === null || value === undefined || value === ""
      ? "-"
      : Number(value).toFixed(2);
  };
  // 详情相关
  const detailDialogVisible = ref(false);
  const detailForm = reactive({
@@ -690,6 +750,9 @@
    contactPhone: "",
    maintainer: "",
    maintenanceTime: "",
    trustFund: "",
    depositTotalAmount: "",
    exceedsTrustFund: false,
  });
  const negotiationRecords = ref([]);

@@ -759,6 +822,22 @@
      label: "银行账号",
      prop: "bankAccount",
      width: 220,
    },
    {
      label: "信托基金(元)",
      prop: "trustFund",
      width: 140,
      formatData: value =>
        value === null || value === undefined || value === ""
          ? "-"
          : Number(value).toFixed(2),
    },
    {
      label: "代储金额(元)",
      prop: "depositTotalAmount",
      dataType: "slot",
      slot: "depositAmountSlot",
      width: 150,
    },
    {
      label: "开户行号",
@@ -861,7 +940,6 @@
  const data = reactive({
    searchForm: {
      customerName: "",
      customerType: "",
      type: 0
    },
    form: {
@@ -877,6 +955,8 @@
      bankAccount: "",
      bankCode: "",
      customerType: "",
      // 金额字段给 null 而非 ""，避免 el-input-number 把空串折算成 0
      trustFund: null,
      type: 0
    },
    rules: {
@@ -980,14 +1060,37 @@
    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;
    listCustomer({ ...searchForm.value, ...page }).then(res => {
    listCustomer({
      ...searchForm.value,
      ...page,
      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;
@@ -1022,6 +1125,8 @@
      },
    ];
    form.value.type = 0;
    // 客户分类默认跟随当前页签
    form.value.customerType = activeCustomerType();
    form.value.maintenanceTime = getCurrentDate();
    userListNoPage().then(res => {
      userList.value = res.data;
@@ -1103,7 +1208,12 @@
      type: "warning",
    })
      .then(() => {
        proxy.download("/basic/customer/export", {type: 0}, "客户档案.xlsx");
        // 导出跟随当前页签的客户分类
        proxy.download(
          "/basic/customer/export",
          { type: 0, customerType: activeCustomerType() },
          "客户档案.xlsx"
        );
      })
      .catch(() => {
        proxy.$modal.msg("已取消");
@@ -1530,6 +1640,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;
@@ -1576,6 +1699,11 @@
    word-break: break-word;
  }

  .text-danger {
    color: var(--el-color-danger);
    font-weight: 600;
  }

  .no-records {
    text-align: center;
    padding: 30px;