fix: 修复PIMTable不支持懒加载问题。修复【来票登记】金额格式化显示NaN问题。 style: 重构来票登记页面。 feat: 完善文件上传...

曹睿

2 天以前 1c0f01cc462d37e146c34127d2883ca51e26d508

 src/views/basicData/customerFile/index.vue

@@ -1,77 +1,170 @@
<template>
<div class="app-container">
  <div class="search_form">
    <div>
      <span class="search_title">客户名称：</span>
      <el-input
  <div class="app-container">
    <div class="search_form">
      <div>
        <span class="search_title">客户名称：</span>
        <el-input
          v-model="searchForm.customerName"
          style="width: 240px"
          placeholder="请输入"
          @change="handleQuery"
          clearable
          :prefix-icon="Search"
      />
      <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 @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>
      <el-button type="primary" @click="openForm('add')">新增客户</el-button>
      <el-button @click="handleOut">导出</el-button>
      <el-button type="danger" plain @click="handleDelete">删除</el-button>
    <div class="table_list">
      <PIMTable
        rowKey="id"
        :column="tableColumn"
        :tableData="tableData"
        :page="page"
        :isSelection="true"
        @selection-change="handleSelectionChange"
        :tableLoading="tableLoading"
        @pagination="pagination"
        :total="total"
      ></PIMTable>
    </div>
  </div>
  <div class="table_list">
    <PIMTable :column="tableColumn" :tableData="tableData" :page="page" :handleSelectionChange="handleSelectionChange"
              :tableLoading="tableLoading" @pagination="pagination" :total="total"></PIMTable>
  </div>
  <el-dialog v-model="dialogFormVisible" :title="operationType === 'add' ? '新增客户信息' : '编辑客户信息'" width="70%" @close="closeDia">
    <el-form :model="form" label-width="140px" 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="companyAddress">
            <el-input v-model="form.companyAddress" placeholder="请输入" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公司电话：" prop="companyPhone">
            <el-input v-model="form.companyPhone" placeholder="请输入" clearable/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="联系人：" prop="contactPerson">
            <el-input v-model="form.contactPerson" placeholder="请输入" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话：" prop="contactPhone">
            <el-input v-model="form.contactPhone" placeholder="请输入" clearable/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="维护人：" prop="maintainer">
            <el-select v-model="form.maintainer" placeholder="请选择" clearable>
              <el-option v-for="item in userList" :key="item.nickName" :label="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
    <el-dialog
      v-model="dialogFormVisible"
      :title="operationType === 'add' ? '新增客户信息' : '编辑客户信息'"
      width="70%"
      @close="closeDia"
    >
      <el-form
        :model="form"
        label-width="140px"
        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="companyAddress">
              <el-input
                v-model="form.companyAddress"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公司电话：" prop="companyPhone">
              <el-input
                v-model="form.companyPhone"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="联系人：" prop="contactPerson">
              <el-input
                v-model="form.contactPerson"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话：" prop="contactPhone">
              <el-input
                v-model="form.contactPhone"
                placeholder="请输入"
                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"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="银行账号：" prop="bankAccount">
              <el-input
                v-model="form.bankAccount"
                placeholder="请输入"
                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"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="维护人：" prop="maintainer">
              <el-select
                v-model="form.maintainer"
                placeholder="请选择"
                clearable
                disabled
              >
                <el-option
                  v-for="item in userList"
                  :key="item.nickName"
                  :label="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%"
                v-model="form.maintenanceTime"
                value-format="YYYY-MM-DD"
@@ -79,225 +172,336 @@
                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>
</div>
                disabled
              />
            </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"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        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"
              :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>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import {Search} from "@element-plus/icons-vue";
import {addCustomer, delCustomer, getCustomer, listCustomer, updateCustomer} from "@/api/basicData/customerFile.js";
import {ElMessageBox } from "element-plus";
import {userListNoPage} from "@/api/system/user.js";
const { proxy } = getCurrentInstance()
import { ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import {
  addCustomer,
  delCustomer,
  getCustomer,
  listCustomer,
  updateCustomer,
} 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();

const tableColumn = ref([
  {
    label: '客户名称',
    prop: 'customerName'
    label: "客户名称",
    prop: "customerName",
    width: 220,
  },
  {
    label: '纳税人识别码',
    prop: 'taxpayerIdentificationNumber'
    label: "纳税人识别码",
    prop: "taxpayerIdentificationNumber",
    width: 220,
  },
  {
    label: '地址及联系方式',
    prop: 'addressPhone'
    label: "地址及联系方式",
    prop: "addressPhone",
    width: 220,
  },
  {
    label: '联系人',
    prop: 'contactPerson'
    label: "联系人",
    prop: "contactPerson",
  },
  {
    label: '联系电话',
    prop: 'contactPhone',
    label: "联系电话",
    prop: "contactPhone",
  },
  {
    label: '维护人',
    prop: 'maintainer',
    label: "银行基本户",
    prop: "basicBankAccount",
  },
  {
    label: '维护时间',
    prop: 'maintenanceTime',
    label: "银行账号",
    prop: "bankAccount",
  },
  {
    label: "开户行号",
    prop: "bankCode",
  },
  {
    label: "维护人",
    prop: "maintainer",
  },
  {
    label: "维护时间",
    prop: "maintenanceTime",
  },
  {
    dataType: "action",
    label: "操作",
    align: "center",
    operation: [
      {
        name: "编辑",
        type: "text",
        clickFun: (row) => {
          openForm('edit', row);
          openForm("edit", row);
        },
      },
    ],
  },
])
const tableData = ref([])
const selectedRows = ref([])
const userList = ref([])
const tableLoading = ref(false)
]);
const tableData = ref([]);
const selectedRows = ref([]);
const userList = ref([]);
const tableLoading = ref(false);
const page = reactive({
  current: 1,
  size: 10,
})
const total = ref(0)
});
const total = ref(0);

// 用户信息表单弹框数据
const operationType = ref('')
const dialogFormVisible = ref(false)
const operationType = ref("");
const dialogFormVisible = ref(false);
const data = reactive({
  searchForm: {
    customerName: '',
    customerName: "",
  },
  form: {
    customerName: '',
    taxpayerIdentificationNumber: '',
    companyAddress: '',
    companyPhone: '',
    contactPerson: '',
    contactPhone: '',
    maintainer: '',
    maintenanceTime: '',
    customerName: "",
    taxpayerIdentificationNumber: "",
    companyAddress: "",
    companyPhone: "",
    contactPerson: "",
    contactPhone: "",
    maintainer: "",
    maintenanceTime: "",
    basicBankAccount: "",
    bankAccount: "",
    bankCode: "",
  },
  rules: {
    customerName: [{ required: true, message: "请输入", trigger: "blur" }],
    taxpayerIdentificationNumber: [{ required: true, message: "请输入", trigger: "blur" }],
    taxpayerIdentificationNumber: [
      { required: true, message: "请输入", trigger: "blur" },
    ],
    companyAddress: [{ required: true, message: "请输入", trigger: "blur" }],
    companyPhone: [{ required: true, message: "请输入", trigger: "blur" }],
    contactPerson: [{ required: true, message: "请输入", trigger: "blur" }],
    contactPhone: [{ required: true, message: "请输入", trigger: "blur" }],
    maintainer: [{ required: false, message: "请选择", trigger: "change" }],
    maintenanceTime: [{ required: false, message: "请选择", trigger: "change" }],
  }
})
const { searchForm, form, rules } = toRefs(data)
    maintenanceTime: [
      { required: false, message: "请选择", trigger: "change" },
    ],
    basicBankAccount: [{ required: true, message: "请输入", trigger: "blur" }],
    bankAccount: [{ required: true, message: "请输入", trigger: "blur" }],
    bankCode: [{ required: true, message: "请输入", trigger: "blur" }],
  },
});
const upload = reactive({
  // 是否显示弹出层（客户导入）
  open: false,
  // 弹出层标题（客户导入）
  title: "",
  // 是否禁用上传
  isUploading: false,
  // 设置上传的请求头部
  headers: { Authorization: "Bearer " + getToken() },
  // 上传的地址
  url: import.meta.env.VITE_APP_BASE_API + "/basic/customer/importData",
});
const { searchForm, form, rules } = toRefs(data);

// 查询列表
/** 搜索按钮操作 */
const handleQuery = () => {
  page.current = 1
  getList()
}
const pagination = ({ current, limit }) => {
  page.current = current;
  page.size = limit;
  getList()
}
  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.rows
    total.value = res.total
  })
}
  tableLoading.value = true;
  listCustomer({ ...searchForm.value, ...page }).then((res) => {
    tableLoading.value = false;
    tableData.value = res.records;
    total.value = res.total;
  });
};
// 表格选择数据
const handleSelectionChange = (selection) => {
  selectedRows.value = selection
  selectedRows.value = selection;
};
/** 提交上传文件 */
function submitFileForm() {
  proxy.$refs["uploadRef"].submit();
}
/** 导入按钮操作 */
function handleImport() {
  upload.title = "客户导入";
  upload.open = true;
}
// 打开弹框
const openForm = (type, row) => {
  operationType.value = type
  form.value = {}
  userListNoPage().then(res => {
    userList.value = res.data
  })
  if (type === 'edit') {
    getCustomer(row.id).then(res => {
      form.value = {...res.data}
    })
  operationType.value = type;
  form.value = {};
  form.value.maintainer = userStore.nickName;
  form.value.maintenanceTime = getCurrentDate();
  userListNoPage().then((res) => {
    userList.value = res.data;
  });
  if (type === "edit") {
    getCustomer(row.id).then((res) => {
      form.value = { ...res.data };
    });
  }
  dialogFormVisible.value = true
}
  dialogFormVisible.value = true;
};
// 提交表单
const submitForm = () => {
  proxy.$refs["formRef"].validate(valid => {
  proxy.$refs["formRef"].validate((valid) => {
    if (valid) {
      if (operationType.value === "edit") {
        submitEdit()
        submitEdit();
      } else {
        submitAdd()
        submitAdd();
      }
    }
  })
}
  });
};
// 提交新增
const submitAdd = () => {
  addCustomer(form.value).then(res => {
    proxy.$modal.msgSuccess("提交成功")
    closeDia()
    getList()
  })
}
  addCustomer(form.value).then((res) => {
    proxy.$modal.msgSuccess("提交成功");
    closeDia();
    getList();
  });
};
// 提交修改
const submitEdit = () => {
  updateCustomer(form.value).then(res => {
    proxy.$modal.msgSuccess("提交成功")
    closeDia()
    getList()
  })
}
  updateCustomer(form.value).then((res) => {
    proxy.$modal.msgSuccess("提交成功");
    closeDia();
    getList();
  });
};
// 关闭弹框
const closeDia = () => {
  proxy.resetForm("formRef")
  dialogFormVisible.value = false
}
  proxy.resetForm("formRef");
  dialogFormVisible.value = false;
};
// 导出
const handleOut = () => {
  ElMessageBox.confirm(
      '选中的内容将被导出，是否确认导出？',
      '导出', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    proxy.download("/basic/customer/export", {}, '客户档案.xlsx')
  }).catch(() => {
    proxy.$modal.msg("已取消")
  ElMessageBox.confirm("选中的内容将被导出，是否确认导出？", "导出", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
}
    .then(() => {
      proxy.download("/basic/customer/export", {}, "客户档案.xlsx");
    })
    .catch(() => {
      proxy.$modal.msg("已取消");
    });
};
// 删除
const handleDelete = () => {
  let ids = []
  let ids = [];
  if (selectedRows.value.length > 0) {
    ids = selectedRows.value.map(item => item.id);
    ids = selectedRows.value.map((item) => item.id);
  } else {
    proxy.$modal.msgWarning('请选择数据')
    return
    proxy.$modal.msgWarning("请选择数据");
    return;
  }
  ElMessageBox.confirm(
      '选中的内容将被删除，是否确认删除？',
      '导出', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    delCustomer(ids).then(res => {
      proxy.$modal.msgSuccess("删除成功")
    })
    getList()
  }).catch(() => {
    proxy.$modal.msg("已取消")
  ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "删除提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      tableLoading.value = true;
      delCustomer(ids)
        .then((res) => {
          proxy.$modal.msgSuccess("删除成功");
          getList();
        })
        .finally(() => {
          tableLoading.value = false;
        });
    })
    .catch(() => {
      proxy.$modal.msg("已取消");
    });
};

// 获取当前日期并格式化为 YYYY-MM-DD
function getCurrentDate() {
  const today = new Date();
  const year = today.getFullYear();
  const month = String(today.getMonth() + 1).padStart(2, "0"); // 月份从0开始
  const day = String(today.getDate()).padStart(2, "0");
  return `${year}-${month}-${day}`;
}
getList()

getList();
</script>

<style scoped lang="scss">

</style>
<style scoped lang="scss"></style>