1.供应商和客户管理字段修改

gaoluyang

2026-04-08 e749a35b7caae09c6555d556b7576e68713b4b35

 src/views/basicData/customerFile/index.vue

@@ -1,43 +1,500 @@
<template>
<div class="app-container">
  <div class="search_form">
    <div>
      <span class="search_title">客户名称：</span>
      <el-input
          v-model="input2"
          style="width: 240px"
  <div class="app-container">
    <div class="search_form">
      <div>
        <span class="search_title">名称：</span>
        <el-input
          v-model="searchForm.customerName"
          style="width: 240px; margin-right: 10px"
          placeholder="请输入"
          @change="handleQuery"
          clearable
          :prefix-icon="Search"
        />
        <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 @click="handleOut">导出</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"
        :column="tableColumn"
        :tableData="tableData"
        :page="page"
        :isSelection="true"
        @selection-change="handleSelectionChange"
        :tableLoading="tableLoading"
        @pagination="pagination"
      />
    </div>
    <div>
      <el-button type="primary">新增客户</el-button>
      <el-button>导出</el-button>
      <el-button type="danger" plain>删除</el-button>
    </div>

    <el-dialog
      v-model="dialogFormVisible"
      :title="operationType === 'add' ? '新增客户信息' : '编辑客户信息'"
      width="600px"
      @close="closeDia"
    >
      <el-form
        :model="form"
        label-width="120px"
        label-position="top"
        :rules="rules"
        ref="formRef"
      >
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="名称：" prop="customerName">
              <el-input v-model="form.customerName" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="纳税人识别号：" prop="taxpayerIdentificationNumber">
              <el-input
                v-model="form.taxpayerIdentificationNumber"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="维护人：" prop="maintainer">
              <el-input v-model="form.maintainer" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <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
              />
            </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 @click="closeDia">取消</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog
      :title="upload.title"
      v-model="upload.open"
      width="400px"
      append-to-body
    >
      <el-upload
        ref="uploadRef"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :before-upload="upload.beforeUpload"
        :on-progress="upload.onProgress"
        :on-success="upload.onSuccess"
        :on-error="upload.onError"
        :on-change="upload.onChange"
        :auto-upload="false"
        drag
      >
        <el-icon class="el-icon--upload"><UploadFilled /></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"
              :underline="false"
              style="font-size: 12px; vertical-align: baseline"
              @click="importTemplate"
            >
              下载模板
            </el-link>
          </div>
        </template>
      </el-upload>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitFileForm">确 定</el-button>
          <el-button @click="upload.open = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog title="客户详情" v-model="detailDialogVisible" width="600px" @close="closeDetailDialog">
      <div class="detail-section">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">名称：</span>
              <span class="info-value">{{ detailForm.customerName }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">纳税人识别号：</span>
              <span class="info-value">{{ detailForm.taxpayerIdentificationNumber }}</span>
            </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">{{ detailForm.maintainer }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">维护时间：</span>
              <span class="info-value">{{ detailForm.maintenanceTime }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDetailDialog">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
  <div class="table_list">
    <PIMTable :column="tableColumn"></PIMTable>
  </div>
</div>
</template>

<script setup>
import { ref } from 'vue'
import {Search} from "@element-plus/icons-vue";
  import { onMounted, ref, reactive, getCurrentInstance, toRefs } from "vue";
  import { Search, UploadFilled } from "@element-plus/icons-vue";
  import { addCustomer, delCustomer, getCustomer, listCustomer, updateCustomer } from "@/api/basicData/customerFile.js";
  import { ElMessageBox } from "element-plus";
  import useUserStore from "@/store/modules/user";
  import { getToken } from "@/utils/auth.js";

const input2 = ref('')
const tableColumn = ref([
  {
    label: '批准内容',
    prop: 'ratifyRemark'
  }, {
    label: '批准人',
    prop: 'ratifyName',
  },
])
  const { proxy } = getCurrentInstance();
  const userStore = useUserStore();

  const tableColumn = ref([
    {
      label: "名称",
      prop: "customerName",
    },
    {
      label: "纳税人识别号",
      prop: "taxpayerIdentificationNumber",
    },
    {
      label: "维护人",
      prop: "maintainer",
    },
    {
      label: "维护时间",
      prop: "maintenanceTime",
    },
    {
      dataType: "action",
      label: "操作",
      align: "center",
      fixed: "right",
      width: 220,
      operation: [
        {
          name: "编辑",
          type: "text",
          clickFun: row => {
            openForm("edit", row);
          },
        },
        {
          name: "详情",
          type: "text",
          clickFun: row => {
            openDetailDialog(row);
          },
        },
      ],
    },
  ]);

  const tableData = ref([]);
  const selectedRows = ref([]);
  const tableLoading = ref(false);
  const detailDialogVisible = ref(false);
  const dialogFormVisible = ref(false);
  const operationType = ref("");
  const formRef = ref();
  const uploadRef = ref();

  const defaultForm = () => ({
    customerName: "",
    taxpayerIdentificationNumber: "",
    maintainer: userStore.nickName,
    maintenanceTime: getCurrentDate(),
  });

  const detailForm = reactive({
    customerName: "",
    taxpayerIdentificationNumber: "",
    maintainer: "",
    maintenanceTime: "",
  });

  const data = reactive({
    searchForm: {
      customerName: "",
    },
    form: defaultForm(),
    rules: {
      customerName: [{ required: true, message: "请输入", trigger: "blur" }],
      taxpayerIdentificationNumber: [{ required: true, message: "请输入", trigger: "blur" }],
      maintainer: [{ required: true, message: "请输入", trigger: "blur" }],
      maintenanceTime: [{ required: true, message: "请选择", trigger: "change" }],
    },
  });

  const { searchForm, form, rules } = toRefs(data);

  const page = reactive({
    current: 1,
    size: 100,
    total: 0,
  });

  const upload = reactive({
    open: false,
    title: "",
    isUploading: false,
    headers: { Authorization: "Bearer " + getToken() },
    url: import.meta.env.VITE_APP_BASE_API + "/basic/customer/importData",
    updateSupport: 0,
    beforeUpload: file => {
      const isValid =
        file.type ===
          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
        file.name.endsWith(".xlsx") ||
        file.name.endsWith(".xls");
      if (!isValid) {
        proxy.$modal.msgError("只能上传 Excel 文件");
      }
      return isValid;
    },
    onChange: () => {},
    onSuccess: response => {
      upload.isUploading = false;
      if (response.code === 200) {
        proxy.$modal.msgSuccess("文件上传成功");
        upload.open = false;
        proxy.$refs["uploadRef"].clearFiles();
        getList();
      } else if (response.code === 500) {
        proxy.$modal.msgError(response.msg);
      } else {
        proxy.$modal.msgWarning(response.msg);
      }
    },
    onError: () => {
      upload.isUploading = false;
      proxy.$modal.msgError("文件上传失败");
    },
    onProgress: () => {},
  });

  const handleQuery = () => {
    page.current = 1;
    getList();
  };

  const pagination = obj => {
    page.current = obj.page;
    page.size = obj.limit;
    getList();
  };

  const getList = () => {
    tableLoading.value = true;
    listCustomer({ ...searchForm.value, ...page }).then(res => {
      tableLoading.value = false;
      tableData.value = res.records;
      page.total = res.total;
    });
  };

  const handleSelectionChange = selection => {
    selectedRows.value = selection;
  };

  const submitFileForm = () => {
    upload.isUploading = true;
    proxy.$refs["uploadRef"].submit();
  };

  const handleImport = () => {
    upload.title = "客户导入";
    upload.open = true;
  };

  const importTemplate = () => {
    proxy.download("/basic/customer/downloadTemplate", {}, "客户导入模板.xlsx");
  };

  const openForm = (type, row) => {
    operationType.value = type;
    form.value = defaultForm();
    if (type === "edit") {
      getCustomer(row.id).then(res => {
        form.value.id = res.data.id || "";
        form.value.customerName = res.data.customerName || "";
        form.value.taxpayerIdentificationNumber = res.data.taxpayerIdentificationNumber || "";
        form.value.maintainer = res.data.maintainer || userStore.nickName;
        form.value.maintenanceTime = res.data.maintenanceTime || getCurrentDate();
      });
    }
    dialogFormVisible.value = true;
  };

  const submitForm = () => {
    proxy.$refs["formRef"].validate(valid => {
      if (!valid) {
        return;
      }
      if (operationType.value === "edit") {
        updateCustomer(form.value).then(() => {
          proxy.$modal.msgSuccess("提交成功");
          closeDia();
          getList();
        });
      } else {
        addCustomer(form.value).then(() => {
          proxy.$modal.msgSuccess("提交成功");
          closeDia();
          getList();
        });
      }
    });
  };

  const closeDia = () => {
    proxy.resetForm("formRef");
    form.value = defaultForm();
    dialogFormVisible.value = false;
  };

  const handleOut = () => {
    ElMessageBox.confirm("选中的内容将被导出，是否确认导出？", "导出", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        proxy.download("/basic/customer/export", {}, "客户档案.xlsx");
      })
      .catch(() => {
        proxy.$modal.msg("已取消");
      });
  };

  const handleDelete = () => {
    if (selectedRows.value.length === 0) {
      proxy.$modal.msgWarning("请选择数据");
      return;
    }
    const unauthorizedData = selectedRows.value.filter(
      item => item.maintainer !== userStore.nickName,
    );
    if (unauthorizedData.length > 0) {
      proxy.$modal.msgWarning("不可删除他人维护的数据");
      return;
    }
    const ids = selectedRows.value.map(item => item.id);
    ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "删除提示", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        tableLoading.value = true;
        delCustomer(ids)
          .then(() => {
            proxy.$modal.msgSuccess("删除成功");
            getList();
          })
          .finally(() => {
            tableLoading.value = false;
          });
      })
      .catch(() => {
        proxy.$modal.msg("已取消");
      });
  };

  const openDetailDialog = row => {
    getCustomer(row.id).then(res => {
      Object.assign(detailForm, {
        customerName: res.data.customerName || "",
        taxpayerIdentificationNumber: res.data.taxpayerIdentificationNumber || "",
        maintainer: res.data.maintainer || "",
        maintenanceTime: res.data.maintenanceTime || "",
      });
      detailDialogVisible.value = true;
    });
  };

  const closeDetailDialog = () => {
    detailDialogVisible.value = false;
  };

  function getCurrentDate() {
    const today = new Date();
    const year = today.getFullYear();
    const month = String(today.getMonth() + 1).padStart(2, "0");
    const day = String(today.getDate()).padStart(2, "0");
    return `${year}-${month}-${day}`;
  }

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

<style scoped lang="scss">
  .detail-section {
    padding: 10px 0;
  }

</style>
  .info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 16px;
    line-height: 1.6;
  }

  .info-label {
    flex: 0 0 120px;
    color: #606266;
    font-weight: 600;
  }

  .info-value {
    flex: 1;
    color: #303133;
    word-break: break-all;
  }
</style>