yunzerwebsite/yunzerwebsiteallinone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加单位功能

Browse Source
This commit is contained in:
hero920103
2026-09-14 00:09:58 +08:00
parent a8c09c1db5
commit 6f106e43af
22 changed files with 1473 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/src/views/apps/crm/contract/components/detail_payback.vue
+99 -1
View File
@@ -90,8 +90,17 @@
<el-table-column label="备注" min-width="120" show-overflow-tooltip>
<template #default="{ row }">{{ row.remark || "-" }}</template>
</el-table-column>
<el-table-column label="操作" width="80" align="center" fixed="right">
<el-table-column label="操作" width="150" align="center" fixed="right">
<template #default="{ row }">
<el-button
v-if="!row.receipt_url"
link
type="primary"
size="small"
@click="openReceipt(row)"
>
补回执
</el-button>
<el-tooltip
:disabled="Number((planOf(row.payback_id) || {}).status) !== 2"
content="所属回款计划已完成（回款已收齐），不允许删除回款记录"
@@ -192,6 +201,35 @@
<el-button type="primary" :loading="receiveSaving" @click="submitReceive">保存</el-button>
</template>
</el-dialog>
<!-- 补传回款回执：针对已登记但漏传回执的回款记录 -->
<el-dialog v-model="receiptVisible" title="补传回款回执" width="460px">
<el-form :model="receiptForm" label-width="90px">
<el-form-item label="流水回执">
<div class="receipt-block">
<el-upload
:show-file-list="false"
:http-request="handleReceiptFileUpload"
:disabled="receiptUploading"
accept=".jpg,.jpeg,.png,.pdf,.doc,.docx,.xls,.xlsx"
>
<el-button :icon="Upload" :loading="receiptUploading" size="small">上传流水回执</el-button>
</el-upload>
<div v-if="receiptForm.receipt_url" class="receipt-file">
<el-link type="primary" :href="receiptForm.receipt_url" target="_blank" :underline="false">
<el-icon><Document /></el-icon>
<span class="receipt-name">{{ receiptForm.receipt_name || "流水回执" }}</span>
</el-link>
<el-button link type="danger" size="small" :icon="Delete" @click="clearReceiptForm">移除</el-button>
</div>
</div>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="receiptVisible = false">取消</el-button>
<el-button type="primary" :loading="receiptUploading" @click="submitReceipt">保存回执</el-button>
</template>
</el-dialog>
</div>
</template>
@@ -203,6 +241,7 @@ import {
getPaybackList,
getPaybackRecordList,
createPaybackRecord,
updatePaybackRecord,
deletePaybackRecord,
} from "@/api/crmPayback";
import { uploadFile } from "@/api/file";
@@ -404,6 +443,65 @@ function clearReceipt() {
receiveForm.receipt_name = "";
}
/* ---------------------------- 补传回款回执（事后补凭证） ---------------------------- */
const receiptVisible = ref(false);
const receiptUploading = ref(false);
const receiptForm = reactive({ id: null, receipt_url: "", receipt_name: "" });
/** 打开补回执：仅针对未上传回执的回款记录 */
function openReceipt(row) {
receiptForm.id = row.id;
receiptForm.receipt_url = "";
receiptForm.receipt_name = "";
receiptVisible.value = true;
}
async function handleReceiptFileUpload(options) {
const file = options.file;
receiptUploading.value = true;
try {
const fd = new FormData();
fd.append("file", file);
const res = await uploadFile(fd);
const data = res?.data || {};
receiptForm.receipt_url = data.url || "";
receiptForm.receipt_name = data.name || file.name;
ElMessage.success("上传成功");
} catch (e) {
ElMessage.error(e.message || "上传失败");
} finally {
receiptUploading.value = false;
}
}
function clearReceiptForm() {
receiptForm.receipt_url = "";
receiptForm.receipt_name = "";
}
async function submitReceipt() {
if (!receiptForm.id) return;
if (!receiptForm.receipt_url) {
ElMessage.warning("请先上传回执文件");
return;
}
receiptUploading.value = true;
try {
await updatePaybackRecord(receiptForm.id, {
receipt_url: receiptForm.receipt_url,
receipt_name: receiptForm.receipt_name,
});
ElMessage.success("回执已补传");
receiptVisible.value = false;
await fetchRecords();
emit("saved");
} catch (e) {
ElMessage.error(e.message || "补传失败");
} finally {
receiptUploading.value = false;
}
}
async function submitReceive() {
if (!receiveForm.payback_id) {
ElMessage.warning("请选择回款计划");
backend/src/views/apps/crm/payback/index.vue
+100 -3
View File
@@ -3,7 +3,7 @@
<div class="page-header">
<div>
<h2>回款管理</h2>
<p>针对于合同的回款计划创建与回款明细跟踪（点击「详情」登记一笔笔回款）</p>
<p>针对于合同的回款计划创建与回款明细跟踪</p>
</div>
<div class="header-actions">
<el-button :icon="Refresh" @click="fetchList">刷新</el-button>
@@ -163,6 +163,15 @@
>
回执
</el-link>
<el-button
v-else
link
type="primary"
size="small"
@click="openReceipt(row)"
>
补回执
</el-button>
<el-tooltip
:disabled="Number(row.__planStatus) !== 2"
content="所属回款计划已完成（回款已收齐），不允许删除回款记录"
@@ -210,14 +219,44 @@
@delete="handleDetailDelete"
@refresh="fetchList"
/>
<!-- 补传回款回执：针对列表里已登记但漏传回执的回款记录 -->
<el-dialog v-model="receiptVisible" title="补传回款回执" width="460px">
<el-form :model="receiptForm" label-width="90px">
<el-form-item label="流水回执">
<div class="receipt-block">
<el-upload
:show-file-list="false"
:http-request="handleReceiptFileUpload"
:disabled="receiptUploading"
accept=".jpg,.jpeg,.png,.pdf,.doc,.docx,.xls,.xlsx"
>
<el-button :icon="Upload" :loading="receiptUploading" size="small">上传流水回执</el-button>
</el-upload>
<div v-if="receiptForm.receipt_url" class="receipt-file">
<el-link type="primary" :href="receiptForm.receipt_url" target="_blank" :underline="false">
<el-icon><Document /></el-icon>
<span class="receipt-name">{{ receiptForm.receipt_name || "流水回执" }}</span>
</el-link>
<el-button link type="danger" size="small" :icon="Delete" @click="clearReceiptForm">移除</el-button>
</div>
</div>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="receiptVisible = false">取消</el-button>
<el-button type="primary" :loading="receiptUploading" @click="submitReceipt">保存回执</el-button>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Plus, Search, Refresh } from "@element-plus/icons-vue";
import { getPaybackList, deletePayback, deletePaybackRecord } from "@/api/crmPayback";
import { Plus, Search, Refresh, Upload, Delete, Document } from "@element-plus/icons-vue";
import { getPaybackList, deletePayback, deletePaybackRecord, updatePaybackRecord } from "@/api/crmPayback";
import { uploadFile } from "@/api/file";
import PaybackCreate from "./components/create.vue";
import PaybackDetail from "./components/detail.vue";
import {
@@ -362,6 +401,64 @@ async function handleDeleteRecord(row) {
}
}
/* ---------------------------- 补传回款回执（事后补凭证） ---------------------------- */
const receiptVisible = ref(false);
const receiptUploading = ref(false);
const receiptForm = reactive({ id: null, receipt_url: "", receipt_name: "" });
/** 打开补回执：仅针对未上传回执的回款记录 */
function openReceipt(row) {
receiptForm.id = row.id;
receiptForm.receipt_url = "";
receiptForm.receipt_name = "";
receiptVisible.value = true;
}
async function handleReceiptFileUpload(options) {
const file = options.file;
receiptUploading.value = true;
try {
const fd = new FormData();
fd.append("file", file);
const res = await uploadFile(fd);
const data = res?.data || {};
receiptForm.receipt_url = data.url || "";
receiptForm.receipt_name = data.name || file.name;
ElMessage.success("上传成功");
} catch (e) {
ElMessage.error(e.message || "上传失败");
} finally {
receiptUploading.value = false;
}
}
function clearReceiptForm() {
receiptForm.receipt_url = "";
receiptForm.receipt_name = "";
}
async function submitReceipt() {
if (!receiptForm.id) return;
if (!receiptForm.receipt_url) {
ElMessage.warning("请先上传回执文件");
return;
}
receiptUploading.value = true;
try {
await updatePaybackRecord(receiptForm.id, {
receipt_url: receiptForm.receipt_url,
receipt_name: receiptForm.receipt_name,
});
ElMessage.success("回执已补传");
receiptVisible.value = false;
fetchList();
} catch (e) {
ElMessage.error(e.message || "补传失败");
} finally {
receiptUploading.value = false;
}
}
onMounted(fetchList);
</script>
backend/src/views/apps/crm/product/components/edit.vue
+34 -3
View File
@@ -50,8 +50,15 @@
</el-col>
<el-col :span="12">
<el-form-item label="单位" prop="unit">
<el-select v-model="form.unit" filterable allow-create clearable placeholder="请选择" style="width: 100%">
<el-option v-for="i in PRODUCT_UNIT_OPTIONS" :key="i.value" :label="i.label" :value="i.value" />
<el-select
v-model="form.unit"
filterable
allow-create
clearable
placeholder="请选择或输入单位"
style="width: 100%"
>
<el-option v-for="i in unitOptions" :key="i" :label="i" :value="i" />
</el-select>
</el-form-item>
</el-col>
@@ -65,7 +72,7 @@
<el-button type="primary" link @click="devVisible = true">
📁 编辑模块树（{{ (form.dev_tree || []).length }} 项 · ￥{{ formatMoney(treeSellTotal(form.dev_tree, form.dev_unit_price)) }}）
</el-button>
<div class="dev-tip">叶子模块只填「人天」，人天单价统一；父级自动汇总金额</div>
<!-- <div class="dev-tip">叶子模块只填「人天」，人天单价统一；父级自动汇总金额</div> -->
</el-form-item>
</el-col>
<el-col :span="8" v-if="form.line_type === 'product'">
@@ -122,6 +129,7 @@ import { ref, reactive, watch } from "vue";
import { ElMessage } from "element-plus";
import { createProduct, updateProduct } from "@/api/crmProduct";
import { getProductCategoryList } from "@/api/crmProductCategory";
import { getUnitList } from "@/api/crmUnit";
import { PRODUCT_STATUS_OPTIONS, PRODUCT_UNIT_OPTIONS, formatMoney } from "../../dict";
import { treeSellTotal } from "../../contract/components/utils";
import DevModuleTree from "../../contract/components/DevModuleTree.vue";
@@ -137,6 +145,7 @@ const submitting = ref(false);
const isEdit = ref(false);
const internalId = ref(null);
const categoryOptions = ref([]);
const unitOptions = ref([]);
const devVisible = ref(false);
const defaultForm = () => ({
@@ -205,6 +214,7 @@ watch(
Object.assign(form, defaultForm());
}
fetchCategories();
fetchUnits();
}
}
);
@@ -219,6 +229,27 @@ async function fetchCategories() {
}
}
/** 单位下拉合并：单位设置中的启用项 + 内置默认单位 + 当前产品的历史单位值 */
function mergeUnitOptions(names) {
const all = (names || []).filter(Boolean);
PRODUCT_UNIT_OPTIONS.forEach((i) => {
if (!all.includes(i.value)) all.push(i.value);
});
if (form.unit && !all.includes(form.unit)) all.push(form.unit);
return all;
}
/** 加载计量单位（取自「基本设置 - 单位设置」，取启用中的单位） */
async function fetchUnits() {
try {
const res = await getUnitList({ page: 1, pageSize: 200, status: 1 });
const names = (res?.data?.list || []).map((i) => i.name);
unitOptions.value = mergeUnitOptions(names);
} catch (e) {
unitOptions.value = mergeUnitOptions([]);
}
}
function handleClose() {
emit("update:visible", false);
}
backend/src/views/apps/crm/setting/index.vue
+104
View File
@@ -0,0 +1,104 @@
<template>
<div class="crm-page">
<div class="page-header">
<div>
<h2>基本设置</h2>
<p>维护 CRM 各模块的基础数据，设置后立即在对应业务表单中生效</p>
</div>
</div>
<div class="setting-grid">
<div class="setting-card" @click="go('/apps/crm/setting/unit')">
<div class="card-icon">
<el-icon><Box /></el-icon>
</div>
<div class="card-body">
<div class="card-title">单位设置</div>
<div class="card-desc">维护产品、报价等业务使用的计量单位（套 / 台 / 个 …）</div>
</div>
<el-icon class="card-arrow"><ArrowRight /></el-icon>
</div>
</div>
</div>
</template>
<script setup>
import { useRouter } from "vue-router";
import { Box, ArrowRight } from "@element-plus/icons-vue";
const router = useRouter();
function go(path) {
router.push(path);
}
</script>
<style lang="less" scoped src="../styles/crm-page.less"></style>
<style lang="less" scoped>
.setting-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
}
.setting-card {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
background: var(--el-bg-color);
border: 1px solid var(--el-border-color-lighter);
border-radius: 6px;
cursor: pointer;
transition: border-color 0.2s, box-shadow 0.2s;
&:hover {
border-color: var(--el-color-primary-light-5);
box-shadow: 0 2px 12px 0 var(--el-color-primary-light-9);
.card-arrow {
color: var(--el-color-primary);
transform: translateX(2px);
}
}
.card-icon {
width: 40px;
height: 40px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
font-size: 20px;
color: var(--el-color-primary);
background: var(--el-color-primary-light-9);
}
.card-body {
flex: 1;
min-width: 0;
.card-title {
font-size: 15px;
font-weight: 600;
color: var(--el-text-color-primary);
}
.card-desc {
margin-top: 4px;
font-size: 12px;
color: var(--el-text-color-secondary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.card-arrow {
color: var(--el-text-color-placeholder);
transition: color 0.2s, transform 0.2s;
}
}
</style>
backend/src/views/apps/crm/setting/unit/components/edit.vue
+126
View File
@@ -0,0 +1,126 @@
<template>
<el-dialog
:model-value="visible"
:title="isEdit ? '编辑单位' : '新增单位'"
width="520px"
:close-on-click-modal="false"
@update:model-value="handleClose"
@opened="handleOpened"
>
<el-form ref="formRef" :model="form" :rules="rules" label-width="90px" label-position="right">
<el-form-item label="单位名称" prop="name">
<el-input v-model="form.name" placeholder="如：套 / 台 / 个 / 人天" maxlength="20" />
</el-form-item>
<el-form-item label="单位编码" prop="code">
<el-input v-model="form.code" placeholder="选填，如：SET / PCS" maxlength="50" />
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number v-model="form.sort" :min="0" :max="9999" :controls="false" style="width: 140px" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="form.status" placeholder="请选择" style="width: 100%">
<el-option v-for="i in PRODUCT_STATUS_OPTIONS" :key="i.value" :label="i.label" :value="Number(i.value)" />
</el-select>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注（选填）" maxlength="255" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="handleClose">取消</el-button>
<el-button type="primary" :loading="submitting" @click="handleSubmit">保存</el-button>
</template>
</el-dialog>
</template>
<script setup>
import { ref, reactive, watch } from "vue";
import { ElMessage } from "element-plus";
import { createUnit, updateUnit } from "@/api/crmUnit";
import { PRODUCT_STATUS_OPTIONS } from "../../../dict";
const props = defineProps({
visible: { type: Boolean, default: false },
editData: { type: Object, default: null },
});
const emit = defineEmits(["update:visible", "success"]);
const formRef = ref();
const submitting = ref(false);
const isEdit = ref(false);
const currentId = ref(null);
const defaultForm = () => ({
name: "",
code: "",
sort: 0,
status: 1,
remark: "",
});
const form = reactive(defaultForm());
const rules = {
name: [{ required: true, message: "请输入单位名称", trigger: "blur" }],
};
watch(
() => props.visible,
(val) => {
if (!val) return;
if (props.editData) {
isEdit.value = true;
currentId.value = props.editData.id;
Object.assign(form, defaultForm(), props.editData);
form.status = Number(props.editData.status);
if (isNaN(form.status)) form.status = 1;
form.sort = Number(props.editData.sort) || 0;
} else {
isEdit.value = false;
currentId.value = null;
Object.assign(form, defaultForm());
}
}
);
function handleClose() {
emit("update:visible", false);
}
function handleOpened() {
formRef.value?.clearValidate();
}
async function handleSubmit() {
if (!formRef.value) return;
try {
await formRef.value.validate();
} catch (e) {
return;
}
submitting.value = true;
try {
const payload = {
name: String(form.name || "").trim(),
code: String(form.code || "").trim(),
sort: Number(form.sort) || 0,
status: Number(form.status),
remark: form.remark || "",
};
if (isEdit.value) {
await updateUnit(currentId.value, payload);
ElMessage.success("更新成功");
} else {
await createUnit(payload);
ElMessage.success("创建成功");
}
emit("success");
handleClose();
} catch (e) {
ElMessage.error(e.message || "操作失败");
} finally {
submitting.value = false;
}
}
</script>
backend/src/views/apps/crm/setting/unit/index.vue
+175
View File
@@ -0,0 +1,175 @@
<template>
<div class="crm-page">
<div class="page-header">
<div>
<h2>单位设置</h2>
<p>维护产品、报价等业务使用的计量单位，产品表单的「单位」下拉取自本表</p>
</div>
<div class="header-actions">
<el-button :icon="Refresh" @click="fetchList">刷新</el-button>
<el-button :icon="RefreshLeft" @click="handleInitDefault">恢复默认单位</el-button>
<el-button type="primary" :icon="Plus" @click="openCreate">新增单位</el-button>
</div>
</div>
<div class="filter-bar">
<el-form :inline="true" :model="filters" @submit.prevent>
<el-form-item>
<el-input
v-model="filters.keyword"
clearable
placeholder="搜索单位名称 / 编码"
:prefix-icon="Search"
style="width: 240px"
@keyup.enter="handleSearch"
/>
</el-form-item>
<el-form-item label="状态">
<el-select v-model="filters.status" clearable placeholder="全部" style="width: 120px">
<el-option v-for="i in PRODUCT_STATUS_OPTIONS" :key="i.value" :label="i.label" :value="i.value" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
<el-button :icon="Refresh" @click="resetFilters">重置</el-button>
</el-form-item>
</el-form>
</div>
<div class="table-container" v-loading="loading">
<el-table :data="tableData" stripe border row-key="id">
<el-table-column prop="name" label="单位名称" min-width="140" show-overflow-tooltip />
<el-table-column prop="code" label="单位编码" width="140" show-overflow-tooltip>
<template #default="{ row }">{{ row.code || "-" }}</template>
</el-table-column>
<el-table-column prop="sort" label="排序" width="90" align="center" />
<el-table-column label="状态" width="90" align="center">
<template #default="{ row }">
<el-tag :type="productStatusTag(row.status)" size="small">{{ productStatusText(row.status) }}</el-tag>
</template>
</el-table-column>
<el-table-column label="引用数" width="100" align="center">
<template #default="{ row }">
<el-tag v-if="row.used_count" type="info" size="small" effect="plain">{{ row.used_count }} 个产品</el-tag>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column prop="remark" label="备注" min-width="180" show-overflow-tooltip>
<template #default="{ row }">{{ row.remark || "-" }}</template>
</el-table-column>
<el-table-column label="操作" width="160" align="center" fixed="right">
<template #default="{ row }">
<el-button link type="primary" size="small" @click="openEdit(row)">编辑</el-button>
<el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
</template>
</el-table-column>
<template #empty><el-empty description="暂无单位" :image-size="80" /></template>
</el-table>
<div class="pagination">
<el-pagination
v-model:current-page="pagination.page"
v-model:page-size="pagination.pageSize"
:total="pagination.total"
:page-sizes="[10, 20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSearch"
@current-change="fetchList"
/>
</div>
</div>
<UnitEdit v-model:visible="dialogVisible" :edit-data="currentRow" @success="fetchList" />
</div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Plus, Search, Refresh, RefreshLeft } from "@element-plus/icons-vue";
import { getUnitList, deleteUnit, initDefaultUnits } from "@/api/crmUnit";
import UnitEdit from "./components/edit.vue";
import { PRODUCT_STATUS_OPTIONS, productStatusText, productStatusTag } from "../../dict";
const loading = ref(false);
const tableData = ref([]);
const dialogVisible = ref(false);
const currentRow = ref(null);
const filters = reactive({ keyword: "", status: "" });
const pagination = reactive({ page: 1, pageSize: 20, total: 0 });
onMounted(() => {
fetchList();
});
async function fetchList() {
loading.value = true;
try {
const res = await getUnitList({
page: pagination.page,
pageSize: pagination.pageSize,
...filters,
});
tableData.value = res?.data?.list || [];
pagination.total = res?.data?.total || 0;
} catch (e) {
tableData.value = [];
pagination.total = 0;
ElMessage.error(e.message || "查询失败");
} finally {
loading.value = false;
}
}
function handleSearch() {
pagination.page = 1;
fetchList();
}
function resetFilters() {
filters.keyword = "";
filters.status = "";
handleSearch();
}
function openCreate() {
currentRow.value = null;
dialogVisible.value = true;
}
function openEdit(row) {
currentRow.value = { ...row };
dialogVisible.value = true;
}
/** 补齐缺失的系统默认单位（已存在的不会被覆盖） */
async function handleInitDefault() {
try {
await ElMessageBox.confirm("将补充缺失的默认单位（套 / 台 / 个 …），已存在的单位不会被修改。", "恢复默认单位", {
type: "warning",
});
const res = await initDefaultUnits();
const added = res?.data?.added || 0;
ElMessage.success(added ? `已补充 ${added} 个单位` : "默认单位已齐全");
fetchList();
} catch (e) {
if (e !== "cancel") ElMessage.error(e.message || "操作失败");
}
}
async function handleDelete(row) {
const used = Number(row.used_count) || 0;
const tip = used ? `该单位已被 ${used} 个产品引用，删除后产品中的历史单位不受影响。` : "删除后不可恢复。";
try {
await ElMessageBox.confirm(`确定删除单位「${row.name}」吗？${tip}`, "删除确认", { type: "warning" });
await deleteUnit(row.id);
ElMessage.success("删除成功");
fetchList();
} catch (e) {
if (e !== "cancel") ElMessage.error(e.message || "删除失败");
}
}
</script>
<style lang="less" scoped src="../../styles/crm-page.less"></style>
backend/src/views/apps/oa/contact/components/contactDetailDialog.vue
+8 -8
View File
@@ -143,15 +143,15 @@ const handleClose = () => {
display: flex;
gap: 16px;
padding: 16px;
background: #f5f7fa;
background: var(--el-fill-color-light);
border-radius: 8px;
margin-bottom: 20px;
}
.detail-avatar {
flex-shrink: 0;
background: #409eff;
color: #fff;
background: var(--el-color-primary);
color: var(--el-color-white);
font-size: 22px;
}
@@ -171,12 +171,12 @@ const handleClose = () => {
.detail-name {
font-size: 18px;
font-weight: 600;
color: #303133;
color: var(--el-text-color-primary);
}
.detail-sub {
font-size: 13px;
color: #606266;
color: var(--el-text-color-regular);
}
.detail-section {
@@ -187,11 +187,11 @@ const handleClose = () => {
margin: 0 0 12px;
font-size: 14px;
font-weight: 600;
color: #303133;
color: var(--el-text-color-primary);
}
.contact-link {
color: #409eff;
color: var(--el-color-primary);
text-decoration: none;
}
@@ -200,7 +200,7 @@ const handleClose = () => {
}
.empty-text {
color: #c0c4cc;
color: var(--el-text-color-placeholder);
}
.dialog-footer {
backend/src/views/apps/oa/document/documentgraph/index.vue
+66 -21
View File
@@ -16,7 +16,13 @@
<div class="graph-layout">
<!-- 左侧：图谱 -->
<div class="graph-card">
<div
ref="graphCardRef"
class="graph-card"
@contextmenu="onGraphContextMenu"
@mousedown="onGraphMouseDown"
@wheel="onGraphWheel"
>
<div class="filter-bar">
<el-input
v-model="filters.keyword"
@@ -66,12 +72,7 @@
</div>
<div v-loading="loading" class="chart-wrap">
<div
ref="chartRef"
class="chart"
@contextmenu.prevent
@mousedown="onChartMouseDown"
/>
<div ref="chartRef" class="chart" />
<el-empty
v-if="!loading && !displayNodes.length"
description="暂无可展示的分类或文档，请先到文档库新建分类并上传文档"
@@ -196,6 +197,7 @@ import { getDocCategories, getDocGraph } from "@/api/oaDocument";
import { DOC_RELATION_OPTIONS, docTypeColor, docTypeLabel } from "../utils";
const chartRef = ref(null);
const graphCardRef = ref(null);
let chart = null;
let resizeObserver = null;
let themeObserver = null;
@@ -216,7 +218,8 @@ const detailId = ref(0);
// 分层展开：默认展示顶级往下 3 级，点击分支节点后在该分支继续延展 3 级
const INITIAL_DEPTH = 3;
const expandedIds = ref(new Set());
// 按住右键拖拽平移画布（ECharts 原生 roam 只响应左键，右键需自行接管）
// 鼠标位于「图谱卡片」内时：滚轮整体缩放 + 按住右键拖拽平移
// （ECharts 原生 roam 只作用于画布内，且右键不响应，这里在卡片层统一接管）
const panning = ref(false);
const filters = reactive({
@@ -461,8 +464,9 @@ function buildOption() {
{
type: "graph",
layout: filters.layout,
// roam: 滚轮缩放 + 左键在空白处拖拽平移；节点左键可拖拽，右键拖拽整体平移
roam: true,
// roam='move'：仅保留左键空白拖拽平移，滚轮缩放由卡片层 onGraphWheel 统一接管
// （避免原生缩放与自定义缩放在画布内叠加，导致一次滚动缩放两遍）
roam: "move",
scaleLimit: { min: 0.15, max: 6 },
draggable: true,
data,
@@ -546,23 +550,64 @@ function openNode(node) {
}
}
// ---------------- 按住右键拖拽平移 ----------------
// ECharts 的 roam 会忽略右键（isMiddleOrRightButtonOnMouseUpDown），
// 这里自行接管右键拖拽，通过 graphRoam 动作平移，不改动节点数据与布局。
// ---------------- 卡片内：滚轮缩放 + 按住右键拖拽平移 ----------------
// ECharts 的 roam 只作用于画布内且忽略右键，这里在卡片层统一接管，
// 通过 graphRoam 动作位移/缩放，不改动节点数据与布局。
let panLastX = 0;
let panLastY = 0;
function onChartMouseDown(e) {
/** 顶部筛选区（输入框 / 下拉等）保持原生行为，不接管滚轮与右键 */
function inFilterBar(target) {
return !!target?.closest?.(".filter-bar");
}
function onGraphContextMenu(e) {
if (inFilterBar(e.target)) return; // 输入框里仍可右键粘贴
e.preventDefault();
}
function onGraphMouseDown(e) {
if (e.button !== 2) return; // 仅响应右键
if (inFilterBar(e.target)) return;
e.preventDefault();
panning.value = true;
panLastX = e.clientX;
panLastY = e.clientY;
chartRef.value?.classList.add("is-panning");
graphCardRef.value?.classList.add("is-panning");
window.addEventListener("mousemove", onPanMouseMove);
window.addEventListener("mouseup", onPanMouseUp);
}
/**
* 滚轮缩放：指针在画布内时以指针位置为中心；在卡片其它区域（图例 / 空白）时
* 以画布中心为中心整体缩放。缩放比按 deltaY 指数换算，兼容鼠标滚轮与触控板。
*/
function onGraphWheel(e) {
if (!chart || panning.value) return;
if (e.ctrlKey) return; // Ctrl + 滚轮留给浏览器页面缩放
if (inFilterBar(e.target)) return;
const rect = chartRef.value?.getBoundingClientRect();
if (!rect?.width || !rect?.height) return;
e.preventDefault();
// deltaMode：0=像素 1=行 2=页，统一折算成像素量级
const raw = e.deltaMode === 1 ? e.deltaY * 16 : e.deltaMode === 2 ? e.deltaY * 100 : e.deltaY;
const zoom = Math.pow(0.999, raw); // 向下滚（raw>0）缩小，向上滚放大
const inside =
e.clientX >= rect.left &&
e.clientX <= rect.right &&
e.clientY >= rect.top &&
e.clientY <= rect.bottom;
chart.dispatchAction({
type: "graphRoam",
seriesIndex: 0,
zoom,
originX: inside ? e.clientX - rect.left : rect.width / 2,
originY: inside ? e.clientY - rect.top : rect.height / 2
});
}
function onPanMouseMove(e) {
if (!panning.value) return;
// 右键在画布外松开时 mouseup 不会触发，用 buttons 兜底结束拖拽
@@ -587,7 +632,7 @@ function onPanMouseUp(e) {
function stopPan() {
if (!panning.value) return;
panning.value = false;
chartRef.value?.classList.remove("is-panning");
graphCardRef.value?.classList.remove("is-panning");
window.removeEventListener("mousemove", onPanMouseMove);
window.removeEventListener("mouseup", onPanMouseUp);
}
@@ -765,12 +810,12 @@ onBeforeUnmount(() => {
.chart {
width: 100%;
height: 100%;
}
// 右键拖拽平移时强制抓手光标（zrender 会改写 canvas 内联 cursor）
&.is-panning,
&.is-panning * {
cursor: grabbing !important;
}
// 右键拖拽平移时整卡强制抓手光标（zrender 会改写 canvas 内联 cursor）
.graph-card.is-panning,
.graph-card.is-panning * {
cursor: grabbing !important;
}
.chart-empty {
backend/src/views/apps/oa/employeefile/components/fileDetailDrawer.vue
+68 -38
View File
@@ -159,29 +159,18 @@
<!-- 证照附件 -->
<el-tab-pane :label="`证照附件（${certificateAttachments.length}）`" name="attachment">
<div class="tab-toolbar">
<span class="upload-tip">支持图片 / PDF，单个不超过 10MB，可多选批量上传，数量不限</span>
<el-upload
:show-file-list="false"
:http-request="(opt) => handleCertUpload('education_photo', opt)"
:http-request="handleCertUpload"
:before-upload="beforeCertUpload"
multiple
accept="image/*,.pdf"
>
<el-button
type="primary"
plain
size="small"
:loading="certSaving === 'education_photo'"
>
{{ file.education_photo ? '替换学历照片' : '上传学历照片' }}
<el-button type="primary" size="small" :icon="Upload" :loading="certUploading">
批量上传证照
</el-button>
</el-upload>
<el-button
type="primary"
size="small"
:icon="Plus"
@click="openRecordDialog({ type: 4 })"
>
上传证照
</el-button>
</div>
<div v-if="certificateAttachments.length" class="attachment-grid">
<div v-for="item in certificateAttachments" :key="item.id" class="attachment-card">
@@ -238,8 +227,9 @@
<script setup>
import { computed, reactive, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Document, Edit, Plus, Refresh } from '@element-plus/icons-vue';
import { Document, Edit, Plus, Refresh, Upload } from '@element-plus/icons-vue';
import {
createFileRecord,
deleteFileRecord,
getEmployeeFileDetail,
updateEmployeeFileCertificates,
@@ -263,6 +253,10 @@ const visible = ref(false);
const loading = ref(false);
const recordDialogRef = ref();
const certSaving = ref('');
/** 批量上传状态：pending 为并发中的文件数，全部结束后统一刷新 */
const certUploading = ref(false);
const certPending = ref(0);
const certDone = ref(0);
const certificateForm = reactive({
education_photo: '',
id_card_front: '',
@@ -299,30 +293,60 @@ const beforeCertUpload = (uploadedFile) => {
return isImageOrPdf && isLt10M;
};
/** 批量上传时用「文件名（去扩展名）」作为默认证照名称，便于后续辨认 */
const certTitleFromFile = (name) =>
String(name || '').replace(/\.[^.]+$/, '').trim() || '证照附件';
const saveCertificates = async () => {
await updateEmployeeFileCertificates(file.value.id, certificateForm);
await loadDetail();
emit('refresh');
};
const handleCertUpload = async (field, { file: uploadedFile }) => {
certSaving.value = field;
/**
* 批量上传证照：统一入口，不再区分学历照片 / 身份证等细分类别。
* 每个文件独立上传并生成一条「证照附件」记录，数量不限；
* el-upload 开启 multiple 后会对每个文件各调用一次本方法，全部结束后统一刷新列表。
*/
const handleCertUpload = async ({ file: uploadedFile }) => {
const employeeId = Number(file.value.employee_id) || 0;
if (!employeeId) {
ElMessage.error('档案缺少员工信息，无法上传证照');
return;
}
certPending.value += 1;
certUploading.value = true;
try {
const data = new FormData();
data.append('file', uploadedFile);
const res = await uploadFile(data);
const url = res?.url || res?.data?.url;
if (!url) {
ElMessage.error(res?.msg || '上传失败');
return;
}
certificateForm[field] = url;
await saveCertificates();
ElMessage.success('证照已保存');
if (!url) throw new Error(res?.msg || '上传失败');
await createFileRecord({
employee_id: employeeId,
type: 4,
title: certTitleFromFile(uploadedFile.name),
sub_title: '',
extra: '',
start_date: '',
end_date: '',
description: '',
attachment_url: url,
sort: 0,
});
certDone.value += 1;
} catch (error) {
ElMessage.error(error?.message || '证照保存失败');
ElMessage.error(`「${uploadedFile.name}」${error?.message || '上传失败'}`);
} finally {
certSaving.value = '';
certPending.value -= 1;
if (certPending.value <= 0) {
certUploading.value = false;
const done = certDone.value;
certDone.value = 0;
await loadDetail();
if (done) ElMessage.success(`已上传 ${done} 个证照附件`);
}
}
};
@@ -500,7 +524,7 @@ defineExpose({ open, reload: loadDetail });
gap: 12px;
padding: 14px 16px;
border-radius: 8px;
background: #f5f7fa;
background: var(--el-fill-color-light);
.name-line {
display: flex;
@@ -510,19 +534,19 @@ defineExpose({ open, reload: loadDetail });
.name {
font-size: 18px;
font-weight: 600;
color: #303133;
color: var(--el-text-color-primary);
}
.file-no {
font-size: 12px;
color: #909399;
color: var(--el-text-color-secondary);
}
}
.meta-line {
margin-top: 6px;
font-size: 13px;
color: #606266;
color: var(--el-text-color-regular);
}
}
@@ -536,7 +560,7 @@ defineExpose({ open, reload: loadDetail });
margin: 14px 0 10px;
font-size: 14px;
font-weight: 600;
color: #303133;
color: var(--el-text-color-primary);
&:first-child {
margin-top: 0;
@@ -551,6 +575,12 @@ defineExpose({ open, reload: loadDetail });
margin-bottom: 10px;
}
.upload-tip {
margin-right: auto;
font-size: 12px;
color: var(--el-text-color-secondary);
}
.attachment-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
@@ -558,7 +588,7 @@ defineExpose({ open, reload: loadDetail });
}
.attachment-card {
border: 1px solid #ebeef5;
border: 1px solid var(--el-border-color-lighter);
border-radius: 8px;
padding: 10px;
display: flex;
@@ -578,7 +608,7 @@ defineExpose({ open, reload: loadDetail });
justify-content: center;
border-radius: 6px;
overflow: hidden;
background: #f5f7fa;
background: var(--el-fill-color-light);
cursor: pointer;
.attachment-thumb {
@@ -592,7 +622,7 @@ defineExpose({ open, reload: loadDetail });
flex-direction: column;
align-items: center;
gap: 6px;
color: #909399;
color: var(--el-text-color-secondary);
font-size: 12px;
}
}
@@ -601,7 +631,7 @@ defineExpose({ open, reload: loadDetail });
margin-top: 8px;
width: 100%;
font-size: 13px;
color: #303133;
color: var(--el-text-color-primary);
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
@@ -611,7 +641,7 @@ defineExpose({ open, reload: loadDetail });
.attachment-sub {
width: 100%;
font-size: 12px;
color: #909399;
color: var(--el-text-color-secondary);
text-align: center;
overflow: hidden;
text-overflow: ellipsis;