|
|
@@ -1,15 +1,73 @@
|
|
|
<script setup lang="tsx">
|
|
|
-import { NButton, NPopconfirm } from 'naive-ui';
|
|
|
-import type { InternalRowData } from 'naive-ui/es/data-table/src/interface';
|
|
|
-import { fetchGetUserList } from '@/service/api/government/user-list';
|
|
|
+import { ref } from 'vue';
|
|
|
+import { NButton, NPopconfirm, NSwitch } from 'naive-ui';
|
|
|
+import {
|
|
|
+ fetchAddUser,
|
|
|
+ fetchDeleteUser,
|
|
|
+ fetchEditUser,
|
|
|
+ fetchExportUser,
|
|
|
+ fetchGetImportRecordList,
|
|
|
+ fetchGetUserList
|
|
|
+} from '@/service/api/government/user-list';
|
|
|
+import { fetchGetAllChannelList } from '@/service/api/goods/store-goods';
|
|
|
import { useTable } from '@/components/zt/Table/hooks/useTable';
|
|
|
import { useModalFrom } from '@/components/zt/ModalForm/hooks/useModalForm';
|
|
|
-const columns: NaiveUI.TableColumn<InternalRowData>[] = [
|
|
|
+import type { ModalMethods } from '@/components/zt/Modal/types';
|
|
|
+import { useModal } from '@/components/zt/Modal/hooks/useModal';
|
|
|
+const importTemplateRef = ref<ModalMethods>();
|
|
|
+const columns: NaiveUI.TableColumn<Api.government.userList>[] = [
|
|
|
{
|
|
|
- key: 'name',
|
|
|
- title: '标签名称',
|
|
|
+ key: 'channelName',
|
|
|
+ title: '所属企业',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'realName',
|
|
|
+ title: '员工姓名',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'userMobile',
|
|
|
+ title: '手机号码',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'total',
|
|
|
+ title: '总充值积分',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'available',
|
|
|
+ title: '当前可用积分',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'expired',
|
|
|
+ title: '已过期积分',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'used',
|
|
|
+ title: '已消耗积分',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'status',
|
|
|
+ title: '状态',
|
|
|
align: 'center',
|
|
|
- minWidth: 100
|
|
|
+ render: row => {
|
|
|
+ return (
|
|
|
+ <NSwitch
|
|
|
+ uncheckedValue={0}
|
|
|
+ checkedValue={1}
|
|
|
+ value={row.status}
|
|
|
+ onUpdate:value={val => {
|
|
|
+ row.status = val;
|
|
|
+ fetchEditUser(row);
|
|
|
+ }}
|
|
|
+ ></NSwitch>
|
|
|
+ );
|
|
|
+ }
|
|
|
}
|
|
|
];
|
|
|
|
|
|
@@ -17,8 +75,18 @@ const [registerTable, { refresh, setTableLoading }] = useTable({
|
|
|
searchFormConfig: {
|
|
|
schemas: [
|
|
|
{
|
|
|
- field: 'name',
|
|
|
- label: '标签名称',
|
|
|
+ field: 'channelName',
|
|
|
+ label: '所属企业',
|
|
|
+ component: 'NInput'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'realName',
|
|
|
+ label: '员工姓名',
|
|
|
+ component: 'NInput'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'userMobile',
|
|
|
+ label: '手机号码',
|
|
|
component: 'NInput'
|
|
|
}
|
|
|
],
|
|
|
@@ -28,39 +96,115 @@ const [registerTable, { refresh, setTableLoading }] = useTable({
|
|
|
isFull: false
|
|
|
},
|
|
|
tableConfig: {
|
|
|
- keyField: 'id',
|
|
|
- title: '标签列表',
|
|
|
+ keyField: 'userId',
|
|
|
+ title: '员工列表',
|
|
|
showAddButton: true
|
|
|
}
|
|
|
});
|
|
|
+const [registerModalTable] = useTable({
|
|
|
+ tableConfig: {
|
|
|
+ keyField: 'id',
|
|
|
+ title: '导入记录',
|
|
|
+ showTableHeaderAction: false,
|
|
|
+ showSearch: false,
|
|
|
+ minHeight: 400
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+const failColumns: NaiveUI.TableColumn<Api.government.importRecordList>[] = [
|
|
|
+ {
|
|
|
+ key: 'index',
|
|
|
+ title: '序号',
|
|
|
+ align: 'center',
|
|
|
+ render(_, rowIndex) {
|
|
|
+ return rowIndex + 1;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'taskName',
|
|
|
+ title: '任务名称',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'createTime',
|
|
|
+ title: '时间',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'operator',
|
|
|
+ title: '操作人',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'result',
|
|
|
+ title: '状态',
|
|
|
+ align: 'center',
|
|
|
+ width: 240,
|
|
|
+ render(row) {
|
|
|
+ const resultText = row.result;
|
|
|
+ // 使用正则表达式匹配"失败X条"部分
|
|
|
+ const failedMatch = resultText.match(/(失败\d+条)/);
|
|
|
+
|
|
|
+ if (failedMatch) {
|
|
|
+ const failedText = failedMatch[1];
|
|
|
+ const parts = resultText.split(failedText);
|
|
|
|
|
|
-async function handleDelete(row: Recordable) {
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ {parts[0]}
|
|
|
+ <span class={'text-red-500'}>{failedText}</span>
|
|
|
+ {parts[1]}
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ return <div>{resultText}</div>;
|
|
|
+ }
|
|
|
+ }
|
|
|
+];
|
|
|
+async function handleDelete(row: Api.government.userList) {
|
|
|
setTableLoading(true);
|
|
|
- // await fetchDeleteTag([row.id]);
|
|
|
+ await fetchDeleteUser(row.userId);
|
|
|
console.log(row, 'row');
|
|
|
|
|
|
refresh();
|
|
|
}
|
|
|
const [registerModalForm, { openModal, closeModal, getFieldsValue, setFieldsValue }] = useModalFrom({
|
|
|
modalConfig: {
|
|
|
- title: '标签 ',
|
|
|
- width: 400,
|
|
|
+ title: '员工 ',
|
|
|
+ width: 600,
|
|
|
isShowHeaderText: true,
|
|
|
- height: 100
|
|
|
+ height: 200
|
|
|
},
|
|
|
formConfig: {
|
|
|
schemas: [
|
|
|
{
|
|
|
label: '',
|
|
|
- field: 'id',
|
|
|
+ field: 'userId',
|
|
|
component: 'NInput',
|
|
|
show: false
|
|
|
},
|
|
|
{
|
|
|
- field: 'name',
|
|
|
- label: '标签名称',
|
|
|
+ field: 'realName',
|
|
|
+ label: '员工姓名',
|
|
|
+ component: 'NInput'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'userMobile',
|
|
|
+ label: '手机号码',
|
|
|
component: 'NInput',
|
|
|
required: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'channelId',
|
|
|
+ label: '所属企业',
|
|
|
+ component: 'ApiSelect',
|
|
|
+ componentProps: {
|
|
|
+ api: fetchGetAllChannelList,
|
|
|
+ labelFeild: 'channelName',
|
|
|
+ valueFeild: 'id'
|
|
|
+ },
|
|
|
+ required: true
|
|
|
}
|
|
|
],
|
|
|
gridProps: {
|
|
|
@@ -69,12 +213,18 @@ const [registerModalForm, { openModal, closeModal, getFieldsValue, setFieldsValu
|
|
|
labelWidth: 120
|
|
|
}
|
|
|
});
|
|
|
+const [registerModalFail, { openModal: openModalFail }] = useModal({
|
|
|
+ title: '导入记录',
|
|
|
+ height: 600,
|
|
|
+ showFooter: false,
|
|
|
+ width: 1200
|
|
|
+});
|
|
|
async function handleSubmit() {
|
|
|
const form = await getFieldsValue();
|
|
|
- if (form.id) {
|
|
|
- // await fetchEditTag(form);
|
|
|
+ if (form.userId) {
|
|
|
+ await fetchEditUser(form);
|
|
|
} else {
|
|
|
- // await fetchAddTag(form);
|
|
|
+ await fetchAddUser(form);
|
|
|
}
|
|
|
closeModal();
|
|
|
refresh();
|
|
|
@@ -84,13 +234,25 @@ async function edit(row: Recordable) {
|
|
|
openModal(row);
|
|
|
setFieldsValue(row);
|
|
|
}
|
|
|
+
|
|
|
+function openImportModal() {
|
|
|
+ importTemplateRef.value?.openModal();
|
|
|
+}
|
|
|
+async function handleSubmitImport(file: File) {
|
|
|
+ const { error } = await fetchExportUser({ file });
|
|
|
+ if (!error) {
|
|
|
+ importTemplateRef.value?.closeModal();
|
|
|
+ refresh();
|
|
|
+ }
|
|
|
+ importTemplateRef.value?.setSubLoading(false);
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
<LayoutTable>
|
|
|
<ZTable :columns="columns" :api="fetchGetUserList" @register="registerTable" @add="openModal">
|
|
|
<template #op="{ row }">
|
|
|
- <NButton size="small" ghost type="primary" @click="edit(row)">编辑</NButton>
|
|
|
+ <NButton size="small" ghost type="primary" :disabled="Boolean(row.used)" @click="edit(row)">编辑</NButton>
|
|
|
<NPopconfirm @positive-click="handleDelete(row)">
|
|
|
<template #trigger>
|
|
|
<NButton size="small" type="error" ghost>删除</NButton>
|
|
|
@@ -98,7 +260,30 @@ async function edit(row: Recordable) {
|
|
|
确定删除吗?
|
|
|
</NPopconfirm>
|
|
|
</template>
|
|
|
+ <template #prefix>
|
|
|
+ <NSpace>
|
|
|
+ <NButton size="small" @click="openImportModal">导入员工</NButton>
|
|
|
+ <NButton size="small" @click="openModalFail">导入记录</NButton>
|
|
|
+ </NSpace>
|
|
|
+ </template>
|
|
|
</ZTable>
|
|
|
+ <ZImportTemplate
|
|
|
+ ref="importTemplateRef"
|
|
|
+ url="/admin/enterprise/downloadExcel"
|
|
|
+ template-text="员工导入模版.xlsx"
|
|
|
+ modal-text="导入员工"
|
|
|
+ @submit="handleSubmitImport"
|
|
|
+ ></ZImportTemplate>
|
|
|
+ <BasicModal @register="registerModalFail">
|
|
|
+ <LayoutTable>
|
|
|
+ <ZTable
|
|
|
+ :columns="failColumns"
|
|
|
+ :show-table-action="false"
|
|
|
+ :api="fetchGetImportRecordList"
|
|
|
+ @register="registerModalTable"
|
|
|
+ ></ZTable>
|
|
|
+ </LayoutTable>
|
|
|
+ </BasicModal>
|
|
|
<BasicModelForm @register-modal-form="registerModalForm" @submit-form="handleSubmit"></BasicModelForm>
|
|
|
</LayoutTable>
|
|
|
</template>
|