员工计价附加项++
This commit is contained in:
parent
260492fa0a
commit
4683a3de53
@ -33,6 +33,7 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
|
||||
monitor_operlog: () => import("@/views/monitor/operlog/index.vue"),
|
||||
mps_batch: () => import("@/views/mps/batch/index.vue"),
|
||||
"mps_detail-entry": () => import("@/views/mps/detail-entry/index.vue"),
|
||||
"mps_emp-add-items": () => import("@/views/mps/emp-add-items/index.vue"),
|
||||
"mps_manual-pricing": () => import("@/views/mps/manual-pricing/index.vue"),
|
||||
mps_market: () => import("@/views/mps/market/index.vue"),
|
||||
original_dianfei: () => import("@/views/original/dianfei/index.vue"),
|
||||
|
||||
@ -207,6 +207,15 @@ export const generatedRoutes: GeneratedRoute[] = [
|
||||
i18nKey: 'route.mps_detail-entry'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'mps_emp-add-items',
|
||||
path: '/mps/emp-add-items',
|
||||
component: 'view.mps_emp-add-items',
|
||||
meta: {
|
||||
title: 'mps_emp-add-items',
|
||||
i18nKey: 'route.mps_emp-add-items'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'mps_manual-pricing',
|
||||
path: '/mps/manual-pricing',
|
||||
|
||||
@ -187,6 +187,7 @@ const routeMap: RouteMap = {
|
||||
"mps": "/mps",
|
||||
"mps_batch": "/mps/batch",
|
||||
"mps_detail-entry": "/mps/detail-entry",
|
||||
"mps_emp-add-items": "/mps/emp-add-items",
|
||||
"mps_manual-pricing": "/mps/manual-pricing",
|
||||
"mps_market": "/mps/market",
|
||||
"original": "/original",
|
||||
|
||||
36
cds-fontend-2025.V1/src/service/api/mps/emp-add-items.ts
Normal file
36
cds-fontend-2025.V1/src/service/api/mps/emp-add-items.ts
Normal file
@ -0,0 +1,36 @@
|
||||
import { request } from '@/service/request';
|
||||
|
||||
/** 获取员工附加项列表 */
|
||||
export function fetchGetEmpAddItemsList (params?: Api.Mps.EmpAddItemsSearchParams) {
|
||||
return request<Api.Mps.EmpAddItemsList>({
|
||||
url: '/mps/empAddItems/list',
|
||||
method: 'get',
|
||||
params
|
||||
});
|
||||
}
|
||||
|
||||
/** 新增员工附加项 */
|
||||
export function fetchCreateEmpAddItems (data: Api.Mps.EmpAddItemsOperateParams) {
|
||||
return request<boolean>({
|
||||
url: '/mps/empAddItems',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
}
|
||||
|
||||
/** 修改员工附加项 */
|
||||
export function fetchUpdateEmpAddItems (data: Api.Mps.EmpAddItemsOperateParams) {
|
||||
return request<boolean>({
|
||||
url: '/mps/empAddItems',
|
||||
method: 'put',
|
||||
data
|
||||
});
|
||||
}
|
||||
|
||||
/** 批量删除员工附加项 */
|
||||
export function fetchBatchDeleteEmpAddItems (ids: CommonType.IdType[]) {
|
||||
return request<boolean>({
|
||||
url: `/mps/empAddItems/${ids.join(',')}`,
|
||||
method: 'delete'
|
||||
});
|
||||
}
|
||||
@ -15,65 +15,67 @@ declare namespace Api {
|
||||
/** detail entry */
|
||||
type DetailEntry = Common.CommonRecord<{
|
||||
/** 主键 */
|
||||
dataId: CommonType.IdType;
|
||||
dataId: CommonType.IdType;
|
||||
/** 业务类型id */
|
||||
subcategoryId: CommonType.IdType;
|
||||
subcategoryId: CommonType.IdType;
|
||||
/** 业务类型名称 */
|
||||
subcategoryName: string;
|
||||
subcategoryName: string;
|
||||
/** 营销人员名称 */
|
||||
yxName: string;
|
||||
yxName: string;
|
||||
/** 经办人员名称 */
|
||||
jbName: string;
|
||||
jbName: string;
|
||||
/** 营销人员营销号 */
|
||||
yxId: CommonType.IdType;
|
||||
yxId: CommonType.IdType;
|
||||
/** 经办人员营销号 */
|
||||
jbId: CommonType.IdType;
|
||||
jbId: CommonType.IdType;
|
||||
/** 数据日期 */
|
||||
date: string;
|
||||
date: string;
|
||||
/** 部门名称 */
|
||||
deptName: string;
|
||||
deptName: string;
|
||||
/** 部门id */
|
||||
deptId: CommonType.IdType;
|
||||
deptId: CommonType.IdType;
|
||||
/** 客户类型（1-个人，2-对公） */
|
||||
custType: string;
|
||||
custType: string;
|
||||
/** 客户身份证号 */
|
||||
custId: CommonType.IdType;
|
||||
custId: CommonType.IdType;
|
||||
/** 客户姓名 */
|
||||
custName: string;
|
||||
custName: string;
|
||||
/** 客户账号/卡号 */
|
||||
custAcctNo: string;
|
||||
custAcctNo: string;
|
||||
/** 客户联系电话 */
|
||||
custPhoneNo: string;
|
||||
custPhoneNo: string;
|
||||
/** 磁条卡更换登记id */
|
||||
magneticCardId: CommonType.IdType;
|
||||
/** 综合收单商户名 */
|
||||
acquiringName: string;
|
||||
magneticCardId: CommonType.IdType;
|
||||
magneticCardList: { oldCardNo: string; newCardNo: string }[];
|
||||
/** 综合收单商户名 */
|
||||
acquiringName: string;
|
||||
/** 综合收单商户号 */
|
||||
acquiringId: CommonType.IdType;
|
||||
acquiringId: CommonType.IdType;
|
||||
/** 网上支付开通渠道 */
|
||||
internetChannel: string;
|
||||
internetChannel: string[];
|
||||
/** 交警处罚决定书 */
|
||||
trafficId: CommonType.IdType;
|
||||
trafficId: CommonType.IdType;
|
||||
trafficList: { trafficNo: string; trafficAmt: number }[];
|
||||
/** 职工所属单位 */
|
||||
workplace: string;
|
||||
workplace: string;
|
||||
/** 公积金缴纳账户名称 */
|
||||
surplusAccountName: string;
|
||||
surplusAccountName: string;
|
||||
/** 取暖费户号 */
|
||||
heatingNo: string;
|
||||
heatingNo: string;
|
||||
/** 核对标志（0未核对 1核对通过 9核对失败） */
|
||||
checkFlag: string;
|
||||
checkFlag: string;
|
||||
/** 核对时间 */
|
||||
checkTime: string;
|
||||
checkTime: string;
|
||||
/** 核对人员（人工核对时） */
|
||||
checkUser: string;
|
||||
checkUser: string;
|
||||
/** 核对方式（0系统 1人工 2其他1 3其他2 4其他3） */
|
||||
checkType: string;
|
||||
checkType: string;
|
||||
/** 核对结果 */
|
||||
checkMsg: string;
|
||||
checkMsg: string;
|
||||
/** 租户编号 */
|
||||
tenantId: CommonType.IdType;
|
||||
tenantId: CommonType.IdType;
|
||||
/** 删除标志（0代表存在 1代表删除） */
|
||||
delFlag: string;
|
||||
delFlag: string;
|
||||
}>;
|
||||
|
||||
/** detail entry search params */
|
||||
@ -131,10 +133,12 @@ declare namespace Api {
|
||||
| 'custAcctNo'
|
||||
| 'custPhoneNo'
|
||||
| 'magneticCardId'
|
||||
| 'magneticCardList'
|
||||
| 'acquiringName'
|
||||
| 'acquiringId'
|
||||
| 'internetChannel'
|
||||
| 'trafficId'
|
||||
| 'trafficList'
|
||||
| 'workplace'
|
||||
| 'surplusAccountName'
|
||||
| 'heatingNo'
|
||||
|
||||
66
cds-fontend-2025.V1/src/typings/api/mps.emp-add-items.api.d.ts
vendored
Normal file
66
cds-fontend-2025.V1/src/typings/api/mps.emp-add-items.api.d.ts
vendored
Normal file
@ -0,0 +1,66 @@
|
||||
|
||||
/**
|
||||
* Namespace Api
|
||||
*
|
||||
* All backend api type
|
||||
*/
|
||||
declare namespace Api {
|
||||
|
||||
/**
|
||||
* namespace Mps
|
||||
*
|
||||
* backend api module: "Mps"
|
||||
*/
|
||||
namespace Mps {
|
||||
/** emp add items */
|
||||
type EmpAddItems = Common.CommonRecord<{
|
||||
/** ID */
|
||||
id: CommonType.IdType;
|
||||
/** 支行代码 */
|
||||
branchId: CommonType.IdType;
|
||||
/** 支行名称 */
|
||||
branchName: string;
|
||||
/** 员工姓名 */
|
||||
employeeName: string;
|
||||
/** 营销编号 */
|
||||
marketingCode: string;
|
||||
/** 附加项 */
|
||||
addItem: number;
|
||||
/** 记录月份 */
|
||||
recordMonth: string;
|
||||
/** 租户编号 */
|
||||
tenantId: CommonType.IdType;
|
||||
}>;
|
||||
|
||||
/** emp add items search params */
|
||||
type EmpAddItemsSearchParams = CommonType.RecordNullable<
|
||||
Pick<
|
||||
Api.Mps.EmpAddItems,
|
||||
| 'branchId'
|
||||
| 'branchName'
|
||||
| 'employeeName'
|
||||
| 'marketingCode'
|
||||
| 'addItem'
|
||||
| 'recordMonth'
|
||||
> &
|
||||
Api.Common.CommonSearchParams
|
||||
>;
|
||||
|
||||
/** emp add items operate params */
|
||||
type EmpAddItemsOperateParams = CommonType.RecordNullable<
|
||||
Pick<
|
||||
Api.Mps.EmpAddItems,
|
||||
| 'id'
|
||||
| 'branchId'
|
||||
| 'branchName'
|
||||
| 'employeeName'
|
||||
| 'marketingCode'
|
||||
| 'addItem'
|
||||
| 'recordMonth'
|
||||
>
|
||||
>;
|
||||
|
||||
/** emp add items list */
|
||||
type EmpAddItemsList = Api.Common.PaginatingQueryRecord<EmpAddItems>;
|
||||
}
|
||||
}
|
||||
@ -41,6 +41,7 @@ declare module "@elegant-router/types" {
|
||||
"mps": "/mps";
|
||||
"mps_batch": "/mps/batch";
|
||||
"mps_detail-entry": "/mps/detail-entry";
|
||||
"mps_emp-add-items": "/mps/emp-add-items";
|
||||
"mps_manual-pricing": "/mps/manual-pricing";
|
||||
"mps_market": "/mps/market";
|
||||
"original": "/original";
|
||||
@ -167,6 +168,7 @@ declare module "@elegant-router/types" {
|
||||
| "monitor_operlog"
|
||||
| "mps_batch"
|
||||
| "mps_detail-entry"
|
||||
| "mps_emp-add-items"
|
||||
| "mps_manual-pricing"
|
||||
| "mps_market"
|
||||
| "original_dianfei"
|
||||
|
||||
@ -132,8 +132,8 @@ const {
|
||||
render: (row) => {
|
||||
if (!row.pricingRule) return '';
|
||||
const suffixMap = {
|
||||
'BIZ006': ' * 交易金额',
|
||||
'BIZ028': ' * 交易金额',
|
||||
'BIZ030': ' * 交易金额',
|
||||
'BIZ031': ' * 交易金额',
|
||||
'default': ' 元/条'
|
||||
};
|
||||
|
||||
@ -242,7 +242,7 @@ async function getTreeData() {
|
||||
const { data: tree, error } = await fetchGetCategoryOption();
|
||||
if (!error) {
|
||||
categoryTreeData.value = tree;
|
||||
console.log(tree);
|
||||
// console.log(tree);
|
||||
}
|
||||
endTreeLoading();
|
||||
}
|
||||
@ -277,7 +277,7 @@ const { drawerVisible, operateType, editingData, handleAdd, handleEdit, checkedR
|
||||
useTableOperate(data, getData);
|
||||
|
||||
function handleClickCategory(keys: string[]) {
|
||||
console.log('handleClickCategory', keys);
|
||||
// console.log('handleClickCategory', keys);
|
||||
searchParams.categoryId = keys.length ? keys[0] : searchParams.categoryId;
|
||||
checkedRowKeys.value = [];
|
||||
getDataByPage();
|
||||
|
||||
@ -61,17 +61,19 @@ function createDefaultModel(): Model {
|
||||
custAcctNo: '',
|
||||
custPhoneNo: '',
|
||||
magneticCardId: undefined,
|
||||
magneticCardList: [],
|
||||
acquiringName: '',
|
||||
acquiringId: '',
|
||||
internetChannel: '',
|
||||
internetChannel: [],
|
||||
trafficId: undefined,
|
||||
trafficList: [],
|
||||
workplace: '',
|
||||
surplusAccountName: '',
|
||||
heatingNo: '',
|
||||
checkFlag: '',
|
||||
checkTime: undefined,
|
||||
checkFlag: '0',
|
||||
checkTime: null,
|
||||
checkUser: '',
|
||||
checkType: '',
|
||||
checkType: '0',
|
||||
checkMsg: '',
|
||||
};
|
||||
}
|
||||
|
||||
289
cds-fontend-2025.V1/src/views/mps/emp-add-items/index.vue
Normal file
289
cds-fontend-2025.V1/src/views/mps/emp-add-items/index.vue
Normal file
@ -0,0 +1,289 @@
|
||||
<script setup lang="tsx">
|
||||
import { NDivider } from 'naive-ui';
|
||||
import { fetchBatchDeleteEmpAddItems, fetchGetEmpAddItemsList } from '@/service/api/mps/emp-add-items';
|
||||
import { useAppStore } from '@/store/modules/app';
|
||||
import { useAuth } from '@/hooks/business/auth';
|
||||
import { useDownload } from '@/hooks/business/download';
|
||||
import { useTable, useTableOperate } from '@/hooks/common/table';
|
||||
import { $t } from '@/locales';
|
||||
import ButtonIcon from '@/components/custom/button-icon.vue';
|
||||
import EmpAddItemsOperateDrawer from './modules/emp-add-items-operate-drawer.vue';
|
||||
import EmpAddItemsSearch from './modules/emp-add-items-search.vue';
|
||||
import {computed, ref, watch} from "vue";
|
||||
import {useBoolean} from "~/packages/hooks";
|
||||
import EmpAddItemsImportModal from './modules/emp-add-items-import-modal.vue';
|
||||
defineOptions({
|
||||
name: 'EmpAddItemsList'
|
||||
});
|
||||
|
||||
const appStore = useAppStore();
|
||||
const { download } = useDownload();
|
||||
const { hasAuth } = useAuth();
|
||||
const { bool: importVisible, setTrue: openImportModal } = useBoolean();
|
||||
|
||||
const {
|
||||
columns,
|
||||
columnChecks,
|
||||
data,
|
||||
getData,
|
||||
getDataByPage,
|
||||
loading,
|
||||
mobilePagination,
|
||||
searchParams,
|
||||
resetSearchParams
|
||||
} = useTable({
|
||||
apiFn: fetchGetEmpAddItemsList,
|
||||
apiParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
// if you want to use the searchParams in Form, you need to define the following properties, and the value is null
|
||||
// the value can not be undefined, otherwise the property in Form will not be reactive
|
||||
branchId: null,
|
||||
branchName: null,
|
||||
employeeName: null,
|
||||
marketingCode: null,
|
||||
addItem: null,
|
||||
recordMonth: null,
|
||||
params: {}
|
||||
},
|
||||
columns: () => [
|
||||
{
|
||||
type: 'selection',
|
||||
align: 'center',
|
||||
width: 48
|
||||
},
|
||||
{
|
||||
key: 'index',
|
||||
title: $t('common.index'),
|
||||
align: 'center',
|
||||
width: 64,
|
||||
resizable: true
|
||||
},
|
||||
// {
|
||||
// key: 'id',
|
||||
// title: 'ID',
|
||||
// align: 'center',
|
||||
// minWidth: 120,
|
||||
// ellipsis: true,
|
||||
// resizable: true
|
||||
// },
|
||||
// {
|
||||
// key: 'branchId',
|
||||
// title: '支行代码',
|
||||
// align: 'center',
|
||||
// minWidth: 120,
|
||||
// ellipsis: true,
|
||||
// resizable: true
|
||||
// },
|
||||
{
|
||||
key: 'branchName',
|
||||
title: '支行名称',
|
||||
align: 'center',
|
||||
minWidth: 120,
|
||||
ellipsis: true,
|
||||
resizable: true
|
||||
},
|
||||
{
|
||||
key: 'employeeName',
|
||||
title: '员工姓名',
|
||||
align: 'center',
|
||||
minWidth: 120,
|
||||
ellipsis: true,
|
||||
resizable: true
|
||||
},
|
||||
{
|
||||
key: 'marketingCode',
|
||||
title: '营销编号',
|
||||
align: 'center',
|
||||
minWidth: 120,
|
||||
ellipsis: true,
|
||||
resizable: true
|
||||
},
|
||||
{
|
||||
key: 'addItem',
|
||||
title: '附加项',
|
||||
align: 'center',
|
||||
minWidth: 120,
|
||||
ellipsis: true,
|
||||
resizable: true
|
||||
},
|
||||
{
|
||||
key: 'recordMonth',
|
||||
title: '记录月份',
|
||||
align: 'center',
|
||||
minWidth: 120,
|
||||
ellipsis: true,
|
||||
resizable: true
|
||||
},
|
||||
{
|
||||
key: 'operate',
|
||||
title: $t('common.operate'),
|
||||
fixed: 'right',
|
||||
width: 130,
|
||||
render: row => {
|
||||
const divider = () => {
|
||||
if (!hasAuth('mps:empAddItems:edit') || !hasAuth('mps:empAddItems:remove')) {
|
||||
return null;
|
||||
}
|
||||
return <NDivider vertical />;
|
||||
};
|
||||
|
||||
const editBtn = () => {
|
||||
if (!hasAuth('mps:empAddItems:edit')) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<ButtonIcon
|
||||
text
|
||||
type="primary"
|
||||
local-icon="drive-file-rename-outline-outline"
|
||||
tooltipContent={$t('common.edit')}
|
||||
onClick={() => edit(row.id!)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const deleteBtn = () => {
|
||||
if (!hasAuth('mps:empAddItems:remove')) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<ButtonIcon
|
||||
text
|
||||
type="error"
|
||||
local-icon="delete-outline"
|
||||
tooltipContent={$t('common.delete')}
|
||||
popconfirmContent={$t('common.confirmDelete')}
|
||||
onPositiveClick={() => handleDelete(row.id!)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="flex-center gap-8px">
|
||||
{editBtn()}
|
||||
{divider()}
|
||||
{deleteBtn()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
const scrollX = ref(0);
|
||||
// 计算总宽度函数
|
||||
const calculateTotalWidth = () => {
|
||||
let totalWidth = 0;
|
||||
const visibleColumns = columns.value;
|
||||
for (let i = 0; i < visibleColumns.length; i++) {
|
||||
const column = visibleColumns[i];
|
||||
// 获取列的实际渲染宽度
|
||||
// 注意：调整大小时会更新 column.width
|
||||
let width = column.width;
|
||||
// 如果没有显式宽度，则使用minWidth或默认值
|
||||
if (!width) {
|
||||
width = column.minWidth || 120;
|
||||
}
|
||||
// 转换为数字类型
|
||||
width = typeof width === 'string' ? parseInt(width) : width;
|
||||
totalWidth += width;
|
||||
}
|
||||
|
||||
// 添加额外的50px余量防止边缘裁剪
|
||||
return totalWidth + 50;
|
||||
};
|
||||
|
||||
// 监听列变化并计算宽度
|
||||
watch(columns, (newColumns) => {
|
||||
scrollX.value = calculateTotalWidth();
|
||||
}, { deep: true });
|
||||
|
||||
|
||||
const { drawerVisible, operateType, editingData, handleAdd, handleEdit, checkedRowKeys, onBatchDeleted, onDeleted } =
|
||||
useTableOperate(data, getData);
|
||||
|
||||
async function handleBatchDelete() {
|
||||
// request
|
||||
const { error } = await fetchBatchDeleteEmpAddItems(checkedRowKeys.value);
|
||||
if (error) return;
|
||||
onBatchDeleted();
|
||||
}
|
||||
|
||||
async function handleDelete(id: CommonType.IdType) {
|
||||
// request
|
||||
const { error } = await fetchBatchDeleteEmpAddItems([id]);
|
||||
if (error) return;
|
||||
onDeleted();
|
||||
}
|
||||
|
||||
function edit(id: CommonType.IdType) {
|
||||
handleEdit('id', id);
|
||||
}
|
||||
|
||||
function handleImport() {
|
||||
openImportModal();
|
||||
}
|
||||
|
||||
function handleExport() {
|
||||
download('/mps/empAddItems/export', searchParams, `员工附加项_${new Date().getTime()}.xlsx`);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
|
||||
<EmpAddItemsSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage" />
|
||||
<NCard title="员工附加项列表" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
|
||||
<template #header-extra>
|
||||
<TableHeaderOperation
|
||||
v-model:columns="columnChecks"
|
||||
:disabled-delete="checkedRowKeys.length === 0"
|
||||
:loading="loading"
|
||||
:show-add="hasAuth('mps:empAddItems:add')"
|
||||
:show-delete="hasAuth('mps:empAddItems:remove')"
|
||||
:show-export="hasAuth('mps:empAddItems:export')"
|
||||
@add="handleAdd"
|
||||
@delete="handleBatchDelete"
|
||||
@export="handleExport"
|
||||
@refresh="getData"
|
||||
>
|
||||
<template #after>
|
||||
<NButton v-if="hasAuth('mps:privateEbankNew:export')" size="small" ghost @click="handleImport">
|
||||
<template #icon>
|
||||
<SvgIcon local-icon="upload-rounded"/>
|
||||
</template>
|
||||
{{ $t('common.import') }}
|
||||
</NButton>
|
||||
</template>
|
||||
</TableHeaderOperation>
|
||||
</template>
|
||||
|
||||
<!--scroll-x : 所有表格列宽度之和(包含操作列)+操作列宽度-->
|
||||
<NDataTable
|
||||
v-model:checked-row-keys="checkedRowKeys"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
size="small"
|
||||
:flex-height="!appStore.isMobile"
|
||||
:scroll-x="scrollX"
|
||||
:loading="loading"
|
||||
remote
|
||||
:row-key="row => row.id"
|
||||
:pagination="mobilePagination"
|
||||
class="sm:h-full"
|
||||
@update-resize-widths="scrollX = calculateTotalWidth()"
|
||||
/>
|
||||
|
||||
<EmpAddItemsImportModal v-model:visible="importVisible" @submitted="getDataByPage"/>
|
||||
|
||||
<EmpAddItemsOperateDrawer
|
||||
v-model:visible="drawerVisible"
|
||||
:operate-type="operateType"
|
||||
:row-data="editingData"
|
||||
@submitted="getDataByPage"
|
||||
/>
|
||||
</NCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@ -0,0 +1,162 @@
|
||||
[[[
|
||||
<script setup lang="ts">
|
||||
import { h, ref, watch } from 'vue';
|
||||
import type { UploadFileInfo } from 'naive-ui';
|
||||
import { getToken } from '@/store/modules/auth/shared';
|
||||
import { useDownload } from '@/hooks/business/download';
|
||||
import { getServiceBaseURL } from '@/utils/service';
|
||||
import type FileUpload from '@/components/custom/file-upload.vue';
|
||||
import { $t } from '@/locales';
|
||||
|
||||
defineOptions({
|
||||
name: 'EmpAddItemsImportModal'
|
||||
});
|
||||
|
||||
interface Emits {
|
||||
(e: 'submitted'): void;
|
||||
}
|
||||
|
||||
const { download } = useDownload();
|
||||
|
||||
const { baseURL } = getServiceBaseURL(import.meta.env);
|
||||
|
||||
const headers: Record<string, string> = {
|
||||
Authorization: `Bearer ${ getToken() }`,
|
||||
clientid: import.meta.env.VITE_APP_CLIENT_ID!
|
||||
};
|
||||
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
const uploadRef = ref<typeof FileUpload>();
|
||||
const message = ref<string>('');
|
||||
const success = ref<boolean>(false);
|
||||
|
||||
const visible = defineModel<boolean>('visible', {
|
||||
default: false
|
||||
});
|
||||
|
||||
const data = ref<Record<string, any>>({
|
||||
updateSupport: false
|
||||
});
|
||||
|
||||
const fileList = ref<UploadFileInfo[]>([]);
|
||||
|
||||
function closeDrawer() {
|
||||
visible.value = false;
|
||||
if (success.value) {
|
||||
emit('submitted');
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
fileList.value.forEach(item => {
|
||||
item.status = 'pending';
|
||||
});
|
||||
uploadRef.value?.submit();
|
||||
}
|
||||
|
||||
function isErrorState(xhr: XMLHttpRequest) {
|
||||
const responseText = xhr?.responseText;
|
||||
const response = JSON.parse(responseText);
|
||||
return response.code !== 200;
|
||||
}
|
||||
|
||||
function handleFinish(options: { file: UploadFileInfo; event?: ProgressEvent }) {
|
||||
const { file, event } = options;
|
||||
// @ts-expect-error Ignore type errors
|
||||
const responseText = event?.target?.responseText;
|
||||
const response = JSON.parse(responseText);
|
||||
message.value = response.msg;
|
||||
window.$message?.success($t('common.importSuccess'));
|
||||
success.value = true;
|
||||
return file;
|
||||
}
|
||||
|
||||
function handleError(options: { file: UploadFileInfo; event?: ProgressEvent }) {
|
||||
const { event } = options;
|
||||
// @ts-expect-error Ignore type errors
|
||||
const responseText = event?.target?.responseText;
|
||||
const msg = JSON.parse(responseText).msg;
|
||||
message.value = msg;
|
||||
window.$message?.error(() => h('div', { innerHTML: msg || $t('common.importFail') }));
|
||||
success.value = false;
|
||||
}
|
||||
|
||||
function handleDownloadTemplate() {
|
||||
download(
|
||||
'/mps/empAddItems/importTemplate',
|
||||
{},
|
||||
`${ $t('mps.common') }_${ $t('common.importTemplate') }_${ new Date().getTime() }.xlsx`
|
||||
);
|
||||
closeDrawer();
|
||||
}
|
||||
|
||||
watch(visible, () => {
|
||||
if (visible.value) {
|
||||
fileList.value = [];
|
||||
success.value = false;
|
||||
message.value = '';
|
||||
}
|
||||
} );
|
||||
</script>
|
||||
]]]
|
||||
|
||||
<template>
|
||||
<NModal
|
||||
v-model:show="visible"
|
||||
:title="$t('common.import')"
|
||||
preset="card"
|
||||
:bordered="false"
|
||||
display-directive="show"
|
||||
class="max-w-90% w-600px"
|
||||
@close="closeDrawer"
|
||||
>
|
||||
<NUpload
|
||||
ref="uploadRef"
|
||||
v-model:file-list="fileList"
|
||||
:action="`${baseURL}/mps/empAddItems/importData`"
|
||||
:headers="headers"
|
||||
:data="data"
|
||||
:max="1"
|
||||
:file-size="50"
|
||||
accept=".xls,.xlsx"
|
||||
:multiple="false"
|
||||
directory-dnd
|
||||
:default-upload="false"
|
||||
list-type="text"
|
||||
:is-error-state="isErrorState"
|
||||
@finish="handleFinish"
|
||||
@error="handleError"
|
||||
>
|
||||
<NUploadDragger>
|
||||
<div class="mb-12px flex-center">
|
||||
<SvgIcon local-icon="unarchive-outline" class="text-58px color-#d8d8db dark:color-#a1a1a2" />
|
||||
</div>
|
||||
<NText class="text-16px">{{ $t('common.importTip') }}</NText>
|
||||
<NP depth="3" class="mt-8px text-center">
|
||||
{{ $t('common.importSize') }}
|
||||
<b class="text-red-500">50MB</b>
|
||||
{{ $t('common.importFormat') }}
|
||||
<b class="text-red-500">xls/xlsx</b>
|
||||
{{ $t('common.importEnd') }}
|
||||
</NP>
|
||||
</NUploadDragger>
|
||||
</NUpload>
|
||||
<div class="flex-center">
|
||||
<NCheckbox v-model="data.updateSupport">{{ $t('common.updateExisting') }}</NCheckbox>
|
||||
</div>
|
||||
<NAlert v-if="message" :title="$t('common.importResult')" :type="success ? 'success' : 'error'" :bordered="false">
|
||||
<template #default>
|
||||
<div v-html="message"></div>
|
||||
</template>
|
||||
</NAlert>
|
||||
<template #footer>
|
||||
<NSpace justify="end" :size="16">
|
||||
<NButton @click="handleDownloadTemplate">{{ $t('common.downloadTemplate') }}</NButton>
|
||||
<NButton type="primary" @click="handleSubmit">{{ $t('common.import') }}</NButton>
|
||||
</NSpace>
|
||||
</template>
|
||||
</NModal>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@ -0,0 +1,252 @@
|
||||
<script setup lang="ts">
|
||||
import {computed, onMounted, reactive, ref, watch} from 'vue';
|
||||
import { fetchCreateEmpAddItems, fetchUpdateEmpAddItems } from '@/service/api/mps/emp-add-items';
|
||||
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
|
||||
import { $t } from '@/locales';
|
||||
import {fetchGetDeptSelect, fetchGetDeptUserList, fetchGetMuUserSelect} from "@/service/api/system";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
defineOptions({
|
||||
name: 'EmpAddItemsOperateDrawer'
|
||||
});
|
||||
|
||||
interface Props {
|
||||
/** the type of operation */
|
||||
operateType: NaiveUI.TableOperateType;
|
||||
/** the edit row data */
|
||||
rowData?: Api.Mps.EmpAddItems | null;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
interface Emits {
|
||||
(e: 'submitted'): void;
|
||||
}
|
||||
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
const visible = defineModel<boolean>('visible', {
|
||||
default: false
|
||||
});
|
||||
|
||||
|
||||
const { formRef, validate, restoreValidation } = useNaiveForm();
|
||||
const { createRequiredRule } = useFormRules();
|
||||
|
||||
const title = computed(() => {
|
||||
const titles: Record<NaiveUI.TableOperateType, string> = {
|
||||
add: '新增员工附加项',
|
||||
edit: '编辑员工附加项'
|
||||
};
|
||||
return titles[props.operateType];
|
||||
});
|
||||
|
||||
type Model = Api.Mps.EmpAddItemsOperateParams;
|
||||
|
||||
const model: Model = reactive(createDefaultModel());
|
||||
|
||||
function createDefaultModel(): Model {
|
||||
return {
|
||||
branchId: 0,
|
||||
branchName: '',
|
||||
employeeName: '',
|
||||
marketingCode: '',
|
||||
addItem: 0,
|
||||
recordMonth: dayjs().subtract(1, 'month').startOf('month').valueOf() ,
|
||||
};
|
||||
}
|
||||
|
||||
type RuleKey = Extract<
|
||||
keyof Model,
|
||||
| 'branchId'
|
||||
| 'branchName'
|
||||
| 'employeeName'
|
||||
| 'marketingCode'
|
||||
| 'addItem'
|
||||
| 'recordMonth'
|
||||
| 'tenantId'
|
||||
| 'createDept'
|
||||
| 'createBy'
|
||||
| 'createTime'
|
||||
| 'updateBy'
|
||||
| 'updateTime'
|
||||
>;
|
||||
|
||||
const rules: Record<RuleKey, App.Global.FormRule> = {
|
||||
branchId: createRequiredRule('支行代码不能为空'),
|
||||
branchName: createRequiredRule('支行名称不能为空'),
|
||||
employeeName: createRequiredRule('员工姓名不能为空'),
|
||||
marketingCode: createRequiredRule('营销编号不能为空'),
|
||||
addItem: createRequiredRule('附加项不能为空'),
|
||||
recordMonth: createRequiredRule('记录月份不能为空'),
|
||||
tenantId: createRequiredRule('租户编号不能为空'),
|
||||
createDept: createRequiredRule('创建部门不能为空'),
|
||||
createBy: createRequiredRule('创建者不能为空'),
|
||||
createTime: createRequiredRule('创建时间不能为空'),
|
||||
updateBy: createRequiredRule('更新者不能为空'),
|
||||
updateTime: createRequiredRule('更新时间不能为空')
|
||||
};
|
||||
|
||||
function handleUpdateModelWhenEdit() {
|
||||
if (props.operateType === 'add') {
|
||||
Object.assign(model, createDefaultModel());
|
||||
return;
|
||||
}
|
||||
|
||||
if (props.operateType === 'edit' && props.rowData) {
|
||||
Object.assign(model, props.rowData);
|
||||
}
|
||||
}
|
||||
|
||||
function closeDrawer() {
|
||||
visible.value = false;
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
await validate();
|
||||
|
||||
const { id, branchId, branchName, employeeName, marketingCode, addItem, recordMonth } = model;
|
||||
|
||||
// request
|
||||
if (props.operateType === 'add') {
|
||||
const { error } = await fetchCreateEmpAddItems({ branchId, branchName, employeeName, marketingCode, addItem, recordMonth });
|
||||
if (error) return;
|
||||
}
|
||||
|
||||
if (props.operateType === 'edit') {
|
||||
const { error } = await fetchUpdateEmpAddItems({ id, branchId, branchName, employeeName, marketingCode, addItem, recordMonth });
|
||||
if (error) return;
|
||||
}
|
||||
|
||||
window.$message?.success($t('common.updateSuccess'));
|
||||
closeDrawer();
|
||||
emit('submitted');
|
||||
}
|
||||
|
||||
watch(visible, () => {
|
||||
if (visible.value) {
|
||||
handleUpdateModelWhenEdit();
|
||||
restoreValidation();
|
||||
}
|
||||
});
|
||||
|
||||
watch(model,()=>{
|
||||
if(model.branchId){
|
||||
getoperatorIdOptions();
|
||||
}
|
||||
})
|
||||
|
||||
const operatorIdOptions = ref<CommonType.Option<CommonType.IdType>[]>([]);
|
||||
const deptIdOptions = ref<CommonType.Option<CommonType.IdType>[]>([]);
|
||||
onMounted(() => {
|
||||
getoperatorIdOptions();
|
||||
getDeptIdOptions()
|
||||
});
|
||||
|
||||
//获取部门列表
|
||||
async function getDeptIdOptions(){
|
||||
|
||||
const { error, data } = await fetchGetDeptSelect();
|
||||
if (!error) {
|
||||
deptIdOptions.value = data.map(item => ({
|
||||
label: item.deptName,
|
||||
value: item.deptId
|
||||
}));
|
||||
}
|
||||
}
|
||||
function handleDeptUpdate(value: string, option: CommonType.Option<CommonType.IdType>) {
|
||||
model.branchId = value;
|
||||
model.branchName = option.label;
|
||||
}
|
||||
async function getoperatorIdOptions() {
|
||||
const { error, data } = await fetchGetDeptUserList(<string | number>model.branchId);
|
||||
|
||||
if (!error) {
|
||||
operatorIdOptions.value = data.map(item => ({
|
||||
label: item.nickName,
|
||||
value: item.mktNo
|
||||
}));
|
||||
}
|
||||
}
|
||||
function handleYxNameUpdate(value: string, option: CommonType.Option<CommonType.IdType>) {
|
||||
model.marketingCode = value;
|
||||
model.employeeName = option.label;
|
||||
}
|
||||
function disablePreviousDate(ts: number) {
|
||||
// return ts < Date.now()
|
||||
// const currentMonthStart = new Date(new Date().getFullYear(), new Date().getMonth(), 1).getTime()
|
||||
// const prevMonthStart = new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1).getTime()
|
||||
//
|
||||
// // 只允许选择当前月或上个月
|
||||
// return ts !== currentMonthStart && ts !== prevMonthStart
|
||||
const prevMonthStart = dayjs().subtract(1, 'month').startOf('month')
|
||||
// 禁用所有早于上个月1号的日期
|
||||
return ts < prevMonthStart.valueOf()
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NDrawer v-model:show="visible" :title="title" display-directive="show" :width="800" class="max-w-90%">
|
||||
<NDrawerContent :title="title" :native-scrollbar="false" closable>
|
||||
<NForm ref="formRef" :model="model" :rules="rules">
|
||||
<!-- <NFormItem label="支行代码" path="branchId">-->
|
||||
<!-- <NInput v-model:value="model.branchId" placeholder="请输入支行代码" readonly/>-->
|
||||
<!-- </NFormItem>-->
|
||||
<NFormItem label="支行名称" path="branchName">
|
||||
<NSelect
|
||||
v-model:value="model.branchName"
|
||||
filterable
|
||||
placeholder="选择支行"
|
||||
:options="deptIdOptions"
|
||||
clearable
|
||||
@update:value="handleDeptUpdate"
|
||||
/>
|
||||
</NFormItem>
|
||||
<!-- <NGridItem :span="12">-->
|
||||
<NFormItem label="员工姓名" path="employeeName">
|
||||
<NSelect
|
||||
v-model:value="model.employeeName"
|
||||
filterable
|
||||
placeholder="选择营销人员"
|
||||
:options="operatorIdOptions"
|
||||
clearable
|
||||
@update:value="handleYxNameUpdate"
|
||||
/>
|
||||
</NFormItem>
|
||||
<!-- </NGridItem>-->
|
||||
|
||||
<NFormItem label="营销编号" path="marketingCode">
|
||||
<NInput v-model:value="model.marketingCode" placeholder="请输入营销编号" disabled />
|
||||
</NFormItem>
|
||||
|
||||
<NFormItem label="附加项" path="addItem">
|
||||
<NInput-number
|
||||
v-model:value="model.addItem"
|
||||
|
||||
:precision="0"
|
||||
step="1"
|
||||
placeholder="请输入附加项"
|
||||
/>
|
||||
</NFormItem>
|
||||
<NFormItem label="记录月份" path="recordMonth">
|
||||
<!-- <NInput v-model:value="model.recordMonth" placeholder="请输入记录月份" />-->
|
||||
<NDatePicker
|
||||
v-model:value="model.recordMonth"
|
||||
type="month"
|
||||
placeholder="请输入选择月份"
|
||||
:is-date-disabled="disablePreviousDate"
|
||||
/>
|
||||
</NFormItem>
|
||||
</NForm>
|
||||
<template #footer>
|
||||
<NSpace :size="16">
|
||||
<NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
|
||||
<NButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</NButton>
|
||||
</NSpace>
|
||||
</template>
|
||||
</NDrawerContent>
|
||||
</NDrawer>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@ -0,0 +1,82 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useNaiveForm } from '@/hooks/common/form';
|
||||
import { $t } from '@/locales';
|
||||
|
||||
defineOptions({
|
||||
name: 'EmpAddItemsSearch'
|
||||
});
|
||||
|
||||
interface Emits {
|
||||
(e: 'reset'): void;
|
||||
(e: 'search'): void;
|
||||
}
|
||||
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
const { formRef, validate, restoreValidation } = useNaiveForm();
|
||||
|
||||
|
||||
const model = defineModel<Api.Mps.EmpAddItemsSearchParams>('model', { required: true });
|
||||
|
||||
|
||||
async function reset() {
|
||||
Object.assign(model.value.params!, {});
|
||||
await restoreValidation();
|
||||
emit('reset');
|
||||
}
|
||||
|
||||
async function search() {
|
||||
await validate();
|
||||
emit('search');
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NCard :bordered="false" size="small" class="card-wrapper">
|
||||
<NCollapse>
|
||||
<NCollapseItem :title="$t('common.search')" name="user-search">
|
||||
<NForm ref="formRef" :model="model" label-placement="left" :label-width="80">
|
||||
<NGrid responsive="screen" item-responsive>
|
||||
<!-- <NFormItemGi span="24 s:12 m:6" label="支行代码" path="branchId" class="pr-24px">-->
|
||||
<!-- <NInput v-model:value="model.branchId" placeholder="请输入支行代码" />-->
|
||||
<!-- </NFormItemGi>-->
|
||||
<!-- <NFormItemGi span="24 s:12 m:6" label="支行名称" path="branchName" class="pr-24px">-->
|
||||
<!-- <NInput v-model:value="model.branchName" placeholder="请输入支行名称" />-->
|
||||
<!-- </NFormItemGi>-->
|
||||
<NFormItemGi span="24 s:12 m:6" label="员工姓名" path="employeeName" class="pr-24px">
|
||||
<NInput v-model:value="model.employeeName" placeholder="请输入员工姓名" />
|
||||
</NFormItemGi>
|
||||
<!-- <NFormItemGi span="24 s:12 m:6" label="营销编号" path="marketingCode" class="pr-24px">-->
|
||||
<!-- <NInput v-model:value="model.marketingCode" placeholder="请输入营销编号" />-->
|
||||
<!-- </NFormItemGi>-->
|
||||
<!-- <NFormItemGi span="24 s:12 m:6" label="附加项" path="addItem" class="pr-24px">-->
|
||||
<!-- <NInput v-model:value="model.addItem" placeholder="请输入附加项" />-->
|
||||
<!-- </NFormItemGi>-->
|
||||
<NFormItemGi span="24 s:12 m:6" label="记录月份" path="recordMonth" class="pr-24px">
|
||||
<NInput v-model:value="model.recordMonth" placeholder="请输入记录月份" />
|
||||
</NFormItemGi>
|
||||
<NFormItemGi span="24" class="pr-24px">
|
||||
<NSpace class="w-full" justify="end">
|
||||
<NButton @click="reset">
|
||||
<template #icon>
|
||||
<SvgIcon local-icon="round-refresh"/>
|
||||
</template>
|
||||
{{ $t('common.reset') }}
|
||||
</NButton>
|
||||
<NButton type="primary" ghost @click="search">
|
||||
<template #icon>
|
||||
<SvgIcon local-icon="round-search"/>
|
||||
</template>
|
||||
{{ $t('common.search') }}
|
||||
</NButton>
|
||||
</NSpace>
|
||||
</NFormItemGi>
|
||||
</NGrid>
|
||||
</NForm>
|
||||
</NCollapseItem>
|
||||
</NCollapse>
|
||||
</NCard>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@ -18,7 +18,7 @@ import {useBoolean,useLoading} from "~/packages/hooks";
|
||||
|
||||
// 在组件的setup或适当位置
|
||||
const { options: mps_cust_type } = useDict('mps_cust_type');
|
||||
console.log('mps_check_status dictionary:', mps_cust_type);
|
||||
// console.log('mps_check_status dictionary:', mps_cust_type);
|
||||
defineOptions({
|
||||
name: 'MarketList'
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user