|
|
@@ -0,0 +1,720 @@
|
|
|
+<template>
|
|
|
+ <main class="cm-page" v-loading="loading">
|
|
|
+ <section class="cm-workspace">
|
|
|
+ <div class="cm-filter-bar">
|
|
|
+ <div class="cm-filter-cell">
|
|
|
+ <span class="cm-filter-label">合同编号：</span>
|
|
|
+ <el-input v-model.trim="filters.contractNo" clearable placeholder="请输入合同编号" size="small"
|
|
|
+ @keyup.enter.native="applyFilters" />
|
|
|
+ </div>
|
|
|
+ <div class="cm-filter-cell">
|
|
|
+ <span class="cm-filter-label">合同类型：</span>
|
|
|
+ <el-select v-model="filters.contractTypeShort" clearable placeholder="全职" size="small">
|
|
|
+ <el-option v-for="t in contractTypes" :key="t" :label="t" :value="t" />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="cm-filter-cell">
|
|
|
+ <span class="cm-filter-label">合同状态：</span>
|
|
|
+ <el-select v-model="filters.status" clearable placeholder="启用" size="small">
|
|
|
+ <el-option v-for="s in contractStatus" :key="s.value" :label="s.label" :value="s.value" />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="cm-filter-cell">
|
|
|
+ <span class="cm-filter-label">所属部门：</span>
|
|
|
+ <el-select v-model="filters.department" clearable placeholder="全部" size="small">
|
|
|
+ <el-option v-for="d in departments" :key="d" :label="d" :value="d" />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="cm-filter-cell cm-filter-actions">
|
|
|
+ <el-button type="primary" size="small" @click="applyFilters">查询</el-button>
|
|
|
+ <el-button size="small" @click="resetFilters">重置</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <ele-pro-table ref="table" row-key="id" :columns="columns" :datasource="filteredRecords"
|
|
|
+ :need-page="true" :page-size="10" :page-sizes="[10, 20, 50, 100]"
|
|
|
+ :toolkit="['size', 'columns', 'fullscreen']" stripe class="cm-pro-table">
|
|
|
+ <template slot="toolbar">
|
|
|
+ <el-button type="primary" icon="el-icon-plus" size="small" @click="openCreate">发起合同</el-button>
|
|
|
+ <el-button size="small" icon="el-icon-download" @click="exportList">导出</el-button>
|
|
|
+ </template>
|
|
|
+ <template v-slot:positionDuty="{ row }">
|
|
|
+ <span class="cm-duty">{{ row.positionDuty }}</span>
|
|
|
+ </template>
|
|
|
+ <template v-slot:signDoc="{ row }">
|
|
|
+ <button class="cm-link" @click="viewFile(row.signDoc)">查看</button>
|
|
|
+ </template>
|
|
|
+ <template v-slot:duration="{ row }">{{ row.startDate }} ~ {{ row.endDate || '长期' }}</template>
|
|
|
+ <template v-slot:status="{ row }">
|
|
|
+ <span class="cm-status" :class="statusClass(row.status)">{{ row.status }}</span>
|
|
|
+ </template>
|
|
|
+ <template v-slot:attachment="{ row }">
|
|
|
+ <button class="cm-link" @click="viewFile(row.attachment)">查看</button>
|
|
|
+ </template>
|
|
|
+ <template v-slot:action="{ row }">
|
|
|
+ <div class="cm-action">
|
|
|
+ <button class="cm-link" @click="viewDetail(row)">详情查看</button>
|
|
|
+ <button class="cm-link" @click="openChange(row)">变更</button>
|
|
|
+ <button class="cm-link" @click="handleRenew(row)">续签</button>
|
|
|
+ <button class="cm-link" @click="handleTerminate(row)">解除</button>
|
|
|
+ <button class="cm-link" @click="handleSign(row)">签订</button>
|
|
|
+ <button class="cm-link" @click="handleArchive(row)">已归档</button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template slot="empty">
|
|
|
+ <div class="cm-empty">
|
|
|
+ <i class="el-icon-document"></i>
|
|
|
+ <strong>暂无合同记录</strong>
|
|
|
+ <p>调整筛选条件或点击「发起合同」新增</p>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </ele-pro-table>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- 详情查看弹窗 -->
|
|
|
+ <ele-modal
|
|
|
+ :visible.sync="detailVisible"
|
|
|
+ width="900px"
|
|
|
+ title="合同详情"
|
|
|
+ append-to-body
|
|
|
+ custom-class="cm-detail-dialog"
|
|
|
+ :movable="true">
|
|
|
+ <div v-if="detailRow" class="cm-create-page">
|
|
|
+ <div class="cm-create-header">
|
|
|
+ <h2><i class="el-icon-document"></i>合同详情</h2>
|
|
|
+ <p>查看合同的完整信息，包括员工信息、合同条款及附件</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="cm-create-employee-card" style="margin:14px 22px 0;">
|
|
|
+ <span class="cm-employee-avatar">{{ detailRow.employeeName ? detailRow.employeeName.slice(0, 1) : '?' }}</span>
|
|
|
+ <div class="cm-employee-info">
|
|
|
+ <b>员工姓名：{{ detailRow.employeeName }}<span style="margin-left:24px;">员工工号：{{ detailRow.employeeNo }}</span></b>
|
|
|
+ <small>所属法人：{{ detailRow.legalEntity }} · 合同编号：<span style="color:#1768e5;">{{ detailRow.contractNo }}</span> · 合同类型：{{ detailRow.contractType }}</small>
|
|
|
+ </div>
|
|
|
+ <div style="margin-left:auto;text-align:right;">
|
|
|
+ <small style="color:#7e8b9d;font-size:10px;display:block;">合同状态</small>
|
|
|
+ <span class="cm-status" :class="statusClass(detailRow.status)" style="margin-top:4px;display:inline-block;">{{ detailRow.status }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="cm-create-section">
|
|
|
+ <div class="cm-create-section-title">合同基本信息</div>
|
|
|
+ <div class="cm-create-grid">
|
|
|
+ <div class="cm-compare-item"><span class="cm-compare-label">合同编号：</span><span class="cm-compare-value">{{ detailRow.contractNo }}</span></div>
|
|
|
+ <div class="cm-compare-item"><span class="cm-compare-label">合同类型：</span><span class="cm-compare-value">{{ detailRow.contractType }}</span></div>
|
|
|
+ <div class="cm-compare-item"><span class="cm-compare-label">所属法人：</span><span class="cm-compare-value">{{ detailRow.legalEntity }}</span></div>
|
|
|
+ <div class="cm-compare-item"><span class="cm-compare-label">所属部门：</span><span class="cm-compare-value">{{ detailRow.department }}</span></div>
|
|
|
+ <div class="cm-compare-item"><span class="cm-compare-label">岗位名称：</span><span class="cm-compare-value">{{ detailRow.positionName }}</span></div>
|
|
|
+ <div class="cm-compare-item"><span class="cm-compare-label">职级：</span><span class="cm-compare-value">{{ detailRow.level || '-' }}</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="cm-create-section">
|
|
|
+ <div class="cm-create-section-title">岗位职责与工作信息</div>
|
|
|
+ <div style="padding:4px 0 8px;color:#243955;font-size:13px;line-height:1.7;">{{ detailRow.positionDuty || '暂无岗位职责说明' }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="cm-create-section">
|
|
|
+ <div class="cm-create-section-title">合同期限与薪资</div>
|
|
|
+ <div class="cm-create-grid">
|
|
|
+ <div class="cm-compare-item"><span class="cm-compare-label">合同起始：</span><span class="cm-compare-value">{{ detailRow.startDate || '-' }}</span></div>
|
|
|
+ <div class="cm-compare-item"><span class="cm-compare-label">合同终止：</span><span class="cm-compare-value">{{ detailRow.endDate || '长期' }}</span></div>
|
|
|
+ <div class="cm-compare-item"><span class="cm-compare-label">月薪资：</span><span class="cm-compare-value is-highlight">{{ detailRow.salary ? ('¥ ' + Number(detailRow.salary).toLocaleString() + ' 元/月') : '待定' }}</span></div>
|
|
|
+ <div class="cm-compare-item"><span class="cm-compare-label">试用期至：</span><span class="cm-compare-value">{{ detailRow.probationEnd || '无试用期' }}</span></div>
|
|
|
+ <div class="cm-compare-item"><span class="cm-compare-label">工作地点：</span><span class="cm-compare-value">{{ detailRow.workLocation || '-' }}</span></div>
|
|
|
+ <div class="cm-compare-item"><span class="cm-compare-label">直接主管：</span><span class="cm-compare-value">{{ detailRow.manager || '-' }}</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="cm-create-section">
|
|
|
+ <div class="cm-create-section-title">签署信息</div>
|
|
|
+ <div class="cm-create-grid">
|
|
|
+ <div class="cm-compare-item"><span class="cm-compare-label">签署方式：</span><span class="cm-compare-value">{{ detailRow.signMethod || '-' }}</span></div>
|
|
|
+ <div class="cm-compare-item"><span class="cm-compare-label">签署文件：</span><span class="cm-compare-value">
|
|
|
+ <button class="cm-link" @click="viewFile(detailRow.signDoc)">{{ detailRow.signDoc || '查看' }}</button>
|
|
|
+ </span></div>
|
|
|
+ <div class="cm-compare-item"><span class="cm-compare-label">合同附件：</span><span class="cm-compare-value">
|
|
|
+ <button class="cm-link" @click="viewFile(detailRow.attachment)">{{ detailRow.attachment || '查看' }}</button>
|
|
|
+ </span></div>
|
|
|
+ <div class="cm-compare-item"><span class="cm-compare-label">签订日期：</span><span class="cm-compare-value">{{ detailRow.signDate || detailRow.createdAt || '-' }}</span></div>
|
|
|
+ <div class="cm-compare-item"><span class="cm-compare-label">审核人：</span><span class="cm-compare-value">{{ detailRow.reviewer || '未指定' }}</span></div>
|
|
|
+ <div class="cm-compare-item"><span class="cm-compare-label">创建时间：</span><span class="cm-compare-value">{{ detailRow.createdAt || '-' }}</span></div>
|
|
|
+ </div>
|
|
|
+ <div v-if="detailRow.remark" style="margin-top:10px;padding:10px 12px;background:#fff7e6;border-left:3px solid #e6a23c;border-radius:3px;color:#7a5c00;font-size:12px;line-height:1.6;">
|
|
|
+ <strong>备注：</strong>{{ detailRow.remark }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="cm-create-footer">
|
|
|
+ <div class="cm-footer-info">
|
|
|
+ <i class="el-icon-info"></i> 合同编号 {{ detailRow.contractNo }} · 状态 {{ detailRow.status }}
|
|
|
+ </div>
|
|
|
+ <div class="cm-footer-actions">
|
|
|
+ <el-button @click="detailVisible = false">关闭</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </ele-modal>
|
|
|
+
|
|
|
+ <!-- 发起合同弹窗 -->
|
|
|
+ <ele-modal
|
|
|
+ :visible.sync="createVisible"
|
|
|
+ width="920px"
|
|
|
+ title="发起合同"
|
|
|
+ append-to-body
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :before-close="closeCreate"
|
|
|
+ :movable="true">
|
|
|
+ <div class="cm-create-page">
|
|
|
+ <div class="cm-create-header">
|
|
|
+ <h2><i class="el-icon-document-add"></i>发起合同</h2>
|
|
|
+ <p>为员工创建新的劳动合同，填写完成后可保存为草稿或直接提交签署流程</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-if="selectedEmployee" class="cm-create-employee-card" style="margin:14px 22px 0;">
|
|
|
+ <span class="cm-employee-avatar">{{ selectedEmployee.name.slice(0, 1) }}</span>
|
|
|
+ <div class="cm-employee-info">
|
|
|
+ <b>员工姓名：{{ selectedEmployee.name }}<span style="margin-left:24px;">员工工号：{{ selectedEmployee.employeeNo }}</span><span style="margin-left:24px;">所属法人：{{ selectedEmployee.legalEntity }}</span></b>
|
|
|
+ <small>部门：{{ selectedEmployee.department }} · 岗位：{{ selectedEmployee.position }} · 职级：{{ selectedEmployee.level }} · 建议薪资：¥ {{ Number(selectedEmployee.salary).toLocaleString() }}/月</small>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="cm-create-section">
|
|
|
+ <div class="cm-create-section-title">合同基础信息</div>
|
|
|
+ <el-form ref="createFormRef" :model="createForm" :rules="createRules" label-position="top">
|
|
|
+ <div class="cm-create-grid">
|
|
|
+ <el-form-item label="合同编号">
|
|
|
+ <el-input v-model="createForm.contractNo" placeholder="自动生成，可手动修改" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="合同类型" prop="contractType">
|
|
|
+ <el-select v-model="createForm.contractType" placeholder="请选择合同类型">
|
|
|
+ <el-option v-for="t in contractTypes" :key="t" :label="t" :value="t" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="调整薪资" prop="salary">
|
|
|
+ <el-input v-model="createForm.salary" placeholder="如：8000">
|
|
|
+ <template slot="append">元/月</template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="合同起始日期" prop="startDate">
|
|
|
+ <el-date-picker v-model="createForm.startDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择" style="width:100%;" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="签署方式" prop="signMethod">
|
|
|
+ <div class="cm-create-sign-method">
|
|
|
+ <button type="button" class="cm-method-btn" :class="{ 'is-active': createForm.signMethod === '线上' }" @click="createForm.signMethod = '线上'">线上签订</button>
|
|
|
+ <button type="button" class="cm-method-btn" :class="{ 'is-active': createForm.signMethod === '线下' }" @click="createForm.signMethod = '线下'">线下签订</button>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="合同模版" prop="templateId">
|
|
|
+ <el-select v-model="createForm.templateId" placeholder="请选择合同模版">
|
|
|
+ <el-option v-for="t in contractTemplateOptions" :key="t.id" :label="t.name" :value="t.id" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ <div class="cm-create-tips">
|
|
|
+ <p><i class="el-icon-info"></i> 合同编号系统自动生成 HT-XXXX 格式，可手动修改</p>
|
|
|
+ <p><i class="el-icon-info"></i> 选择员工后，所属法人、部门、岗位等信息将自动从员工档案获取</p>
|
|
|
+ <p><i class="el-icon-info"></i> 签署方式选择「线上签订」时，系统将自动生成电子合同并发送给员工</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="cm-create-section" style="background:#fafbfd;">
|
|
|
+ <div class="cm-create-section-title">原合同信息 / 发起后信息</div>
|
|
|
+ <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px;">
|
|
|
+ <div class="cm-compare-card">
|
|
|
+ <div class="cm-compare-card-head">
|
|
|
+ <span class="cm-compare-card-title">员工当前信息</span>
|
|
|
+ </div>
|
|
|
+ <div class="cm-compare-list">
|
|
|
+ <div class="cm-compare-item"><span class="cm-compare-label">岗位：</span><span class="cm-compare-value">{{ selectedEmployee ? selectedEmployee.position : '-' }}</span></div>
|
|
|
+ <div class="cm-compare-item"><span class="cm-compare-label">职级：</span><span class="cm-compare-value">{{ selectedEmployee ? selectedEmployee.level : '-' }}</span></div>
|
|
|
+ <div class="cm-compare-item"><span class="cm-compare-label">部门：</span><span class="cm-compare-value">{{ selectedEmployee ? selectedEmployee.department : '-' }}</span></div>
|
|
|
+ <div class="cm-compare-item"><span class="cm-compare-label">直接主管：</span><span class="cm-compare-value">{{ selectedEmployee ? selectedEmployee.manager : '-' }}</span></div>
|
|
|
+ <div class="cm-compare-item" style="grid-column: span 2;"><span class="cm-compare-label">建议薪资：</span><span class="cm-compare-value">{{ selectedEmployee ? ('¥ ' + Number(selectedEmployee.salary).toLocaleString() + ' 元/月') : '-' }}</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="cm-compare-card">
|
|
|
+ <div class="cm-compare-head-title"><span class="cm-compare-card-title">合同拟定信息</span></div>
|
|
|
+ <div class="cm-compare-list">
|
|
|
+ <div class="cm-compare-item"><span class="cm-compare-label">合同类型：</span><span class="cm-compare-value is-highlight">{{ createForm.contractType || '请选择合同类型' }}</span></div>
|
|
|
+ <div class="cm-compare-item"><span class="cm-compare-label">合同编号：</span><span class="cm-compare-value">{{ createForm.contractNo || '自动生成' }}</span></div>
|
|
|
+ <div class="cm-compare-item"><span class="cm-compare-label">合同起始：</span><span class="cm-compare-value">{{ createForm.startDate || '请选择起始日期' }}</span></div>
|
|
|
+ <div class="cm-compare-item"><span class="cm-compare-label">合同终止：</span><span class="cm-compare-value">{{ createForm.endDate || '长期' }}</span></div>
|
|
|
+ <div class="cm-compare-item" style="grid-column: span 2;"><span class="cm-compare-label">拟定薪资：</span><span class="cm-compare-value is-highlight">{{ createForm.salary ? ('¥ ' + Number(String(createForm.salary).replace(/\D/g, '')).toLocaleString() + ' 元/月') : '请填写薪资' }}</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="cm-create-section">
|
|
|
+ <div class="cm-create-section-title">合同附件</div>
|
|
|
+ <div v-if="!createForm.attachmentName" class="cm-create-upload" @click="triggerCreateUpload">
|
|
|
+ <i class="el-icon-upload"></i>
|
|
|
+ <span>点击上传合同文件（支持 PDF / Word / 图片，单个文件不超过 10MB）</span>
|
|
|
+ </div>
|
|
|
+ <div v-else class="cm-create-uploaded">
|
|
|
+ <i class="el-icon-document"></i>
|
|
|
+ <span>已上传：{{ createForm.attachmentName }}</span>
|
|
|
+ <button class="cm-uploaded-close" @click="createForm.attachmentName = ''; createForm.attachment = ''"><i class="el-icon-close"></i></button>
|
|
|
+ </div>
|
|
|
+ <input ref="createFileInput" type="file" accept=".pdf,.doc,.docx,.jpg,.png" style="display:none" @change="handleCreateUpload" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="cm-create-footer">
|
|
|
+ <div class="cm-footer-info">
|
|
|
+ <i class="el-icon-info"></i> 保存草稿后可继续编辑，提交后合同将进入签署流程
|
|
|
+ </div>
|
|
|
+ <div class="cm-footer-actions">
|
|
|
+ <el-button @click="closeCreate">取消</el-button>
|
|
|
+ <el-button @click="saveCreateDraft">保存为草稿</el-button>
|
|
|
+ <el-button type="primary" @click="submitCreate">提交签署</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </ele-modal>
|
|
|
+
|
|
|
+ <el-drawer
|
|
|
+ :visible.sync="changeDrawer"
|
|
|
+ direction="rtl"
|
|
|
+ size="900px"
|
|
|
+ :with-header="false"
|
|
|
+ append-to-body
|
|
|
+ custom-class="cm-change-drawer"
|
|
|
+ >
|
|
|
+ <div class="cm-change-page" v-if="changeForm.employeeName">
|
|
|
+ <div class="cm-change-header">
|
|
|
+ <h2><i class="el-icon-document"></i>合同变更界面</h2>
|
|
|
+ <div class="cm-change-employee">
|
|
|
+ <span>员工姓名：<b>{{ changeForm.employeeName }}</b></span>
|
|
|
+ <span>员工工号：<b>{{ changeForm.employeeNo }}</b></span>
|
|
|
+ <span>所属法人：<b>{{ changeForm.legalEntity }}</b></span>
|
|
|
+ <span>原合同编号：<b>{{ changeForm.contractNo }}</b></span>
|
|
|
+ <span style="color:#1768e5;">原合同类型：<b>{{ changeForm.contractType }}</b></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="cm-change-section">
|
|
|
+ <div class="cm-change-section-title">变更基础信息</div>
|
|
|
+ <el-form ref="changeFormRef" :model="changeForm" :rules="changeRules" label-position="top">
|
|
|
+ <div class="cm-change-grid">
|
|
|
+ <el-form-item label="变更类型" prop="changeType">
|
|
|
+ <el-select v-model="changeForm.changeType" placeholder="岗位职级变更">
|
|
|
+ <el-option v-for="t in changeTypes" :key="t.value" :label="t.label" :value="t.value" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="调整薪资" prop="newSalary">
|
|
|
+ <el-input v-model.trim="changeForm.newSalary" placeholder="22000元/月">
|
|
|
+ <template slot="append">元/月</template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="变更生效日期" prop="effectiveDate">
|
|
|
+ <el-date-picker v-model="changeForm.effectiveDate" type="date" value-format="yyyy-MM-dd" placeholder="2026-09-01" style="width:100%;" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="签署方式" prop="signMethod">
|
|
|
+ <div class="cm-sign-method">
|
|
|
+ <button type="button" class="cm-method-btn" :class="{ 'is-active': changeForm.signMethod === '线上' }" @click="changeForm.signMethod = '线上'">线上签订</button>
|
|
|
+ <button type="button" class="cm-method-btn" :class="{ 'is-active': changeForm.signMethod === '线下' }" @click="changeForm.signMethod = '线下'">线下签订</button>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="cm-change-notes">
|
|
|
+ <p><i class="el-icon-warning-outline"></i> 变更报告等节点 9 访问之后 全部至全部将签合同</p>
|
|
|
+ <p><i class="el-icon-warning-outline"></i> 变更获批后 协助解除后续工作 合同将自动同步 更新至合同管理系统</p>
|
|
|
+ </div>
|
|
|
+ <div class="cm-change-grid">
|
|
|
+ <el-form-item label="合同模版" prop="templateId">
|
|
|
+ <el-select v-model="changeForm.templateId" placeholder="请选择合同模版">
|
|
|
+ <el-option v-for="t in contractTemplates" :key="t.id" :label="t.name" :value="t.id" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <el-form-item label="变更原因" prop="changeReason">
|
|
|
+ <el-input v-model.trim="changeForm.changeReason" type="textarea" :rows="2" placeholder="如：因组织架构调整，岗位调整为技术主管" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="cm-compare-grid">
|
|
|
+ <div class="cm-compare-card">
|
|
|
+ <div class="cm-compare-card-head">
|
|
|
+ <span class="cm-compare-card-title">原合同信息</span>
|
|
|
+ <button class="cm-compare-card-action"><i class="el-icon-close"></i></button>
|
|
|
+ </div>
|
|
|
+ <div class="cm-compare-list">
|
|
|
+ <div class="cm-compare-item"><span class="cm-compare-label">岗位：</span><span class="cm-compare-value">{{ changeForm.original.position }}</span></div>
|
|
|
+ <div class="cm-compare-item"><span class="cm-compare-label">职级：</span><span class="cm-compare-value">{{ changeForm.original.level }}</span></div>
|
|
|
+ <div class="cm-compare-item"><span class="cm-compare-label">部门：</span><span class="cm-compare-value">{{ changeForm.original.department }}</span></div>
|
|
|
+ <div class="cm-compare-item"><span class="cm-compare-label">合同到期日：</span><span class="cm-compare-value">{{ changeForm.original.endDate || '长期' }}</span></div>
|
|
|
+ <div class="cm-compare-item" style="grid-column: span 2;"><span class="cm-compare-label">薪资标准：</span><span class="cm-compare-value">{{ changeForm.original.salary }}元/月</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="cm-compare-card">
|
|
|
+ <div class="cm-compare-card-head">
|
|
|
+ <span class="cm-compare-card-title">变更后信息</span>
|
|
|
+ <button class="cm-compare-card-action"><i class="el-icon-close"></i></button>
|
|
|
+ </div>
|
|
|
+ <div class="cm-compare-list">
|
|
|
+ <div class="cm-compare-item"><span class="cm-compare-label">岗位：</span><span class="cm-compare-value is-highlight">{{ changeForm.updated.position }}</span></div>
|
|
|
+ <div class="cm-compare-item"><span class="cm-compare-label">职级：</span><span class="cm-compare-value is-highlight">{{ changeForm.updated.level }}</span></div>
|
|
|
+ <div class="cm-compare-item"><span class="cm-compare-label">部门：</span><span class="cm-compare-value">{{ changeForm.updated.department }}</span></div>
|
|
|
+ <div class="cm-compare-item"><span class="cm-compare-label">合同到期日：</span><span class="cm-compare-value">{{ changeForm.updated.endDate || '长期' }}</span></div>
|
|
|
+ <div class="cm-compare-item" style="grid-column: span 2;"><span class="cm-compare-label">薪资标准：</span><span class="cm-compare-value is-highlight">{{ changeForm.updated.salary }}元/月</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="cm-attach-section">
|
|
|
+ <div class="cm-change-section-title">变更协议附件</div>
|
|
|
+ <div class="cm-attach-list">
|
|
|
+ <div v-for="(file, idx) in changeForm.attachments" :key="idx" class="cm-attach-item" @click="openAttach(file)">
|
|
|
+ <i class="el-icon-document cm-attach-icon"></i>
|
|
|
+ <div>
|
|
|
+ <div class="cm-attach-name">{{ file.name }}</div>
|
|
|
+ <div class="cm-attach-meta">{{ file.size }} · {{ file.uploadedAt }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="cm-attach-add" @click="triggerAttachUpload">
|
|
|
+ <i class="el-icon-upload"></i>
|
|
|
+ <span>上传附件</span>
|
|
|
+ </div>
|
|
|
+ <input ref="attachInput" type="file" accept=".pdf,.doc,.docx" style="display:none" @change="handleAttachUpload" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="cm-change-footer">
|
|
|
+ <div class="cm-footer-info">
|
|
|
+ <i class="el-icon-info"></i> 变更后合同将自动生成新编号，原合同进入「已变更」状态
|
|
|
+ </div>
|
|
|
+ <div class="cm-footer-actions">
|
|
|
+ <el-button @click="closeChangeDrawer">取消</el-button>
|
|
|
+ <el-button type="primary" @click="submitChange">保存并提交审批</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-drawer>
|
|
|
+ </main>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {
|
|
|
+ contractSeeds,
|
|
|
+ LEGAL_ENTITIES,
|
|
|
+ DEPARTMENTS,
|
|
|
+ CONTRACT_TYPES,
|
|
|
+ CONTRACT_STATUS,
|
|
|
+ SIGN_METHODS,
|
|
|
+ CHANGE_TYPES,
|
|
|
+ CONTRACT_TEMPLATES,
|
|
|
+ POSITIONS,
|
|
|
+ LEVELS,
|
|
|
+ employeeOptions,
|
|
|
+ contractTemplateOptions,
|
|
|
+ contractStatusOptions,
|
|
|
+ clone as deepClone,
|
|
|
+} from './mock';
|
|
|
+
|
|
|
+const STORE_KEY = 'oa-contracts-v5';
|
|
|
+
|
|
|
+function blankCreateForm() {
|
|
|
+ return {
|
|
|
+ employeeNo: '',
|
|
|
+ contractNo: '',
|
|
|
+ contractType: '',
|
|
|
+ templateId: null,
|
|
|
+ legalEntity: '',
|
|
|
+ department: '',
|
|
|
+ positionName: '',
|
|
|
+ startDate: '',
|
|
|
+ endDate: '',
|
|
|
+ probationEnd: '',
|
|
|
+ salary: 0,
|
|
|
+ manager: '',
|
|
|
+ signMethod: '线上',
|
|
|
+ status: '待签署',
|
|
|
+ attachment: '',
|
|
|
+ attachmentName: '',
|
|
|
+ };
|
|
|
+}
|
|
|
+
|
|
|
+function blankChangeForm() {
|
|
|
+ return {
|
|
|
+ employeeName: '',
|
|
|
+ employeeNo: '',
|
|
|
+ legalEntity: '',
|
|
|
+ contractNo: '',
|
|
|
+ contractType: '',
|
|
|
+ changeType: 'POSITION_LEVEL',
|
|
|
+ newSalary: '',
|
|
|
+ effectiveDate: '',
|
|
|
+ templateId: null,
|
|
|
+ signMethod: '线上',
|
|
|
+ changeReason: '',
|
|
|
+ original: { position: '', level: '', department: '', endDate: '', salary: '' },
|
|
|
+ updated: { position: '', level: '', department: '', endDate: '', salary: '' },
|
|
|
+ attachments: [
|
|
|
+ { name: '岗位调整审批单.pdf', size: '256 KB', uploadedAt: '2026-08-25 10:30' },
|
|
|
+ { name: '薪酬确认单.pdf', size: '128 KB', uploadedAt: '2026-08-25 10:32' },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+}
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'ContractManagement',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: false,
|
|
|
+ rows: [],
|
|
|
+ filters: { contractNo: '', contractTypeShort: '', status: '', department: '' },
|
|
|
+ legalEntities: LEGAL_ENTITIES,
|
|
|
+ departments: DEPARTMENTS,
|
|
|
+ contractTypes: CONTRACT_TYPES,
|
|
|
+ contractStatus: CONTRACT_STATUS,
|
|
|
+ signMethods: SIGN_METHODS,
|
|
|
+ changeTypes: CHANGE_TYPES,
|
|
|
+ contractTemplates: CONTRACT_TEMPLATES,
|
|
|
+ positions: POSITIONS,
|
|
|
+ levels: LEVELS,
|
|
|
+ changeDrawer: false,
|
|
|
+ changeForm: blankChangeForm(),
|
|
|
+ employeeOptions,
|
|
|
+ contractTemplateOptions,
|
|
|
+ contractStatusOptions,
|
|
|
+ createVisible: false,
|
|
|
+ createForm: blankCreateForm(),
|
|
|
+ createRules: {
|
|
|
+ contractType: [{ required: true, message: '请选择合同类型', trigger: 'change' }],
|
|
|
+ salary: [{ required: true, message: '请填写调整薪资', trigger: 'blur' }],
|
|
|
+ startDate: [{ required: true, message: '请选择合同起始日期', trigger: 'change' }],
|
|
|
+ signMethod: [{ required: true, message: '请选择签署方式', trigger: 'change' }],
|
|
|
+ templateId: [{ required: true, message: '请选择合同模版', trigger: 'change' }],
|
|
|
+ },
|
|
|
+ changeRules: {
|
|
|
+ changeType: [{ required: true, message: '请选择变更类型', trigger: 'change' }],
|
|
|
+ newSalary: [{ required: true, message: '请填写调整后薪资', trigger: 'blur' }],
|
|
|
+ effectiveDate: [{ required: true, message: '请选择生效日期', trigger: 'change' }],
|
|
|
+ templateId: [{ required: true, message: '请选择合同模版', trigger: 'change' }],
|
|
|
+ signMethod: [{ required: true, message: '请选择签署方式', trigger: 'change' }],
|
|
|
+ changeReason: [{ required: true, message: '请填写变更原因', trigger: 'blur' }],
|
|
|
+ },
|
|
|
+ detailVisible: false,
|
|
|
+ detailRow: null,
|
|
|
+ columns: [
|
|
|
+ { type: 'index', label: '序号', width: 50, align: 'center', headerAlign: 'center' },
|
|
|
+ { prop: 'contractNo', label: '合同编号', minWidth: 130, showOverflowTooltip: true },
|
|
|
+ { prop: 'employeeName', label: '员工姓名', minWidth: 90 },
|
|
|
+ { prop: 'legalEntity', label: '所属法人', minWidth: 160, showOverflowTooltip: true },
|
|
|
+ { prop: 'contractType', label: '合同类型', minWidth: 130, showOverflowTooltip: true },
|
|
|
+ { prop: 'department', label: '所属部门', minWidth: 110 },
|
|
|
+ { prop: 'positionName', label: '岗位名称', minWidth: 120, showOverflowTooltip: true },
|
|
|
+ { prop: 'positionDuty', label: '岗位职责', minWidth: 180, slot: 'positionDuty' },
|
|
|
+ { prop: 'signDoc', label: '签署文件', minWidth: 110, slot: 'signDoc', align: 'center' },
|
|
|
+ { prop: 'signMethod', label: '签署方式', minWidth: 80, align: 'center' },
|
|
|
+ { prop: 'duration', label: '合同期限', minWidth: 200, slot: 'duration' },
|
|
|
+ { prop: 'status', label: '合同状态', minWidth: 90, slot: 'status', align: 'center' },
|
|
|
+ { prop: 'attachment', label: '附件', minWidth: 110, slot: 'attachment', align: 'center' },
|
|
|
+ { prop: 'action', label: '操作', width: 320, slot: 'action' },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ selectedEmployee() {
|
|
|
+ return this.employeeOptions.find((e) => e.employeeNo === this.createForm.employeeNo) || null;
|
|
|
+ },
|
|
|
+ // 仅做过滤（不再切片分页） — 分页交给 ele-pro-table
|
|
|
+ filteredRecords() {
|
|
|
+ const { contractNo, contractTypeShort, status, department } = this.filters;
|
|
|
+ const key = String(contractNo || '').trim().toLowerCase();
|
|
|
+ return this.rows.filter((row) => {
|
|
|
+ if (key && !String(row.contractNo || '').toLowerCase().includes(key)) return false;
|
|
|
+ if (contractTypeShort && row.contractTypeShort !== contractTypeShort) return false;
|
|
|
+ if (status && row.status !== status) return false;
|
|
|
+ if (department && row.department !== department) return false;
|
|
|
+ return true;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.load();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ nowStr() {
|
|
|
+ const d = new Date();
|
|
|
+ const pad = (n) => String(n).padStart(2, '0');
|
|
|
+ return d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate()) + ' ' + pad(d.getHours()) + ':' + pad(d.getMinutes());
|
|
|
+ },
|
|
|
+ statusClass(s) {
|
|
|
+ const map = {
|
|
|
+ '待签署': 'pending', '在签': 'signing', '试用期': 'trial',
|
|
|
+ '生效中': 'active', '即将到期': 'expiring',
|
|
|
+ '已到期': 'expired', '已终止': 'terminated', '已变更': 'changed', '已归档': 'archived'
|
|
|
+ };
|
|
|
+ return map[s] || 'pending';
|
|
|
+ },
|
|
|
+ load() {
|
|
|
+ try {
|
|
|
+ const cached = localStorage.getItem(STORE_KEY);
|
|
|
+ this.rows = cached ? JSON.parse(cached) : deepClone(contractSeeds);
|
|
|
+ if (!cached) this.persist();
|
|
|
+ } catch (e) {
|
|
|
+ this.rows = deepClone(contractSeeds);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ persist() { try { localStorage.setItem(STORE_KEY, JSON.stringify(this.rows)); } catch (e) {} },
|
|
|
+ applyFilters() { this.$refs.table && this.$refs.table.reload(); },
|
|
|
+ resetFilters() { this.filters = { contractNo: '', contractTypeShort: '', status: '', department: '' }; this.applyFilters(); },
|
|
|
+ reload() { this.load(); this.$message.success('已刷新'); },
|
|
|
+ viewFile(name) { if (name) this.$message.info('查看文件：' + name); else this.$message.warning('暂无文件'); },
|
|
|
+ viewDetail(row) {
|
|
|
+ this.detailRow = Object.assign({}, row);
|
|
|
+ this.detailVisible = true;
|
|
|
+ },
|
|
|
+ exportList() { this.$message.info('导出功能（原型暂未提供）'); },
|
|
|
+ openCreate() {
|
|
|
+ this.createForm = blankCreateForm();
|
|
|
+ this.createForm.contractNo = this.nextContractNo();
|
|
|
+ this.createVisible = true;
|
|
|
+ },
|
|
|
+ closeCreate(done) {
|
|
|
+ this.createVisible = false;
|
|
|
+ this.createForm = blankCreateForm();
|
|
|
+ if (typeof done === 'function') done();
|
|
|
+ },
|
|
|
+ nextContractNo() {
|
|
|
+ const max = this.rows
|
|
|
+ .map((r) => Number(String(r.contractNo || '').replace(/\D/g, '')) || 0)
|
|
|
+ .reduce((a, b) => Math.max(a, b), 100);
|
|
|
+ return 'HT' + String(max + 1).padStart(4, '0');
|
|
|
+ },
|
|
|
+ onEmployeeChange() {
|
|
|
+ const emp = this.selectedEmployee;
|
|
|
+ if (emp) {
|
|
|
+ this.createForm.legalEntity = emp.legalEntity;
|
|
|
+ this.createForm.department = emp.department;
|
|
|
+ this.createForm.positionName = emp.position;
|
|
|
+ this.createForm.manager = emp.manager;
|
|
|
+ this.createForm.salary = emp.salary;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ triggerCreateUpload() {
|
|
|
+ const inputs = this.$refs.createFileInput;
|
|
|
+ const arr = Array.isArray(inputs) ? inputs : [inputs];
|
|
|
+ const target = arr.find((i) => i);
|
|
|
+ if (target) target.click();
|
|
|
+ else {
|
|
|
+ const input = document.createElement('input');
|
|
|
+ input.type = 'file';
|
|
|
+ input.accept = '.pdf,.doc,.docx,.jpg,.png';
|
|
|
+ input.onchange = (e) => this.handleCreateUpload(e);
|
|
|
+ input.click();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleCreateUpload(event) {
|
|
|
+ const file = event.target.files && event.target.files[0];
|
|
|
+ if (!file) return;
|
|
|
+ if (file.size > 10 * 1024 * 1024) {
|
|
|
+ this.$message.error('文件大小不能超过 10MB');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.createForm.attachmentName = file.name;
|
|
|
+ this.createForm.attachment = file.name;
|
|
|
+ this.$message.success('已上传：' + file.name);
|
|
|
+ if (event.target) event.target.value = '';
|
|
|
+ },
|
|
|
+ saveCreateDraft() {
|
|
|
+ if (!this.createForm.employeeNo) return this.$message.warning('请选择员工');
|
|
|
+ if (!this.createForm.contractType) return this.$message.warning('请选择合同类型');
|
|
|
+ this.commitCreate('草稿');
|
|
|
+ },
|
|
|
+ submitCreate() {
|
|
|
+ const valid = this.$refs.createFormRef ? this.$refs.createFormRef.validate() : Promise.resolve(false);
|
|
|
+ valid.then((ok) => {
|
|
|
+ if (!ok) return;
|
|
|
+ if (!this.createForm.startDate) return this.$message.warning('请选择合同起始日期');
|
|
|
+ this.commitCreate('待签署');
|
|
|
+ }).catch(() => {});
|
|
|
+ },
|
|
|
+ commitCreate(status) {
|
|
|
+ const data = deepClone(this.createForm);
|
|
|
+ data.status = status;
|
|
|
+ data.id = Date.now();
|
|
|
+ data.createdAt = this.nowStr();
|
|
|
+ data.employeeName = this.selectedEmployee ? this.selectedEmployee.name : '';
|
|
|
+ data.contractTypeShort = data.contractType.includes('实习') ? '实习' : (data.contractType.includes('兼职') ? '兼职' : '全职');
|
|
|
+ data.positionDuty = '';
|
|
|
+ data.signDoc = '';
|
|
|
+ data.attachment = data.attachmentName;
|
|
|
+ data.level = this.selectedEmployee ? this.selectedEmployee.level : '';
|
|
|
+ data.reviewer = '';
|
|
|
+ data.remark = '';
|
|
|
+ this.rows.unshift(data);
|
|
|
+ this.persist();
|
|
|
+ this.applyFilters();
|
|
|
+ this.closeCreate();
|
|
|
+ this.$message.success(status === '草稿' ? '已保存为草稿' : '合同已发起，进入签署流程');
|
|
|
+ },
|
|
|
+ openChange(row) {
|
|
|
+ this.changeForm = blankChangeForm();
|
|
|
+ this.changeForm.employeeName = row.employeeName;
|
|
|
+ this.changeForm.employeeNo = row.employeeNo;
|
|
|
+ this.changeForm.legalEntity = row.legalEntity;
|
|
|
+ this.changeForm.contractNo = row.contractNo;
|
|
|
+ this.changeForm.contractType = row.contractType;
|
|
|
+ this.changeForm.original = { position: row.positionName, level: row.level, department: row.department, endDate: row.endDate, salary: row.salary };
|
|
|
+ this.changeForm.updated = { position: '技术主管', level: 'P6', department: row.department, endDate: row.endDate, salary: 22000 };
|
|
|
+ this.changeForm.newSalary = '22000';
|
|
|
+ this.changeForm.effectiveDate = '2026-09-01';
|
|
|
+ this.changeForm.changeReason = '因组织架构调整，岗位调整为技术主管';
|
|
|
+ this.changeDrawer = true;
|
|
|
+ },
|
|
|
+ closeChangeDrawer() { this.changeDrawer = false; this.changeForm = blankChangeForm(); },
|
|
|
+ async submitChange() {
|
|
|
+ const valid = await this.$refs.changeFormRef.validate().catch(() => false);
|
|
|
+ if (!valid) return;
|
|
|
+ const idx = this.rows.findIndex((r) => r.id === this.changeForm.id);
|
|
|
+ if (idx > -1) {
|
|
|
+ this.rows[idx].positionName = this.changeForm.updated.position;
|
|
|
+ this.rows[idx].level = this.changeForm.updated.level;
|
|
|
+ this.rows[idx].salary = Number(String(this.changeForm.newSalary).replace(/\D/g, '')) || this.rows[idx].salary;
|
|
|
+ this.rows[idx].status = '已变更';
|
|
|
+ this.persist();
|
|
|
+ this.applyFilters();
|
|
|
+ }
|
|
|
+ this.$message.success('变更已提交审批，审核通过后自动生效');
|
|
|
+ this.closeChangeDrawer();
|
|
|
+ },
|
|
|
+ handleRenew(row) { this.$prompt('请输入续签合同期限（年）', '续签合同', { inputValue: 3 }).then(({ value }) => { if (!value) return; const years = Number(value) || 3; const end = row.endDate ? new Date(row.endDate) : new Date(); if (!row.endDate) { end.setFullYear(end.getFullYear() + years); } else { end.setFullYear(end.getFullYear() + years); } const endStr = end.getFullYear() + '-' + String(end.getMonth() + 1).padStart(2, '0') + '-' + String(end.getDate()).padStart(2, '0'); row.endDate = endStr; row.status = '启用'; this.persist(); this.applyFilters(); this.$message.success('已续签至 ' + endStr); }).catch(() => {}); },
|
|
|
+ handleTerminate(row) { this.$prompt('请输入解除原因', '解除合同', { inputPlaceholder: '如：协商一致解除、严重违纪等' }).then(({ value }) => { if (value === undefined) return; row.status = '已终止'; row.remark = (row.remark ? row.remark + '；' : '') + '已解除：' + (value || '无'); this.persist(); this.applyFilters(); this.$message.success('合同已解除'); }).catch(() => {}); },
|
|
|
+ handleSign(row) { row.status = '启用'; this.persist(); this.applyFilters(); this.$message.success('合同已签订并启用'); },
|
|
|
+ handleArchive(row) { this.$confirm('确定将该合同归档吗？归档后只读', '归档确认', { type: 'info' }).then(() => { row.status = '已归档'; this.persist(); this.applyFilters(); this.$message.success('合同已归档'); }).catch(() => {}); },
|
|
|
+ triggerAttachUpload() {
|
|
|
+ const inputs = this.$refs.attachInput;
|
|
|
+ const arr = Array.isArray(inputs) ? inputs : [inputs];
|
|
|
+ const target = arr.find((i) => i);
|
|
|
+ if (target) target.click();
|
|
|
+ else {
|
|
|
+ const input = document.createElement('input');
|
|
|
+ input.type = 'file';
|
|
|
+ input.accept = '.pdf,.doc,.docx';
|
|
|
+ input.onchange = (e) => this.handleAttachUpload(e);
|
|
|
+ input.click();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleAttachUpload(event) {
|
|
|
+ const file = event.target.files && event.target.files[0];
|
|
|
+ if (!file) return;
|
|
|
+ if (file.size > 10 * 1024 * 1024) { this.$message.error('附件大小不能超过 10MB'); return; }
|
|
|
+ this.changeForm.attachments.push({
|
|
|
+ name: file.name,
|
|
|
+ size: (file.size / 1024).toFixed(0) + ' KB',
|
|
|
+ uploadedAt: this.nowStr(),
|
|
|
+ });
|
|
|
+ this.$message.success('已上传：' + file.name);
|
|
|
+ if (event.target) event.target.value = '';
|
|
|
+ },
|
|
|
+ openAttach(file) { this.$message.info('打开附件：' + file.name); },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss" src="../../styles/views/contractManagement/index.scss"></style>
|
