第一次提交
This commit is contained in:
gxwebsoft
@@ -0,0 +1,298 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="logId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
v-model:selection="selection"
|
||||
:scroll="{ x: 1000 }"
|
||||
:where="defaultWhere"
|
||||
cache-key="userBalanceLogTable"
|
||||
>
|
||||
<template #toolbar>
|
||||
<a-space>
|
||||
<a-button
|
||||
danger
|
||||
type="primary"
|
||||
class="ele-btn-icon"
|
||||
@click="removeBatch"
|
||||
>
|
||||
<template #icon>
|
||||
<delete-outlined />
|
||||
</template>
|
||||
<span>批量删除</span>
|
||||
</a-button>
|
||||
<a-range-picker
|
||||
v-model:value="dateRange"
|
||||
value-format="YYYY-MM-DD"
|
||||
class="ele-fluid"
|
||||
/>
|
||||
<a-input-search
|
||||
allow-clear
|
||||
v-model:value="searchText"
|
||||
placeholder="请输入关键词"
|
||||
@search="reload"
|
||||
@pressEnter="reload"
|
||||
@close="onClose"
|
||||
/>
|
||||
<a-button @click="reset">重置</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'nickname'">
|
||||
<a-tooltip :title="`用户ID：${record.userId}`">
|
||||
<a @click="onSearch(record)">{{ record.nickname }}</a>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template v-if="column.key === 'scene'">
|
||||
<a-tag v-if="record.scene === 10"> 用户充值 </a-tag>
|
||||
<a-tag v-if="record.scene === 20"> 用户消费 </a-tag>
|
||||
<a-tag v-if="record.scene === 30"> 管理员操作 </a-tag>
|
||||
<a-tag v-if="record.scene === 40"> 订单退款 </a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'money'">
|
||||
<span
|
||||
class="ele-text-success"
|
||||
v-if="record.scene === 10 || record.scene === 40"
|
||||
>
|
||||
+￥{{ formatNumber(record.money) }}
|
||||
</span>
|
||||
<template v-else-if="record.scene === 30">
|
||||
<span v-if="record.money > 0" class="ele-text-success">
|
||||
+￥{{ formatNumber(record.money) }}
|
||||
</span>
|
||||
<span v-else class="ele-text-danger">
|
||||
-￥{{ formatNumber(record.money * -1) }}
|
||||
</span>
|
||||
</template>
|
||||
<span class="ele-text-danger" v-else>
|
||||
-￥{{ formatNumber(record.money) }}
|
||||
</span>
|
||||
</template>
|
||||
<template v-if="column.key === 'balance'">
|
||||
<span> ￥{{ formatNumber(record.balance) }} </span>
|
||||
</template>
|
||||
<!-- <template v-else-if="column.key === 'status'">-->
|
||||
<!-- <a-switch-->
|
||||
<!-- :checked="record.status === 0"-->
|
||||
<!-- @change="(checked: boolean) => editStatus(checked, record)"-->
|
||||
<!-- />-->
|
||||
<!-- </template>-->
|
||||
<!-- <template v-else-if="column.key === 'action'">-->
|
||||
<!-- <a-space>-->
|
||||
<!-- <a @click="openEdit(record)">修改</a>-->
|
||||
<!-- <a-divider type="vertical" />-->
|
||||
<!-- <a @click="resetPsw(record)">重置密码</a>-->
|
||||
<!-- <a-divider type="vertical" />-->
|
||||
<!-- <a-popconfirm-->
|
||||
<!-- placement="topRight"-->
|
||||
<!-- title="确定要删除此用户吗？"-->
|
||||
<!-- @confirm="remove(record)"-->
|
||||
<!-- >-->
|
||||
<!-- <a class="ele-text-danger">删除</a>-->
|
||||
<!-- </a-popconfirm>-->
|
||||
<!-- </a-space>-->
|
||||
<!-- </template>-->
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref, reactive } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue/es';
|
||||
import {
|
||||
DeleteOutlined,
|
||||
ExclamationCircleOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro/es';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import {
|
||||
toDateString,
|
||||
messageLoading,
|
||||
formatNumber,
|
||||
assignObject
|
||||
} from 'ele-admin-pro/es';
|
||||
import {
|
||||
pageUserBalanceLog,
|
||||
removeUserBalanceLog,
|
||||
removeUserBalanceLogs
|
||||
} from '@/api/user/balance-log';
|
||||
import {
|
||||
UserBalanceLog,
|
||||
UserBalanceLogParam
|
||||
} from '@/api/user/balance-log/model';
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
key: 'index',
|
||||
width: 48,
|
||||
align: 'center',
|
||||
fixed: 'left',
|
||||
hideInSetting: true,
|
||||
customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
|
||||
},
|
||||
{
|
||||
title: '用户昵称',
|
||||
key: 'nickname',
|
||||
dataIndex: 'nickname',
|
||||
showSorterTooltip: false
|
||||
},
|
||||
{
|
||||
title: '场景',
|
||||
dataIndex: 'scene',
|
||||
key: 'scene',
|
||||
align: 'center',
|
||||
showSorterTooltip: false,
|
||||
filters: [
|
||||
{ text: '用户充值', value: 10 },
|
||||
{ text: '用户消费', value: 20 },
|
||||
{ text: '管理员操作', value: 30 },
|
||||
{ text: '订单退款', value: 40 }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '变动金额',
|
||||
dataIndex: 'money',
|
||||
key: 'money',
|
||||
sorter: true,
|
||||
showSorterTooltip: false
|
||||
},
|
||||
{
|
||||
title: '账户金额',
|
||||
dataIndex: 'balance',
|
||||
key: 'balance',
|
||||
sorter: true,
|
||||
showSorterTooltip: false
|
||||
},
|
||||
{
|
||||
title: '管理员备注',
|
||||
dataIndex: 'remark'
|
||||
},
|
||||
{
|
||||
title: '描述/说明',
|
||||
dataIndex: 'comments'
|
||||
},
|
||||
{
|
||||
title: '时间',
|
||||
dataIndex: 'createTime',
|
||||
sorter: true,
|
||||
showSorterTooltip: false,
|
||||
ellipsis: true,
|
||||
customRender: ({ text }) => toDateString(text)
|
||||
}
|
||||
]);
|
||||
// 表格选中数据
|
||||
const selection = ref<UserBalanceLog[]>([]);
|
||||
const searchText = ref('');
|
||||
const userId = ref<number>(0);
|
||||
// 日期范围选择
|
||||
const dateRange = ref<[string, string]>(['', '']);
|
||||
// 默认搜索条件
|
||||
const defaultWhere = reactive({
|
||||
username: '',
|
||||
nickname: '',
|
||||
userId: undefined
|
||||
});
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({
|
||||
page,
|
||||
limit,
|
||||
where,
|
||||
orders,
|
||||
filters
|
||||
}) => {
|
||||
const [d1, d2] = dateRange.value ?? [];
|
||||
where = {
|
||||
...{
|
||||
createTimeStart: d1 ? d1 + ' 00:00:00' : '',
|
||||
createTimeEnd: d2 ? d2 + ' 23:59:59' : ''
|
||||
}
|
||||
};
|
||||
if (userId.value) {
|
||||
where.userId = userId.value;
|
||||
}
|
||||
if (filters) {
|
||||
where.sceneMultiple = filters.scene;
|
||||
}
|
||||
where.keywords = searchText.value;
|
||||
return pageUserBalanceLog({ ...where, ...orders, page, limit });
|
||||
};
|
||||
|
||||
// 按用户搜索
|
||||
const onSearch = (record) => {
|
||||
userId.value = record?.userId;
|
||||
searchText.value = record.nickname;
|
||||
tableRef?.value?.reload();
|
||||
};
|
||||
|
||||
const reset = () => {
|
||||
userId.value = 0;
|
||||
searchText.value = '';
|
||||
reload();
|
||||
};
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: UserBalanceLogParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ page: 1, where });
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: UserBalanceLog) => {
|
||||
const hide = messageLoading('请求中..', 0);
|
||||
removeUserBalanceLog(row.userId)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 批量删除 */
|
||||
const removeBatch = () => {
|
||||
if (!selection.value.length) {
|
||||
message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
content: '确定要删除选中的记录吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = messageLoading('请求中..', 0);
|
||||
removeUserBalanceLogs(selection.value.map((d) => d.logId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'SystemUser'
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="userId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
v-model:selection="selection"
|
||||
height="calc(100vh - 290px)"
|
||||
tool-class="ele-toolbar-form"
|
||||
:scroll="{ x: 800 }"
|
||||
tools-theme="default"
|
||||
bordered
|
||||
cache-key="proSystemOrgUserTable"
|
||||
class="sys-org-table"
|
||||
>
|
||||
<template #toolbar>
|
||||
<OrgUserSearch
|
||||
@search="reload"
|
||||
:selection="selection"
|
||||
:total-balance="totalBalance"
|
||||
@add="openEdit()"
|
||||
/>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'roles'">
|
||||
<a-tag v-for="item in record.roles" :key="item.roleId" color="blue">
|
||||
{{ item.roleName }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'nickname'">
|
||||
<a-tooltip :title="`用户ID：${record.userId}`">
|
||||
<a-avatar
|
||||
:size="30"
|
||||
:src="`${record.avatar}`"
|
||||
style="margin-right: 4px"
|
||||
>
|
||||
<template #icon>
|
||||
<UserOutlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
<span @click="openInfo(record)">{{ record.nickname }}</span>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'rechargeType'">
|
||||
<a-tag v-if="record.rechargeType === 10"> 自定义金额 </a-tag>
|
||||
<a-tag v-if="record.rechargeType === 20"> 套餐充值 </a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'balance'">
|
||||
<span class="ele-text-success">
|
||||
￥{{ formatNumber(record.balance) }}
|
||||
</span>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'status'">
|
||||
<a-switch
|
||||
:checked="record.status === 0"
|
||||
@change="(checked: boolean) => editStatus(checked, record)"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a @click="onRecharge(record)">充值</a>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
<!-- 编辑弹窗 -->
|
||||
<Recharge
|
||||
v-model:visible="showEdit"
|
||||
:selection="selection"
|
||||
:data="current"
|
||||
@done="reload"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import type { EleProTable } from 'ele-admin-pro/es';
|
||||
import Recharge from '../components/recharge.vue';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import OrgUserSearch from './org-user-search.vue';
|
||||
import { formatNumber } from 'ele-admin-pro/es';
|
||||
import { pageUsers, countUserBalance } from '@/api/system/user';
|
||||
import type { User } from '@/api/system/user/model';
|
||||
import type { Organization } from '@/api/system/organization/model';
|
||||
import {
|
||||
RechargeOrder,
|
||||
RechargeOrderParam
|
||||
} from '@/api/user/recharge/order/model';
|
||||
|
||||
const props = defineProps<{
|
||||
// 机构 id
|
||||
organizationId?: number;
|
||||
// 全部机构
|
||||
organizationList: Organization[];
|
||||
}>();
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
// 表格选中数据
|
||||
const selection = ref<RechargeOrder[]>([]);
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: '用户ID',
|
||||
dataIndex: 'userId',
|
||||
sorter: true,
|
||||
showSorterTooltip: false
|
||||
},
|
||||
{
|
||||
title: '用户账号',
|
||||
dataIndex: 'username',
|
||||
sorter: true,
|
||||
showSorterTooltip: false
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'realName',
|
||||
sorter: true,
|
||||
showSorterTooltip: false
|
||||
},
|
||||
{
|
||||
title: '角色',
|
||||
key: 'roles'
|
||||
},
|
||||
{
|
||||
title: '余额',
|
||||
dataIndex: 'balance',
|
||||
sorter: true,
|
||||
key: 'balance',
|
||||
customRender: ({ text }) => '￥' + text
|
||||
}
|
||||
]);
|
||||
|
||||
// 当前编辑数据
|
||||
const current = ref<User | null>(null);
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
// 统计用户余额
|
||||
const totalBalance = ref<number>(0);
|
||||
|
||||
/* 表格数据源 */
|
||||
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
|
||||
if (props.organizationId) {
|
||||
where.organizationId = props.organizationId;
|
||||
}
|
||||
return pageUsers({ ...where, ...orders, page, limit });
|
||||
};
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: RechargeOrderParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ page: 1, where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: User) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
const totalPrice = () => {
|
||||
countUserBalance({ organizationId: props.organizationId }).then(
|
||||
(balance) => {
|
||||
totalBalance.value = Number(balance);
|
||||
}
|
||||
);
|
||||
};
|
||||
totalPrice();
|
||||
// 监听机构 id 变化
|
||||
watch(
|
||||
() => props.organizationId,
|
||||
() => {
|
||||
reload();
|
||||
totalPrice();
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.sys-org-table :deep(.ant-table-body) {
|
||||
overflow: auto !important;
|
||||
overflow: overlay !important;
|
||||
}
|
||||
|
||||
.sys-org-table :deep(.ant-table-pagination.ant-pagination) {
|
||||
padding: 0 4px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,61 @@
|
||||
<!-- 搜索表单 -->
|
||||
<template>
|
||||
<a-space :size="10" style="flex-wrap: wrap">
|
||||
<a-button
|
||||
type="primary"
|
||||
class="ele-btn-icon"
|
||||
:disabled="!selection.length"
|
||||
@click="add"
|
||||
>
|
||||
<template #icon>
|
||||
<MoneyCollectOutlined />
|
||||
</template>
|
||||
<span>批量充值</span>
|
||||
</a-button>
|
||||
<a-input-search
|
||||
allow-clear
|
||||
placeholder="请输入姓名"
|
||||
v-model:value="searchText"
|
||||
@pressEnter="search"
|
||||
@search="search"
|
||||
/>
|
||||
<span style="margin-left: 20px">合计：￥{{ totalBalance }}</span>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { MoneyCollectOutlined } from '@ant-design/icons-vue';
|
||||
import { ref } from 'vue';
|
||||
import { RechargeOrderParam } from '@/api/user/recharge/order/model';
|
||||
import useSearch from '@/utils/use-search';
|
||||
|
||||
defineProps<{
|
||||
selection?: [];
|
||||
totalBalance?: number;
|
||||
}>();
|
||||
|
||||
const searchText = ref('');
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: RechargeOrderParam): void;
|
||||
(e: 'add'): void;
|
||||
}>();
|
||||
|
||||
// 表单数据
|
||||
const { where, resetFields } = useSearch<RechargeOrderParam>({
|
||||
orderId: undefined,
|
||||
keywords: ''
|
||||
});
|
||||
|
||||
/* 搜索 */
|
||||
const search = () => {
|
||||
resetFields();
|
||||
where.keywords = searchText.value;
|
||||
emit('search', { ...where });
|
||||
};
|
||||
|
||||
/* 添加 */
|
||||
const add = () => {
|
||||
emit('add');
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,168 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="500"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:title="'在线充值'"
|
||||
:body-style="{ paddingBottom: '8px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="styleResponsive ? { md: 7, sm: 4, xs: 24 } : { flex: '90px' }"
|
||||
:wrapper-col="
|
||||
styleResponsive ? { md: 17, sm: 20, xs: 24 } : { flex: '1' }
|
||||
"
|
||||
>
|
||||
<a-form-item label="充值金额" name="payPrice">
|
||||
<a-input-number
|
||||
placeholder="请输入金额"
|
||||
style="width: 280px"
|
||||
v-model:value="form.payPrice"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="备注" name="comments">
|
||||
<a-textarea
|
||||
:rows="4"
|
||||
style="width: 280px"
|
||||
placeholder="请输入备注"
|
||||
v-model:value="form.comments"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
import type { FormInstance, Rule } from 'ant-design-vue/es/form';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import { recharge, batchRecharge } from '@/api/user/recharge/order';
|
||||
import type { User } from '@/api/system/user/model';
|
||||
import { RechargeOrder } from '@/api/user/recharge/order/model';
|
||||
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
const props = defineProps<{
|
||||
selection?: User[];
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: User | null;
|
||||
}>();
|
||||
|
||||
//
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
|
||||
// 批量充值数据
|
||||
const rechargeOrder = ref<RechargeOrder[]>([]);
|
||||
|
||||
// 表单数据
|
||||
const { form, resetFields, assignFields } = useFormData<RechargeOrder>({
|
||||
userId: undefined,
|
||||
payPrice: undefined,
|
||||
organizationId: undefined
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive<Record<string, Rule[]>>({
|
||||
payPrice: [
|
||||
{
|
||||
required: true,
|
||||
type: 'number',
|
||||
message: '请要充值的金额',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
comments: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入备注信息',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
rechargeOrder.value = [];
|
||||
props.selection?.map((d) => {
|
||||
rechargeOrder.value?.push({
|
||||
rechargeType: 10,
|
||||
payPrice: form.payPrice,
|
||||
comments: form.comments,
|
||||
organizationId: d.organizationId,
|
||||
userId: d.userId,
|
||||
balance: d.balance
|
||||
});
|
||||
});
|
||||
console.log(rechargeOrder.value);
|
||||
// const saveOrUpdate = isUpdate.value ? updateUser : addUser;
|
||||
batchRecharge(rechargeOrder.value)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
assignFields({
|
||||
...props.data,
|
||||
password: ''
|
||||
});
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
formRef.value?.clearValidate();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<ele-split-layout
|
||||
width="266px"
|
||||
allow-collapse
|
||||
:right-style="{ overflow: 'hidden' }"
|
||||
:style="{ minHeight: 'calc(100vh - 152px)' }"
|
||||
>
|
||||
<div>
|
||||
<ele-toolbar theme="default">
|
||||
<a-space :size="10"> 组织机构 </a-space>
|
||||
</ele-toolbar>
|
||||
<div class="ele-border-split sys-organization-list">
|
||||
<a-tree
|
||||
:tree-data="(data as any)"
|
||||
v-model:expanded-keys="expandedRowKeys"
|
||||
v-model:selected-keys="selectedRowKeys"
|
||||
@select="onTreeSelect"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<template #content>
|
||||
<org-user-list
|
||||
v-if="current"
|
||||
:selection="selection"
|
||||
:organization-list="data"
|
||||
:organization-id="current.organizationId"
|
||||
/>
|
||||
</template>
|
||||
</ele-split-layout>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
import { toTreeData, eachTreeData } from 'ele-admin-pro/es';
|
||||
import OrgUserList from './components/org-user-list.vue';
|
||||
import { listOrganizations } from '@/api/system/organization';
|
||||
import type { Organization } from '@/api/system/organization/model';
|
||||
|
||||
// 加载状态
|
||||
const loading = ref(true);
|
||||
|
||||
// 树形数据
|
||||
const data = ref<Organization[]>([]);
|
||||
|
||||
// 树展开的key
|
||||
const expandedRowKeys = ref<number[]>([]);
|
||||
|
||||
// 树选中的key
|
||||
const selectedRowKeys = ref<number[]>([]);
|
||||
|
||||
// 选中数据
|
||||
const current = ref<Organization | null>(null);
|
||||
|
||||
/* 查询 */
|
||||
const query = () => {
|
||||
loading.value = true;
|
||||
listOrganizations()
|
||||
.then((list) => {
|
||||
loading.value = false;
|
||||
const eks: number[] = [];
|
||||
list.forEach((d) => {
|
||||
d.key = d.organizationId;
|
||||
d.value = d.organizationId;
|
||||
d.title = d.organizationName;
|
||||
if (typeof d.key === 'number') {
|
||||
eks.push(d.key);
|
||||
}
|
||||
});
|
||||
expandedRowKeys.value = eks;
|
||||
data.value = toTreeData({
|
||||
data: list,
|
||||
idField: 'organizationId',
|
||||
parentIdField: 'parentId'
|
||||
});
|
||||
if (list.length) {
|
||||
if (typeof list[0].key === 'number') {
|
||||
selectedRowKeys.value = [list[0].key];
|
||||
}
|
||||
current.value = list[0];
|
||||
current.value.organizationId = 0;
|
||||
} else {
|
||||
selectedRowKeys.value = [];
|
||||
current.value = null;
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 选择数据 */
|
||||
const onTreeSelect = () => {
|
||||
eachTreeData(data.value, (d) => {
|
||||
if (typeof d.key === 'number' && selectedRowKeys.value.includes(d.key)) {
|
||||
current.value = d;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
query();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'UserBatchRecharge'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.sys-organization-list {
|
||||
padding: 12px 6px;
|
||||
height: calc(100vh - 242px);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,71 @@
|
||||
<!-- 角色选择下拉框 -->
|
||||
<template>
|
||||
<a-select
|
||||
allow-clear
|
||||
mode="multiple"
|
||||
:value="roleIds"
|
||||
:placeholder="placeholder"
|
||||
@update:value="updateValue"
|
||||
@blur="onBlur"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="item in data"
|
||||
:key="item.roleId"
|
||||
:value="item.roleId"
|
||||
>
|
||||
{{ item.roleName }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
import { listRoles } from '@/api/system/role';
|
||||
import type { Role } from '@/api/system/role/model';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:value', value: Role[]): void;
|
||||
(e: 'blur'): void;
|
||||
}>();
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的角色
|
||||
value?: Role[];
|
||||
//
|
||||
placeholder?: string;
|
||||
}>(),
|
||||
{
|
||||
placeholder: '请选择角色'
|
||||
}
|
||||
);
|
||||
|
||||
// 选中的角色id
|
||||
const roleIds = computed(() => props.value?.map((d) => d.roleId as number));
|
||||
|
||||
// 角色数据
|
||||
const data = ref<Role[]>([]);
|
||||
|
||||
/* 更新选中数据 */
|
||||
const updateValue = (value: number[]) => {
|
||||
emit(
|
||||
'update:value',
|
||||
value.map((v) => ({ roleId: v }))
|
||||
);
|
||||
};
|
||||
|
||||
/* 获取角色数据 */
|
||||
listRoles()
|
||||
.then((list) => {
|
||||
data.value = list;
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
|
||||
/* 失去焦点 */
|
||||
const onBlur = () => {
|
||||
emit('blur');
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,45 @@
|
||||
<!-- 角色选择下拉框 -->
|
||||
<template>
|
||||
<a-select
|
||||
show-search
|
||||
optionFilterProp="label"
|
||||
:options="data"
|
||||
allow-clear
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
@update:value="updateValue"
|
||||
@blur="onBlur"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getDictionaryOptions } from '@/utils/common';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:value', value: string): void;
|
||||
(e: 'blur'): void;
|
||||
}>();
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
value?: string;
|
||||
placeholder?: string;
|
||||
}>(),
|
||||
{
|
||||
placeholder: '请选择性别'
|
||||
}
|
||||
);
|
||||
|
||||
// 字典数据
|
||||
const data = getDictionaryOptions('sex');
|
||||
|
||||
/* 更新选中数据 */
|
||||
const updateValue = (value: string) => {
|
||||
emit('update:value', value);
|
||||
};
|
||||
|
||||
/* 失去焦点 */
|
||||
const onBlur = () => {
|
||||
emit('blur');
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,276 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="680"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:title="isUpdate ? '修改用户' : '新建用户'"
|
||||
:body-style="{ paddingBottom: '8px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="styleResponsive ? { md: 7, sm: 4, xs: 24 } : { flex: '90px' }"
|
||||
:wrapper-col="
|
||||
styleResponsive ? { md: 17, sm: 20, xs: 24 } : { flex: '1' }
|
||||
"
|
||||
>
|
||||
<a-row :gutter="16">
|
||||
<a-col
|
||||
v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
|
||||
>
|
||||
<a-form-item label="账号" name="username">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入账号"
|
||||
:disabled="isUpdate"
|
||||
v-model:value="form.username"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="昵称" name="nickname">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入昵称"
|
||||
v-model:value="form.nickname"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="性别" name="sex">
|
||||
<sex-select v-model:value="form.sex" />
|
||||
</a-form-item>
|
||||
<a-form-item label="角色" name="roles">
|
||||
<role-select v-model:value="form.roles" />
|
||||
</a-form-item>
|
||||
<a-form-item label="邮箱" name="email">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="100"
|
||||
placeholder="请输入邮箱"
|
||||
v-model:value="form.email"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
|
||||
>
|
||||
<a-form-item label="手机号" name="phone">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="11"
|
||||
placeholder="请输入手机号"
|
||||
v-model:value="form.phone"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="出生日期">
|
||||
<a-date-picker
|
||||
class="ele-fluid"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="请选择出生日期"
|
||||
v-model:value="form.birthday"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="!isUpdate" label="登录密码" name="password">
|
||||
<a-input-password
|
||||
:maxlength="20"
|
||||
v-model:value="form.password"
|
||||
placeholder="请输入登录密码"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="个人简介">
|
||||
<a-textarea
|
||||
:rows="4"
|
||||
:maxlength="200"
|
||||
placeholder="请输入个人简介"
|
||||
v-model:value="form.introduction"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
import type { FormInstance, Rule } from 'ant-design-vue/es/form';
|
||||
import { emailReg, phoneReg } from 'ele-admin-pro/es';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import RoleSelect from './role-select.vue';
|
||||
import SexSelect from './sex-select.vue';
|
||||
import { addUser, updateUser, checkExistence } from '@/api/system/user';
|
||||
import type { User } from '@/api/system/user/model';
|
||||
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: User | null;
|
||||
}>();
|
||||
|
||||
//
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
|
||||
// 表单数据
|
||||
const { form, resetFields, assignFields } = useFormData<User>({
|
||||
userId: undefined,
|
||||
username: '',
|
||||
nickname: '',
|
||||
sex: undefined,
|
||||
roles: [],
|
||||
email: '',
|
||||
phone: '',
|
||||
password: '',
|
||||
introduction: '',
|
||||
birthday: ''
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive<Record<string, Rule[]>>({
|
||||
username: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
validator: (_rule: Rule, value: string) => {
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
if (!value) {
|
||||
return reject('请输入用户账号');
|
||||
}
|
||||
checkExistence('username', value, props.data?.userId)
|
||||
.then(() => {
|
||||
reject('账号已经存在');
|
||||
})
|
||||
.catch(() => {
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
nickname: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入昵称',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
sex: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择性别',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
roles: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择角色',
|
||||
type: 'array',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
email: [
|
||||
{
|
||||
pattern: emailReg,
|
||||
message: '邮箱格式不正确',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
validator: async (_rule: Rule, value: string) => {
|
||||
if (isUpdate.value || /^[\S]{5,18}$/.test(value)) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
return Promise.reject('密码必须为5-18位非空白字符');
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
phone: [
|
||||
{
|
||||
pattern: phoneReg,
|
||||
message: '手机号格式不正确',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const saveOrUpdate = isUpdate.value ? updateUser : addUser;
|
||||
saveOrUpdate(form)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
assignFields({
|
||||
...props.data,
|
||||
password: ''
|
||||
});
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
formRef.value?.clearValidate();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
@@ -0,0 +1,88 @@
|
||||
<!-- 用户导入弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="520"
|
||||
:footer="null"
|
||||
title="导入用户"
|
||||
:visible="visible"
|
||||
@update:visible="updateVisible"
|
||||
>
|
||||
<a-spin :spinning="loading">
|
||||
<a-upload-dragger
|
||||
accept=".xls,.xlsx"
|
||||
:show-upload-list="false"
|
||||
:customRequest="doUpload"
|
||||
style="padding: 24px 0; margin-bottom: 16px"
|
||||
>
|
||||
<p class="ant-upload-drag-icon">
|
||||
<cloud-upload-outlined />
|
||||
</p>
|
||||
<p class="ant-upload-hint">将文件拖到此处，或点击上传</p>
|
||||
</a-upload-dragger>
|
||||
</a-spin>
|
||||
<div class="ele-text-center">
|
||||
<span>只能上传xls、xlsx文件，</span>
|
||||
<a
|
||||
href="https://cdn.eleadmin.com/20200610/用户导入模板.xlsx"
|
||||
download="用户导入模板.xlsx"
|
||||
>
|
||||
下载模板
|
||||
</a>
|
||||
</div>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
import { CloudUploadOutlined } from '@ant-design/icons-vue';
|
||||
import { importUsers } from '@/api/system/user';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
defineProps<{
|
||||
// 是否打开弹窗
|
||||
visible: boolean;
|
||||
}>();
|
||||
|
||||
// 导入请求状态
|
||||
const loading = ref(false);
|
||||
|
||||
/* 上传 */
|
||||
const doUpload = ({ file }) => {
|
||||
if (
|
||||
![
|
||||
'application/vnd.ms-excel',
|
||||
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
|
||||
].includes(file.type)
|
||||
) {
|
||||
message.error('只能选择 excel 文件');
|
||||
return false;
|
||||
}
|
||||
if (file.size / 1024 / 1024 > 10) {
|
||||
message.error('大小不能超过 10MB');
|
||||
return false;
|
||||
}
|
||||
loading.value = true;
|
||||
importUsers(file)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
return false;
|
||||
};
|
||||
|
||||
/* 更新 visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,143 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<a-drawer
|
||||
:width="680"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:title="'基本信息'"
|
||||
:body-style="{ paddingBottom: '8px' }"
|
||||
@update:visible="updateVisible"
|
||||
:footer="null"
|
||||
>
|
||||
<a-form
|
||||
:label-col="{ md: { span: 6 }, sm: { span: 24 } }"
|
||||
:wrapper-col="{ md: { span: 19 }, sm: { span: 24 } }"
|
||||
>
|
||||
<a-row :gutter="16">
|
||||
<a-col
|
||||
v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
|
||||
>
|
||||
<a-form-item label="账号">
|
||||
<span class="ele-text">{{ user.username }}</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="昵称">
|
||||
<span class="ele-text">{{ user.nickname }}</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="性别">
|
||||
<span class="ele-text">{{ user.sexName }}</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="手机号">
|
||||
<span class="ele-text">{{ user.phone }}</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="角色">
|
||||
<a-tag v-for="item in user.roles" :key="item.roleId" color="blue">
|
||||
{{ item.roleName }}
|
||||
</a-tag>
|
||||
</a-form-item>
|
||||
<a-form-item label="状态">
|
||||
<a-badge
|
||||
v-if="typeof user.status === 'number'"
|
||||
:status="(['processing', 'error'][user.status] as any)"
|
||||
:text="['正常', '冻结'][user.status]"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="地址">
|
||||
<span class="ele-text">{{ user.address }}</span>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
|
||||
>
|
||||
<a-form-item label="可用余额">
|
||||
<span class="ele-text-success">￥{{ formatNumber(user.balance) }}</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="可用积分">
|
||||
<span class="ele-text">{{ user.points }}</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="实际消费">
|
||||
<span class="ele-text">{{ user.payMoney }}</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="机构/部门">
|
||||
<span class="ele-text">{{ user.organizationName }}</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="头像">
|
||||
<a-image :src="user.avatar" :width="36" />
|
||||
</a-form-item>
|
||||
<a-form-item label="生日">
|
||||
<span class="ele-text">{{ user.birthday }}</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="创建时间">
|
||||
<span class="ele-text">{{ user.createTime }}</span>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { Form } from 'ant-design-vue';
|
||||
import { assignObject } from 'ele-admin-pro';
|
||||
import type { User } from '@/api/system/user/model';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import { formatNumber } from 'ele-admin-pro/es';
|
||||
import { storeToRefs } from 'pinia';
|
||||
|
||||
const useForm = Form.useForm;
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: User | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 用户信息
|
||||
const user = reactive<User>({
|
||||
username: '',
|
||||
nickname: '',
|
||||
sexName: '',
|
||||
phone: '',
|
||||
avatar: '',
|
||||
balance: undefined,
|
||||
points: 0,
|
||||
payMoney: 0,
|
||||
birthday: '',
|
||||
address: '',
|
||||
roles: [],
|
||||
createTime: undefined,
|
||||
status: undefined
|
||||
});
|
||||
|
||||
// 请求状态
|
||||
const loading = ref(true);
|
||||
|
||||
const { resetFields } = useForm(user);
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
loading.value = false;
|
||||
assignObject(user, props.data);
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
@@ -0,0 +1,111 @@
|
||||
<!-- 搜索表单 -->
|
||||
<template>
|
||||
<a-form
|
||||
:label-col="
|
||||
styleResponsive ? { xl: 7, lg: 5, md: 7, sm: 4 } : { flex: '90px' }
|
||||
"
|
||||
:wrapper-col="
|
||||
styleResponsive ? { xl: 17, lg: 19, md: 17, sm: 20 } : { flex: '1' }
|
||||
"
|
||||
>
|
||||
<a-row :gutter="8">
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive
|
||||
? { xl: 6, lg: 12, md: 12, sm: 24, xs: 24 }
|
||||
: { span: 6 }
|
||||
"
|
||||
>
|
||||
<a-form-item label="用户账号">
|
||||
<a-input
|
||||
v-model:value.trim="form.username"
|
||||
placeholder="请输入"
|
||||
allow-clear
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive
|
||||
? { xl: 6, lg: 12, md: 12, sm: 24, xs: 24 }
|
||||
: { span: 6 }
|
||||
"
|
||||
>
|
||||
<a-form-item label="昵称">
|
||||
<a-input
|
||||
v-model:value.trim="form.nickname"
|
||||
placeholder="请输入"
|
||||
allow-clear
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive
|
||||
? { xl: 6, lg: 12, md: 12, sm: 24, xs: 24 }
|
||||
: { span: 6 }
|
||||
"
|
||||
>
|
||||
<a-form-item label="性别">
|
||||
<a-select v-model:value="form.sex" placeholder="请选择" allow-clear>
|
||||
<a-select-option value="1">男</a-select-option>
|
||||
<a-select-option value="2">女</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive
|
||||
? { xl: 6, lg: 12, md: 12, sm: 24, xs: 24 }
|
||||
: { span: 6 }
|
||||
"
|
||||
>
|
||||
<a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="search">查询</a-button>
|
||||
<a-button @click="reset">重置</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import type { UserParam } from '@/api/system/user/model';
|
||||
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const props = defineProps<{
|
||||
// 默认搜索条件
|
||||
where?: UserParam;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: UserParam): void;
|
||||
}>();
|
||||
|
||||
// 表单数据
|
||||
const { form, resetFields } = useFormData<UserParam>({
|
||||
username: '',
|
||||
nickname: '',
|
||||
sex: undefined,
|
||||
...props.where
|
||||
});
|
||||
|
||||
/* 搜索 */
|
||||
const search = () => {
|
||||
emit('search', form);
|
||||
};
|
||||
|
||||
/* 重置 */
|
||||
const reset = () => {
|
||||
resetFields();
|
||||
search();
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card title="基本信息123" :bordered="false">
|
||||
<a-form
|
||||
class="ele-form-detail"
|
||||
:label-col="
|
||||
styleResponsive ? { md: 2, sm: 4, xs: 6 } : { flex: '90px' }
|
||||
"
|
||||
:wrapper-col="
|
||||
styleResponsive ? { md: 22, sm: 20, xs: 18 } : { flex: '1' }
|
||||
"
|
||||
>
|
||||
<a-form-item label="账号">
|
||||
<div class="ele-text-secondary">{{ form.username }}</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="昵称">
|
||||
<div class="ele-text-secondary">{{ form.nickname }}</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="性别">
|
||||
<div class="ele-text-secondary">{{ form.sexName }}</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="手机号">
|
||||
<div class="ele-text-secondary">{{ form.phone }}</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="角色">
|
||||
<a-tag v-for="item in form.roles" :key="item.roleId" color="blue">
|
||||
{{ item.roleName }}
|
||||
</a-tag>
|
||||
</a-form-item>
|
||||
<a-form-item label="创建时间">
|
||||
<div class="ele-text-secondary">{{ form.createTime }}</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="状态">
|
||||
<a-badge
|
||||
v-if="typeof form.status === 'number'"
|
||||
:status="(['processing', 'error'][form.status] as any)"
|
||||
:text="['正常', '冻结'][form.status]"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch, unref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
import { toDateString } from 'ele-admin-pro/es';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import { setPageTabTitle } from '@/utils/page-tab-util';
|
||||
import { getUser } from '@/api/system/user';
|
||||
import type { User } from '@/api/system/user/model';
|
||||
const ROUTE_PATH = '/system/user/details';
|
||||
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const { currentRoute } = useRouter();
|
||||
|
||||
// 用户信息
|
||||
const { form, assignFields } = useFormData<User>({
|
||||
userId: undefined,
|
||||
username: '',
|
||||
nickname: '',
|
||||
sexName: '',
|
||||
phone: '',
|
||||
roles: [],
|
||||
createTime: undefined,
|
||||
status: undefined
|
||||
});
|
||||
|
||||
// 请求状态
|
||||
const loading = ref(true);
|
||||
|
||||
/* */
|
||||
const query = () => {
|
||||
const { query } = unref(currentRoute);
|
||||
const id = query.id;
|
||||
if (!id || form.userId === Number(id)) {
|
||||
return;
|
||||
}
|
||||
loading.value = true;
|
||||
getUser(Number(id))
|
||||
.then((data) => {
|
||||
loading.value = false;
|
||||
assignFields({
|
||||
...data,
|
||||
createTime: toDateString(data.createTime)
|
||||
});
|
||||
// 修改页签标题
|
||||
if (unref(currentRoute).path === ROUTE_PATH) {
|
||||
setPageTabTitle(data.nickname + '的信息');
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
currentRoute,
|
||||
(route) => {
|
||||
const { path } = unref(route);
|
||||
if (path !== ROUTE_PATH) {
|
||||
return;
|
||||
}
|
||||
query();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'SystemUserDetails'
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,439 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="userId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
v-model:selection="selection"
|
||||
:scroll="{ x: 2000 }"
|
||||
:where="defaultWhere"
|
||||
cache-key="proSystemUserTable"
|
||||
>
|
||||
<template #toolbar>
|
||||
<a-space>
|
||||
<a-button type="primary" class="ele-btn-icon" @click="openEdit()">
|
||||
<template #icon>
|
||||
<plus-outlined />
|
||||
</template>
|
||||
<span>新建</span>
|
||||
</a-button>
|
||||
<a-button
|
||||
danger
|
||||
type="primary"
|
||||
class="ele-btn-icon"
|
||||
@click="removeBatch"
|
||||
>
|
||||
<template #icon>
|
||||
<delete-outlined />
|
||||
</template>
|
||||
<span>删除</span>
|
||||
</a-button>
|
||||
<a-button type="dashed" class="ele-btn-icon" @click="openImport">
|
||||
<template #icon>
|
||||
<upload-outlined />
|
||||
</template>
|
||||
<span>导入</span>
|
||||
</a-button>
|
||||
<a-input-search
|
||||
allow-clear
|
||||
v-model:value="searchText"
|
||||
placeholder="请输入关键词"
|
||||
@search="reload"
|
||||
@pressEnter="reload"
|
||||
>
|
||||
<template #addonBefore>
|
||||
<a-select
|
||||
v-model:value="type"
|
||||
style="width: 100px; margin: -5px -12px"
|
||||
>
|
||||
<a-select-option value="nickname">昵称</a-select-option>
|
||||
<a-select-option value="username">账号</a-select-option>
|
||||
<a-select-option value="phone">手机号码</a-select-option>
|
||||
<a-select-option value="userId">用户ID</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-input-search>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'nickname'">
|
||||
<a-tooltip :title="`用户ID：${record.userId}`">
|
||||
<a-avatar
|
||||
:size="30"
|
||||
:src="`${record.avatar}`"
|
||||
style="margin-right: 4px"
|
||||
>
|
||||
<template #icon>
|
||||
<UserOutlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
<span>{{ record.nickname }}</span>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template v-if="column.key === 'type'">
|
||||
<a-tag v-if="record.type === 10" color="orange"> 企业用户 </a-tag>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'roles'">
|
||||
<a-tag v-for="item in record.roles" :key="item.roleId" color="blue">
|
||||
{{ item.roleName }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'balance'">
|
||||
<span class="ele-text-success">
|
||||
￥{{ formatNumber(record.balance) }}
|
||||
</span>
|
||||
</template>
|
||||
<template v-if="column.key === 'expendMoney'">
|
||||
<span class="ele-text-success">
|
||||
￥{{ formatNumber(record.expendMoney) }}
|
||||
</span>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'status'">
|
||||
<a-switch
|
||||
:checked="record.status === 0"
|
||||
@change="(checked: boolean) => editStatus(checked, record)"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a-button @click="openEdit(record)">修改</a-button>
|
||||
<!-- <a-divider type="vertical" />-->
|
||||
<a-button @click="resetPsw(record)">重置密码</a-button>
|
||||
<!-- <a-divider type="vertical" />-->
|
||||
<!-- <a-popconfirm-->
|
||||
<!-- placement="topRight"-->
|
||||
<!-- title="确定要删除此用户吗？"-->
|
||||
<!-- @confirm="remove(record)"-->
|
||||
<!-- >-->
|
||||
<!-- <a class="ele-text-danger">删除</a>-->
|
||||
<!-- </a-popconfirm>-->
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
<!-- 编辑弹窗 -->
|
||||
<user-edit v-model:visible="showEdit" :data="current" @done="reload" />
|
||||
<!-- 导入弹窗 -->
|
||||
<user-import v-model:visible="showImport" @done="reload" />
|
||||
<!-- 用户详情 -->
|
||||
<user-info v-model:visible="showInfo" :data="current" @done="reload" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref, reactive } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue/es';
|
||||
import {
|
||||
PlusOutlined,
|
||||
DeleteOutlined,
|
||||
UploadOutlined,
|
||||
ExclamationCircleOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro/es';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import { toDateString, messageLoading, formatNumber } from 'ele-admin-pro/es';
|
||||
import UserEdit from './components/user-edit.vue';
|
||||
import UserImport from './components/user-import.vue';
|
||||
import UserInfo from './components/user-info.vue';
|
||||
import {
|
||||
pageUsers,
|
||||
removeUser,
|
||||
removeUsers,
|
||||
updateUserStatus,
|
||||
updateUserPassword
|
||||
} from '@/api/system/user';
|
||||
import type { User, UserParam } from '@/api/system/user/model';
|
||||
import { uuid } from 'ele-admin-pro';
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
key: 'index',
|
||||
width: 48,
|
||||
align: 'center',
|
||||
fixed: 'left',
|
||||
hideInSetting: true,
|
||||
customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 200,
|
||||
fixed: 'left',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '企业名称',
|
||||
key: 'companyName',
|
||||
dataIndex: 'companyName',
|
||||
width: 220,
|
||||
fixed: 'left',
|
||||
sorter: true,
|
||||
showSorterTooltip: false
|
||||
},
|
||||
{
|
||||
title: '昵称',
|
||||
key: 'nickname',
|
||||
dataIndex: 'nickname',
|
||||
fixed: 'left',
|
||||
sorter: true,
|
||||
showSorterTooltip: false
|
||||
},
|
||||
{
|
||||
title: '账号',
|
||||
dataIndex: 'username',
|
||||
sorter: true,
|
||||
showSorterTooltip: false
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
dataIndex: 'sexName',
|
||||
width: 80,
|
||||
align: 'center',
|
||||
sorter: true,
|
||||
showSorterTooltip: false
|
||||
},
|
||||
{
|
||||
title: '手机号',
|
||||
dataIndex: 'phone',
|
||||
sorter: true,
|
||||
showSorterTooltip: false
|
||||
},
|
||||
{
|
||||
title: '邮箱',
|
||||
dataIndex: 'email',
|
||||
sorter: true,
|
||||
showSorterTooltip: false
|
||||
},
|
||||
{
|
||||
title: '可用余额',
|
||||
dataIndex: 'balance',
|
||||
key: 'balance',
|
||||
sorter: true,
|
||||
showSorterTooltip: false
|
||||
},
|
||||
{
|
||||
title: '实际消费金额',
|
||||
dataIndex: 'expendMoney',
|
||||
key: 'expendMoney',
|
||||
sorter: true,
|
||||
showSorterTooltip: false
|
||||
},
|
||||
{
|
||||
title: '用户类型',
|
||||
key: 'type',
|
||||
dataIndex: 'type',
|
||||
sorter: true,
|
||||
hideInTable: true
|
||||
// customRender: ({ text }) => ['普通用户', '企业用户'][text]
|
||||
},
|
||||
{
|
||||
title: '注册来源',
|
||||
key: 'platform',
|
||||
dataIndex: 'platform',
|
||||
sorter: true,
|
||||
customRender: ({ text }) => ['未知', '网站', '小程序', 'APP'][text]
|
||||
},
|
||||
{
|
||||
title: '角色',
|
||||
key: 'roles',
|
||||
filters: [
|
||||
{
|
||||
text: '游客',
|
||||
value: 6
|
||||
},
|
||||
{
|
||||
text: '普通用户',
|
||||
value: 5
|
||||
},
|
||||
{
|
||||
text: '管理员',
|
||||
value: 11
|
||||
},
|
||||
{
|
||||
text: '公司职员',
|
||||
value: 26
|
||||
},
|
||||
{
|
||||
text: '开发人员',
|
||||
value: 12
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
sorter: true,
|
||||
showSorterTooltip: false,
|
||||
ellipsis: true,
|
||||
customRender: ({ text }) => toDateString(text)
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
key: 'status',
|
||||
dataIndex: 'status',
|
||||
sorter: true,
|
||||
showSorterTooltip: false,
|
||||
width: 90,
|
||||
align: 'center'
|
||||
}
|
||||
]);
|
||||
// 表格选中数据
|
||||
const selection = ref<User[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<User | null>(null);
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
// 是否显示用户详情
|
||||
const showInfo = ref(false);
|
||||
// 是否显示用户导入弹窗
|
||||
const showImport = ref(false);
|
||||
const type = ref('nickname');
|
||||
const searchText = ref('');
|
||||
// 默认搜索条件
|
||||
const defaultWhere = reactive({
|
||||
username: '',
|
||||
nickname: ''
|
||||
});
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({
|
||||
page,
|
||||
limit,
|
||||
where,
|
||||
orders,
|
||||
filters
|
||||
}) => {
|
||||
where = {};
|
||||
if (type.value == 'username') {
|
||||
where.username = searchText.value;
|
||||
}
|
||||
if (type.value == 'nickname') {
|
||||
where.nickname = searchText.value;
|
||||
}
|
||||
if (type.value == 'phone') {
|
||||
where.phone = searchText.value;
|
||||
}
|
||||
if (type.value == 'userId') {
|
||||
where.userId = searchText.value;
|
||||
}
|
||||
where.roleId = filters.roles;
|
||||
where.type = 10;
|
||||
return pageUsers({ ...where, ...orders, page, limit });
|
||||
};
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: UserParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ page: 1, where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: User) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开用户详情弹窗 */
|
||||
const openInfo = (row?: User) => {
|
||||
current.value = row ?? null;
|
||||
showInfo.value = true;
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openImport = () => {
|
||||
showImport.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: User) => {
|
||||
const hide = messageLoading('请求中..', 0);
|
||||
removeUser(row.userId)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 批量删除 */
|
||||
const removeBatch = () => {
|
||||
if (!selection.value.length) {
|
||||
message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
content: '确定要删除选中的用户吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = messageLoading('请求中..', 0);
|
||||
removeUsers(selection.value.map((d) => d.userId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 重置用户密码 */
|
||||
const resetPsw = (row: User) => {
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
content: '确定要重置此用户的密码吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
const password = uuid(8);
|
||||
updateUserPassword(row.userId, password)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg + '，新密码：' + password);
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 修改用户状态 */
|
||||
const editStatus = (checked: boolean, row: User) => {
|
||||
const status = checked ? 0 : 1;
|
||||
updateUserStatus(row.userId, status)
|
||||
.then((msg) => {
|
||||
row.status = status;
|
||||
message.success(msg);
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'SystemUser'
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,223 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="600"
|
||||
:visible="visible"
|
||||
:maskClosable="false"
|
||||
:maxable="maxable"
|
||||
:title="isUpdate ? '编辑等级' : '添加等级'"
|
||||
:body-style="{ paddingBottom: '28px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
|
||||
:wrapper-col="
|
||||
styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
|
||||
"
|
||||
>
|
||||
<a-form-item label="等级名称" name="name">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入等级名称"
|
||||
v-model:value="form.name"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="等级权重" name="weight">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入等级权重"
|
||||
v-model:value="form.weight"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="升级条件" name="upgrade">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入升级条件"
|
||||
v-model:value="form.upgrade"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="会员权益" name="equity">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入会员权益"
|
||||
v-model:value="form.equity"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="备注" name="comments">
|
||||
<a-textarea
|
||||
:rows="4"
|
||||
:maxlength="200"
|
||||
placeholder="请输入备注"
|
||||
v-model:value="form.comments"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { Form, message } from 'ant-design-vue';
|
||||
import { assignObject } from 'ele-admin-pro';
|
||||
import { addGrade, updateGrade } from '@/api/user/grade';
|
||||
import { Grade } from '@/api/user/grade/model';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { FormInstance } from 'ant-design-vue/es/form';
|
||||
import { Category } from '@/api/goods/category/model';
|
||||
import { TowerModel } from '@/api/tower/model/model';
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const useForm = Form.useForm;
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: Grade | null;
|
||||
categoryList?: Category[];
|
||||
modelTree?: TowerModel[];
|
||||
modelList?: TowerModel[];
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
// 是否显示最大化切换按钮
|
||||
const maxable = ref(true);
|
||||
// 表格选中数据
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
|
||||
// 用户信息
|
||||
const form = reactive<Grade>({
|
||||
gradeId: undefined,
|
||||
name: '',
|
||||
weight: undefined,
|
||||
upgrade: undefined,
|
||||
equity: '',
|
||||
status: undefined,
|
||||
comments: '',
|
||||
sortNumber: undefined,
|
||||
userId: undefined,
|
||||
createTime: '',
|
||||
updateTime: ''
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请输入等级名称',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
accessoryModel: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请输入设备型号',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
accessoryWeight: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请输入设备重量',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
accessorySpecs: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请输入设备规格',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
accessoryUnit: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请输入单位',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
const { resetFields } = useForm(form, rules);
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const formData = {
|
||||
...form
|
||||
};
|
||||
const saveOrUpdate = isUpdate.value ? updateGrade : addGrade;
|
||||
saveOrUpdate(formData)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
assignObject(form, props.data);
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style lang="less">
|
||||
.tab-pane {
|
||||
min-height: 300px;
|
||||
}
|
||||
.ml-10 {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.upload-text {
|
||||
margin-right: 70px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,42 @@
|
||||
<!-- 搜索表单 -->
|
||||
<template>
|
||||
<a-space :size="10" style="flex-wrap: wrap">
|
||||
<a-button type="primary" class="ele-btn-icon" @click="add">
|
||||
<template #icon>
|
||||
<PlusOutlined />
|
||||
</template>
|
||||
<span>添加</span>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { PlusOutlined } from '@ant-design/icons-vue';
|
||||
import type { GradeParam } from '@/api/user/grade/model';
|
||||
import { watch } from 'vue';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的角色
|
||||
selection?: [];
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: GradeParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
(e: 'batchMove'): void;
|
||||
}>();
|
||||
|
||||
// 新增
|
||||
const add = () => {
|
||||
emit('add');
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
@@ -0,0 +1,320 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="gradeId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
v-model:selection="selection"
|
||||
:customRow="customRow"
|
||||
tool-class="ele-toolbar-form"
|
||||
class="sys-org-table"
|
||||
>
|
||||
<template #toolbar>
|
||||
<search
|
||||
@search="reload"
|
||||
:selection="selection"
|
||||
@add="openEdit"
|
||||
@remove="removeBatch"
|
||||
@batchMove="openMove"
|
||||
/>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'gradeName'">
|
||||
<a-avatar
|
||||
:size="30"
|
||||
:src="`${record.gradeAvatar}`"
|
||||
style="margin-right: 4px"
|
||||
:srcset="`https://file.wsdns.cn/${record.gradeAvatar}`"
|
||||
>
|
||||
<template #icon>
|
||||
<UserOutlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
<a-tooltip title="查看详情">
|
||||
<a href="#" @click="openInfo(record)">{{ record.gradeName }}</a>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template v-if="column.key === 'progress'">
|
||||
<div v-for="(d, i) in progressDict" :key="i">
|
||||
<span v-if="d.value === record.progress">{{ d.label }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'gradeType'">
|
||||
<div v-for="(d, i) in JSON.parse(gradeType)" :key="i">
|
||||
<span v-if="d.value === record.gradeType">{{ d.value }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-tag v-if="record.status === 0" color="green">启用</a-tag>
|
||||
<a-tag v-if="record.status === 1" color="red">禁用</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'nickname'">
|
||||
<a-tooltip :title="`${record.nickname}`">
|
||||
<a-avatar :src="record.userAvatar" size="small" />
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template v-if="column.key === 'createTime'">
|
||||
<a-tooltip :title="`${toDateString(record.createTime)}`">
|
||||
{{ timeAgo(record.createTime) }}
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a @click="openEdit(record)">修改</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm
|
||||
title="确定要删除此记录吗？"
|
||||
@confirm="remove(record)"
|
||||
>
|
||||
<a class="ele-text-danger">删除</a>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<GradeEdit
|
||||
v-model:visible="showEdit"
|
||||
:data="current"
|
||||
:category-list="data"
|
||||
:model-tree="data2"
|
||||
:model-list="data2List"
|
||||
@done="reload"
|
||||
/>
|
||||
<!-- 批量转移弹窗 -->
|
||||
<!-- <GradeMove v-model:visible="showMove" :data="selection" @done="batchMove" />-->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, createVNode, ref } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import {
|
||||
ExclamationCircleOutlined,
|
||||
UserOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import { toDateString } from 'ele-admin-pro';
|
||||
import Search from './components/search.vue';
|
||||
import GradeEdit from './components/grade-edit.vue';
|
||||
import { pageGrade, removeGrade, removeBatchGrade } from '@/api/user/grade';
|
||||
import { timeAgo } from 'ele-admin-pro';
|
||||
import type { Grade, GradeParam } from '@/api/user/grade/model';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
|
||||
const userStore = useUserStore();
|
||||
// 当前用户信息
|
||||
const loginUser = computed(() => userStore.info ?? {});
|
||||
const gradeType = localStorage.getItem('gradeType');
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<Grade[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<Grade | null>(null);
|
||||
// 是否显示资产详情
|
||||
const showInfo = ref(false);
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
// 是否显示批量移动弹窗
|
||||
const showMove = ref(false);
|
||||
// 加载状态
|
||||
const loading = ref(true);
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({
|
||||
page,
|
||||
limit,
|
||||
where,
|
||||
orders,
|
||||
filters
|
||||
}) => {
|
||||
if (filters) {
|
||||
where.progress = filters.progress;
|
||||
where.gradeSource = filters.gradeSource;
|
||||
where.gradeType = filters.gradeType;
|
||||
where.status = filters.status;
|
||||
}
|
||||
return pageGrade({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
key: 'index',
|
||||
width: 48,
|
||||
align: 'center',
|
||||
fixed: 'left',
|
||||
hideInSetting: true,
|
||||
customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
|
||||
},
|
||||
{
|
||||
title: '等级名称',
|
||||
dataIndex: 'name'
|
||||
},
|
||||
{
|
||||
title: '等级权重',
|
||||
dataIndex: 'weight'
|
||||
},
|
||||
{
|
||||
title: '升级条件',
|
||||
dataIndex: 'upgrade'
|
||||
},
|
||||
{
|
||||
title: '等级权益',
|
||||
dataIndex: 'equity'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 200,
|
||||
fixed: 'right',
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: GradeParam) => {
|
||||
console.log(where);
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: Grade) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开批量移动弹窗 */
|
||||
const openMove = () => {
|
||||
showMove.value = true;
|
||||
};
|
||||
|
||||
/* 打开用户详情弹窗 */
|
||||
const openInfo = (row?: Grade) => {
|
||||
current.value = row ?? null;
|
||||
showInfo.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: Grade) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeGrade(row.gradeId)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 批量转移 */
|
||||
const batchMove = (userId) => {
|
||||
console.log(userId, '批量转移0000');
|
||||
console.log(selection.value);
|
||||
};
|
||||
|
||||
/* 批量删除 */
|
||||
const removeBatch = () => {
|
||||
if (!selection.value.length) {
|
||||
message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
content: '确定要删除选中的记录吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeBatchGrade(
|
||||
selection.value.map((d) => {
|
||||
if (loginUser.value.userId === d.userId) {
|
||||
return d.gradeId;
|
||||
}
|
||||
})
|
||||
)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 查询 */
|
||||
const query = () => {
|
||||
loading.value = true;
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: Grade) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
query();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'Grade'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.sys-org-table :deep(.ant-table-body) {
|
||||
overflow: auto !important;
|
||||
overflow: overlay !important;
|
||||
}
|
||||
|
||||
.sys-org-table :deep(.ant-table-pagination.ant-pagination) {
|
||||
padding: 0 4px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,39 @@
|
||||
<!-- 机构选择下拉框 -->
|
||||
<template>
|
||||
<a-tree-select
|
||||
allow-clear
|
||||
tree-default-expand-all
|
||||
:placeholder="placeholder"
|
||||
:value="value || undefined"
|
||||
:tree-data="data"
|
||||
:dropdown-style="{ maxHeight: '360px', overflow: 'auto' }"
|
||||
@update:value="updateValue"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { Organization } from '@/api/system/organization/model';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:value', value?: number): void;
|
||||
}>();
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
// 选中的数据(v-modal)
|
||||
value?: number;
|
||||
// 提示信息
|
||||
placeholder?: string;
|
||||
// 机构数据
|
||||
data: Organization[];
|
||||
}>(),
|
||||
{
|
||||
placeholder: '请选择角色'
|
||||
}
|
||||
);
|
||||
|
||||
/* 更新选中数据 */
|
||||
const updateValue = (value?: number) => {
|
||||
emit('update:value', value);
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,71 @@
|
||||
<!-- 角色选择下拉框 -->
|
||||
<template>
|
||||
<a-select
|
||||
allow-clear
|
||||
mode="multiple"
|
||||
:value="roleIds"
|
||||
:placeholder="placeholder"
|
||||
@update:value="updateValue"
|
||||
@blur="onBlur"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="item in data"
|
||||
:key="item.roleId"
|
||||
:value="item.roleId"
|
||||
>
|
||||
{{ item.roleName }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
import { listRoles } from '@/api/system/role';
|
||||
import type { Role } from '@/api/system/role/model';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:value', value: Role[]): void;
|
||||
(e: 'blur'): void;
|
||||
}>();
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的角色
|
||||
value?: Role[];
|
||||
//
|
||||
placeholder?: string;
|
||||
}>(),
|
||||
{
|
||||
placeholder: '请选择角色'
|
||||
}
|
||||
);
|
||||
|
||||
// 选中的角色id
|
||||
const roleIds = computed(() => props.value?.map((d) => d.roleId as number));
|
||||
|
||||
// 角色数据
|
||||
const data = ref<Role[]>([]);
|
||||
|
||||
/* 更新选中数据 */
|
||||
const updateValue = (value: number[]) => {
|
||||
emit(
|
||||
'update:value',
|
||||
value.map((v) => ({ roleId: v }))
|
||||
);
|
||||
};
|
||||
|
||||
/* 获取角色数据 */
|
||||
listRoles()
|
||||
.then((list) => {
|
||||
data.value = list;
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
|
||||
/* 失去焦点 */
|
||||
const onBlur = () => {
|
||||
emit('blur');
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,45 @@
|
||||
<!-- 角色选择下拉框 -->
|
||||
<template>
|
||||
<a-select
|
||||
show-search
|
||||
optionFilterProp="label"
|
||||
:options="data"
|
||||
allow-clear
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
@update:value="updateValue"
|
||||
@blur="onBlur"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getDictionaryOptions } from '@/utils/common';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:value', value: string): void;
|
||||
(e: 'blur'): void;
|
||||
}>();
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
value?: string;
|
||||
placeholder?: string;
|
||||
}>(),
|
||||
{
|
||||
placeholder: '请选择性别'
|
||||
}
|
||||
);
|
||||
|
||||
// 字典数据
|
||||
const data = getDictionaryOptions('sex');
|
||||
|
||||
/* 更新选中数据 */
|
||||
const updateValue = (value: string) => {
|
||||
emit('update:value', value);
|
||||
};
|
||||
|
||||
/* 失去焦点 */
|
||||
const onBlur = () => {
|
||||
emit('blur');
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,366 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="800"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:title="isUpdate ? '修改用户' : '新建用户'"
|
||||
:body-style="{ paddingBottom: '8px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="styleResponsive ? { md: 5, sm: 4, xs: 24 } : { flex: '90px' }"
|
||||
:wrapper-col="
|
||||
styleResponsive ? { md: 17, sm: 20, xs: 24 } : { flex: '1' }
|
||||
"
|
||||
>
|
||||
<a-row :gutter="16">
|
||||
<a-col
|
||||
v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
|
||||
>
|
||||
<a-form-item label="账号" name="username">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入账号"
|
||||
:disabled="isUpdate"
|
||||
v-model:value="form.username"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="昵称" name="nickname">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入昵称"
|
||||
:disabled="form.nickname !== ''"
|
||||
v-model:value="form.nickname"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="角色" name="roles">
|
||||
<role-select v-model:value="form.roles" />
|
||||
</a-form-item>
|
||||
<a-form-item label="别名" name="alias">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="10"
|
||||
placeholder="用户别名|备注|仅后台可见"
|
||||
v-model:value="form.alias"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="性别" name="sex">
|
||||
<sex-select v-model:value="form.sex" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
|
||||
>
|
||||
<a-form-item label="手机号" name="phone">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="11"
|
||||
:disabled="form.phone !== ''"
|
||||
placeholder="请输入手机号"
|
||||
v-model:value="form.phone"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="邮箱" name="email">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="100"
|
||||
placeholder="请输入邮箱"
|
||||
v-model:value="form.email"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="出生日期">
|
||||
<a-date-picker
|
||||
class="ele-fluid"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="请选择出生日期"
|
||||
v-model:value="form.birthday"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="!isUpdate" label="登录密码" name="password">
|
||||
<a-input-password
|
||||
:maxlength="20"
|
||||
v-model:value="form.password"
|
||||
placeholder="请输入登录密码"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="个人简介">
|
||||
<a-textarea
|
||||
:rows="4"
|
||||
:maxlength="200"
|
||||
placeholder="请输入个人简介"
|
||||
v-model:value="form.introduction"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-divider style="padding-top: 20px" />
|
||||
<a-row :gutter="16">
|
||||
<a-col
|
||||
v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
|
||||
>
|
||||
<a-form-item label="客户分组" name="type">
|
||||
<a-select placeholder="请选择账号类型" v-model:value="form.type">
|
||||
<template v-for="(item, index) in userTypeData" :key="index">
|
||||
<a-select-option :value="Number(item.value)">
|
||||
{{ item.label }}
|
||||
</a-select-option>
|
||||
</template>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="公司名称" name="companyName">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入公司名称"
|
||||
v-model:value="form.companyName"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="真实姓名" name="realName">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入真实姓名"
|
||||
v-model:value="form.realName"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="所属机构" name="type">
|
||||
<org-select
|
||||
:data="organizationList"
|
||||
placeholder="请选择所属机构"
|
||||
v-model:value="form.organizationId"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
|
||||
>
|
||||
<a-form-item label="营业执照" name="idCard">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入营业执照号码"
|
||||
v-model:value="form.idCard"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="身份证号" name="idCard">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入身份证号码"
|
||||
v-model:value="form.idCard"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="备注" name="comments">
|
||||
<a-textarea
|
||||
:rows="4"
|
||||
:maxlength="200"
|
||||
placeholder="请输入备注信息"
|
||||
v-model:value="form.comments"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
import type { FormInstance, Rule } from 'ant-design-vue/es/form';
|
||||
import { emailReg, phoneReg } from 'ele-admin-pro/es';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import RoleSelect from './role-select.vue';
|
||||
import SexSelect from './sex-select.vue';
|
||||
import { addUser, updateUser, checkExistence } from '@/api/system/user';
|
||||
import type { User } from '@/api/system/user/model';
|
||||
import OrgSelect from './org-select.vue';
|
||||
import { getDictionaryOptions } from '@/utils/common';
|
||||
import { Organization } from '@/api/system/organization/model';
|
||||
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
// 获取字典数据
|
||||
const userTypeData = getDictionaryOptions('userType');
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: User | null;
|
||||
// 全部机构
|
||||
organizationList: Organization[];
|
||||
}>();
|
||||
|
||||
//
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
|
||||
// 表单数据
|
||||
const { form, resetFields, assignFields } = useFormData<User>({
|
||||
type: undefined,
|
||||
userId: undefined,
|
||||
username: '',
|
||||
nickname: '',
|
||||
realName: '',
|
||||
alias: '',
|
||||
companyName: '',
|
||||
sex: undefined,
|
||||
roles: [],
|
||||
email: '',
|
||||
phone: '',
|
||||
password: '',
|
||||
introduction: '',
|
||||
organizationId: undefined,
|
||||
birthday: '',
|
||||
idCard: '',
|
||||
comments: ''
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive<Record<string, Rule[]>>({
|
||||
username: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
validator: (_rule: Rule, value: string) => {
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
if (!value) {
|
||||
return reject('请输入用户账号');
|
||||
}
|
||||
checkExistence('username', value, props.data?.userId)
|
||||
.then(() => {
|
||||
reject('账号已经存在');
|
||||
})
|
||||
.catch(() => {
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
nickname: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入昵称',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
// sex: [
|
||||
// {
|
||||
// required: true,
|
||||
// message: '请选择性别',
|
||||
// type: 'string',
|
||||
// trigger: 'blur'
|
||||
// }
|
||||
// ],
|
||||
roles: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择角色',
|
||||
type: 'array',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
email: [
|
||||
{
|
||||
pattern: emailReg,
|
||||
message: '邮箱格式不正确',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
validator: async (_rule: Rule, value: string) => {
|
||||
if (isUpdate.value || /^[\S]{5,18}$/.test(value)) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
return Promise.reject('密码必须为5-18位非空白字符');
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
phone: [
|
||||
{
|
||||
pattern: phoneReg,
|
||||
message: '手机号格式不正确',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const saveOrUpdate = isUpdate.value ? updateUser : addUser;
|
||||
saveOrUpdate(form)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
assignFields({
|
||||
...props.data,
|
||||
password: ''
|
||||
});
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
formRef.value?.clearValidate();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
@@ -0,0 +1,88 @@
|
||||
<!-- 用户导入弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="520"
|
||||
:footer="null"
|
||||
title="导入用户"
|
||||
:visible="visible"
|
||||
@update:visible="updateVisible"
|
||||
>
|
||||
<a-spin :spinning="loading">
|
||||
<a-upload-dragger
|
||||
accept=".xls,.xlsx"
|
||||
:show-upload-list="false"
|
||||
:customRequest="doUpload"
|
||||
style="padding: 24px 0; margin-bottom: 16px"
|
||||
>
|
||||
<p class="ant-upload-drag-icon">
|
||||
<cloud-upload-outlined />
|
||||
</p>
|
||||
<p class="ant-upload-hint">将文件拖到此处，或点击上传</p>
|
||||
</a-upload-dragger>
|
||||
</a-spin>
|
||||
<div class="ele-text-center">
|
||||
<span>只能上传xls、xlsx文件，</span>
|
||||
<a
|
||||
href="https://cdn.eleadmin.com/20200610/用户导入模板.xlsx"
|
||||
download="用户导入模板.xlsx"
|
||||
>
|
||||
下载模板
|
||||
</a>
|
||||
</div>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
import { CloudUploadOutlined } from '@ant-design/icons-vue';
|
||||
import { importUsers } from '@/api/system/user';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
defineProps<{
|
||||
// 是否打开弹窗
|
||||
visible: boolean;
|
||||
}>();
|
||||
|
||||
// 导入请求状态
|
||||
const loading = ref(false);
|
||||
|
||||
/* 上传 */
|
||||
const doUpload = ({ file }) => {
|
||||
if (
|
||||
![
|
||||
'application/vnd.ms-excel',
|
||||
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
|
||||
].includes(file.type)
|
||||
) {
|
||||
message.error('只能选择 excel 文件');
|
||||
return false;
|
||||
}
|
||||
if (file.size / 1024 / 1024 > 10) {
|
||||
message.error('大小不能超过 10MB');
|
||||
return false;
|
||||
}
|
||||
loading.value = true;
|
||||
importUsers(file)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
return false;
|
||||
};
|
||||
|
||||
/* 更新 visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,143 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<a-drawer
|
||||
:width="680"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:title="'基本信息'"
|
||||
:body-style="{ paddingBottom: '8px' }"
|
||||
@update:visible="updateVisible"
|
||||
:footer="null"
|
||||
>
|
||||
<a-form
|
||||
:label-col="{ md: { span: 6 }, sm: { span: 24 } }"
|
||||
:wrapper-col="{ md: { span: 19 }, sm: { span: 24 } }"
|
||||
>
|
||||
<a-row :gutter="16">
|
||||
<a-col
|
||||
v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
|
||||
>
|
||||
<a-form-item label="账号">
|
||||
<span class="ele-text">{{ user.username }}</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="昵称">
|
||||
<span class="ele-text">{{ user.nickname }}</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="性别">
|
||||
<span class="ele-text">{{ user.sexName }}</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="手机号">
|
||||
<span class="ele-text">{{ user.phone }}</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="角色">
|
||||
<a-tag v-for="item in user.roles" :key="item.roleId" color="blue">
|
||||
{{ item.roleName }}
|
||||
</a-tag>
|
||||
</a-form-item>
|
||||
<a-form-item label="状态">
|
||||
<a-badge
|
||||
v-if="typeof user.status === 'number'"
|
||||
:status="(['processing', 'error'][user.status] as any)"
|
||||
:text="['正常', '冻结'][user.status]"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="地址">
|
||||
<span class="ele-text">{{ user.address }}</span>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
|
||||
>
|
||||
<a-form-item label="可用余额">
|
||||
<span class="ele-text-success">￥{{ formatNumber(user.balance) }}</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="可用积分">
|
||||
<span class="ele-text">{{ user.points }}</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="实际消费">
|
||||
<span class="ele-text">{{ user.payMoney }}</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="机构/部门">
|
||||
<span class="ele-text">{{ user.organizationName }}</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="头像">
|
||||
<a-image :src="user.avatar" :width="36" />
|
||||
</a-form-item>
|
||||
<a-form-item label="生日">
|
||||
<span class="ele-text">{{ user.birthday }}</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="创建时间">
|
||||
<span class="ele-text">{{ user.createTime }}</span>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { Form } from 'ant-design-vue';
|
||||
import { assignObject } from 'ele-admin-pro';
|
||||
import type { User } from '@/api/system/user/model';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import { formatNumber } from 'ele-admin-pro/es';
|
||||
import { storeToRefs } from 'pinia';
|
||||
|
||||
const useForm = Form.useForm;
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: User | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 用户信息
|
||||
const user = reactive<User>({
|
||||
username: '',
|
||||
nickname: '',
|
||||
sexName: '',
|
||||
phone: '',
|
||||
avatar: '',
|
||||
balance: undefined,
|
||||
points: 0,
|
||||
payMoney: 0,
|
||||
birthday: '',
|
||||
address: '',
|
||||
roles: [],
|
||||
createTime: undefined,
|
||||
status: undefined
|
||||
});
|
||||
|
||||
// 请求状态
|
||||
const loading = ref(true);
|
||||
|
||||
const { resetFields } = useForm(user);
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
loading.value = false;
|
||||
assignObject(user, props.data);
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
@@ -0,0 +1,111 @@
|
||||
<!-- 搜索表单 -->
|
||||
<template>
|
||||
<a-form
|
||||
:label-col="
|
||||
styleResponsive ? { xl: 7, lg: 5, md: 7, sm: 4 } : { flex: '90px' }
|
||||
"
|
||||
:wrapper-col="
|
||||
styleResponsive ? { xl: 17, lg: 19, md: 17, sm: 20 } : { flex: '1' }
|
||||
"
|
||||
>
|
||||
<a-row :gutter="8">
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive
|
||||
? { xl: 6, lg: 12, md: 12, sm: 24, xs: 24 }
|
||||
: { span: 6 }
|
||||
"
|
||||
>
|
||||
<a-form-item label="用户账号">
|
||||
<a-input
|
||||
v-model:value.trim="form.username"
|
||||
placeholder="请输入"
|
||||
allow-clear
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive
|
||||
? { xl: 6, lg: 12, md: 12, sm: 24, xs: 24 }
|
||||
: { span: 6 }
|
||||
"
|
||||
>
|
||||
<a-form-item label="昵称">
|
||||
<a-input
|
||||
v-model:value.trim="form.nickname"
|
||||
placeholder="请输入"
|
||||
allow-clear
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive
|
||||
? { xl: 6, lg: 12, md: 12, sm: 24, xs: 24 }
|
||||
: { span: 6 }
|
||||
"
|
||||
>
|
||||
<a-form-item label="性别">
|
||||
<a-select v-model:value="form.sex" placeholder="请选择" allow-clear>
|
||||
<a-select-option value="1">男</a-select-option>
|
||||
<a-select-option value="2">女</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive
|
||||
? { xl: 6, lg: 12, md: 12, sm: 24, xs: 24 }
|
||||
: { span: 6 }
|
||||
"
|
||||
>
|
||||
<a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="search">查询</a-button>
|
||||
<a-button @click="reset">重置</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import type { UserParam } from '@/api/system/user/model';
|
||||
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const props = defineProps<{
|
||||
// 默认搜索条件
|
||||
where?: UserParam;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: UserParam): void;
|
||||
}>();
|
||||
|
||||
// 表单数据
|
||||
const { form, resetFields } = useFormData<UserParam>({
|
||||
username: '',
|
||||
nickname: '',
|
||||
sex: undefined,
|
||||
...props.where
|
||||
});
|
||||
|
||||
/* 搜索 */
|
||||
const search = () => {
|
||||
emit('search', form);
|
||||
};
|
||||
|
||||
/* 重置 */
|
||||
const reset = () => {
|
||||
resetFields();
|
||||
search();
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card title="基本信息123" :bordered="false">
|
||||
<a-form
|
||||
class="ele-form-detail"
|
||||
:label-col="
|
||||
styleResponsive ? { md: 2, sm: 4, xs: 6 } : { flex: '90px' }
|
||||
"
|
||||
:wrapper-col="
|
||||
styleResponsive ? { md: 22, sm: 20, xs: 18 } : { flex: '1' }
|
||||
"
|
||||
>
|
||||
<a-form-item label="账号">
|
||||
<div class="ele-text-secondary">{{ form.username }}</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="昵称">
|
||||
<div class="ele-text-secondary">{{ form.nickname }}</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="性别">
|
||||
<div class="ele-text-secondary">{{ form.sexName }}</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="手机号">
|
||||
<div class="ele-text-secondary">{{ form.phone }}</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="角色">
|
||||
<a-tag v-for="item in form.roles" :key="item.roleId" color="blue">
|
||||
{{ item.roleName }}
|
||||
</a-tag>
|
||||
</a-form-item>
|
||||
<a-form-item label="创建时间">
|
||||
<div class="ele-text-secondary">{{ form.createTime }}</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="状态">
|
||||
<a-badge
|
||||
v-if="typeof form.status === 'number'"
|
||||
:status="(['processing', 'error'][form.status] as any)"
|
||||
:text="['正常', '冻结'][form.status]"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch, unref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
import { toDateString } from 'ele-admin-pro/es';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import { setPageTabTitle } from '@/utils/page-tab-util';
|
||||
import { getUser } from '@/api/system/user';
|
||||
import type { User } from '@/api/system/user/model';
|
||||
const ROUTE_PATH = '/system/user/details';
|
||||
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const { currentRoute } = useRouter();
|
||||
|
||||
// 用户信息
|
||||
const { form, assignFields } = useFormData<User>({
|
||||
userId: undefined,
|
||||
username: '',
|
||||
nickname: '',
|
||||
sexName: '',
|
||||
phone: '',
|
||||
roles: [],
|
||||
createTime: undefined,
|
||||
status: undefined
|
||||
});
|
||||
|
||||
// 请求状态
|
||||
const loading = ref(true);
|
||||
|
||||
/* */
|
||||
const query = () => {
|
||||
const { query } = unref(currentRoute);
|
||||
const id = query.id;
|
||||
if (!id || form.userId === Number(id)) {
|
||||
return;
|
||||
}
|
||||
loading.value = true;
|
||||
getUser(Number(id))
|
||||
.then((data) => {
|
||||
loading.value = false;
|
||||
assignFields({
|
||||
...data,
|
||||
createTime: toDateString(data.createTime)
|
||||
});
|
||||
// 修改页签标题
|
||||
if (unref(currentRoute).path === ROUTE_PATH) {
|
||||
setPageTabTitle(data.nickname + '的信息');
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
currentRoute,
|
||||
(route) => {
|
||||
const { path } = unref(route);
|
||||
if (path !== ROUTE_PATH) {
|
||||
return;
|
||||
}
|
||||
query();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'SystemUserDetails'
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,632 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="userId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
v-model:selection="selection"
|
||||
:scroll="{ x: 1300 }"
|
||||
:where="defaultWhere"
|
||||
:customRow="customRow"
|
||||
cache-key="proSystemUserTable"
|
||||
>
|
||||
<template #toolbar>
|
||||
<a-space>
|
||||
<a-button type="primary" class="ele-btn-icon" @click="openEdit()">
|
||||
<template #icon>
|
||||
<plus-outlined />
|
||||
</template>
|
||||
<span>新建</span>
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
class="ele-btn-icon"
|
||||
@click="openEdit(selection[0])"
|
||||
:disabled="selection.length === 0"
|
||||
>
|
||||
<template #icon>
|
||||
<EditOutlined />
|
||||
</template>
|
||||
<span>修改</span>
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
danger
|
||||
@click="resetPsw(selection[0])"
|
||||
:disabled="selection.length === 0"
|
||||
>重置密码</a-button
|
||||
>
|
||||
<a-button
|
||||
danger
|
||||
type="primary"
|
||||
class="ele-btn-icon"
|
||||
@click="removeBatch"
|
||||
>
|
||||
<template #icon>
|
||||
<delete-outlined />
|
||||
</template>
|
||||
<span>批量删除</span>
|
||||
</a-button>
|
||||
<a-button type="dashed" class="ele-btn-icon" @click="openImport">
|
||||
<template #icon>
|
||||
<upload-outlined />
|
||||
</template>
|
||||
<span>导入</span>
|
||||
</a-button>
|
||||
<a-input-search
|
||||
allow-clear
|
||||
v-model:value="searchText"
|
||||
placeholder="请输入关键词"
|
||||
@search="reload"
|
||||
@pressEnter="reload"
|
||||
>
|
||||
<template #addonBefore>
|
||||
<a-select
|
||||
v-model:value="type"
|
||||
style="width: 100px; margin: -5px -12px"
|
||||
>
|
||||
<a-select-option value="keywords">模糊搜索</a-select-option>
|
||||
<a-select-option value="nickname">昵称</a-select-option>
|
||||
<a-select-option value="username">账号</a-select-option>
|
||||
<a-select-option value="phone">手机号码</a-select-option>
|
||||
<a-select-option value="userId">用户ID</a-select-option>
|
||||
<a-select-option value="realName">真实姓名</a-select-option>
|
||||
<a-select-option value="companyName"
|
||||
>公司名称</a-select-option
|
||||
>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-input-search>
|
||||
<a-radio-group v-model:value="userType" @change="handleTabs">
|
||||
<a-radio-button
|
||||
v-for="(item, index) in userTypeData"
|
||||
:key="index"
|
||||
:value="Number(item.value)"
|
||||
>{{ item.label }}</a-radio-button
|
||||
>
|
||||
</a-radio-group>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'nickname'">
|
||||
<div class="user-box">
|
||||
<a-avatar
|
||||
:size="30"
|
||||
:src="`${record.avatar}`"
|
||||
style="margin-right: 4px"
|
||||
>
|
||||
<template #icon>
|
||||
<UserOutlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
<div class="user-info">
|
||||
<span>{{ record.alias }}</span>
|
||||
<span class="ele-text-placeholder">{{ record.nickname }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'roles'">
|
||||
<a-tag v-for="item in record.roles" :key="item.roleId" color="blue">
|
||||
{{ item.roleName }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'balance'">
|
||||
<span class="ele-text-success">
|
||||
￥{{ formatNumber(record.balance) }}
|
||||
</span>
|
||||
</template>
|
||||
<!-- <template v-if="column.key === 'introduction'">-->
|
||||
<!-- <a-tooltip :title="`${record.introduction}`">-->
|
||||
<!-- {{ record.introduction }}-->
|
||||
<!-- </a-tooltip>-->
|
||||
<!-- </template>-->
|
||||
<template v-if="column.key === 'expendMoney'">
|
||||
<span class="ele-text-warning">
|
||||
￥{{ formatNumber(record.expendMoney) }}
|
||||
</span>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'status'">
|
||||
<a-switch
|
||||
:checked="record.status === 0"
|
||||
@change="(checked: boolean) => editStatus(checked, record)"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a-button @click="openEdit(record)">修改</a-button>
|
||||
<a-divider type="vertical" />
|
||||
<a-button @click="resetPsw(record)">重置密码</a-button>
|
||||
<!-- <a-divider type="vertical" />-->
|
||||
<!-- <a-popconfirm-->
|
||||
<!-- placement="topRight"-->
|
||||
<!-- title="确定要删除此用户吗？"-->
|
||||
<!-- @confirm="remove(record)"-->
|
||||
<!-- >-->
|
||||
<!-- <a class="ele-text-danger">删除</a>-->
|
||||
<!-- </a-popconfirm>-->
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
<!-- 编辑弹窗 -->
|
||||
<user-edit
|
||||
v-model:visible="showEdit"
|
||||
:data="current"
|
||||
:organization-list="data"
|
||||
@done="reload"
|
||||
/>
|
||||
<!-- 导入弹窗 -->
|
||||
<user-import v-model:visible="showImport" @done="reload" />
|
||||
<!-- 用户详情 -->
|
||||
<user-info v-model:visible="showInfo" :data="current" @done="reload" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref, reactive } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue/es';
|
||||
import {
|
||||
PlusOutlined,
|
||||
DeleteOutlined,
|
||||
UploadOutlined,
|
||||
EditOutlined,
|
||||
UserOutlined,
|
||||
ExclamationCircleOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro/es';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import { messageLoading, formatNumber } from 'ele-admin-pro/es';
|
||||
import { timeAgo } from 'ele-admin-pro';
|
||||
import UserEdit from './components/user-edit.vue';
|
||||
import UserImport from './components/user-import.vue';
|
||||
import UserInfo from './components/user-info.vue';
|
||||
import {
|
||||
pageUsers,
|
||||
removeUser,
|
||||
removeUsers,
|
||||
updateUserStatus,
|
||||
updateUserPassword
|
||||
} from '@/api/system/user';
|
||||
import type { User, UserParam } from '@/api/system/user/model';
|
||||
import { toTreeData, uuid } from 'ele-admin-pro';
|
||||
import { listRoles } from '@/api/system/role';
|
||||
import { getDictionaryOptions } from '@/utils/common';
|
||||
import { listOrganizations } from '@/api/system/organization';
|
||||
import { Organization } from '@/api/system/organization/model';
|
||||
|
||||
// 加载状态
|
||||
const loading = ref(true);
|
||||
// 树形数据
|
||||
const data = ref<Organization[]>([]);
|
||||
// 树展开的key
|
||||
const expandedRowKeys = ref<number[]>([]);
|
||||
// 树选中的key
|
||||
const selectedRowKeys = ref<number[]>([]);
|
||||
// 表格选中数据
|
||||
const selection = ref<User[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<User | null>(null);
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
// 是否显示用户详情
|
||||
const showInfo = ref(false);
|
||||
// 是否显示用户导入弹窗
|
||||
const showImport = ref(false);
|
||||
const type = ref('keywords');
|
||||
const userType = ref<number>();
|
||||
const searchText = ref('');
|
||||
|
||||
// 加载角色
|
||||
const roles = ref<any[]>([]);
|
||||
const filters = () => {
|
||||
listRoles().then((result) => {
|
||||
result.map((d) => {
|
||||
roles.value.push({
|
||||
text: d.roleName,
|
||||
value: d.roleId
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
filters();
|
||||
// 加载机构
|
||||
listOrganizations()
|
||||
.then((list) => {
|
||||
loading.value = false;
|
||||
const eks: number[] = [];
|
||||
list.forEach((d) => {
|
||||
d.key = d.organizationId;
|
||||
d.value = d.organizationId;
|
||||
d.title = d.organizationName;
|
||||
if (typeof d.key === 'number') {
|
||||
eks.push(d.key);
|
||||
}
|
||||
});
|
||||
expandedRowKeys.value = eks;
|
||||
data.value = toTreeData({
|
||||
data: list,
|
||||
idField: 'organizationId',
|
||||
parentIdField: 'parentId'
|
||||
});
|
||||
if (list.length) {
|
||||
if (typeof list[0].key === 'number') {
|
||||
selectedRowKeys.value = [list[0].key];
|
||||
}
|
||||
// current.value = list[0];
|
||||
} else {
|
||||
selectedRowKeys.value = [];
|
||||
// current.value = null;
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
// 获取字典数据
|
||||
const userTypeData = getDictionaryOptions('userType');
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
key: 'index',
|
||||
width: 48,
|
||||
align: 'center',
|
||||
fixed: 'left',
|
||||
hideInSetting: true,
|
||||
customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
|
||||
},
|
||||
// {
|
||||
// title: '操作',
|
||||
// key: 'action',
|
||||
// width: 200,
|
||||
// fixed: 'left',
|
||||
// align: 'center'
|
||||
// },
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'userId',
|
||||
sorter: true,
|
||||
width: 80,
|
||||
showSorterTooltip: false
|
||||
},
|
||||
{
|
||||
title: '登录账号',
|
||||
dataIndex: 'username',
|
||||
sorter: true,
|
||||
showSorterTooltip: false
|
||||
},
|
||||
{
|
||||
title: '用户名称',
|
||||
key: 'nickname',
|
||||
dataIndex: 'nickname',
|
||||
width: 280,
|
||||
sorter: true,
|
||||
showSorterTooltip: false
|
||||
},
|
||||
// {
|
||||
// title: '客户分组',
|
||||
// dataIndex: 'type',
|
||||
// key: 'type',
|
||||
// align: 'center',
|
||||
// width: 120,
|
||||
// customRender: ({ text }) => typeName(text)
|
||||
// },
|
||||
{
|
||||
title: '手机号',
|
||||
dataIndex: 'phone',
|
||||
sorter: true,
|
||||
showSorterTooltip: false
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
dataIndex: 'sexName',
|
||||
width: 80,
|
||||
align: 'center',
|
||||
sorter: true,
|
||||
showSorterTooltip: false
|
||||
},
|
||||
{
|
||||
title: '邮箱',
|
||||
dataIndex: 'email',
|
||||
width: 180,
|
||||
sorter: true,
|
||||
hideInTable: true,
|
||||
showSorterTooltip: false
|
||||
},
|
||||
{
|
||||
title: '可用余额',
|
||||
dataIndex: 'balance',
|
||||
key: 'balance',
|
||||
sorter: true,
|
||||
showSorterTooltip: false
|
||||
},
|
||||
{
|
||||
title: '实际消费金额',
|
||||
dataIndex: 'expendMoney',
|
||||
key: 'expendMoney',
|
||||
sorter: true,
|
||||
showSorterTooltip: false
|
||||
},
|
||||
{
|
||||
title: '可用积分',
|
||||
dataIndex: 'points',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '注册来源',
|
||||
key: 'platform',
|
||||
dataIndex: 'platform',
|
||||
sorter: true,
|
||||
hideInTable: true,
|
||||
customRender: ({ text }) => ['未知', '网站', '小程序', 'APP'][text]
|
||||
},
|
||||
{
|
||||
title: '证件号码',
|
||||
dataIndex: 'idCard',
|
||||
hideInTable: true
|
||||
},
|
||||
{
|
||||
title: '出生日期',
|
||||
dataIndex: 'birthday',
|
||||
key: 'birthday',
|
||||
hideInTable: true
|
||||
},
|
||||
{
|
||||
title: '省份',
|
||||
dataIndex: 'province',
|
||||
key: 'province',
|
||||
hideInTable: true
|
||||
},
|
||||
{
|
||||
title: '城市',
|
||||
dataIndex: 'city',
|
||||
key: 'city',
|
||||
hideInTable: true,
|
||||
showSorterTooltip: false
|
||||
},
|
||||
{
|
||||
title: '地区',
|
||||
dataIndex: 'region',
|
||||
key: 'region',
|
||||
hideInTable: true,
|
||||
showSorterTooltip: false
|
||||
},
|
||||
{
|
||||
title: '个人简介',
|
||||
dataIndex: 'introduction',
|
||||
key: 'introduction',
|
||||
hideInTable: true,
|
||||
showSorterTooltip: false
|
||||
},
|
||||
{
|
||||
title: '邮箱认证',
|
||||
dataIndex: 'emailVerified',
|
||||
sorter: true,
|
||||
hideInTable: true,
|
||||
showSorterTooltip: false,
|
||||
customRender: ({ text }) => ['未认证', '已认证'][text]
|
||||
},
|
||||
{
|
||||
title: '实名认证',
|
||||
dataIndex: 'certification',
|
||||
sorter: true,
|
||||
hideInTable: true,
|
||||
customRender: ({ text }) => ['未认证', '已认证'][text]
|
||||
},
|
||||
{
|
||||
title: '角色',
|
||||
dataIndex: 'roles',
|
||||
key: 'roles',
|
||||
align: 'center',
|
||||
width: 120,
|
||||
filterMultiple: false,
|
||||
filters: roles.value
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
sorter: true,
|
||||
showSorterTooltip: false,
|
||||
ellipsis: true,
|
||||
customRender: ({ text }) => timeAgo(text)
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
key: 'status',
|
||||
dataIndex: 'status',
|
||||
sorter: true,
|
||||
showSorterTooltip: false,
|
||||
width: 90,
|
||||
align: 'center'
|
||||
}
|
||||
]);
|
||||
|
||||
// 默认搜索条件
|
||||
const defaultWhere = reactive({
|
||||
username: '',
|
||||
nickname: '',
|
||||
keywords: ''
|
||||
});
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({
|
||||
page,
|
||||
limit,
|
||||
where,
|
||||
orders,
|
||||
filters
|
||||
}) => {
|
||||
where = {};
|
||||
if (type.value == 'keywords') {
|
||||
where.keywords = searchText.value;
|
||||
}
|
||||
if (type.value == 'nickname') {
|
||||
where.nickname = searchText.value;
|
||||
}
|
||||
if (type.value == 'phone') {
|
||||
where.phone = searchText.value;
|
||||
}
|
||||
if (type.value == 'userId') {
|
||||
where.userId = searchText.value;
|
||||
}
|
||||
if (type.value == 'realName') {
|
||||
where.realName = searchText.value;
|
||||
}
|
||||
if (type.value == 'companyName') {
|
||||
where.companyName = searchText.value;
|
||||
}
|
||||
if (userType.value) {
|
||||
where.type = userType.value;
|
||||
}
|
||||
|
||||
where.roleId = filters.roles;
|
||||
return pageUsers({ page, limit, ...where, ...orders });
|
||||
};
|
||||
/* 搜索 */
|
||||
const reload = (where?: UserParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: User) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开用户详情弹窗 */
|
||||
const openInfo = (row?: User) => {
|
||||
current.value = row ?? null;
|
||||
showInfo.value = true;
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openImport = () => {
|
||||
showImport.value = true;
|
||||
};
|
||||
|
||||
const handleTabs = (e) => {
|
||||
console.log(e);
|
||||
userType.value = Number(e.target.value);
|
||||
reload();
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: User) => {
|
||||
const hide = messageLoading('请求中..', 0);
|
||||
removeUser(row.userId)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 批量删除 */
|
||||
const removeBatch = () => {
|
||||
if (!selection.value.length) {
|
||||
message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
content: '确定要删除选中的用户吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = messageLoading('请求中..', 0);
|
||||
removeUsers(selection.value.map((d) => d.userId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 重置用户密码 */
|
||||
const resetPsw = (row: User) => {
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
content: '确定要重置此用户的密码吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
const password = uuid(8);
|
||||
updateUserPassword(row.userId, password)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg + '，新密码：' + password);
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 修改用户状态 */
|
||||
const editStatus = (checked: boolean, row: User) => {
|
||||
const status = checked ? 0 : 1;
|
||||
updateUserStatus(row.userId, status)
|
||||
.then((msg) => {
|
||||
row.status = status;
|
||||
message.success(msg);
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: User) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'SystemUser'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.user-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.user-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,192 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="logId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:scroll="{ x: 1000 }"
|
||||
:where="defaultWhere"
|
||||
cache-key="userBalanceLogTable"
|
||||
>
|
||||
<template #toolbar>
|
||||
<a-space>
|
||||
<a-range-picker
|
||||
v-model:value="dateRange"
|
||||
value-format="YYYY-MM-DD"
|
||||
class="ele-fluid"
|
||||
@change="reload"
|
||||
/>
|
||||
<!-- <a-input-search-->
|
||||
<!-- allow-clear-->
|
||||
<!-- v-model:value="searchText"-->
|
||||
<!-- placeholder="请输入关键词"-->
|
||||
<!-- @search="reload"-->
|
||||
<!-- @pressEnter="reload"-->
|
||||
<!-- @close="onClose"-->
|
||||
<!-- />-->
|
||||
<!-- <a-button @click="reset">刷新</a-button>-->
|
||||
</a-space>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'nickname'">
|
||||
<a-tooltip :title="`用户ID：${record.userId}`">
|
||||
<span>{{ record.nickname }}</span>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template v-if="column.key === 'scene'">
|
||||
<a-tag v-if="record.scene === 10"> 用户充值 </a-tag>
|
||||
<a-tag v-if="record.scene === 20"> 用户消费 </a-tag>
|
||||
<a-tag v-if="record.scene === 30"> 管理员操作 </a-tag>
|
||||
<a-tag v-if="record.scene === 40"> 订单退款 </a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'money'">
|
||||
<span
|
||||
class="ele-text-success"
|
||||
v-if="record.scene === 10 || record.scene === 40"
|
||||
>
|
||||
+￥{{ formatNumber(record.money) }}
|
||||
</span>
|
||||
<template v-else-if="record.scene === 30">
|
||||
<span v-if="record.money > 0" class="ele-text-success">
|
||||
+￥{{ formatNumber(record.money) }}
|
||||
</span>
|
||||
<span v-else class="ele-text-danger">
|
||||
-￥{{ formatNumber(record.money * -1) }}
|
||||
</span>
|
||||
</template>
|
||||
<span class="ele-text-danger" v-else>
|
||||
-￥{{ formatNumber(record.money) }}
|
||||
</span>
|
||||
</template>
|
||||
<template v-if="column.key === 'balance'">
|
||||
<span> ￥{{ formatNumber(record.balance) }} </span>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, computed } from 'vue';
|
||||
import type { EleProTable } from 'ele-admin-pro/es';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import { toDateString, formatNumber } from 'ele-admin-pro/es';
|
||||
import { pageUserBalanceLog } from '@/api/user/balance-log';
|
||||
import {
|
||||
UserBalanceLog,
|
||||
UserBalanceLogParam
|
||||
} from '@/api/user/balance-log/model';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
key: 'index',
|
||||
width: 48,
|
||||
align: 'center',
|
||||
fixed: 'left',
|
||||
hideInSetting: true,
|
||||
customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
|
||||
},
|
||||
{
|
||||
title: '用户昵称',
|
||||
key: 'nickname',
|
||||
dataIndex: 'nickname',
|
||||
showSorterTooltip: false
|
||||
},
|
||||
{
|
||||
title: '场景',
|
||||
dataIndex: 'scene',
|
||||
key: 'scene',
|
||||
align: 'center',
|
||||
showSorterTooltip: false,
|
||||
filters: [
|
||||
{ text: '用户充值', value: 10 },
|
||||
{ text: '用户消费', value: 20 },
|
||||
{ text: '管理员操作', value: 30 },
|
||||
{ text: '订单退款', value: 40 }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '变动金额',
|
||||
dataIndex: 'money',
|
||||
key: 'money',
|
||||
sorter: true,
|
||||
showSorterTooltip: false
|
||||
},
|
||||
{
|
||||
title: '账户金额',
|
||||
dataIndex: 'balance',
|
||||
key: 'balance',
|
||||
sorter: true,
|
||||
showSorterTooltip: false
|
||||
},
|
||||
{
|
||||
title: '描述/说明',
|
||||
dataIndex: 'comments'
|
||||
},
|
||||
{
|
||||
title: '时间',
|
||||
dataIndex: 'createTime',
|
||||
sorter: true,
|
||||
showSorterTooltip: false,
|
||||
ellipsis: true,
|
||||
customRender: ({ text }) => toDateString(text)
|
||||
}
|
||||
]);
|
||||
|
||||
// 登录用户信息
|
||||
const userStore = useUserStore();
|
||||
const loginUser = computed(() => userStore.info ?? {});
|
||||
const searchText = ref('');
|
||||
// 日期范围选择
|
||||
const dateRange = ref<[string, string]>(['', '']);
|
||||
// 默认搜索条件
|
||||
const defaultWhere = reactive({
|
||||
username: '',
|
||||
nickname: '',
|
||||
userId: undefined
|
||||
});
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({
|
||||
page,
|
||||
limit,
|
||||
where,
|
||||
orders,
|
||||
filters
|
||||
}) => {
|
||||
const [d1, d2] = dateRange.value ?? [];
|
||||
where = {
|
||||
...{
|
||||
createTimeStart: d1 ? d1 + ' 00:00:00' : '',
|
||||
createTimeEnd: d2 ? d2 + ' 23:59:59' : ''
|
||||
}
|
||||
};
|
||||
if (filters) {
|
||||
where.sceneMultiple = filters.scene;
|
||||
}
|
||||
where.keywords = searchText.value;
|
||||
where.userId = loginUser.value.userId;
|
||||
return pageUserBalanceLog({ ...where, ...orders, page, limit });
|
||||
};
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: UserBalanceLogParam) => {
|
||||
tableRef?.value?.reload({ page: 1, where });
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'MyUserBalanceLog'
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,118 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
width="500px"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:title="`修改价格`"
|
||||
:body-style="{ paddingBottom: '8px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<a-form layout="horizontal">
|
||||
<a-form-item>
|
||||
<a-input-number :min="0" style="width: 200px" v-model:value="content" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { Form, message } from 'ant-design-vue';
|
||||
import { assignObject } from 'ele-admin-pro';
|
||||
import { updateOrder } from '@/api/order';
|
||||
import { Order } from '@/api/order/model';
|
||||
import { createOrderNo } from "@/utils/common";
|
||||
// import { reloadPageTab } from '@/utils/page-tab-util';
|
||||
|
||||
const useForm = Form.useForm;
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
data?: Order | null;
|
||||
// 修改回显的数据
|
||||
field?: string | null;
|
||||
orderId?: number | 0;
|
||||
content?: number | 0;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
const content = ref<number>(0);
|
||||
const placeholder = ref('请输入订单金额');
|
||||
// 用户信息
|
||||
const form = reactive<Order>({
|
||||
orderId: 0,
|
||||
comments: '',
|
||||
payPrice: undefined
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
const { resetFields, validate } = useForm(form);
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
// 判断更新字段
|
||||
form.orderId = props.orderId;
|
||||
if (props.field === 'payPrice') {
|
||||
form.payPrice = Number(content.value);
|
||||
form.totalPrice = Number(content.value);
|
||||
form.orderNo = createOrderNo();
|
||||
}
|
||||
updateOrder(form)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
if (props.orderId) {
|
||||
loading.value = false;
|
||||
content.value = props.content;
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
|
||||
if (props.field == 'tenantCode') {
|
||||
placeholder.value = '请输入要绑定的主体编号';
|
||||
content.value = undefined;
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style lang="less">
|
||||
.tab-pane {
|
||||
min-height: 300px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,139 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
width="600px"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:title="`修改内容`"
|
||||
:body-style="{ paddingBottom: '8px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<!-- 编辑器 -->
|
||||
<byte-md-editor
|
||||
v-model:value="content"
|
||||
:locale="zh_Hans"
|
||||
:plugins="plugins"
|
||||
uploadImages
|
||||
height="300px"
|
||||
:editorConfig="{ lineNumbers: true }"
|
||||
/>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { Form, message } from 'ant-design-vue';
|
||||
import { assignObject } from 'ele-admin-pro';
|
||||
import { updateOrder } from '@/api/order';
|
||||
import { Order } from '@/api/order/model';
|
||||
// import { reloadPageTab } from '@/utils/page-tab-util';
|
||||
import 'bytemd/dist/index.min.css';
|
||||
import 'github-markdown-css/github-markdown-light.css';
|
||||
// import TinymceEditor from '@/components/TinymceEditor/index.vue';
|
||||
import ByteMdEditor from '@/components/ByteMdEditor/index.vue';
|
||||
import highlight from '@bytemd/plugin-highlight';
|
||||
// 中文语言文件
|
||||
import zh_Hans from 'bytemd/locales/zh_Hans.json';
|
||||
// // 链接、删除线、复选框、表格等的插件
|
||||
import gfm from '@bytemd/plugin-gfm';
|
||||
// // 插件的中文语言文件
|
||||
import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
|
||||
// // 预览界面的样式，这里用的 github 的 markdown 主题
|
||||
import 'github-markdown-css/github-markdown-light.css';
|
||||
|
||||
const useForm = Form.useForm;
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
data?: Order | null;
|
||||
// 修改回显的数据
|
||||
field?: string | null;
|
||||
content?: string;
|
||||
orderId?: number;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 插件
|
||||
const plugins = ref([
|
||||
gfm({
|
||||
locale: zh_HansGfm
|
||||
}),
|
||||
highlight()
|
||||
]);
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
const content = ref('');
|
||||
// 用户信息
|
||||
const form = reactive<Order>({
|
||||
orderId: 0,
|
||||
comments: ''
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
const { resetFields, validate } = useForm(form);
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
// 判断更新字段
|
||||
form.orderId = props.orderId;
|
||||
if (props.field === 'content') {
|
||||
form.comments = content.value;
|
||||
}
|
||||
if (props.field === 'comments') {
|
||||
form.comments = content.value;
|
||||
}
|
||||
updateOrder(form)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
content.value = String(props.content);
|
||||
console.log(visible);
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
loading.value = false;
|
||||
content.value = String(props.content);
|
||||
assignObject(form, props.data);
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style lang="less">
|
||||
.tab-pane {
|
||||
min-height: 300px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,289 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="680"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:maskClosable="false"
|
||||
:maxable="maxable"
|
||||
:title="isUpdate ? '编辑订单' : '添加订单'"
|
||||
:body-style="{ paddingBottom: '8px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<a-space>
|
||||
<a-form
|
||||
:label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
|
||||
:wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }"
|
||||
>
|
||||
<a-row :gutter="16">
|
||||
<a-col :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="订单名称" v-bind="validateInfos.customerName">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="30"
|
||||
placeholder="请输入订单名称"
|
||||
v-model:value="form.customerName"
|
||||
@blur="
|
||||
validate('customerName', { trigger: 'blur' }).catch(() => {})
|
||||
"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="订单标识" v-bind="validateInfos.customerCode">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入用户账号"
|
||||
v-model:value="form.customerCode"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="跟进状态" v-bind="validateInfos.progress">
|
||||
<progress-select
|
||||
v-model:value="form.progress"
|
||||
@blur="
|
||||
validate('progress', { trigger: 'blur' }).catch(() => {})
|
||||
"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="订单类型" v-bind="validateInfos.customerType">
|
||||
<type-select
|
||||
v-model:value="form.customerType"
|
||||
@blur="
|
||||
validate('customerType', { trigger: 'blur' }).catch(() => {})
|
||||
"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="订单来源" v-bind="validateInfos.customerSource">
|
||||
<source-select
|
||||
v-model:value="form.customerSource"
|
||||
@blur="
|
||||
validate('customerSource', { trigger: 'blur' }).catch(() => {})
|
||||
"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="头像" v-bind="validateInfos.customerAvatar">
|
||||
<ele-image-upload
|
||||
v-model:value="images"
|
||||
:item-style="{ width: '90px', height: '90px' }"
|
||||
:limit="1"
|
||||
@upload="onUpload"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="联系人" v-bind="validateInfos.customerContacts">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请填写联系人"
|
||||
v-model:value="form.customerContacts"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="手机号码" v-bind="validateInfos.customerMobile">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请填写联系人手机号码"
|
||||
v-model:value="form.customerMobile"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="联系地址"
|
||||
v-bind="validateInfos.customerAddress"
|
||||
>
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请填写联系地址"
|
||||
v-model:value="form.customerAddress"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="公司座机" v-bind="validateInfos.customerPhone">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请填写公司座机电话"
|
||||
v-model:value="form.customerPhone"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="排序" v-bind="validateInfos.sortNumber">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="排序"
|
||||
v-model:value="form.sortNumber"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="备注" v-bind="validateInfos.comments">
|
||||
<a-textarea
|
||||
:rows="4"
|
||||
:maxlength="200"
|
||||
placeholder="请输入备注"
|
||||
v-model:value="form.comments"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-space>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {ref, reactive, watch, computed} from 'vue';
|
||||
import { Form, message } from 'ant-design-vue';
|
||||
import { assignObject } from 'ele-admin-pro';
|
||||
import TypeSelect from './customer-edit/type-select.vue';
|
||||
import ProgressSelect from './customer-edit/progress-select.vue';
|
||||
import SourceSelect from './customer-edit/source-select.vue';
|
||||
import { addCustomer, updateCustomer } from '@/api/oa/customer';
|
||||
import type { Customer } from '@/api/oa/customer/model';
|
||||
import { createCode } from '@/utils/common';
|
||||
import { uploadFile } from '@/api/system/file';
|
||||
import type { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
|
||||
import { FILE_SERVER } from '@/config/setting';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
|
||||
const userStore = useUserStore();
|
||||
// 当前用户信息
|
||||
const loginUser = computed(() => userStore.info ?? {});
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const useForm = Form.useForm;
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: Customer | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
// 是否显示最大化切换按钮
|
||||
const maxable = ref(true);
|
||||
|
||||
// 用户信息
|
||||
const form = reactive<Customer>({
|
||||
customerCode: '',
|
||||
customerName: '',
|
||||
customerType: undefined,
|
||||
progress: undefined,
|
||||
customerMobile: '',
|
||||
customerAvatar: '',
|
||||
customerPhone: '',
|
||||
customerContacts: '',
|
||||
customerAddress: '',
|
||||
comments: '',
|
||||
status: '0',
|
||||
sortNumber: 100,
|
||||
customerId: 0,
|
||||
userId: '',
|
||||
});
|
||||
|
||||
// 已上传数据, 可赋初始值用于回显
|
||||
const images = ref(<any>[]);
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
customerName: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请输入订单名称',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
customerCode: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请输入合法的IP地址',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
progress: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请选择跟进状态',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
const { resetFields, validate, validateInfos } = useForm(form, rules);
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
// 去除空格
|
||||
form.customerName = form.customerName?.replace(/\s*/g, '');
|
||||
if(isUpdate.value == false) {
|
||||
form.userId = loginUser.value.userId;
|
||||
}
|
||||
const data = {
|
||||
...form
|
||||
};
|
||||
// 转字符串
|
||||
const saveOrUpdate = isUpdate.value ? updateCustomer : addCustomer;
|
||||
saveOrUpdate(data)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
const onUpload = (d: ItemType) => {
|
||||
uploadFile(<File>d.file)
|
||||
.then((result) => {
|
||||
form.customerAvatar = result.path;
|
||||
message.success('上传成功');
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
loading.value = false;
|
||||
// 头像赋值
|
||||
images.value = [];
|
||||
if(props.data.customerAvatar){
|
||||
images.value.push({ uid:1, url: FILE_SERVER + props.data.customerAvatar, status: '' });
|
||||
}
|
||||
assignObject(form, props.data);
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
form.customerCode = createCode();
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style lang="less"></style>
|
||||
@@ -0,0 +1,379 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="`80%`"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:maxable="maxAble"
|
||||
:title="isUpdate ? '编辑订单' : '订单详情'"
|
||||
:body-style="{ paddingBottom: '8px', background: '#f3f3f3' }"
|
||||
@update:visible="updateVisible"
|
||||
:maskClosable="false"
|
||||
:footer="null"
|
||||
@ok="save"
|
||||
>
|
||||
<a-card title="订单详情" class="order-card">
|
||||
<!-- <a-space>-->
|
||||
<!-- <a-button>发货</a-button>-->
|
||||
<!-- <a-button>商家备注</a-button>-->
|
||||
<!-- <a-button>打印小票</a-button>-->
|
||||
<!-- </a-space>-->
|
||||
<a-row :gutter="16">
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive
|
||||
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
|
||||
: { span: 8 }
|
||||
"
|
||||
>
|
||||
<a-form-item label="订单号" name="orderId">
|
||||
<span>{{ data.orderId }}</span>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive
|
||||
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
|
||||
: { span: 8 }
|
||||
"
|
||||
>
|
||||
<a-form-item label="实付款金额" name="payPrice">
|
||||
<span class="ele-text-warning"
|
||||
>￥{{ formatNumber(data.payPrice) }}</span
|
||||
>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive
|
||||
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
|
||||
: { span: 8 }
|
||||
"
|
||||
>
|
||||
<a-form-item label="订单状态" name="orderStatus">
|
||||
<a-tag>{{ data.payStatus === 20 ? '已下单' : '' }}</a-tag>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive
|
||||
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
|
||||
: { span: 8 }
|
||||
"
|
||||
>
|
||||
<a-form-item label="买家信息" name="deliveryType">
|
||||
<router-link :to="'/system/user/details?id=' + data.userId">
|
||||
<span class="ele-text-primary">{{ data.nickname }}</span>
|
||||
</router-link>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive
|
||||
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
|
||||
: { span: 8 }
|
||||
"
|
||||
>
|
||||
<a-form-item label="预定日期" name="deliveryTime">
|
||||
{{ toDateString(data.deliveryTime, 'yyyy-MM-dd') }}
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive
|
||||
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
|
||||
: { span: 8 }
|
||||
"
|
||||
>
|
||||
<a-form-item label="下单时间" name="createTime">
|
||||
{{ data.createTime }}
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive
|
||||
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
|
||||
: { span: 8 }
|
||||
"
|
||||
>
|
||||
<a-form-item label="交易流水号" name="orderNo">
|
||||
{{ data.orderNo }}
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive
|
||||
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
|
||||
: { span: 8 }
|
||||
"
|
||||
>
|
||||
<a-form-item label="买家留言" name="buyerRemark">
|
||||
<span>{{ data.buyerRemark }}</span>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive
|
||||
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
|
||||
: { span: 8 }
|
||||
"
|
||||
>
|
||||
<a-form-item label="订单备注" name="comments">
|
||||
<span>{{ data.comments }}</span>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
<a-card title="菜品信息" class="order-card">
|
||||
<a-spin :spinning="loading">
|
||||
<a-table
|
||||
:data-source="orderGoodsList"
|
||||
:columns="columns"
|
||||
:pagination="false"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'goodsName'">
|
||||
<div class="goods-info">
|
||||
<a-image
|
||||
v-if="record.imageUrl"
|
||||
:src="record.imageUrl"
|
||||
:preview="false"
|
||||
:width="50"
|
||||
/>
|
||||
<div class="info">
|
||||
<div>{{ record.goodsName }}</div>
|
||||
<div class="ele-text-placeholder" v-if="record.gear === 10">
|
||||
食堂档口
|
||||
</div>
|
||||
<div class="ele-text-placeholder" v-if="record.gear === 20">
|
||||
物品档口
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-spin>
|
||||
</a-card>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { Form } from 'ant-design-vue';
|
||||
import { assignObject, toDateString } from 'ele-admin-pro';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import { formatNumber } from 'ele-admin-pro/es';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { Order } from '@/api/order/model';
|
||||
import { ColumnItem } from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import { OrderGoods } from '@/api/order/goods/model';
|
||||
import { listOrderGoods } from '@/api/order/goods';
|
||||
|
||||
const useForm = Form.useForm;
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: Order | null;
|
||||
}>();
|
||||
|
||||
export interface step {
|
||||
title?: String | undefined;
|
||||
subTitle?: String | undefined;
|
||||
description?: String | undefined;
|
||||
}
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
// 是否显示最大化切换按钮
|
||||
const maxAble = ref(true);
|
||||
const orderGoodsList = ref<OrderGoods[]>([]);
|
||||
|
||||
// 步骤条
|
||||
const steps = ref<step[]>([
|
||||
{
|
||||
title: '报餐',
|
||||
description: undefined
|
||||
},
|
||||
{
|
||||
title: '付款',
|
||||
description: undefined
|
||||
},
|
||||
{
|
||||
title: '发餐',
|
||||
description: undefined
|
||||
},
|
||||
{
|
||||
title: '取餐',
|
||||
description: undefined
|
||||
},
|
||||
{
|
||||
title: '完成',
|
||||
description: undefined
|
||||
}
|
||||
]);
|
||||
const active = ref(2);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 订单信息
|
||||
const order = reactive<Order>({
|
||||
orderId: undefined,
|
||||
orderNo: '',
|
||||
userId: undefined,
|
||||
orderSourceData: ''
|
||||
});
|
||||
|
||||
// 请求状态
|
||||
const loading = ref(true);
|
||||
|
||||
const { resetFields } = useForm(order);
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
const columns = ref<ColumnItem[]>([
|
||||
// {
|
||||
// title: '菜品ID',
|
||||
// dataIndex: 'goodsId'
|
||||
// },
|
||||
{
|
||||
title: '菜品信息',
|
||||
dataIndex: 'goodsName',
|
||||
key: 'goodsName'
|
||||
},
|
||||
{
|
||||
title: '菜品价格',
|
||||
dataIndex: 'goodsPrice',
|
||||
customRender: ({ text }) => '￥' + text
|
||||
},
|
||||
{
|
||||
title: '购买数量',
|
||||
dataIndex: 'totalNum',
|
||||
key: 'totalNum'
|
||||
},
|
||||
{
|
||||
title: '预定日期',
|
||||
dataIndex: 'deliveryTime',
|
||||
key: 'deliveryTime',
|
||||
customRender: () => toDateString(props.data?.deliveryTime, 'yyyy-MM-dd')
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'deliveryStatus',
|
||||
key: 'deliveryStatus',
|
||||
customRender: ({ text }) => (text == 10 ? '未签到' : '已签到')
|
||||
}
|
||||
]);
|
||||
|
||||
/* 制作步骤条 */
|
||||
const loadSteps = (order) => {
|
||||
steps.value = [];
|
||||
steps.value.push({
|
||||
title: '下单'
|
||||
});
|
||||
steps.value.push({
|
||||
title: '付款'
|
||||
});
|
||||
steps.value.push({
|
||||
title: '发货'
|
||||
});
|
||||
steps.value.push({
|
||||
title: '收货'
|
||||
});
|
||||
steps.value.push({
|
||||
title: '完成'
|
||||
});
|
||||
|
||||
// 下单
|
||||
if (order.payStatus == 10) {
|
||||
active.value = 0;
|
||||
steps.value[0].description = order.createTime;
|
||||
}
|
||||
// 付款
|
||||
if (order.payStatus == 20) {
|
||||
active.value = 1;
|
||||
steps.value[0].description = order.createTime;
|
||||
steps.value[1].description = order.payTime;
|
||||
}
|
||||
// 发货
|
||||
if (order.payStatus == 20 && order.deliveryStatus == 20) {
|
||||
active.value = 2;
|
||||
steps.value[0].description = order.createTime;
|
||||
steps.value[1].description = order.payTime;
|
||||
steps.value[2].description = order.deliveryTime;
|
||||
}
|
||||
// 收货
|
||||
if (order.payStatus == 20 && order.receiptStatus == 20) {
|
||||
active.value = 3;
|
||||
steps.value[0].description = order.createTime;
|
||||
steps.value[1].description = order.payTime;
|
||||
steps.value[2].description = order.deliveryTime;
|
||||
steps.value[3].description = order.receiptTime;
|
||||
}
|
||||
// 完成
|
||||
if (order.payStatus == 20 && order.orderStatus == 30) {
|
||||
active.value = 4;
|
||||
steps.value[0].description = order.createTime;
|
||||
steps.value[1].description = order.payTime;
|
||||
steps.value[2].description = order.deliveryTime;
|
||||
steps.value[3].description = order.receiptTime;
|
||||
}
|
||||
// 已取消
|
||||
if (order.orderStatus == 20) {
|
||||
active.value = 4;
|
||||
}
|
||||
};
|
||||
|
||||
const getOrderGoods = () => {
|
||||
const orderId = props.data?.orderId;
|
||||
listOrderGoods({ orderId }).then((data) => {
|
||||
orderGoodsList.value = data.filter((d) => d.totalNum > 0);
|
||||
});
|
||||
};
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
loading.value = false;
|
||||
assignObject(order, props.data);
|
||||
loadSteps(props.data);
|
||||
getOrderGoods();
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.order-card {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.ant-form-item {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.goods-info {
|
||||
display: flex;
|
||||
.info {
|
||||
padding-left: 5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,176 @@
|
||||
<!-- 搜索表单 -->
|
||||
<template>
|
||||
<a-space :size="10" style="flex-wrap: wrap">
|
||||
<a-radio-group v-model:value="listType" @change="handleTabs">
|
||||
<a-radio-button :value="0">全部</a-radio-button>
|
||||
<a-radio-button :value="1">已下单</a-radio-button>
|
||||
<a-radio-button :value="4">已完成</a-radio-button>
|
||||
<a-radio-button :value="5">已撤单</a-radio-button>
|
||||
<a-radio-button :value="6">临时报餐</a-radio-button>
|
||||
</a-radio-group>
|
||||
<a-button
|
||||
danger
|
||||
type="primary"
|
||||
class="ele-btn-icon"
|
||||
:disabled="selection.length === 0"
|
||||
@click="removeBatch"
|
||||
>
|
||||
<template #icon>
|
||||
<delete-outlined />
|
||||
</template>
|
||||
<span>批量删除</span>
|
||||
</a-button>
|
||||
<a-date-picker
|
||||
placeholder="预定日期"
|
||||
value-format="YYYY-MM-DD"
|
||||
v-model:value="deliveryTime"
|
||||
@change="search"
|
||||
/>
|
||||
<a-range-picker
|
||||
v-model:value="dateRange"
|
||||
value-format="YYYY-MM-DD"
|
||||
class="ele-fluid"
|
||||
/>
|
||||
<a-input-search
|
||||
allow-clear
|
||||
placeholder="请输入关键词"
|
||||
v-model:value="searchText"
|
||||
@pressEnter="search"
|
||||
@search="search"
|
||||
>
|
||||
<template #addonBefore>
|
||||
<a-select v-model:value="type" style="width: 100px; margin: -5px -12px">
|
||||
<a-select-option value="keywords">模糊搜索</a-select-option>
|
||||
<a-select-option value="orderId">订单号</a-select-option>
|
||||
<a-select-option value="userId">用户ID</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-input-search>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import useSearch from '@/utils/use-search';
|
||||
import { ref, watch } from 'vue';
|
||||
import { OrderParam } from '@/api/order/model';
|
||||
import { assignObject } from 'ele-admin-pro';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的角色
|
||||
selection?: [];
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: OrderParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
(e: 'advanced'): void;
|
||||
}>();
|
||||
|
||||
// 表单数据
|
||||
const { where, resetFields } = useSearch<OrderParam>({
|
||||
orderNo: undefined,
|
||||
userId: undefined,
|
||||
payStatus: undefined,
|
||||
deliveryStatus: undefined,
|
||||
orderStatus: undefined
|
||||
});
|
||||
// 下来选项
|
||||
const type = ref('keywords');
|
||||
// 搜索内容
|
||||
const searchText = ref('');
|
||||
// 预定日期
|
||||
const deliveryTime = ref<string>();
|
||||
// 日期范围选择
|
||||
const dateRange = ref<[string, string]>(['', '']);
|
||||
const listType = ref<number>(0);
|
||||
|
||||
/* 搜索 */
|
||||
const search = () => {
|
||||
const [d1, d2] = dateRange.value ?? [];
|
||||
if (type.value == 'orderNo') {
|
||||
where.orderNo = searchText.value;
|
||||
where.userId = undefined;
|
||||
}
|
||||
if (type.value == 'userId') {
|
||||
where.userId = searchText.value;
|
||||
where.orderNo = undefined;
|
||||
}
|
||||
if (type.value == 'merchantCode') {
|
||||
where.merchantCode = searchText.value;
|
||||
where.orderNo = undefined;
|
||||
}
|
||||
if (type.value == 'keywords') {
|
||||
where.keywords = searchText.value;
|
||||
}
|
||||
where.deliveryTime = deliveryTime.value;
|
||||
emit('search', {
|
||||
...where,
|
||||
createTimeStart: d1 ? d1 + ' 00:00:00' : '',
|
||||
createTimeEnd: d2 ? d2 + ' 23:59:59' : '',
|
||||
deliveryTime: deliveryTime.value ? deliveryTime.value + ' 00:00:00' : ''
|
||||
});
|
||||
};
|
||||
|
||||
// 批量删除
|
||||
const removeBatch = () => {
|
||||
emit('remove');
|
||||
};
|
||||
|
||||
const handleTabs = (e) => {
|
||||
resetFields();
|
||||
const listType = Number(e.target.value);
|
||||
|
||||
// 全部订单
|
||||
if (listType == 0) {
|
||||
assignObject(where, {});
|
||||
console.log('全部');
|
||||
}
|
||||
// 待发货
|
||||
if (listType == 1) {
|
||||
console.log('已下单');
|
||||
where.payStatus = 20;
|
||||
where.orderStatus = 10;
|
||||
}
|
||||
// 待收货
|
||||
// if (listType == 2) {
|
||||
// console.log('待发货');
|
||||
// where.payStatus = 20;
|
||||
// where.deliveryStatus = 20;
|
||||
// where.receiptStatus = 10;
|
||||
// }
|
||||
// 待付款
|
||||
// if (listType == 3) {
|
||||
// console.log('待付款');
|
||||
// where.orderStatus = 20;
|
||||
// }
|
||||
// 已完成
|
||||
if (listType == 4) {
|
||||
console.log('已完成');
|
||||
where.payStatus = 20;
|
||||
where.orderStatus = 30;
|
||||
}
|
||||
// 已取消
|
||||
if (listType == 5) {
|
||||
console.log('已撤单');
|
||||
where.orderStatus = 20;
|
||||
}
|
||||
// 已取消
|
||||
if (listType == 6) {
|
||||
console.log('临时报餐');
|
||||
where.isTemporary = 1;
|
||||
}
|
||||
console.log(where);
|
||||
emit('search', {
|
||||
...where
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
@@ -0,0 +1,411 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="orderId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
v-model:selection="selection"
|
||||
:customRow="customRow"
|
||||
tool-class="ele-toolbar-form"
|
||||
:scroll="{ x: 1200 }"
|
||||
class="sys-org-table"
|
||||
:striped="true"
|
||||
>
|
||||
<template #toolbar>
|
||||
<search
|
||||
@search="reload"
|
||||
:selection="selection"
|
||||
@add="openEdit"
|
||||
@remove="removeBatch"
|
||||
@advanced="openAdvanced"
|
||||
/>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'totalPrice'">
|
||||
<span class="ele-text-warning price-edit">
|
||||
￥{{ record.totalPrice }}
|
||||
</span>
|
||||
</template>
|
||||
<template v-if="column.key === 'goods'">
|
||||
<template v-if="record.equipment">
|
||||
<p class="ele-text">{{ record.equipment.equipmentName }}</p>
|
||||
<p class="ele-text">{{ record.equipment.batteryModel }}</p>
|
||||
<p class="ele-text">{{ record.equipment.equipmentCode }}</p>
|
||||
</template>
|
||||
</template>
|
||||
<template v-if="column.key === 'payMethod'">
|
||||
<a-tag v-if="record.payMethod === '10'" color="orange"
|
||||
>余额支付</a-tag
|
||||
>
|
||||
<a-tag v-if="record.payMethod === '20'" color="green"
|
||||
>微信支付</a-tag
|
||||
>
|
||||
<a-tag v-if="record.payMethod === '30'" color="blue"
|
||||
>支付宝</a-tag
|
||||
>
|
||||
<a-tag v-if="record.payMethod === '40'" color="purple"
|
||||
>通联支付</a-tag
|
||||
>
|
||||
</template>
|
||||
<template v-if="column.key === 'deliveryType'">
|
||||
<span v-if="record.deliveryType === 10">快递配送</span>
|
||||
<span v-if="record.deliveryType === 20">门店自提</span>
|
||||
</template>
|
||||
<template v-if="column.key === 'payStatus'">
|
||||
<a-tag
|
||||
v-if="record.payStatus === 20 && record.orderStatus === 10"
|
||||
color="green"
|
||||
>已下单</a-tag
|
||||
>
|
||||
<a-tag
|
||||
v-if="record.payStatus === 20 && record.orderStatus === 20"
|
||||
color="red"
|
||||
>已撤单</a-tag
|
||||
>
|
||||
<a-tag v-if="record.payStatus === 10" color="red">未付款</a-tag>
|
||||
<a-tag v-if="record.orderStatus === 30" color="green"
|
||||
>已核销</a-tag
|
||||
>
|
||||
</template>
|
||||
<template v-if="column.key === 'comments'">
|
||||
<FormOutlined
|
||||
@click="onEditContent('comments', record.comments, record)"
|
||||
/>
|
||||
<a-popover placement="topLeft">
|
||||
<template #content>
|
||||
<div class="comments">{{ record.comments }}</div>
|
||||
</template>
|
||||
{{ record.comments }}
|
||||
</a-popover>
|
||||
</template>
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-tag v-if="record.status === '0'" color="green">正常</a-tag>
|
||||
<a-tag v-if="record.status === '1'" color="red">禁用</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'nickname'">
|
||||
{{ record.username }}
|
||||
</template>
|
||||
<template v-if="column.key === 'createTime'">
|
||||
{{ record.createTime }}
|
||||
</template>
|
||||
<template v-if="column.key === 'goodsList'">
|
||||
<div v-for="(item, index) in record.goodsList" :key="index">
|
||||
<div class="ele-text-secondary">
|
||||
{{ item.goodsName }} x{{ item.totalNum }}
|
||||
</div>
|
||||
<div class="ele-text-placeholder">
|
||||
{{ item.deliveryStatus === 10 ? '未签到' : '已签到' }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a-button @click="openInfo(record)">详情</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
</div>
|
||||
<Markdown
|
||||
v-model:visible="showMarkdown"
|
||||
:data="data"
|
||||
:field="field"
|
||||
:orderId="orderId"
|
||||
:content="markdown"
|
||||
@done="reload"
|
||||
/>
|
||||
<Field
|
||||
v-model:visible="showEdit"
|
||||
:data="data"
|
||||
:field="field"
|
||||
:orderId="orderId"
|
||||
:content="content"
|
||||
@done="reload"
|
||||
/>
|
||||
<!-- 订单详情 -->
|
||||
<order-info v-model:visible="showInfo" :data="current" @done="reload" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import {
|
||||
FormOutlined,
|
||||
ExclamationCircleOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import { toDateString } from 'ele-admin-pro';
|
||||
import Search from './components/search.vue';
|
||||
import Markdown from './components/markdown.vue';
|
||||
import Field from './components/field.vue';
|
||||
import OrderInfo from './components/order-info.vue';
|
||||
import { pageOrder, removeBatchOrder } from '@/api/order';
|
||||
// import { alipayQuery } from '@/api/system/payment';
|
||||
import type { Order, OrderParam } from '@/api/order/model';
|
||||
|
||||
defineProps<{
|
||||
activeKey?: boolean;
|
||||
data?: any;
|
||||
}>();
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
key: 'index',
|
||||
width: 48,
|
||||
align: 'center',
|
||||
fixed: 'left',
|
||||
hideInSetting: true,
|
||||
hideInTable: true,
|
||||
customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 100,
|
||||
align: 'center',
|
||||
fixed: 'left',
|
||||
hideInSetting: true
|
||||
},
|
||||
{
|
||||
title: '订单号',
|
||||
dataIndex: 'orderId',
|
||||
key: 'orderId'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'nickname',
|
||||
key: 'nickname'
|
||||
},
|
||||
{
|
||||
title: '预定日期',
|
||||
dataIndex: 'deliveryTime',
|
||||
key: 'deliveryTime',
|
||||
customRender: ({ text }) => toDateString(text, 'MM-dd')
|
||||
},
|
||||
{
|
||||
title: '订单金额(元)',
|
||||
dataIndex: 'totalPrice',
|
||||
key: 'totalPrice',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '菜品信息',
|
||||
dataIndex: 'goodsList',
|
||||
key: 'goodsList'
|
||||
},
|
||||
{
|
||||
title: '临时报餐',
|
||||
dataIndex: 'isTemporary',
|
||||
customRender: ({ text }) => ['否', '是'][text]
|
||||
},
|
||||
{
|
||||
title: '报餐时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
sorter: true,
|
||||
customRender: ({ text }) => toDateString(text)
|
||||
},
|
||||
{
|
||||
title: '交易状态',
|
||||
key: 'payStatus'
|
||||
}
|
||||
]);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<Order[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<Order | null>(null);
|
||||
// 是否显示资产详情
|
||||
const showInfo = ref(false);
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
const markdown = ref('请输入备注内容');
|
||||
const content = ref('请输入要修改的内容');
|
||||
const showMarkdown = ref(false);
|
||||
// const deliveryEdit = ref(false);
|
||||
const field = ref('comments');
|
||||
const orderId = ref(undefined);
|
||||
// 是否显示高级搜索
|
||||
const showAdvancedSearch = ref(false);
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({
|
||||
page,
|
||||
limit,
|
||||
where,
|
||||
orders,
|
||||
filters
|
||||
}) => {
|
||||
// 搜索条件
|
||||
if (filters.payMethod) {
|
||||
where.payMethod = filters.payMethod;
|
||||
}
|
||||
if (filters.deliveryType) {
|
||||
where.deliveryType = filters.deliveryType;
|
||||
}
|
||||
if (filters.payStatus) {
|
||||
where.payStatus = filters.payStatus;
|
||||
}
|
||||
if (filters.orderSource) {
|
||||
where.orderSource = filters.orderSource;
|
||||
}
|
||||
where.showGoodsList = true;
|
||||
where.tenantId = localStorage.getItem('tenantId');
|
||||
// where.payStatus = 20;
|
||||
return pageOrder({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: OrderParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
// const onEdit = (name, text, item) => {
|
||||
// orderId.value = item.orderId;
|
||||
// field.value = name;
|
||||
// content.value = text;
|
||||
// showEdit.value = true;
|
||||
// };
|
||||
|
||||
const onEditContent = (name, text, item) => {
|
||||
orderId.value = item.orderId;
|
||||
field.value = name;
|
||||
markdown.value = text;
|
||||
showMarkdown.value = true;
|
||||
};
|
||||
|
||||
// const openDelivery = (row?: Order) => {
|
||||
// current.value = row ?? null;
|
||||
// deliveryEdit.value = true;
|
||||
// };
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: Order) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开用户详情弹窗 */
|
||||
const openInfo = (row?: Order) => {
|
||||
current.value = row ?? null;
|
||||
showInfo.value = true;
|
||||
};
|
||||
|
||||
/* 打开高级搜索 */
|
||||
const openAdvanced = () => {
|
||||
showAdvancedSearch.value = !showAdvancedSearch.value;
|
||||
};
|
||||
|
||||
/* 支付宝统一收单交易查询 */
|
||||
// const onAlipayQuery = (orderNo) => {
|
||||
// alipayQuery(orderNo).then((res) => {
|
||||
// console.log(res);
|
||||
// });
|
||||
// };
|
||||
|
||||
/* 删除单个 */
|
||||
// const remove = (row: Order) => {
|
||||
// const hide = message.loading('请求中..', 0);
|
||||
// removeOrder(row.orderId)
|
||||
// .then((msg) => {
|
||||
// hide();
|
||||
// message.success(msg);
|
||||
// reload();
|
||||
// })
|
||||
// .catch((e) => {
|
||||
// hide();
|
||||
// message.error(e.message);
|
||||
// });
|
||||
// };
|
||||
|
||||
/* 批量删除 */
|
||||
const removeBatch = () => {
|
||||
console.log(selection.value);
|
||||
if (!selection.value.length) {
|
||||
message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
content: '确定要删除选中的记录吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeBatchOrder(selection.value.map((d) => d.orderId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: Order) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openInfo(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
reload();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'ShopOrderIndex'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
p {
|
||||
line-height: 0.8;
|
||||
}
|
||||
.sys-org-table :deep(.ant-table-body) {
|
||||
overflow: auto !important;
|
||||
overflow: overlay !important;
|
||||
}
|
||||
|
||||
.sys-org-table :deep(.ant-table-pagination.ant-pagination) {
|
||||
padding: 0 4px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.price-edit {
|
||||
padding-right: 5px;
|
||||
}
|
||||
.comments {
|
||||
max-width: 200px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<div>
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="noticeId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
v-model:selection="selection"
|
||||
:scroll="{ x: 600 }"
|
||||
>
|
||||
<template #toolbar>
|
||||
<a-space>
|
||||
<a-button type="primary" class="ele-btn-icon" @click="read">
|
||||
标记已读
|
||||
</a-button>
|
||||
<a-button
|
||||
danger
|
||||
type="primary"
|
||||
class="ele-btn-icon"
|
||||
@click="removeBatch"
|
||||
>
|
||||
删除消息
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'status'">
|
||||
<span :class="['ele-text-warning', 'ele-text-info'][record.status]">
|
||||
{{ ['未读', '已读'][record.status] }}
|
||||
</span>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<!-- <a @click="reply(record)">回复</a>-->
|
||||
<!-- <a-divider type="vertical" />-->
|
||||
<a-popconfirm
|
||||
placement="topRight"
|
||||
title="确定要删除此消息吗？"
|
||||
@confirm="remove(record)"
|
||||
>
|
||||
<a class="ele-text-danger">删除</a>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue/es';
|
||||
import type { EleProTable } from 'ele-admin-pro/es';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import {
|
||||
removeBatchNotice,
|
||||
removeNotice,
|
||||
updateBatchNotices,
|
||||
updateNotice
|
||||
} from '@/api/oa/notice';
|
||||
import { Notice, NoticeParam } from '@/api/oa/notice/model';
|
||||
import { pageLetters } from '@/api/user/message';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { messageLoading, timeAgo } from 'ele-admin-pro';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update-data'): void;
|
||||
}>();
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
key: 'index',
|
||||
width: 48,
|
||||
align: 'center',
|
||||
fixed: 'left',
|
||||
hideInSetting: true,
|
||||
customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
|
||||
},
|
||||
{
|
||||
title: '私信内容',
|
||||
dataIndex: 'title'
|
||||
},
|
||||
{
|
||||
title: '发送时间',
|
||||
dataIndex: 'createTime',
|
||||
ellipsis: true,
|
||||
width: 140,
|
||||
align: 'center',
|
||||
customRender: ({ text }) => timeAgo(text)
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
key: 'status',
|
||||
width: 90,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
// 列表选中数据
|
||||
const selection = ref<Notice[]>([]);
|
||||
// 要修改的数据
|
||||
const update = ref<Notice[]>([]);
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
|
||||
return pageLetters({ ...where, ...orders, page, limit });
|
||||
};
|
||||
|
||||
/* 回复 */
|
||||
const reply = (row: Notice) => {
|
||||
console.log(row);
|
||||
// message.info('点击了回复');
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: Notice) => {
|
||||
const hide = messageLoading('请求中..', 0);
|
||||
removeNotice(row.noticeId)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
updateUnReadNum();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 批量删除 */
|
||||
const removeBatch = () => {
|
||||
if (!selection.value.length) {
|
||||
message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
content: '确定要删除选中的记录吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = messageLoading('请求中..', 0);
|
||||
removeBatchNotice(selection.value.map((d) => d.noticeId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
updateUnReadNum();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 标记已读 */
|
||||
const read = () => {
|
||||
if (!selection.value.length) {
|
||||
message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
selection.value.forEach((d) => {
|
||||
update.value.push({
|
||||
noticeId: d.noticeId,
|
||||
status: 1
|
||||
});
|
||||
});
|
||||
updateBatchNotices(update.value).then(() => {
|
||||
reload();
|
||||
});
|
||||
updateUnReadNum();
|
||||
};
|
||||
|
||||
/* 触发更新未读数量事件 */
|
||||
const updateUnReadNum = () => {
|
||||
emit('update-data');
|
||||
};
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: NoticeParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ page: 1, where });
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<div>
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="noticeId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
v-model:selection="selection"
|
||||
:scroll="{ x: 600 }"
|
||||
>
|
||||
<template #toolbar>
|
||||
<a-space>
|
||||
<a-button type="primary" class="ele-btn-icon" @click="confirmBatch">
|
||||
批量确认
|
||||
</a-button>
|
||||
<a-button
|
||||
danger
|
||||
type="primary"
|
||||
class="ele-btn-icon"
|
||||
@click="removeBatch"
|
||||
>
|
||||
删除通知
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'status'">
|
||||
<span :class="['ele-text-warning', 'ele-text-info'][record.status]">
|
||||
{{ ['未确认', '已确认'][record.status] }}
|
||||
</span>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a @click="confirm(record)">确认</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm
|
||||
placement="topRight"
|
||||
title="确定要删除此通知吗"
|
||||
@confirm="remove(record)"
|
||||
>
|
||||
<a class="ele-text-danger">删除</a>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue/es';
|
||||
import type { EleProTable } from 'ele-admin-pro/es';
|
||||
import { pageNotices } from '@/api/user/message';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import { messageLoading, timeAgo } from 'ele-admin-pro';
|
||||
import {
|
||||
removeBatchNotice,
|
||||
removeNotice,
|
||||
updateBatchNotices,
|
||||
updateNotice
|
||||
} from '@/api/oa/notice';
|
||||
import { Notice, NoticeParam } from '@/api/oa/notice/model';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update-data'): void;
|
||||
}>();
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
key: 'index',
|
||||
width: 48,
|
||||
align: 'center',
|
||||
fixed: 'left',
|
||||
hideInSetting: true,
|
||||
customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
|
||||
},
|
||||
{
|
||||
title: '通知标题',
|
||||
dataIndex: 'title',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '通知时间',
|
||||
dataIndex: 'createTime',
|
||||
ellipsis: true,
|
||||
width: 140,
|
||||
align: 'center',
|
||||
customRender: ({ text }) => timeAgo(text)
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
key: 'status',
|
||||
width: 90,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
// 列表选中数据
|
||||
const selection = ref<Notice[]>([]);
|
||||
// 要修改的数据
|
||||
const update = ref<Notice[]>([]);
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
|
||||
return pageNotices({ ...where, ...orders, page, limit });
|
||||
};
|
||||
|
||||
/* 确认 */
|
||||
const confirm = (row: Notice) => {
|
||||
updateNotice({ noticeId: row.noticeId, status: 1 }).then(() => {
|
||||
reload();
|
||||
});
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: Notice) => {
|
||||
const hide = messageLoading('请求中..', 0);
|
||||
removeNotice(row.noticeId)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
updateUnReadNum();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 批量删除 */
|
||||
const removeBatch = () => {
|
||||
if (!selection.value.length) {
|
||||
message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
content: '确定要删除选中的记录吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = messageLoading('请求中..', 0);
|
||||
removeBatchNotice(selection.value.map((d) => d.noticeId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
updateUnReadNum();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 批量确认 */
|
||||
const confirmBatch = () => {
|
||||
if (!selection.value.length) {
|
||||
message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
selection.value.forEach((d) => {
|
||||
update.value.push({
|
||||
noticeId: d.noticeId,
|
||||
status: 1
|
||||
});
|
||||
});
|
||||
updateBatchNotices(update.value).then(() => {
|
||||
reload();
|
||||
});
|
||||
updateUnReadNum();
|
||||
};
|
||||
|
||||
/* 触发更新未读数量事件 */
|
||||
const updateUnReadNum = () => {
|
||||
emit('update-data');
|
||||
};
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: NoticeParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ page: 1, where });
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<div>
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="noticeId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
v-model:selection="selection"
|
||||
:scroll="{ x: 600 }"
|
||||
>
|
||||
<template #toolbar>
|
||||
<a-space>
|
||||
<a-button type="primary" class="ele-btn-icon" @click="okBatch">
|
||||
批量完成
|
||||
</a-button>
|
||||
<a-button
|
||||
danger
|
||||
type="primary"
|
||||
class="ele-btn-icon"
|
||||
@click="removeBatch"
|
||||
>
|
||||
删除待办
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'status'">
|
||||
<span :class="['ele-text-warning', 'ele-text-info'][record.status]">
|
||||
{{ ['未完成', '已完成'][record.status] }}
|
||||
</span>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<!-- <a @click="ok(record)">完成</a>-->
|
||||
<!-- <a-divider type="vertical" />-->
|
||||
<a-popconfirm
|
||||
placement="topRight"
|
||||
title="确定要删除此消息吗？"
|
||||
@confirm="remove(record)"
|
||||
>
|
||||
<a class="ele-text-danger">删除</a>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue/es';
|
||||
import type { EleProTable } from 'ele-admin-pro/es';
|
||||
import { pageTodos } from '@/api/user/message';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import { Notice, NoticeParam } from '@/api/oa/notice/model';
|
||||
import { messageLoading, timeAgo } from 'ele-admin-pro';
|
||||
import {
|
||||
removeBatchNotice,
|
||||
removeNotice,
|
||||
updateBatchNotices,
|
||||
updateNotice
|
||||
} from '@/api/oa/notice';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update-data'): void;
|
||||
}>();
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
key: 'index',
|
||||
width: 48,
|
||||
align: 'center',
|
||||
fixed: 'left',
|
||||
hideInSetting: true,
|
||||
customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
|
||||
},
|
||||
{
|
||||
title: '待办内容',
|
||||
dataIndex: 'title',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
ellipsis: true,
|
||||
width: 140,
|
||||
align: 'center',
|
||||
customRender: ({ text }) => timeAgo(text)
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
key: 'status',
|
||||
width: 90,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
// 列表选中数据
|
||||
const selection = ref<Notice[]>([]);
|
||||
// 要修改的数据
|
||||
const update = ref<Notice[]>([]);
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
|
||||
return pageTodos({ ...where, ...orders, page, limit });
|
||||
};
|
||||
|
||||
/* 完成 */
|
||||
const ok = (row: Notice) => {
|
||||
updateNotice({ noticeId: row.noticeId, status: 1 }).then(() => {
|
||||
reload();
|
||||
});
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: Notice) => {
|
||||
const hide = messageLoading('请求中..', 0);
|
||||
removeNotice(row.noticeId)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
updateUnReadNum();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 批量删除 */
|
||||
const removeBatch = () => {
|
||||
if (!selection.value.length) {
|
||||
message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
content: '确定要删除选中的记录吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = messageLoading('请求中..', 0);
|
||||
removeBatchNotice(selection.value.map((d) => d.noticeId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
updateUnReadNum();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 批量完成 */
|
||||
const okBatch = () => {
|
||||
if (!selection.value.length) {
|
||||
message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
selection.value.forEach((d) => {
|
||||
update.value.push({
|
||||
noticeId: d.noticeId,
|
||||
status: 1
|
||||
});
|
||||
});
|
||||
updateBatchNotices(update.value).then(() => {
|
||||
reload();
|
||||
});
|
||||
updateUnReadNum();
|
||||
};
|
||||
|
||||
/* 触发更新未读数量事件 */
|
||||
const updateUnReadNum = () => {
|
||||
emit('update-data');
|
||||
};
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: NoticeParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ page: 1, where });
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,180 @@
|
||||
<template>
|
||||
<div :class="['ele-body', { 'demo-message-responsive': styleResponsive }]">
|
||||
<a-card :bordered="false" :body-style="{ padding: '0px' }">
|
||||
<div class="ele-cell ele-cell-align-top ele-user-message">
|
||||
<div class="message-menu-wrap">
|
||||
<a-menu :selected-keys="active" :mode="mode">
|
||||
<a-menu-item key="notice">
|
||||
<router-link to="/user/notice?type=notice">
|
||||
<a-badge v-if="unReadNotice" :count="unReadNotice" />
|
||||
<span>系统通知</span>
|
||||
</router-link>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="letter">
|
||||
<router-link to="/user/notice?type=letter">
|
||||
<a-badge v-if="unReadLetter" :count="unReadLetter" />
|
||||
<span>用户私信</span>
|
||||
</router-link>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="todo">
|
||||
<router-link to="/user/notice?type=todo">
|
||||
<a-badge v-if="unReadTodo" :count="unReadTodo" />
|
||||
<span>代办事项</span>
|
||||
</router-link>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</div>
|
||||
<div class="ele-cell-content" style="overflow-x: hidden">
|
||||
<transition name="slide-right" mode="out-in">
|
||||
<message-notice
|
||||
v-if="active.includes('notice')"
|
||||
@update-data="queryUnReadNum"
|
||||
/>
|
||||
<message-letter
|
||||
v-else-if="active.includes('letter')"
|
||||
@update-data="queryUnReadNum"
|
||||
/>
|
||||
<message-todo v-else @update-data="queryUnReadNum" />
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch, unref, computed } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import MessageNotice from './components/message-notice.vue';
|
||||
import MessageLetter from './components/message-letter.vue';
|
||||
import MessageTodo from './components/message-todo.vue';
|
||||
import { getUnReadNum } from '@/api/user/message';
|
||||
|
||||
const { currentRoute } = useRouter();
|
||||
const themeStore = useThemeStore();
|
||||
const { screenWidth, styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
// 导航选中
|
||||
const active = ref<string[]>([]);
|
||||
|
||||
// 通知未读数量
|
||||
const unReadNotice = ref<any>(0);
|
||||
|
||||
// 私信未读数量
|
||||
const unReadLetter = ref<any>(0);
|
||||
|
||||
// 代办未读数量
|
||||
const unReadTodo = ref<any>(0);
|
||||
|
||||
// 导航模式
|
||||
const mode = computed(() => {
|
||||
return styleResponsive.value && screenWidth.value < 768
|
||||
? 'horizontal'
|
||||
: 'inline';
|
||||
});
|
||||
|
||||
watch(
|
||||
currentRoute,
|
||||
(route) => {
|
||||
const { path, query } = unref(route);
|
||||
if (path === '/user/notice') {
|
||||
const defaultType = 'notice';
|
||||
if (!query.type) {
|
||||
active.value = [defaultType];
|
||||
} else if (typeof query.type === 'string') {
|
||||
active.value = [query.type || defaultType];
|
||||
} else if (query.type.length && query.type[0]) {
|
||||
active.value = [query.type[0]];
|
||||
} else {
|
||||
active.value = [defaultType];
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
|
||||
/* 查询未读数量 */
|
||||
const queryUnReadNum = () => {
|
||||
getUnReadNum()
|
||||
.then((result) => {
|
||||
unReadNotice.value = result?.notice;
|
||||
unReadLetter.value = result?.letter;
|
||||
unReadTodo.value = result?.todo;
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
queryUnReadNum();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'UserNotice'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.message-menu-wrap {
|
||||
width: 150px;
|
||||
display: flex;
|
||||
|
||||
:deep(.ant-menu) {
|
||||
padding-top: 16px;
|
||||
|
||||
.ant-badge {
|
||||
vertical-align: -2px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.ant-badge-count {
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
border-radius: 8px;
|
||||
box-shadow: none;
|
||||
min-width: 16px;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
.ant-scroll-number-only {
|
||||
height: 16px;
|
||||
|
||||
& > p.ant-scroll-number-only-unit {
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& + .ele-cell-content {
|
||||
padding: 16px 24px;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.demo-message-responsive {
|
||||
.ele-user-message {
|
||||
display: block;
|
||||
|
||||
& > .ele-cell-content {
|
||||
padding: 16px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.message-menu-wrap {
|
||||
width: auto;
|
||||
display: block;
|
||||
|
||||
:deep(.ant-menu) {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,45 @@
|
||||
<!-- 角色选择下拉框 -->
|
||||
<template>
|
||||
<a-select
|
||||
show-search
|
||||
optionFilterProp="label"
|
||||
:options="data"
|
||||
allow-clear
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
@update:value="updateValue"
|
||||
@blur="onBlur"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getDictionaryOptions } from '@/utils/common';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:value', value: string): void;
|
||||
(e: 'blur'): void;
|
||||
}>();
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
value?: string;
|
||||
placeholder?: string;
|
||||
}>(),
|
||||
{
|
||||
placeholder: '请选择性别'
|
||||
}
|
||||
);
|
||||
|
||||
// 字典数据
|
||||
const data = getDictionaryOptions('sex');
|
||||
|
||||
/* 更新选中数据 */
|
||||
const updateValue = (value: string) => {
|
||||
emit('update:value', value);
|
||||
};
|
||||
|
||||
/* 失去焦点 */
|
||||
const onBlur = () => {
|
||||
emit('blur');
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,456 @@
|
||||
<template>
|
||||
<div class="ele-body ele-body-card">
|
||||
<a-row :gutter="16">
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive
|
||||
? { xxl: 6, xl: 7, lg: 9, md: 10, sm: 24, xs: 24 }
|
||||
: { span: 6 }
|
||||
"
|
||||
>
|
||||
<a-card :bordered="false">
|
||||
<div class="ele-text-center">
|
||||
<div class="user-info-avatar-group" @click="openCropper">
|
||||
<a-avatar :size="110" :src="form.avatar">
|
||||
<template v-if="!form.avatar" #icon>
|
||||
<user-outlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
<upload-outlined class="user-info-avatar-icon" />
|
||||
</div>
|
||||
<h1>{{ loginUser.nickname }}</h1>
|
||||
<div>{{ loginUser.introduction }}</div>
|
||||
</div>
|
||||
<div class="user-info-list">
|
||||
<div class="ele-cell">
|
||||
<HomeOutlined />
|
||||
<div class="ele-cell-content">
|
||||
<span>{{ loginUser.merchantName || tenantName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ele-cell">
|
||||
<user-outlined title="角色" />
|
||||
<div class="ele-cell-content">
|
||||
<a-tag v-for="(d, i) in loginUser.roles" :key="i" color="blue">
|
||||
{{ d.roleName }}
|
||||
</a-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ele-cell">
|
||||
<environment-outlined />
|
||||
<div class="ele-cell-content">
|
||||
{{ loginUser.province }} • {{ loginUser.city }} •
|
||||
{{ loginUser.region }} {{ loginUser.address }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="ele-cell">
|
||||
<mail-outlined />
|
||||
<div class="ele-cell-content">
|
||||
{{ loginUser.email }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive
|
||||
? { xxl: 14, xl: 14, lg: 15, md: 14, sm: 24, xs: 24 }
|
||||
: { span: 18 }
|
||||
"
|
||||
>
|
||||
<a-card
|
||||
:bordered="false"
|
||||
:body-style="{ paddingTop: '0px', minHeight: '600px' }"
|
||||
>
|
||||
<a-tabs v-model:active-key="active" size="large">
|
||||
<a-tab-pane tab="基本信息" key="info">
|
||||
<a-form
|
||||
:label-col="
|
||||
styleResponsive
|
||||
? { lg: 4, md: 6, sm: 4, xs: 24 }
|
||||
: { flex: '100px' }
|
||||
"
|
||||
:wrapper-col="
|
||||
styleResponsive
|
||||
? { lg: 20, md: 18, sm: 20, xs: 24 }
|
||||
: { flex: '1' }
|
||||
"
|
||||
style="max-width: 580px; margin-top: 20px"
|
||||
>
|
||||
<a-form-item label="登录账号" v-bind="validateInfos.username">
|
||||
<a-input
|
||||
disabled
|
||||
v-model:value="form.username"
|
||||
placeholder="请输入登录账号"
|
||||
allow-clear
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="手机号码" v-bind="validateInfos.phone">
|
||||
<a-input
|
||||
:disabled="form.phone"
|
||||
v-model:value="form.phone"
|
||||
placeholder="请输入手机号码"
|
||||
allow-clear
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="昵称" v-bind="validateInfos.nickname">
|
||||
<a-input
|
||||
v-model:value="form.nickname"
|
||||
placeholder="请输入昵称"
|
||||
allow-clear
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="性别" v-bind="validateInfos.sex">
|
||||
<sex-select
|
||||
v-model:value="form.sex"
|
||||
@blur="validate('sex', { trigger: 'blur' }).catch(() => {})"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="邮箱" v-bind="validateInfos.email">
|
||||
<a-input
|
||||
v-model:value="form.email"
|
||||
placeholder="请输入邮箱"
|
||||
allow-clear
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="个人简介">
|
||||
<a-textarea
|
||||
v-model:value="form.introduction"
|
||||
placeholder="请输入个人简介"
|
||||
:rows="4"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="所在地区" name="region">
|
||||
<div class="flex-sb">
|
||||
<regions-select
|
||||
v-model:value="city"
|
||||
valueField="label"
|
||||
placeholder="请选择省市区"
|
||||
class="ele-fluid"
|
||||
/>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="街道地址">
|
||||
<a-input
|
||||
v-model:value="form.address"
|
||||
placeholder="请输入街道地址"
|
||||
allow-clear
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:wrapper-col="
|
||||
styleResponsive
|
||||
? {
|
||||
lg: { offset: 4 },
|
||||
md: { offset: 6 },
|
||||
sm: { offset: 4 }
|
||||
}
|
||||
: { offset: 4 }
|
||||
"
|
||||
>
|
||||
<a-button type="primary" :loading="loading" @click="save">
|
||||
{{ loading ? '保存中..' : '保存更改' }}
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<!-- 头像裁剪弹窗 -->
|
||||
<ele-cropper-modal
|
||||
:src="form.avatar"
|
||||
v-model:visible="visible"
|
||||
:to-blob="true"
|
||||
:options="{ autoCropArea: 1, viewMode: 1, dragMode: 'move' }"
|
||||
@done="onDone"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, computed } from 'vue';
|
||||
import {
|
||||
ShopOutlined,
|
||||
UploadOutlined,
|
||||
UserOutlined,
|
||||
HomeOutlined,
|
||||
CloudOutlined,
|
||||
EnvironmentOutlined,
|
||||
TagOutlined,
|
||||
QqOutlined,
|
||||
MailOutlined,
|
||||
WechatOutlined,
|
||||
AlipayOutlined,
|
||||
BankOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import { Form, message } from 'ant-design-vue';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import type { User } from '@/api/system/user/model';
|
||||
import { updateUser } from '@/api/system/user';
|
||||
import SexSelect from './components/sex-select.vue';
|
||||
import { getMobile } from '@/utils/common';
|
||||
import request from '@/utils/request';
|
||||
import { FILE_SERVER } from '@/config/setting';
|
||||
import { CenterPoint } from 'ele-admin-pro/es/ele-map-picker/types';
|
||||
|
||||
const useForm = Form.useForm;
|
||||
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const userStore = useUserStore();
|
||||
|
||||
// tab 页选中
|
||||
const active = ref('info');
|
||||
|
||||
// 保存按钮 loading
|
||||
const loading = ref(false);
|
||||
|
||||
// 是否显示裁剪弹窗
|
||||
const visible = ref(false);
|
||||
const tenantName = localStorage.getItem('tenantName');
|
||||
// 登录用户信息
|
||||
const loginUser = computed(() => userStore.info ?? {});
|
||||
|
||||
// 表单数据
|
||||
const form = reactive<User>({
|
||||
// 用户id
|
||||
userId: loginUser.value.userId,
|
||||
// 登录账号
|
||||
username: loginUser.value.username,
|
||||
// 昵称
|
||||
nickname: loginUser.value.nickname,
|
||||
// 头像
|
||||
avatar: loginUser.value.avatar,
|
||||
// 性别(字典)
|
||||
sex: loginUser.value.sex,
|
||||
// 手机号
|
||||
phone: loginUser.value.phone,
|
||||
province: '',
|
||||
city: '',
|
||||
region: '',
|
||||
// 街道地址
|
||||
address: loginUser.value.address,
|
||||
// 邮箱
|
||||
email: loginUser.value.email,
|
||||
// 出生日期
|
||||
birthday: loginUser.value.birthday,
|
||||
// 个人简介
|
||||
introduction: loginUser.value.introduction,
|
||||
// 机构id
|
||||
organizationId: loginUser.value.organizationId,
|
||||
// 性别名称
|
||||
sexName: loginUser.value.sexName,
|
||||
// 机构名称
|
||||
organizationName: loginUser.value.organizationName
|
||||
});
|
||||
// 省市区
|
||||
const city = ref<string[]>([
|
||||
String(loginUser.value.province),
|
||||
String(loginUser.value.city),
|
||||
String(loginUser.value.region)
|
||||
]);
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
username: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入昵称',
|
||||
type: 'string'
|
||||
}
|
||||
],
|
||||
phone: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入昵称',
|
||||
type: 'string'
|
||||
}
|
||||
],
|
||||
nickname: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入昵称',
|
||||
type: 'string'
|
||||
}
|
||||
],
|
||||
sex: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择性别',
|
||||
type: 'string'
|
||||
}
|
||||
],
|
||||
email: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入邮箱',
|
||||
type: 'string'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
const { validate, validateInfos } = useForm(form, rules);
|
||||
|
||||
/* 保存更改 */
|
||||
const save = () => {
|
||||
validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
form.province = city.value[0];
|
||||
form.city = city.value[1];
|
||||
form.region = city.value[2];
|
||||
updateUser(form).then((res) => {
|
||||
loading.value = false;
|
||||
message.success('保存成功');
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
const onDone = (blob: Blob | null) => {
|
||||
// 裁剪完成的回调
|
||||
const formData = new FormData();
|
||||
formData.append('file', blob, 'avatar.jpg'); // 参数三可以设定文件名称
|
||||
// 使用 axios 上传
|
||||
request
|
||||
.post(FILE_SERVER + '/api/file/upload', formData)
|
||||
.then((res) => {
|
||||
form.avatar = res.data.data.thumbnail;
|
||||
visible.value = false;
|
||||
updateUser(form).then(() => {
|
||||
loading.value = false;
|
||||
message.success('保存成功');
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
});
|
||||
};
|
||||
|
||||
/* 头像裁剪完成回调 */
|
||||
const onCrop = (result: string) => {
|
||||
console.log(result);
|
||||
form.avatar = result;
|
||||
visible.value = false;
|
||||
updateUser(form).then((res) => {
|
||||
loading.value = false;
|
||||
message.success('保存成功');
|
||||
});
|
||||
};
|
||||
|
||||
/* 打开图片裁剪 */
|
||||
const openCropper = () => {
|
||||
visible.value = true;
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'UserProfile'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/* 用户资料卡片 */
|
||||
.user-info-avatar-group {
|
||||
margin: 16px 0;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
.user-info-avatar-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
display: none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&:hover .user-info-avatar-icon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background-color: transparent;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
&:hover:after {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
& + h1 {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 用户角色 */
|
||||
.role-list {
|
||||
padding-top: 22px;
|
||||
}
|
||||
|
||||
/* 用户信息列表 */
|
||||
.user-info-list {
|
||||
margin: 47px 0 32px 0;
|
||||
|
||||
.ele-cell + .ele-cell {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
& + .ant-divider {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 用户标签 */
|
||||
.user-info-tags {
|
||||
margin: 16px 0 4px 0;
|
||||
|
||||
.ant-tag {
|
||||
margin: 0 12px 8px 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 用户账号绑定列表 */
|
||||
.user-account-list {
|
||||
& > .ele-cell {
|
||||
padding: 16px 8px;
|
||||
}
|
||||
|
||||
.user-account-icon {
|
||||
color: #fff;
|
||||
padding: 8px;
|
||||
font-size: 26px;
|
||||
border-radius: 50%;
|
||||
|
||||
&.anticon-qq {
|
||||
background: #3492ed;
|
||||
}
|
||||
|
||||
&.anticon-wechat {
|
||||
background: #4daf29;
|
||||
}
|
||||
|
||||
&.anticon-alipay {
|
||||
background: #1476fe;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,391 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="`80%`"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:maxable="maxAble"
|
||||
:title="isUpdate ? '编辑订单' : '订单详情'"
|
||||
:body-style="{ paddingBottom: '8px', background: '#f3f3f3' }"
|
||||
@update:visible="updateVisible"
|
||||
:maskClosable="false"
|
||||
:footer="null"
|
||||
@ok="save"
|
||||
>
|
||||
<!-- <a-card class="order-card" :bordered="false">-->
|
||||
<!-- <a-steps-->
|
||||
<!-- :current="active"-->
|
||||
<!-- direction="horizontal"-->
|
||||
<!-- :responsive="styleResponsive"-->
|
||||
<!-- >-->
|
||||
<!-- <template v-for="(item, index) in steps" :key="index">-->
|
||||
<!-- <a-step-->
|
||||
<!-- :title="item.title"-->
|
||||
<!-- :description="timeAgo(item.description)"-->
|
||||
<!-- />-->
|
||||
<!-- </template>-->
|
||||
<!-- </a-steps>-->
|
||||
<!-- </a-card>-->
|
||||
<a-card title="订单详情" class="order-card">
|
||||
<!-- <a-space>-->
|
||||
<!-- <a-button>发货</a-button>-->
|
||||
<!-- <a-button>商家备注</a-button>-->
|
||||
<!-- <a-button>打印小票</a-button>-->
|
||||
<!-- </a-space>-->
|
||||
<a-row :gutter="16">
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive
|
||||
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
|
||||
: { span: 8 }
|
||||
"
|
||||
>
|
||||
<a-form-item label="订单号" name="orderId">
|
||||
<span>{{ order.orderId }}</span>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive
|
||||
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
|
||||
: { span: 8 }
|
||||
"
|
||||
>
|
||||
<a-form-item label="实付款金额" name="payPrice">
|
||||
<span class="ele-text-warning"
|
||||
>￥{{ formatNumber(order.payPrice) }}</span
|
||||
>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive
|
||||
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
|
||||
: { span: 8 }
|
||||
"
|
||||
>
|
||||
<a-form-item label="订单状态" name="orderStatus">
|
||||
<a-tag>{{ order.payStatus === 20 ? '已下单' : '' }}</a-tag>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive
|
||||
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
|
||||
: { span: 8 }
|
||||
"
|
||||
>
|
||||
<a-form-item label="买家信息" name="deliveryType">
|
||||
<router-link :to="'/system/user/details?id=' + order.userId">
|
||||
<span class="ele-text-primary">{{ order.nickname }}</span>
|
||||
</router-link>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive
|
||||
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
|
||||
: { span: 8 }
|
||||
"
|
||||
>
|
||||
<a-form-item label="预定日期" name="deliveryTime">
|
||||
{{ toDateString(order.deliveryTime, 'yyyy-MM-dd') }}
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive
|
||||
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
|
||||
: { span: 8 }
|
||||
"
|
||||
>
|
||||
<a-form-item label="下单时间" name="createTime">
|
||||
{{ order.createTime }}
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive
|
||||
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
|
||||
: { span: 8 }
|
||||
"
|
||||
>
|
||||
<a-form-item label="交易流水号" name="orderNo">
|
||||
{{ order.orderNo }}
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive
|
||||
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
|
||||
: { span: 8 }
|
||||
"
|
||||
>
|
||||
<a-form-item label="买家留言" name="buyerRemark">
|
||||
<span>{{ order.buyerRemark }}</span>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive
|
||||
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
|
||||
: { span: 8 }
|
||||
"
|
||||
>
|
||||
<a-form-item label="订单备注" name="comments">
|
||||
<span>{{ order.comments }}</span>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
<a-card title="菜品信息" class="order-card">
|
||||
<a-spin :spinning="loading">
|
||||
<a-table
|
||||
:data-source="orderGoodsList"
|
||||
:columns="columns"
|
||||
:pagination="false"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'goodsName'">
|
||||
<div class="goods-info">
|
||||
<a-image
|
||||
v-if="record.imageUrl"
|
||||
:src="record.imageUrl"
|
||||
:preview="false"
|
||||
:width="50"
|
||||
/>
|
||||
<div class="info">
|
||||
<div>{{ record.goodsName }}</div>
|
||||
<div class="ele-text-placeholder">{{ record.comments }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-spin>
|
||||
</a-card>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { Form } from 'ant-design-vue';
|
||||
import { assignObject, toDateString } from 'ele-admin-pro';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import { formatNumber } from 'ele-admin-pro/es';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { Order } from '@/api/order/model';
|
||||
import { ColumnItem } from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import { OrderGoods } from '@/api/order/goods/model';
|
||||
import { getOrder } from '@/api/order';
|
||||
import { listOrderGoods } from '@/api/order/goods';
|
||||
|
||||
const useForm = Form.useForm;
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: Order | null;
|
||||
}>();
|
||||
|
||||
export interface step {
|
||||
title?: String | undefined;
|
||||
subTitle?: String | undefined;
|
||||
description?: String | undefined;
|
||||
}
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
// 是否显示最大化切换按钮
|
||||
const maxAble = ref(true);
|
||||
const orderGoodsList = ref<OrderGoods[]>([]);
|
||||
|
||||
// 步骤条
|
||||
const steps = ref<step[]>([
|
||||
{
|
||||
title: '报餐',
|
||||
description: undefined
|
||||
},
|
||||
{
|
||||
title: '付款',
|
||||
description: undefined
|
||||
},
|
||||
{
|
||||
title: '发餐',
|
||||
description: undefined
|
||||
},
|
||||
{
|
||||
title: '取餐',
|
||||
description: undefined
|
||||
},
|
||||
{
|
||||
title: '完成',
|
||||
description: undefined
|
||||
}
|
||||
]);
|
||||
const active = ref(2);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 订单信息
|
||||
const order = reactive<Order>({
|
||||
orderId: undefined,
|
||||
orderNo: '',
|
||||
userId: undefined,
|
||||
orderSourceData: '',
|
||||
nickname: '',
|
||||
comments: '',
|
||||
createTime: undefined,
|
||||
deliveryTime: '',
|
||||
payPrice: undefined,
|
||||
payStatus: undefined
|
||||
});
|
||||
|
||||
// 请求状态
|
||||
const loading = ref(true);
|
||||
|
||||
const { resetFields } = useForm(order);
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
const columns = ref<ColumnItem[]>([
|
||||
// {
|
||||
// title: '菜品ID',
|
||||
// dataIndex: 'goodsId'
|
||||
// },
|
||||
{
|
||||
title: '菜品信息',
|
||||
dataIndex: 'goodsName',
|
||||
key: 'goodsName'
|
||||
},
|
||||
{
|
||||
title: '菜品价格',
|
||||
dataIndex: 'goodsPrice',
|
||||
customRender: ({ text }) => '￥' + text
|
||||
},
|
||||
{
|
||||
title: '购买数量',
|
||||
dataIndex: 'totalNum',
|
||||
key: 'totalNum'
|
||||
}
|
||||
]);
|
||||
|
||||
/* 制作步骤条 */
|
||||
const loadSteps = (order) => {
|
||||
steps.value = [];
|
||||
steps.value.push({
|
||||
title: '下单'
|
||||
});
|
||||
steps.value.push({
|
||||
title: '付款'
|
||||
});
|
||||
steps.value.push({
|
||||
title: '发货'
|
||||
});
|
||||
steps.value.push({
|
||||
title: '收货'
|
||||
});
|
||||
steps.value.push({
|
||||
title: '完成'
|
||||
});
|
||||
|
||||
// 下单
|
||||
if (order.payStatus == 10) {
|
||||
active.value = 0;
|
||||
steps.value[0].description = order.createTime;
|
||||
}
|
||||
// 付款
|
||||
if (order.payStatus == 20) {
|
||||
active.value = 1;
|
||||
steps.value[0].description = order.createTime;
|
||||
steps.value[1].description = order.payTime;
|
||||
}
|
||||
// 发货
|
||||
if (order.payStatus == 20 && order.deliveryStatus == 20) {
|
||||
active.value = 2;
|
||||
steps.value[0].description = order.createTime;
|
||||
steps.value[1].description = order.payTime;
|
||||
steps.value[2].description = order.deliveryTime;
|
||||
}
|
||||
// 收货
|
||||
if (order.payStatus == 20 && order.receiptStatus == 20) {
|
||||
active.value = 3;
|
||||
steps.value[0].description = order.createTime;
|
||||
steps.value[1].description = order.payTime;
|
||||
steps.value[2].description = order.deliveryTime;
|
||||
steps.value[3].description = order.receiptTime;
|
||||
}
|
||||
// 完成
|
||||
if (order.payStatus == 20 && order.orderStatus == 30) {
|
||||
active.value = 4;
|
||||
steps.value[0].description = order.createTime;
|
||||
steps.value[1].description = order.payTime;
|
||||
steps.value[2].description = order.deliveryTime;
|
||||
steps.value[3].description = order.receiptTime;
|
||||
}
|
||||
// 已取消
|
||||
if (order.orderStatus == 20) {
|
||||
active.value = 4;
|
||||
}
|
||||
};
|
||||
|
||||
const queryOrder = () => {
|
||||
var orderId = props.data?.orderId;
|
||||
getOrder(orderId).then((res) => {
|
||||
assignObject(order, res);
|
||||
});
|
||||
};
|
||||
|
||||
const getOrderGoods = () => {
|
||||
const orderId = props.data?.orderId;
|
||||
listOrderGoods({ orderId }).then((data) => {
|
||||
orderGoodsList.value = data;
|
||||
});
|
||||
};
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
loading.value = false;
|
||||
queryOrder();
|
||||
// assignObject(order, props.data);
|
||||
loadSteps(props.data);
|
||||
getOrderGoods();
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.order-card {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.ant-form-item {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.goods-info {
|
||||
display: flex;
|
||||
.info {
|
||||
padding-left: 5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,282 @@
|
||||
<!-- 搜索表单 -->
|
||||
<template>
|
||||
<div class="search">
|
||||
<a-space :size="10" style="flex-wrap: wrap">
|
||||
<!-- <a-button type="primary" class="ele-btn-icon" @click="add">-->
|
||||
<!-- <template #icon>-->
|
||||
<!-- <PlusOutlined />-->
|
||||
<!-- </template>-->
|
||||
<!-- <span>发布菜品</span>-->
|
||||
<!-- </a-button>-->
|
||||
<a-button
|
||||
danger
|
||||
type="primary"
|
||||
class="ele-btn-icon"
|
||||
:disabled="selection.length === 0"
|
||||
@click="removeBatch"
|
||||
>
|
||||
<template #icon>
|
||||
<DeleteOutlined />
|
||||
</template>
|
||||
<span>批量删除</span>
|
||||
</a-button>
|
||||
<SelectOrganization
|
||||
:placeholder="`请选择部门`"
|
||||
v-model:value="where.organizationName"
|
||||
@done="chooseOrganization"
|
||||
/>
|
||||
<a-range-picker
|
||||
v-model:value="dateRange"
|
||||
@change="search"
|
||||
value-format="YYYY-MM-DD"
|
||||
class="ele-fluid"
|
||||
/>
|
||||
<!-- <a-radio-group v-model:value="where.categoryId" @change="search">-->
|
||||
<!-- <a-radio-button :value="25">早餐</a-radio-button>-->
|
||||
<!-- <a-radio-button :value="26">午餐</a-radio-button>-->
|
||||
<!-- <a-radio-button :value="27">晚餐</a-radio-button>-->
|
||||
<!-- </a-radio-group>-->
|
||||
<!-- <a-radio-group v-model:value="where.deliveryStatus" @change="search">-->
|
||||
<!-- <a-radio-button :value="20">已签到</a-radio-button>-->
|
||||
<!-- <a-radio-button :value="10">未签到</a-radio-button>-->
|
||||
<!-- </a-radio-group>-->
|
||||
<!-- <a-radio-group v-model:value="where.gear" @change="search">-->
|
||||
<!-- <a-radio-button :value="10">食堂档口</a-radio-button>-->
|
||||
<!-- <a-radio-button :value="20">物品档口</a-radio-button>-->
|
||||
<!-- </a-radio-group>-->
|
||||
<!-- <a-button @click="onRepairData">修复数据</a-button>-->
|
||||
<a-input-search
|
||||
allow-clear
|
||||
placeholder="请输入订单号|姓名"
|
||||
v-model:value="where.keywords"
|
||||
@pressEnter="search"
|
||||
@search="search"
|
||||
style="width: 220px"
|
||||
/>
|
||||
<a-button @click="reset">重置</a-button>
|
||||
<!-- <span style="margin-left: 20px"-->
|
||||
<!-- >已签到 {{ signUsers }} / 已报餐 {{ postUsers }}</span-->
|
||||
<!-- >-->
|
||||
<a-button type="primary" class="ele-btn-icon" @click="handleExport">
|
||||
<template #icon>
|
||||
<download-outlined />
|
||||
</template>
|
||||
<span>导出</span>
|
||||
</a-button>
|
||||
</a-space>
|
||||
<!-- <a-spin :spinning="loading">-->
|
||||
<!-- <a-alert-->
|
||||
<!-- :message="`报餐统计：已报餐 ${post} / 已签到 ${sign} / 未签到 ${noSign}`"-->
|
||||
<!-- type="info"-->
|
||||
<!-- style="margin-top: 8px; max-width: 602px"-->
|
||||
<!-- />-->
|
||||
<!-- </a-spin>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
PlusOutlined,
|
||||
DeleteOutlined,
|
||||
DownloadOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import useSearch from '@/utils/use-search';
|
||||
import { ref, watch } from 'vue';
|
||||
import { countOrderGoods } from '@/api/apps/statistics';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { utils, writeFile } from 'xlsx';
|
||||
import { Organization } from '@/api/system/organization/model';
|
||||
import { BcExportParam } from '@/api/apps/bc/export/model';
|
||||
import { RechargeOrder } from '@/api/user/recharge/export/model';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的角色
|
||||
selection?: [];
|
||||
exportData?: [];
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: BcExportParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
(e: 'done'): void;
|
||||
}>();
|
||||
|
||||
// 表单数据
|
||||
const { where, resetFields } = useSearch<BcExportParam>({
|
||||
exportId: undefined,
|
||||
keywords: undefined,
|
||||
organizationName: '',
|
||||
organizationId: undefined,
|
||||
createTimeStart: undefined,
|
||||
createTimeEnd: undefined
|
||||
});
|
||||
// 下来选项
|
||||
// const categoryId = ref<number>(0);
|
||||
const post = ref<number>(0);
|
||||
const sign = ref<number>(0);
|
||||
const noSign = ref<number>(0);
|
||||
// 请求状态
|
||||
const loading = ref(true);
|
||||
// const deliveryStatus = ref<number>(0);
|
||||
// const gear = ref<number>(0);
|
||||
// 预定日期
|
||||
// const deliveryTime = ref<Dayjs>();
|
||||
// 日期范围选择
|
||||
const dateRange = ref<[string, string]>(['', '']);
|
||||
|
||||
/* 搜索 */
|
||||
const search = () => {
|
||||
const [d1, d2] = dateRange.value ?? [];
|
||||
where.createTimeStart = d1 ? d1 + ' 00:00:00' : undefined;
|
||||
where.createTimeEnd = d2 ? d2 + ' 00:00:00' : undefined;
|
||||
emit('search', {
|
||||
...where
|
||||
});
|
||||
count();
|
||||
};
|
||||
|
||||
// const handleTabs = (e) => {
|
||||
// const index = Number(e.target.value);
|
||||
// resetFields();
|
||||
// categoryId.value = index;
|
||||
// search();
|
||||
// };
|
||||
//
|
||||
// const onDeliveryStatus = (e) => {
|
||||
// const index = Number(e.target.value);
|
||||
// resetFields();
|
||||
// deliveryStatus.value = index;
|
||||
// search();
|
||||
// };
|
||||
|
||||
// const onGear = (e) => {
|
||||
// const index = Number(e.target.value);
|
||||
// resetFields();
|
||||
// gear.value = index;
|
||||
// search();
|
||||
// };
|
||||
//
|
||||
// // 发布菜品
|
||||
// const add = () => {
|
||||
// emit('add');
|
||||
// };
|
||||
|
||||
const chooseOrganization = (e: Organization) => {
|
||||
where.organizationName = e.organizationName;
|
||||
where.organizationId = e.organizationId;
|
||||
search();
|
||||
};
|
||||
|
||||
/* 重置 */
|
||||
const reset = () => {
|
||||
resetFields();
|
||||
post.value = 0;
|
||||
sign.value = 0;
|
||||
noSign.value = 0;
|
||||
dateRange.value = ['', ''];
|
||||
search();
|
||||
};
|
||||
|
||||
const count = () => {
|
||||
if (where.deliveryTimeStart == undefined) {
|
||||
console.log('sss>>>');
|
||||
loading.value = false;
|
||||
return false;
|
||||
}
|
||||
loading.value = true;
|
||||
countOrderGoods(where)
|
||||
.then((data) => {
|
||||
console.log('data>>>', data);
|
||||
if (data) {
|
||||
post.value = data.post;
|
||||
sign.value = data.sign;
|
||||
noSign.value = data.noSign;
|
||||
} else {
|
||||
post.value = 0;
|
||||
sign.value = 0;
|
||||
noSign.value = 0;
|
||||
}
|
||||
loading.value = false;
|
||||
})
|
||||
.catch((err) => {
|
||||
message.error(err.message);
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
// 导出
|
||||
const handleExport = () => {
|
||||
if (!props.selection?.length) {
|
||||
emit('done');
|
||||
return;
|
||||
}
|
||||
const array: (string | number)[][] = [
|
||||
[
|
||||
'部门',
|
||||
'编号',
|
||||
'姓名',
|
||||
'充值金额',
|
||||
'充值时间',
|
||||
'添加人',
|
||||
'备注',
|
||||
'充值方式'
|
||||
]
|
||||
];
|
||||
props.selection?.forEach((d: RechargeOrder) => {
|
||||
array.push([
|
||||
`${d.organizationName}`,
|
||||
`${d.userId}`,
|
||||
`${d.nickname}`,
|
||||
`${d.payPrice}`,
|
||||
`${d.createTime}`,
|
||||
`财务充值`,
|
||||
`${d.comments}`,
|
||||
`管理员充值`
|
||||
]);
|
||||
});
|
||||
const sheetName = '充值记录导出';
|
||||
const workbook = {
|
||||
SheetNames: [sheetName],
|
||||
Sheets: {}
|
||||
};
|
||||
const sheet = utils.aoa_to_sheet(array);
|
||||
workbook.Sheets[sheetName] = sheet;
|
||||
// 设置列宽
|
||||
sheet['!cols'] = [
|
||||
{ wch: 10 },
|
||||
{ wch: 10 },
|
||||
{ wch: 10 },
|
||||
{ wch: 10 },
|
||||
{ wch: 20 },
|
||||
{ wch: 40 },
|
||||
{ wch: 10 }
|
||||
];
|
||||
writeFile(workbook, '报餐统计导出.xlsx');
|
||||
};
|
||||
|
||||
// const onRepairData = () => {
|
||||
// where.deliveryTime = deliveryTime.value
|
||||
// ? deliveryTime.value + ' 00:00:00'
|
||||
// : '';
|
||||
// // where.payStatus = 10;
|
||||
// repairData({}).then(() => {
|
||||
// // message.success(res.message);
|
||||
// });
|
||||
// };
|
||||
|
||||
// 批量删除
|
||||
const removeBatch = () => {
|
||||
emit('remove');
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
);
|
||||
|
||||
count();
|
||||
</script>
|
||||
@@ -0,0 +1,302 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="orderId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:parse-data="parseData"
|
||||
v-model:selection="selection"
|
||||
:customRow="customRow"
|
||||
tool-class="ele-toolbar-form"
|
||||
:scroll="{ x: 1200 }"
|
||||
class="sys-org-table"
|
||||
:striped="true"
|
||||
>
|
||||
<template #toolbar>
|
||||
<search
|
||||
@search="reload"
|
||||
:selection="selection"
|
||||
:export-data="exportData"
|
||||
@remove="removeBatch"
|
||||
@done="handleExport"
|
||||
/>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'createTime'">
|
||||
{{ record.createTime }}
|
||||
</template>
|
||||
<template v-if="column.key === 'admin'"> 财务充值 </template>
|
||||
<template v-if="column.key === 'rechargeType'"> 管理员充值 </template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a-button @click="openInfo(record)">详情</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
</div>
|
||||
<!-- 订单详情 -->
|
||||
<order-info v-model:visible="showInfo" :data="current" @done="reload" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import Search from './components/search.vue';
|
||||
import OrderInfo from './components/order-info.vue';
|
||||
import {
|
||||
listRechargeOrder,
|
||||
removeBatchRechargeOrder
|
||||
} from '@/api/user/recharge/export';
|
||||
import type {
|
||||
RechargeOrder,
|
||||
RechargeOrderParam
|
||||
} from '@/api/user/recharge/export/model';
|
||||
import { utils, writeFile } from 'xlsx';
|
||||
|
||||
defineProps<{
|
||||
activeKey?: boolean;
|
||||
data?: any;
|
||||
}>();
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
key: 'index',
|
||||
width: 48,
|
||||
align: 'center',
|
||||
fixed: 'left',
|
||||
hideInSetting: true,
|
||||
hideInTable: true,
|
||||
customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
|
||||
},
|
||||
{
|
||||
title: '部门名称',
|
||||
dataIndex: 'organizationName',
|
||||
key: 'organizationName',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'nickname',
|
||||
key: 'nickname',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '充值金额',
|
||||
dataIndex: 'payPrice',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '充值时间',
|
||||
dataIndex: 'createTime',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '操作人',
|
||||
dataIndex: 'admin',
|
||||
key: 'admin',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'comments',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '充值方式',
|
||||
dataIndex: 'rechargeType',
|
||||
key: 'rechargeType',
|
||||
align: 'center'
|
||||
}
|
||||
]);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<RechargeOrder[]>([]);
|
||||
const exportData = ref<RechargeOrder[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<RechargeOrder | null>(null);
|
||||
// 是否显示资产详情
|
||||
const showInfo = ref(false);
|
||||
// 是否显示编辑弹窗
|
||||
// const showEdit = ref(false);
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({
|
||||
page,
|
||||
limit,
|
||||
where,
|
||||
orders,
|
||||
filters
|
||||
}) => {
|
||||
return listRechargeOrder({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表单数据
|
||||
// const { form } = useFormData<RechargeOrder>({
|
||||
// exportId: undefined
|
||||
// });
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: RechargeOrderParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openInfo = (row?: RechargeOrder) => {
|
||||
current.value = row ?? null;
|
||||
showInfo.value = true;
|
||||
};
|
||||
|
||||
/* 数据转为树形结构 */
|
||||
const parseData = (data: RechargeOrder[]) => {
|
||||
exportData.value = data;
|
||||
return data;
|
||||
};
|
||||
|
||||
/* 批量删除 */
|
||||
const removeBatch = () => {
|
||||
console.log(selection.value);
|
||||
if (!selection.value.length) {
|
||||
message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
content: '确定要删除选中的记录吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeBatchRechargeOrder(selection.value.map((d) => d.orderId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 导出
|
||||
const handleExport = () => {
|
||||
const array: (string | number)[][] = [
|
||||
[
|
||||
'部门',
|
||||
'编号',
|
||||
'姓名',
|
||||
'充值金额',
|
||||
'充值时间',
|
||||
'添加人',
|
||||
'备注',
|
||||
'充值方式'
|
||||
]
|
||||
];
|
||||
exportData.value?.forEach((d: RechargeOrder) => {
|
||||
array.push([
|
||||
`${d.organizationName}`,
|
||||
`${d.userId}`,
|
||||
`${d.nickname}`,
|
||||
`${d.payPrice}`,
|
||||
`${d.createTime}`,
|
||||
`财务充值`,
|
||||
`${d.comments}`,
|
||||
`管理员充值`
|
||||
]);
|
||||
});
|
||||
const sheetName = '充值记录导出';
|
||||
const workbook = {
|
||||
SheetNames: [sheetName],
|
||||
Sheets: {}
|
||||
};
|
||||
const sheet = utils.aoa_to_sheet(array);
|
||||
workbook.Sheets[sheetName] = sheet;
|
||||
// 设置列宽
|
||||
sheet['!cols'] = [
|
||||
{ wch: 10 },
|
||||
{ wch: 10 },
|
||||
{ wch: 10 },
|
||||
{ wch: 10 },
|
||||
{ wch: 20 },
|
||||
{ wch: 40 },
|
||||
{ wch: 10 }
|
||||
];
|
||||
writeFile(workbook, '充值记录导出.xlsx');
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: RechargeOrder) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
// openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const query = () => {
|
||||
listRechargeOrder({}).then((data) => {
|
||||
exportData.value = data;
|
||||
console.log(data);
|
||||
});
|
||||
};
|
||||
|
||||
query();
|
||||
reload();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'RechargeOrderIndex'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
p {
|
||||
line-height: 0.8;
|
||||
}
|
||||
.sys-org-table :deep(.ant-table-body) {
|
||||
overflow: auto !important;
|
||||
overflow: overlay !important;
|
||||
}
|
||||
|
||||
.sys-org-table :deep(.ant-table-pagination.ant-pagination) {
|
||||
padding: 0 4px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.price-edit {
|
||||
padding-right: 5px;
|
||||
}
|
||||
.comments {
|
||||
max-width: 200px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,203 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="500"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:title="'批量充值'"
|
||||
:body-style="{ paddingBottom: '8px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="styleResponsive ? { md: 7, sm: 4, xs: 24 } : { flex: '90px' }"
|
||||
:wrapper-col="
|
||||
styleResponsive ? { md: 17, sm: 20, xs: 24 } : { flex: '1' }
|
||||
"
|
||||
>
|
||||
<a-form-item label="充值金额" name="payPrice">
|
||||
<a-input-number
|
||||
placeholder="请输入金额"
|
||||
style="width: 280px"
|
||||
v-model:value="form.payPrice"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
import type { FormInstance, Rule } from 'ant-design-vue/es/form';
|
||||
import { emailReg, phoneReg } from 'ele-admin-pro/es';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import { recharge } from '@/api/user/recharge/order';
|
||||
import type { User } from '@/api/system/user/model';
|
||||
import { RechargeOrder } from "@/api/user/recharge/order/model";
|
||||
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: User | null;
|
||||
}>();
|
||||
|
||||
//
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
|
||||
// 表单数据
|
||||
const { form, resetFields, assignFields } = useFormData<RechargeOrder>({
|
||||
userId: undefined,
|
||||
payPrice: undefined
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive<Record<string, Rule[]>>({
|
||||
username: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请要充值的账号',
|
||||
// validator: (_rule: Rule, value: string) => {
|
||||
// return new Promise<void>((resolve, reject) => {
|
||||
// if (!value) {
|
||||
// return reject('请输入用户账号');
|
||||
// }
|
||||
// checkExistence('username', value, props.data?.userId)
|
||||
// .then(() => {
|
||||
// reject('账号已经存在');
|
||||
// })
|
||||
// .catch(() => {
|
||||
// resolve();
|
||||
// });
|
||||
// });
|
||||
// },
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
nickname: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入昵称',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
sex: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择性别',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
roles: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择角色',
|
||||
type: 'array',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
email: [
|
||||
{
|
||||
pattern: emailReg,
|
||||
message: '邮箱格式不正确',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
validator: async (_rule: Rule, value: string) => {
|
||||
if (isUpdate.value || /^[\S]{5,18}$/.test(value)) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
return Promise.reject('密码必须为5-18位非空白字符');
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
phone: [
|
||||
{
|
||||
pattern: phoneReg,
|
||||
message: '手机号格式不正确',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
// const saveOrUpdate = isUpdate.value ? updateUser : addUser;
|
||||
recharge(form)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
assignFields({
|
||||
...props.data,
|
||||
password: ''
|
||||
});
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
formRef.value?.clearValidate();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
@@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card title="基本信息123" :bordered="false">
|
||||
<a-form
|
||||
class="ele-form-detail"
|
||||
:label-col="
|
||||
styleResponsive ? { md: 2, sm: 4, xs: 6 } : { flex: '90px' }
|
||||
"
|
||||
:wrapper-col="
|
||||
styleResponsive ? { md: 22, sm: 20, xs: 18 } : { flex: '1' }
|
||||
"
|
||||
>
|
||||
<a-form-item label="账号">
|
||||
<div class="ele-text-secondary">{{ form.username }}</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="昵称">
|
||||
<div class="ele-text-secondary">{{ form.nickname }}</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="性别">
|
||||
<div class="ele-text-secondary">{{ form.sexName }}</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="手机号">
|
||||
<div class="ele-text-secondary">{{ form.phone }}</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="角色">
|
||||
<a-tag v-for="item in form.roles" :key="item.roleId" color="blue">
|
||||
{{ item.roleName }}
|
||||
</a-tag>
|
||||
</a-form-item>
|
||||
<a-form-item label="创建时间">
|
||||
<div class="ele-text-secondary">{{ form.createTime }}</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="状态">
|
||||
<a-badge
|
||||
v-if="typeof form.status === 'number'"
|
||||
:status="(['processing', 'error'][form.status] as any)"
|
||||
:text="['正常', '冻结'][form.status]"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch, unref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
import { toDateString } from 'ele-admin-pro/es';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import { setPageTabTitle } from '@/utils/page-tab-util';
|
||||
import { getUser } from '@/api/system/user';
|
||||
import type { User } from '@/api/system/user/model';
|
||||
const ROUTE_PATH = '/system/user/details';
|
||||
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const { currentRoute } = useRouter();
|
||||
|
||||
// 用户信息
|
||||
const { form, assignFields } = useFormData<User>({
|
||||
userId: undefined,
|
||||
username: '',
|
||||
nickname: '',
|
||||
sexName: '',
|
||||
phone: '',
|
||||
roles: [],
|
||||
createTime: undefined,
|
||||
status: undefined
|
||||
});
|
||||
|
||||
// 请求状态
|
||||
const loading = ref(true);
|
||||
|
||||
/* */
|
||||
const query = () => {
|
||||
const { query } = unref(currentRoute);
|
||||
const id = query.id;
|
||||
if (!id || form.userId === Number(id)) {
|
||||
return;
|
||||
}
|
||||
loading.value = true;
|
||||
getUser(Number(id))
|
||||
.then((data) => {
|
||||
loading.value = false;
|
||||
assignFields({
|
||||
...data,
|
||||
createTime: toDateString(data.createTime)
|
||||
});
|
||||
// 修改页签标题
|
||||
if (unref(currentRoute).path === ROUTE_PATH) {
|
||||
setPageTabTitle(data.nickname + '的信息');
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
currentRoute,
|
||||
(route) => {
|
||||
const { path } = unref(route);
|
||||
if (path !== ROUTE_PATH) {
|
||||
return;
|
||||
}
|
||||
query();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'SystemUserDetails'
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,303 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<!-- 搜索表单 -->
|
||||
<!-- <user-search :where="defaultWhere" @search="reload" />-->
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="orderId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:scroll="{ x: 1000 }"
|
||||
:where="defaultWhere"
|
||||
v-model:selection="selection"
|
||||
cache-key="proSystemUserTable"
|
||||
>
|
||||
<template #toolbar>
|
||||
<a-space>
|
||||
<a-button
|
||||
type="primary"
|
||||
class="ele-btn-icon"
|
||||
:disabled="selection.length === 0"
|
||||
@click="openEdit()"
|
||||
>
|
||||
<template #icon>
|
||||
<MoneyCollectOutlined />
|
||||
</template>
|
||||
<span>批量充值</span>
|
||||
</a-button>
|
||||
<!-- <a-button-->
|
||||
<!-- danger-->
|
||||
<!-- type="primary"-->
|
||||
<!-- class="ele-btn-icon"-->
|
||||
<!-- @click="removeBatch"-->
|
||||
<!-- >-->
|
||||
<!-- <template #icon>-->
|
||||
<!-- <delete-outlined />-->
|
||||
<!-- </template>-->
|
||||
<!-- <span>删除</span>-->
|
||||
<!-- </a-button>-->
|
||||
<a-input-search
|
||||
allow-clear
|
||||
v-model:value="searchText"
|
||||
placeholder="请输入关键词"
|
||||
@search="reload"
|
||||
@pressEnter="reload"
|
||||
>
|
||||
<template #addonBefore>
|
||||
<a-select
|
||||
v-model:value="type"
|
||||
style="width: 100px; margin: -5px -12px"
|
||||
>
|
||||
<a-select-option value="keywords">模糊搜索</a-select-option>
|
||||
<a-select-option value="username">账号</a-select-option>
|
||||
<a-select-option value="phone">手机号码</a-select-option>
|
||||
<a-select-option value="userId">用户ID</a-select-option>
|
||||
<a-select-option value="nickname">昵称</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-input-search>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'nickname'">
|
||||
<a-tooltip :title="`用户ID：${record.userId}`">
|
||||
<a-avatar
|
||||
:size="30"
|
||||
:src="`${record.avatar}`"
|
||||
style="margin-right: 4px"
|
||||
>
|
||||
<template #icon>
|
||||
<UserOutlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
<span @click="openInfo(record)">{{ record.nickname }}</span>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'rechargeType'">
|
||||
<a-tag v-if="record.rechargeType === 10"> 自定义金额 </a-tag>
|
||||
<a-tag v-if="record.rechargeType === 20"> 套餐充值 </a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'balance'">
|
||||
<span class="ele-text-success">
|
||||
￥{{ formatNumber(record.balance) }}
|
||||
</span>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'status'">
|
||||
<a-switch
|
||||
:checked="record.status === 0"
|
||||
@change="(checked: boolean) => editStatus(checked, record)"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a @click="openEdit(record)">修改</a>
|
||||
<a-divider type="vertical" />
|
||||
<a @click="resetPsw(record)">重置密码</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm
|
||||
placement="topRight"
|
||||
title="确定要删除此用户吗？"
|
||||
@confirm="remove(record)"
|
||||
>
|
||||
<a class="ele-text-danger">删除</a>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
<!-- 编辑弹窗 -->
|
||||
<Recharge v-model:visible="showEdit" :data="current" @done="reload" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref, reactive } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue/es';
|
||||
import {
|
||||
MoneyCollectOutlined,
|
||||
// DeleteOutlined,
|
||||
ExclamationCircleOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro/es';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import { toDateString, messageLoading, formatNumber } from 'ele-admin-pro/es';
|
||||
import Recharge from './components/recharge.vue';
|
||||
import {
|
||||
pageRechargeOrder,
|
||||
removeRechargeOrder,
|
||||
removeBatchRechargeOrder
|
||||
} from '@/api/user/recharge/order';
|
||||
import type {
|
||||
RechargeOrder,
|
||||
RechargeOrderParam
|
||||
} from '@/api/user/recharge/order/model';
|
||||
import { uuid } from 'ele-admin-pro';
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
key: 'index',
|
||||
width: 48,
|
||||
align: 'center',
|
||||
fixed: 'left',
|
||||
hideInSetting: true,
|
||||
customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'nickname',
|
||||
dataIndex: 'nickname',
|
||||
showSorterTooltip: false
|
||||
},
|
||||
{
|
||||
title: '场景',
|
||||
dataIndex: 'rechargeType',
|
||||
key: 'rechargeType',
|
||||
showSorterTooltip: false
|
||||
},
|
||||
{
|
||||
title: '充值金额',
|
||||
dataIndex: 'payPrice',
|
||||
sorter: true,
|
||||
customRender: ({ text }) => '￥' + text
|
||||
},
|
||||
{
|
||||
title: '可用余额',
|
||||
dataIndex: 'balance',
|
||||
sorter: true,
|
||||
customRender: ({ text }) => '￥' + text
|
||||
},
|
||||
{
|
||||
title: '管理员备注',
|
||||
dataIndex: 'comments'
|
||||
},
|
||||
{
|
||||
title: '时间',
|
||||
dataIndex: 'createTime',
|
||||
sorter: true,
|
||||
showSorterTooltip: false,
|
||||
ellipsis: true,
|
||||
customRender: ({ text }) => toDateString(text)
|
||||
}
|
||||
]);
|
||||
// 表格选中数据
|
||||
const selection = ref<RechargeOrder[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<RechargeOrder | null>(null);
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
// 是否显示用户详情
|
||||
const showInfo = ref(false);
|
||||
// 是否显示用户导入弹窗
|
||||
const showImport = ref(false);
|
||||
const type = ref('keywords');
|
||||
const searchText = ref('');
|
||||
// 默认搜索条件
|
||||
const defaultWhere = reactive({
|
||||
username: '',
|
||||
nickname: ''
|
||||
});
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({
|
||||
page,
|
||||
limit,
|
||||
where,
|
||||
orders,
|
||||
filters
|
||||
}) => {
|
||||
where = {};
|
||||
if (type.value == 'username') {
|
||||
where.username = searchText.value;
|
||||
}
|
||||
if (type.value == 'nickname') {
|
||||
where.nickname = searchText.value;
|
||||
}
|
||||
if (type.value == 'phone') {
|
||||
where.phone = searchText.value;
|
||||
}
|
||||
if (type.value == 'userId') {
|
||||
where.userId = searchText.value;
|
||||
}
|
||||
// where.roleId = filters.roles;
|
||||
return pageRechargeOrder({ ...where, ...orders, page, limit });
|
||||
};
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: RechargeOrderParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ page: 1, where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: RechargeOrder) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开用户详情弹窗 */
|
||||
const openInfo = (row?: RechargeOrder) => {
|
||||
current.value = row ?? null;
|
||||
showInfo.value = true;
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openImport = () => {
|
||||
showImport.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: RechargeOrder) => {
|
||||
const hide = messageLoading('请求中..', 0);
|
||||
removeRechargeOrder(row.userId)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 批量删除 */
|
||||
const removeBatch = () => {
|
||||
if (!selection.value.length) {
|
||||
message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
content: '确定要删除选中的用户吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = messageLoading('请求中..', 0);
|
||||
removeBatchRechargeOrder(selection.value.map((d) => d.orderId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'SystemUser'
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,454 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<div class="page">
|
||||
<a-page-header :ghost="false" title="提交工单">
|
||||
<div class="ele-text-secondary">
|
||||
请把您的问题工程师排查问题需要一定时间，如有新消息将通过短信等方式通知您。如需补充信息，请继续留言。
|
||||
</div>
|
||||
</a-page-header>
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<a-form
|
||||
:label-col="{ md: { span: 8 }, sm: { span: 24 } }"
|
||||
:wrapper-col="{ md: { span: 24 }, sm: { span: 24 } }"
|
||||
layout="vertical"
|
||||
>
|
||||
<a-form-item label="标题" v-bind="validateInfos.name">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入工单名称"
|
||||
v-model:value="form.name"
|
||||
@blur="validate('name', { trigger: 'blur' }).catch(() => {})"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="问题描述" v-bind="validateInfos.content">
|
||||
<!-- 编辑器 -->
|
||||
<byte-md-editor
|
||||
v-model:value="content"
|
||||
placeholder="请输入您的工单内容，图片请直接粘贴"
|
||||
:locale="zh_Hans"
|
||||
:plugins="plugins"
|
||||
height="300px"
|
||||
:editorConfig="{ lineNumbers: true }"
|
||||
@paste="onPaste"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<a-space>
|
||||
<a-button
|
||||
type="primary"
|
||||
class="ele-btn-icon"
|
||||
@click="save"
|
||||
>
|
||||
<template #icon>
|
||||
<PlusOutlined />
|
||||
</template>
|
||||
<span>提交问题</span>
|
||||
</a-button>
|
||||
<a-button
|
||||
class="ele-btn-icon"
|
||||
@click="push('/user/task/index')"
|
||||
>
|
||||
<template #icon>
|
||||
<PlusOutlined />
|
||||
</template>
|
||||
<span>查看工单</span>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {ref, reactive, watch, computed} from 'vue';
|
||||
import {Form, message, Modal, SelectProps} from 'ant-design-vue';
|
||||
import {useUserStore} from '@/store/modules/user';
|
||||
import {assignObject, htmlToText} from 'ele-admin-pro';
|
||||
import type {Task} from '@/api/oa/task/model';
|
||||
import {addTask, updateTask} from '@/api/oa/task';
|
||||
import {FILE_SERVER} from "@/config/setting";
|
||||
import {uploadFile} from "@/api/system/file";
|
||||
import {RuleObject} from "ant-design-vue/es/form";
|
||||
import { getDictionaryOptions, isImage, selectProject } from "@/utils/common";
|
||||
import SelectStaff from '@/components/SelectStaff/index.vue';
|
||||
import SelectCompany from '@/components/SelectCompany/index.vue';
|
||||
import SelectApp from '@/components/SelectApp/index.vue';
|
||||
import 'bytemd/dist/index.min.css';
|
||||
import highlight from '@bytemd/plugin-highlight-ssr'
|
||||
import 'highlight.js/styles/default.css'
|
||||
import ByteMdEditor from '@/components/ByteMdEditor/index.vue';
|
||||
// import highlight from '@bytemd/plugin-highlight';
|
||||
// 中文语言文件
|
||||
import zh_Hans from 'bytemd/locales/zh_Hans.json';
|
||||
// 链接、删除线、复选框、表格等的插件
|
||||
import gfm from '@bytemd/plugin-gfm';
|
||||
// 插件的中文语言文件
|
||||
import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
|
||||
import { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
|
||||
import { UploadOutlined } from '@ant-design/icons-vue';
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const useForm = Form.useForm;
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: Task | null;
|
||||
}>();
|
||||
|
||||
const userStore = useUserStore();
|
||||
// 当前登录用户信息
|
||||
const loginUser = computed(() => userStore.info ?? {});
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const disabled = ref(false);
|
||||
// 是否显示最大化切换按钮
|
||||
const maxAble = ref(true);
|
||||
// 选项卡位置
|
||||
const activeKey = ref('1');
|
||||
const promoter = ref<any>(undefined);
|
||||
const commander = ref(undefined);
|
||||
const appid = ref(undefined);
|
||||
// 字典数据
|
||||
const taskType = getDictionaryOptions('taskType');
|
||||
const progress = getDictionaryOptions('taskProgress');
|
||||
const priority = getDictionaryOptions('taskPriority');
|
||||
const quality = getDictionaryOptions('taskQuality');
|
||||
/* 打开选择弹窗 */
|
||||
const showUser = ref(false);
|
||||
const showProject = ref(false);
|
||||
const content = ref('');
|
||||
const files = ref<ItemType[]>([]);
|
||||
const fileList = ref<ItemType[]>([]);
|
||||
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
// 已上传数据, 可赋初始值用于回显
|
||||
const avatar = ref(<any>[]);
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
const { push } = useRouter();
|
||||
|
||||
// 用户信息
|
||||
const form = reactive<Task>({
|
||||
// 工单名称
|
||||
name: '',
|
||||
appId: undefined,
|
||||
// 工单类型
|
||||
taskType: '普通工单',
|
||||
// 项目ID
|
||||
projectId: '',
|
||||
// 客户ID
|
||||
customerId: '',
|
||||
// 资产ID
|
||||
assetsId: '',
|
||||
// 开始时间
|
||||
startTime: '',
|
||||
// 结束时间
|
||||
endTime: '',
|
||||
// 工单内容
|
||||
content: '',
|
||||
// 工单发起人
|
||||
promoter: undefined,
|
||||
// 负责人
|
||||
commander: undefined,
|
||||
// 工单状态
|
||||
progress: 0,
|
||||
// 优先级
|
||||
priority: '中',
|
||||
// 品质要求
|
||||
quality: 'B级',
|
||||
// 期限(天)
|
||||
day: '',
|
||||
files: '',
|
||||
// 排序
|
||||
sortNumber: 100,
|
||||
// 备注
|
||||
comments: '',
|
||||
// 创建时间
|
||||
createTime: '',
|
||||
// 状态
|
||||
status: 0,
|
||||
// 发布者
|
||||
userId: undefined
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请输入工单名称',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
taskType: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请选择工单类型',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
// promoter: [
|
||||
// {
|
||||
// required: true,
|
||||
// type: 'number',
|
||||
// message: '请选择发起人',
|
||||
// trigger: 'blur',
|
||||
// validator: async (_rule: RuleObject, value: number) => {
|
||||
// if (promoter.value == undefined) {
|
||||
// return Promise.reject('请选择发起人');
|
||||
// }
|
||||
// return Promise.resolve();
|
||||
// }
|
||||
// }
|
||||
// ],
|
||||
// commander: [
|
||||
// {
|
||||
// required: true,
|
||||
// type: 'number',
|
||||
// message: '请选择受理人',
|
||||
// trigger: 'blur',
|
||||
// validator: async (_rule: RuleObject, value: number) => {
|
||||
// if (commander.value == undefined) {
|
||||
// return Promise.reject('请选择受理人');
|
||||
// }
|
||||
// return Promise.resolve();
|
||||
// }
|
||||
// }
|
||||
// ],
|
||||
content: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请输入工单内容',
|
||||
trigger: 'blur',
|
||||
validator: async (_rule: RuleObject, value: string) => {
|
||||
if (content.value == '') {
|
||||
return Promise.reject('请输入文字内容');
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
const onPromoter = (userId) => {
|
||||
promoter.value = userId
|
||||
}
|
||||
|
||||
const onCommander = (userId) => {
|
||||
commander.value = userId
|
||||
}
|
||||
|
||||
const onApp = (appId) => {
|
||||
appid.value = appId
|
||||
}
|
||||
|
||||
/* 图片上传事件 */
|
||||
const uploadHandler = (file: File) => {
|
||||
const item: ItemType = {
|
||||
file,
|
||||
uid: (file as any).uid,
|
||||
name: file.name
|
||||
};
|
||||
if (!file.type.startsWith("image")) {
|
||||
message.error("只能选择图片");
|
||||
return;
|
||||
}
|
||||
if (file.size / 1024 / 1024 > 2) {
|
||||
message.error("大小不能超过 2MB");
|
||||
return;
|
||||
}
|
||||
onUpload(item);
|
||||
};
|
||||
|
||||
// 文件上传事件
|
||||
const beforeUpload = (file: File) => {
|
||||
const item: ItemType = {
|
||||
file,
|
||||
uid: (file as any).uid,
|
||||
name: file.name
|
||||
}
|
||||
if (!file.type.startsWith("image")) {
|
||||
if (file.size / 1024 / 1024 > 100) {
|
||||
message.error("大小不能超过 100MB");
|
||||
return;
|
||||
}
|
||||
}
|
||||
onUpload(item);
|
||||
return false;
|
||||
};
|
||||
|
||||
const onUpload = (d: ItemType) => {
|
||||
console.log(d);
|
||||
uploadFile(<File>d.file)
|
||||
.then((result) => {
|
||||
files.value.push({
|
||||
uid: result.id,
|
||||
url: FILE_SERVER + result.path,
|
||||
name: isImage(result.path) ? 'image' : result.name,
|
||||
status: "done"
|
||||
});
|
||||
message.success("上传成功");
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
const {resetFields, validate, validateInfos} = useForm(form, rules);
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const data = {
|
||||
...form,
|
||||
// 处理工单内容
|
||||
content: content.value,
|
||||
appId: appid.value,
|
||||
promoter: promoter.value,
|
||||
commander: commander.value,
|
||||
files: JSON.stringify(files.value)
|
||||
};
|
||||
// 转字符串
|
||||
const saveOrUpdate = isUpdate.value ? updateTask : addTask;
|
||||
saveOrUpdate(data)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
content.value = '';
|
||||
message.success('提交成功');
|
||||
push('/user/task/index')
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
});
|
||||
};
|
||||
|
||||
// 插件
|
||||
const plugins = ref([
|
||||
gfm({
|
||||
locale: zh_HansGfm
|
||||
}),
|
||||
highlight()
|
||||
]);
|
||||
|
||||
/* 粘贴图片上传服务器并插入编辑器 */
|
||||
const onPaste = (e) => {
|
||||
console.log(e);
|
||||
const items = (e.clipboardData || e.originalEvent.clipboardData).items;
|
||||
console.log(items);
|
||||
let hasFile = false;
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
if (items[i].type.indexOf('image') !== -1) {
|
||||
let file = items[i].getAsFile();
|
||||
const item: ItemType = {
|
||||
file,
|
||||
uid: (file as any).lastModified,
|
||||
name: file.name
|
||||
};
|
||||
uploadFile(<File>item.file)
|
||||
.then((result) => {
|
||||
const addPath = '\n\r';
|
||||
content.value = content.value + addPath
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
hasFile = true;
|
||||
}
|
||||
}
|
||||
if (hasFile) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
loading.value = false;
|
||||
assignObject(form, props.data);
|
||||
// 头像赋值
|
||||
avatar.value = [];
|
||||
if (props.data.images) {
|
||||
avatar.value.push({uid: 1, url: FILE_SERVER + props.data.images, status: ''});
|
||||
}
|
||||
if (props.data.content) {
|
||||
content.value = props.data.content;
|
||||
}
|
||||
form.sortNumber = Number(props.data.sortNumber);
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
content.value = '';
|
||||
avatar.value = [];
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
</script>
|
||||
<style lang="less">
|
||||
.tab-pane {
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.form-item-help {
|
||||
font-size: 12px;
|
||||
// line-height: 2;
|
||||
line-height: 1.5;
|
||||
padding-top: 4px;
|
||||
min-height: 22px;
|
||||
// margin-top: -2px;
|
||||
transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
|
||||
a {
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
.extra,
|
||||
small {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 12.5px !important;
|
||||
}
|
||||
|
||||
.extra {
|
||||
margin-bottom: 4px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.select-shop {
|
||||
min-width: 120px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.upload-list-inline :deep(.ant-upload-list-item) {
|
||||
float: left;
|
||||
width: 200px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.upload-list-inline [class*='-upload-list-rtl'] :deep(.ant-upload-list-item) {
|
||||
float: right;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,104 @@
|
||||
<!-- 搜索表单 -->
|
||||
<template>
|
||||
<a-space :size="10" style="flex-wrap: wrap">
|
||||
<a-button type="primary" class="ele-btn-icon" @click="add">
|
||||
<template #icon>
|
||||
<plus-outlined />
|
||||
</template>
|
||||
<span>提交工单</span>
|
||||
</a-button>
|
||||
<a-button
|
||||
danger
|
||||
type="primary"
|
||||
class="ele-btn-icon"
|
||||
:disabled="selection.length === 0"
|
||||
@click="removeBatch"
|
||||
>
|
||||
<template #icon>
|
||||
<delete-outlined />
|
||||
</template>
|
||||
<span>批量删除</span>
|
||||
</a-button>
|
||||
<a-input-search
|
||||
allow-clear
|
||||
placeholder="请输入关键词"
|
||||
v-model:value="searchText"
|
||||
@pressEnter="search"
|
||||
@search="search"
|
||||
/>
|
||||
<a-button @click="reload">刷新</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import useSearch from '@/utils/use-search';
|
||||
import type { CustomerParam } from '@/api/oa/customer/model';
|
||||
import { ref, watch } from 'vue';
|
||||
import { TaskParam } from '@/api/oa/task/model';
|
||||
import { assignObject } from 'ele-admin-pro';
|
||||
import {
|
||||
PlusOutlined,
|
||||
EditOutlined,
|
||||
SearchOutlined,
|
||||
DeleteOutlined,
|
||||
UpSquareOutlined,
|
||||
DownSquareOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的角色
|
||||
selection?: [];
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: CustomerParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
}>();
|
||||
|
||||
// 表单数据
|
||||
const { where } = useSearch<TaskParam>({
|
||||
taskId: undefined,
|
||||
name: undefined,
|
||||
userId: undefined,
|
||||
nickname: undefined
|
||||
});
|
||||
// 下来选项
|
||||
const type = ref('keywords');
|
||||
// 搜索内容
|
||||
const searchText = ref('');
|
||||
const { push } = useRouter();
|
||||
|
||||
/* 搜索 */
|
||||
const search = () => {
|
||||
assignObject(where, {});
|
||||
if (type.value == 'keywords') {
|
||||
where.keywords = searchText.value;
|
||||
}
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
// 新增
|
||||
const add = () => {
|
||||
push('/user/task/add');
|
||||
};
|
||||
|
||||
// 批量删除
|
||||
const removeBatch = () => {
|
||||
emit('remove');
|
||||
};
|
||||
|
||||
const reload = () => {
|
||||
// 刷新当前路由
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
@@ -0,0 +1,502 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
width="980px"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:maxable="maxAble"
|
||||
:title="isUpdate ? '编辑工单' : '添加工单'"
|
||||
:body-style="{ paddingBottom: '8px' }"
|
||||
@update:visible="updateVisible"
|
||||
:maskClosable="false"
|
||||
@ok="save"
|
||||
>
|
||||
<a-form
|
||||
:label-col="{ md: { span: 8 }, sm: { span: 24 } }"
|
||||
:wrapper-col="{ md: { span: 24 }, sm: { span: 24 } }"
|
||||
layout="vertical"
|
||||
>
|
||||
<a-form-item label="工单名称" v-bind="validateInfos.name">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入工单名称"
|
||||
v-model:value="form.name"
|
||||
@blur="validate('name', { trigger: 'blur' }).catch(() => {})"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="工单内容" v-bind="validateInfos.content">
|
||||
<!-- 编辑器 -->
|
||||
<byte-md-editor
|
||||
v-model:value="content"
|
||||
placeholder="请输入您的工单内容，图片请直接粘贴"
|
||||
:locale="zh_Hans"
|
||||
:plugins="plugins"
|
||||
height="300px"
|
||||
:editorConfig="{ lineNumbers: true }"
|
||||
@paste="onPaste"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-row :gutter="16">
|
||||
<a-col :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="工单类型" v-bind="validateInfos.taskType">
|
||||
<a-select
|
||||
optionFilterProp="label"
|
||||
placeholder="请选择工单类型"
|
||||
:options="taskType"
|
||||
allow-clear
|
||||
v-model:value="form.taskType"
|
||||
/>
|
||||
</a-form-item>
|
||||
<!-- <a-form-item label="指派给" v-bind="validateInfos.commander">-->
|
||||
<!-- <SelectStaff v-model:value="commander" @done="onCommander" />-->
|
||||
<!-- </a-form-item>-->
|
||||
<a-form-item label="发起人" v-bind="validateInfos.promoter">
|
||||
<SelectCompany v-model:value="promoter" @done="onPromoter" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="关联应用(选填)" v-bind="validateInfos.appId">
|
||||
<SelectApp v-model:value="appId" @done="onApp" />
|
||||
</a-form-item>
|
||||
<!-- <a-form-item label="品质要求" v-bind="validateInfos.quality">-->
|
||||
<!-- <a-select-->
|
||||
<!-- optionFilterProp="label"-->
|
||||
<!-- placeholder="请选择品质要求"-->
|
||||
<!-- :options="quality"-->
|
||||
<!-- allow-clear-->
|
||||
<!-- v-model:value="form.quality"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="16">
|
||||
<a-col :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="上传附件" v-bind="validateInfos.files">
|
||||
<a-upload
|
||||
v-model:file-list="fileList"
|
||||
class="upload-list-inline"
|
||||
list-type="picture"
|
||||
:before-upload="beforeUpload"
|
||||
>
|
||||
<a-button>
|
||||
<UploadOutlined />
|
||||
上传附件
|
||||
</a-button>
|
||||
</a-upload>
|
||||
<!-- <ele-image-upload-->
|
||||
<!-- v-model:value="files"-->
|
||||
<!-- :limit="9"-->
|
||||
<!-- :drag="true"-->
|
||||
<!-- :multiple="true"-->
|
||||
<!-- :upload-handler="uploadHandler"-->
|
||||
<!-- @upload="onUpload"-->
|
||||
<!-- />-->
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24" :xs="24">
|
||||
<!-- <a-form-item label="优先级" v-bind="validateInfos.priority">-->
|
||||
<!-- <a-select-->
|
||||
<!-- optionFilterProp="label"-->
|
||||
<!-- placeholder="请选择优先级"-->
|
||||
<!-- :options="priority"-->
|
||||
<!-- allow-clear-->
|
||||
<!-- v-model:value="form.priority"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {ref, reactive, watch, computed} from 'vue';
|
||||
import {Form, message, Modal, SelectProps} from 'ant-design-vue';
|
||||
import {useUserStore} from '@/store/modules/user';
|
||||
import {assignObject, htmlToText} from 'ele-admin-pro';
|
||||
import type {Task} from '@/api/oa/task/model';
|
||||
import {addTask, updateTask} from '@/api/oa/task';
|
||||
import {FILE_SERVER} from "@/config/setting";
|
||||
import {uploadFile} from "@/api/system/file";
|
||||
import {RuleObject} from "ant-design-vue/es/form";
|
||||
import { getDictionaryOptions, isImage, selectProject } from "@/utils/common";
|
||||
import SelectStaff from '@/components/SelectStaff/index.vue';
|
||||
import SelectCompany from '@/components/SelectCompany/index.vue';
|
||||
import SelectApp from '@/components/SelectApp/index.vue';
|
||||
import 'bytemd/dist/index.min.css';
|
||||
import highlight from '@bytemd/plugin-highlight-ssr'
|
||||
import 'highlight.js/styles/default.css'
|
||||
import ByteMdEditor from '@/components/ByteMdEditor/index.vue';
|
||||
// import highlight from '@bytemd/plugin-highlight';
|
||||
// 中文语言文件
|
||||
import zh_Hans from 'bytemd/locales/zh_Hans.json';
|
||||
// 链接、删除线、复选框、表格等的插件
|
||||
import gfm from '@bytemd/plugin-gfm';
|
||||
// 插件的中文语言文件
|
||||
import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
|
||||
import { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
|
||||
import { UploadOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
const useForm = Form.useForm;
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: Task | null;
|
||||
}>();
|
||||
|
||||
const userStore = useUserStore();
|
||||
// 当前登录用户信息
|
||||
const loginUser = computed(() => userStore.info ?? {});
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const disabled = ref(false);
|
||||
// 是否显示最大化切换按钮
|
||||
const maxAble = ref(true);
|
||||
// 选项卡位置
|
||||
const activeKey = ref('1');
|
||||
const promoter = ref<any>(undefined);
|
||||
const commander = ref(undefined);
|
||||
const appid = ref(undefined);
|
||||
// 字典数据
|
||||
const taskType = getDictionaryOptions('taskType');
|
||||
const progress = getDictionaryOptions('taskProgress');
|
||||
const priority = getDictionaryOptions('taskPriority');
|
||||
const quality = getDictionaryOptions('taskQuality');
|
||||
/* 打开选择弹窗 */
|
||||
const showUser = ref(false);
|
||||
const showProject = ref(false);
|
||||
const content = ref('');
|
||||
const files = ref<ItemType[]>([]);
|
||||
const fileList = ref<ItemType[]>([]);
|
||||
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
// 已上传数据, 可赋初始值用于回显
|
||||
const avatar = ref(<any>[]);
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
// 用户信息
|
||||
const form = reactive<Task>({
|
||||
// 工单名称
|
||||
name: '',
|
||||
appId: undefined,
|
||||
// 工单类型
|
||||
taskType: '普通工单',
|
||||
// 项目ID
|
||||
projectId: '',
|
||||
// 客户ID
|
||||
customerId: '',
|
||||
// 资产ID
|
||||
assetsId: '',
|
||||
// 开始时间
|
||||
startTime: '',
|
||||
// 结束时间
|
||||
endTime: '',
|
||||
// 工单内容
|
||||
content: '',
|
||||
// 工单发起人
|
||||
promoter: undefined,
|
||||
// 负责人
|
||||
commander: undefined,
|
||||
// 工单状态
|
||||
progress: 0,
|
||||
// 优先级
|
||||
priority: '中',
|
||||
// 品质要求
|
||||
quality: 'B级',
|
||||
// 期限(天)
|
||||
day: '',
|
||||
files: '',
|
||||
// 排序
|
||||
sortNumber: 100,
|
||||
// 备注
|
||||
comments: '',
|
||||
// 创建时间
|
||||
createTime: '',
|
||||
// 状态
|
||||
status: 0,
|
||||
// 发布者
|
||||
userId: undefined
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请输入工单名称',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
taskType: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请选择工单类型',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
// promoter: [
|
||||
// {
|
||||
// required: true,
|
||||
// type: 'number',
|
||||
// message: '请选择发起人',
|
||||
// trigger: 'blur',
|
||||
// validator: async (_rule: RuleObject, value: number) => {
|
||||
// if (promoter.value == undefined) {
|
||||
// return Promise.reject('请选择发起人');
|
||||
// }
|
||||
// return Promise.resolve();
|
||||
// }
|
||||
// }
|
||||
// ],
|
||||
// commander: [
|
||||
// {
|
||||
// required: true,
|
||||
// type: 'number',
|
||||
// message: '请选择受理人',
|
||||
// trigger: 'blur',
|
||||
// validator: async (_rule: RuleObject, value: number) => {
|
||||
// if (commander.value == undefined) {
|
||||
// return Promise.reject('请选择受理人');
|
||||
// }
|
||||
// return Promise.resolve();
|
||||
// }
|
||||
// }
|
||||
// ],
|
||||
content: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请输入工单内容',
|
||||
trigger: 'blur',
|
||||
validator: async (_rule: RuleObject, value: string) => {
|
||||
if (content.value == '') {
|
||||
return Promise.reject('请输入文字内容');
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
const onPromoter = (userId) => {
|
||||
promoter.value = userId
|
||||
}
|
||||
|
||||
const onCommander = (userId) => {
|
||||
commander.value = userId
|
||||
}
|
||||
|
||||
const onApp = (appId) => {
|
||||
appid.value = appId
|
||||
}
|
||||
|
||||
/* 图片上传事件 */
|
||||
const uploadHandler = (file: File) => {
|
||||
const item: ItemType = {
|
||||
file,
|
||||
uid: (file as any).uid,
|
||||
name: file.name
|
||||
};
|
||||
if (!file.type.startsWith("image")) {
|
||||
message.error("只能选择图片");
|
||||
return;
|
||||
}
|
||||
if (file.size / 1024 / 1024 > 2) {
|
||||
message.error("大小不能超过 2MB");
|
||||
return;
|
||||
}
|
||||
onUpload(item);
|
||||
};
|
||||
|
||||
// 文件上传事件
|
||||
const beforeUpload = (file: File) => {
|
||||
const item: ItemType = {
|
||||
file,
|
||||
uid: (file as any).uid,
|
||||
name: file.name
|
||||
}
|
||||
if (!file.type.startsWith("image")) {
|
||||
if (file.size / 1024 / 1024 > 100) {
|
||||
message.error("大小不能超过 100MB");
|
||||
return;
|
||||
}
|
||||
}
|
||||
onUpload(item);
|
||||
return false;
|
||||
};
|
||||
|
||||
const onUpload = (d: ItemType) => {
|
||||
console.log(d);
|
||||
uploadFile(<File>d.file)
|
||||
.then((result) => {
|
||||
files.value.push({
|
||||
uid: result.id,
|
||||
url: FILE_SERVER + result.path,
|
||||
name: isImage(result.path) ? 'image' : result.name,
|
||||
status: "done"
|
||||
});
|
||||
message.success("上传成功");
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
const {resetFields, validate, validateInfos} = useForm(form, rules);
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const data = {
|
||||
...form,
|
||||
// 处理工单内容
|
||||
content: content.value,
|
||||
appId: appid.value,
|
||||
promoter: promoter.value,
|
||||
commander: commander.value,
|
||||
files: JSON.stringify(files.value)
|
||||
};
|
||||
// 转字符串
|
||||
const saveOrUpdate = isUpdate.value ? updateTask : addTask;
|
||||
saveOrUpdate(data)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
content.value = '';
|
||||
message.success(msg);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
});
|
||||
};
|
||||
|
||||
// 插件
|
||||
const plugins = ref([
|
||||
gfm({
|
||||
locale: zh_HansGfm
|
||||
}),
|
||||
highlight()
|
||||
]);
|
||||
|
||||
/* 粘贴图片上传服务器并插入编辑器 */
|
||||
const onPaste = (e) => {
|
||||
console.log(e);
|
||||
const items = (e.clipboardData || e.originalEvent.clipboardData).items;
|
||||
console.log(items);
|
||||
let hasFile = false;
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
if (items[i].type.indexOf('image') !== -1) {
|
||||
let file = items[i].getAsFile();
|
||||
const item: ItemType = {
|
||||
file,
|
||||
uid: (file as any).lastModified,
|
||||
name: file.name
|
||||
};
|
||||
uploadFile(<File>item.file)
|
||||
.then((result) => {
|
||||
const addPath = '\n\r';
|
||||
content.value = content.value + addPath
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
hasFile = true;
|
||||
}
|
||||
}
|
||||
if (hasFile) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
loading.value = false;
|
||||
assignObject(form, props.data);
|
||||
// 头像赋值
|
||||
avatar.value = [];
|
||||
if (props.data.images) {
|
||||
avatar.value.push({uid: 1, url: FILE_SERVER + props.data.images, status: ''});
|
||||
}
|
||||
if (props.data.content) {
|
||||
content.value = props.data.content;
|
||||
}
|
||||
|
||||
form.sortNumber = Number(props.data.sortNumber);
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
content.value = '';
|
||||
avatar.value = [];
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
</script>
|
||||
<style lang="less">
|
||||
.tab-pane {
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.form-item-help {
|
||||
font-size: 12px;
|
||||
// line-height: 2;
|
||||
line-height: 1.5;
|
||||
padding-top: 4px;
|
||||
min-height: 22px;
|
||||
// margin-top: -2px;
|
||||
transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
|
||||
a {
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
.extra,
|
||||
small {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 12.5px !important;
|
||||
}
|
||||
|
||||
.extra {
|
||||
margin-bottom: 4px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.select-shop {
|
||||
min-width: 120px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.upload-list-inline :deep(.ant-upload-list-item) {
|
||||
float: left;
|
||||
width: 200px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.upload-list-inline [class*='-upload-list-rtl'] :deep(.ant-upload-list-item) {
|
||||
float: right;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,51 @@
|
||||
<!-- 角色选择下拉框 -->
|
||||
<template>
|
||||
<a-select
|
||||
optionFilterProp="label"
|
||||
:options="data"
|
||||
allow-clear
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
@update:value="updateValue"
|
||||
@blur="onBlur"
|
||||
@change="onChange"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getDictionaryOptions } from '@/utils/common';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:value', value: string): void;
|
||||
(e: 'blur'): void;
|
||||
(e: 'change'): void;
|
||||
}>();
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
value?: string;
|
||||
placeholder?: string;
|
||||
}>(),
|
||||
{
|
||||
placeholder: '请选择客户跟进状态'
|
||||
}
|
||||
);
|
||||
|
||||
// 字典数据
|
||||
const data = getDictionaryOptions('customerFollowStatus');
|
||||
|
||||
/* 更新选中数据 */
|
||||
const updateValue = (value: string) => {
|
||||
emit('update:value', value);
|
||||
};
|
||||
|
||||
/* 失去焦点 */
|
||||
const onBlur = () => {
|
||||
emit('blur');
|
||||
};
|
||||
|
||||
/* 选择事件 */
|
||||
const onChange = (e) => {
|
||||
emit('change', e);
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,51 @@
|
||||
<!-- 客户来源选择下拉框 -->
|
||||
<template>
|
||||
<a-select
|
||||
optionFilterProp="label"
|
||||
:options="data"
|
||||
allow-clear
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
@update:value="updateValue"
|
||||
@blur="onBlur"
|
||||
@change="onChange"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getDictionaryOptions } from '@/utils/common';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:value', value: string): void;
|
||||
(e: 'blur'): void;
|
||||
(e: 'change'): void;
|
||||
}>();
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
value?: string;
|
||||
placeholder?: string;
|
||||
}>(),
|
||||
{
|
||||
placeholder: '请选择客户来源'
|
||||
}
|
||||
);
|
||||
|
||||
// 字典数据
|
||||
const data = getDictionaryOptions('customerSource');
|
||||
|
||||
/* 更新选中数据 */
|
||||
const updateValue = (value: string) => {
|
||||
emit('update:value', value);
|
||||
};
|
||||
|
||||
/* 失去焦点 */
|
||||
const onBlur = () => {
|
||||
emit('blur');
|
||||
};
|
||||
|
||||
/* 选择事件 */
|
||||
const onChange = (e) => {
|
||||
emit('change', e);
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,45 @@
|
||||
<!-- 角色选择下拉框 -->
|
||||
<template>
|
||||
<a-select
|
||||
show-search
|
||||
optionFilterProp="label"
|
||||
:options="data"
|
||||
allow-clear
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
@update:value="updateValue"
|
||||
@blur="onBlur"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getDictionaryOptions } from '@/utils/common';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:value', value: string): void;
|
||||
(e: 'blur'): void;
|
||||
}>();
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
value?: string;
|
||||
placeholder?: string;
|
||||
}>(),
|
||||
{
|
||||
placeholder: '请选择状态'
|
||||
}
|
||||
);
|
||||
|
||||
// 字典数据
|
||||
const data = getDictionaryOptions('status');
|
||||
|
||||
/* 更新选中数据 */
|
||||
const updateValue = (value: string) => {
|
||||
emit('update:value', value);
|
||||
};
|
||||
|
||||
/* 失去焦点 */
|
||||
const onBlur = () => {
|
||||
emit('blur');
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,44 @@
|
||||
<!-- 角色选择下拉框 -->
|
||||
<template>
|
||||
<a-select
|
||||
optionFilterProp="label"
|
||||
:options="data"
|
||||
allow-clear
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
@update:value="updateValue"
|
||||
@blur="onBlur"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getDictionaryOptions } from '@/utils/common';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:value', value: string): void;
|
||||
(e: 'blur'): void;
|
||||
}>();
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
value?: string;
|
||||
placeholder?: string;
|
||||
}>(),
|
||||
{
|
||||
placeholder: '请选择客户类型'
|
||||
}
|
||||
);
|
||||
|
||||
// 字典数据
|
||||
const data = getDictionaryOptions('customerType');
|
||||
|
||||
/* 更新选中数据 */
|
||||
const updateValue = (value: string) => {
|
||||
emit('update:value', value);
|
||||
};
|
||||
|
||||
/* 失去焦点 */
|
||||
const onBlur = () => {
|
||||
emit('blur');
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,76 @@
|
||||
<!-- 角色选择下拉框 -->
|
||||
<template>
|
||||
<a-select
|
||||
show-search
|
||||
optionFilterProp="label"
|
||||
:options="data"
|
||||
allow-clear
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
@update:value="updateValue"
|
||||
@search="onSearch"
|
||||
@blur="onBlur"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { listUsers } from '@/api/system/user';
|
||||
import type { SelectProps } from 'ant-design-vue';
|
||||
import { UserParam } from '@/api/system/user/model';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:value', value: string): void;
|
||||
(e: 'blur'): void;
|
||||
}>();
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
value?: string;
|
||||
placeholder?: string;
|
||||
}>(),
|
||||
{
|
||||
placeholder: '请选择客户类型'
|
||||
}
|
||||
);
|
||||
|
||||
// 字典数据
|
||||
const data = ref<SelectProps['options']>([]);
|
||||
|
||||
/* 更新选中数据 */
|
||||
const updateValue = (value: string) => {
|
||||
emit('update:value', value);
|
||||
};
|
||||
|
||||
// 默认搜索条件
|
||||
const where = ref<UserParam>({});
|
||||
|
||||
const search = () => {
|
||||
/* 获取用户列 */
|
||||
listUsers({ ...where?.value })
|
||||
.then((result) => {
|
||||
data.value = result?.map((d) => {
|
||||
return {
|
||||
value: d.userId,
|
||||
label: d.nickname
|
||||
};
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
const onSearch = (e) => {
|
||||
where.value.nickname = e;
|
||||
search();
|
||||
};
|
||||
|
||||
search();
|
||||
|
||||
/* 失去焦点 */
|
||||
const onBlur = () => {
|
||||
emit('blur');
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,749 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<a-drawer
|
||||
width="75%"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
v-if="detail && data"
|
||||
:title="`工单详情(${detail.taskId})：${data.name}`"
|
||||
:maxable="true"
|
||||
:body-style="{ paddingBottom: '8px', backgroundColor: '#f3f3f3' }"
|
||||
@update:visible="updateVisible"
|
||||
@close="onClose"
|
||||
:footer="null"
|
||||
>
|
||||
<a-card class="task-card" :bordered="false">
|
||||
<a-steps
|
||||
:current="active"
|
||||
direction="horizontal"
|
||||
:responsive="styleResponsive"
|
||||
>
|
||||
<template v-for="item in taskProgressDict">
|
||||
<a-step :title="item.label" />
|
||||
</template>
|
||||
</a-steps>
|
||||
</a-card>
|
||||
<a-spin :spinning="loading" v-if="appId > 0">
|
||||
<a-collapse class="task-card" v-model:activeKey="activeKey" :bordered="false">
|
||||
<a-collapse-panel key="1" header="应用详情">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
:body-style="{ padding: '16px' }"
|
||||
>
|
||||
<div class="content">
|
||||
<div class="app-item-list">
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">
|
||||
<div class="ele-cell-desc">AppID(应用ID)</div>
|
||||
<div class="ele-cell-title">{{ appInfo.appId }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-divider />
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">
|
||||
<div class="ele-cell-desc">小程序名称</div>
|
||||
<div class="ele-cell-title">
|
||||
{{ appInfo.appName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-divider />
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">
|
||||
<div class="ele-cell-desc">小程序描述</div>
|
||||
<div class="ele-cell-title">{{ appInfo.comments }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-divider />
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">
|
||||
<div class="ele-cell-desc">小程序码</div>
|
||||
<div class="ele-cell-title">
|
||||
<a-image
|
||||
:height="120"
|
||||
:width="120"
|
||||
:preview="false"
|
||||
:src="appInfo.appQrcode"
|
||||
fallback="https://file.wsdns.cn/20230218/550e610d43334dd2a7f66d5b20bd58eb.svg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-divider />
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">
|
||||
<div class="ele-cell-desc">应用图标</div>
|
||||
<div class="ele-cell-title">
|
||||
<a-image
|
||||
:height="70"
|
||||
:width="70"
|
||||
:preview="false"
|
||||
:src="appInfo.appIcon"
|
||||
fallback="https://file.wsdns.cn/20230218/550e610d43334dd2a7f66d5b20bd58eb.svg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">
|
||||
<div class="ele-cell-desc">状态</div>
|
||||
<div class="ele-cell-title">{{
|
||||
appInfo.status === 1 ? '开发中' : '已上线'
|
||||
}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-collapse-panel>
|
||||
<a-collapse-panel key="2" header="开发资料">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
:body-style="{ padding: '16px' }"
|
||||
>
|
||||
<byte-md-viewer :value="appInfo.requirement" :plugins="plugins" />
|
||||
</a-card>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</a-spin>
|
||||
<a-spin :spinning="loading" v-if="detail">
|
||||
<!-- 回复列表 -->
|
||||
<a-card class="task-card replay-bg"
|
||||
:bordered="false"
|
||||
v-for="(item, index) in record"
|
||||
:key="index">
|
||||
<a-page-header
|
||||
:title="item.nickname"
|
||||
:sub-title="`${item.createTime}`"
|
||||
:avatar="{ src: item.avatar ? item.avatar : 'https://file.gxwebsoft.com/20230217/c8a5c699b3174866a36dd6d378a09bb9.jpg' }"
|
||||
>
|
||||
<template #extra>
|
||||
<a-button key="2" href="#bottom" @click="onReply(item)">回复</a-button>
|
||||
<template v-for="(role,index) in loginUser.roles" :key="index">
|
||||
<a-button key="1" v-if="role.roleCode === 'admin'" @click="remove(item)">删除</a-button>
|
||||
</template>
|
||||
|
||||
</template>
|
||||
<div class="content">
|
||||
<template v-if="item.content">
|
||||
<byte-md-viewer :value="item.content" :plugins="plugins" />
|
||||
</template>
|
||||
<!-- 附件列表 -->
|
||||
<a-space v-if="item.files && item.files != '[]'">
|
||||
<template v-for="file in JSON.parse(item.files)">
|
||||
<a-button v-if="file.name && file.name != 'image'" :href="file.url">{{ file.name }}</a-button>
|
||||
<a-image v-else :height="120" :width="120" :src="file.url" />
|
||||
</template>
|
||||
</a-space>
|
||||
<!-- 二级回复 -->
|
||||
<template v-if="item.children">
|
||||
<a-card class="task-card replay-bg"
|
||||
v-for="(item, index) in item.children"
|
||||
:key="index">
|
||||
<a-page-header
|
||||
:title="item.nickname"
|
||||
:sub-title="`${item.createTime}`"
|
||||
:avatar="{ src: item.avatar ? item.avatar : 'https://file.gxwebsoft.com/20230217/c8a5c699b3174866a36dd6d378a09bb9.jpg' }"
|
||||
>
|
||||
<template #extra>
|
||||
<template v-for="(role,index) in loginUser.roles" :key="index">
|
||||
<a-button key="1" v-if="role.roleCode === 'admin'" @click="remove(item)">删除</a-button>
|
||||
</template>
|
||||
</template>
|
||||
<div class="content">
|
||||
<template v-if="item.content">
|
||||
<byte-md-viewer :value="item.content" :plugins="plugins" />
|
||||
</template>
|
||||
<template v-if="item.children">
|
||||
{{ item.children }}
|
||||
</template>
|
||||
</div>
|
||||
<!-- 附件列表 -->
|
||||
<a-space v-if="item.files && item.files != '[]'">
|
||||
<template v-for="file in JSON.parse(item.files)">
|
||||
<a-button v-if="file.name && file.name != 'image'" :href="file.url">{{ file.name }}</a-button>
|
||||
<a-image v-else :height="120" :width="120" :src="file.url" />
|
||||
</template>
|
||||
</a-space>
|
||||
</a-page-header>
|
||||
</a-card>
|
||||
</template>
|
||||
</div>
|
||||
</a-page-header>
|
||||
</a-card>
|
||||
<!-- 操作按钮 -->
|
||||
<div class="task-btn" v-if="detail.status === 0">
|
||||
<a-space>
|
||||
<a-button type="primary" ghost size="large" @click="complete">
|
||||
已解决
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
danger
|
||||
ghost
|
||||
size="large"
|
||||
href="#bottom"
|
||||
@click="showEdit"
|
||||
>
|
||||
我要回复
|
||||
</a-button>
|
||||
<a-button type="primary" ghost size="large" @click="completedTask">
|
||||
已完结
|
||||
</a-button>
|
||||
<a-button type="primary" ghost size="large" @click="closeTask">
|
||||
关单
|
||||
</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
<div class="task-btn" v-if="detail.status === 1">
|
||||
<a-button type="primary" ghost size="large" @click="openTask">
|
||||
开启工单
|
||||
</a-button>
|
||||
</div>
|
||||
</a-spin>
|
||||
<!-- 回复表单 -->
|
||||
<div id="bottom">
|
||||
<a-card :title="replyName ? `回复${replyName}` : `处理结果`" :bordered="false" v-if="openEdit">
|
||||
<a-space direction="vertical" style="width: 100%;">
|
||||
<!-- 编辑器 -->
|
||||
<byte-md-editor
|
||||
v-model:value="content"
|
||||
placeholder="请输入您的回复内容，图片请直接粘贴"
|
||||
:locale="zh_Hans"
|
||||
:plugins="plugins"
|
||||
height="300px"
|
||||
:editorConfig="{ lineNumbers: true }"
|
||||
contenteditable="true"
|
||||
@paste="onPaste"
|
||||
/>
|
||||
<!-- <ele-image-upload-->
|
||||
<!-- v-model:value="files"-->
|
||||
<!-- :limit="9"-->
|
||||
<!-- :drag="true"-->
|
||||
<!-- :multiple="true"-->
|
||||
<!-- :upload-handler="uploadHandler"-->
|
||||
<!-- @upload="onUpload"-->
|
||||
<!-- />-->
|
||||
<a-upload
|
||||
v-model:file-list="fileList"
|
||||
class="upload-list-inline"
|
||||
list-type="picture"
|
||||
:before-upload="beforeUpload"
|
||||
>
|
||||
<a-button>
|
||||
<UploadOutlined />
|
||||
上传附件
|
||||
</a-button>
|
||||
</a-upload>
|
||||
<a-button type="primary" style="margin-top: 20px" @click="save">提交</a-button>
|
||||
</a-space>
|
||||
</a-card>
|
||||
</div>
|
||||
<!-- 成员管理 -->
|
||||
<div id="users">
|
||||
<a-card title="移交给" :bordered="false" v-if="openUsers">
|
||||
<a-space style="margin-bottom: 15px">
|
||||
<SelectStaff v-model:value="commander" @done="onSelect" />
|
||||
<a-button
|
||||
type="primary"
|
||||
class="ele-btn-icon"
|
||||
@click="onUpdateTask"
|
||||
>
|
||||
<template #icon>
|
||||
<plus-outlined />
|
||||
</template>
|
||||
<span>确定</span>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-card>
|
||||
</div>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import "bytemd/dist/index.min.css";
|
||||
import { createVNode, reactive, ref, watch, nextTick, computed } from "vue";
|
||||
import "github-markdown-css/github-markdown-light.css";
|
||||
// // 链接、删除线、复选框、表格等的插件
|
||||
import gfm from "@bytemd/plugin-gfm";
|
||||
// // 插件的中文语言文件
|
||||
import zh_HansGfm from "@bytemd/plugin-gfm/locales/zh_Hans.json";
|
||||
// 中文语言文件
|
||||
import zh_Hans from "bytemd/locales/zh_Hans.json";
|
||||
import "bytemd/dist/index.min.css";
|
||||
import highlight from "@bytemd/plugin-highlight-ssr";
|
||||
import "highlight.js/styles/default.css";
|
||||
import { Form, message, Modal, UploadProps } from "ant-design-vue";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { useThemeStore } from "@/store/modules/theme";
|
||||
import { uploadFile } from "@/api/system/file";
|
||||
import type { Task } from "@/api/oa/task/model";
|
||||
import { updateTask, getTask } from "@/api/oa/task";
|
||||
import { RuleObject } from "ant-design-vue/es/form";
|
||||
import { FILE_SERVER } from "@/config/setting";
|
||||
import { getDictionaryOptions, isImage, openUrl } from "@/utils/common";
|
||||
import { TaskRecord } from "@/api/oa/task-record/model";
|
||||
import { App } from "@/api/app/model"
|
||||
import { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
|
||||
import { addTaskRecord, listTaskRecord, removeTaskRecord } from "@/api/oa/task-record";
|
||||
import SelectStaff from '@/components/SelectStaff/index.vue';
|
||||
import { UploadOutlined } from '@ant-design/icons-vue';
|
||||
// 当前用户信息
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { Notice } from "@/api/oa/notice/model";
|
||||
import { messageLoading, toTreeData } from "ele-admin-pro";
|
||||
import { removeNotice } from "@/api/oa/notice";
|
||||
import { Menu } from "@/api/system/menu/model";
|
||||
import { getApp, getAppSecret } from "@/api/app";
|
||||
import {
|
||||
PlusOutlined,
|
||||
EyeOutlined,
|
||||
EyeInvisibleOutlined,
|
||||
UserOutlined,
|
||||
ExclamationCircleOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: Task | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "done"): void;
|
||||
(e: "update:visible", visible: boolean): void;
|
||||
}>();
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit("update:visible", value);
|
||||
};
|
||||
|
||||
// 插件
|
||||
const plugins = ref([
|
||||
gfm({
|
||||
locale: zh_HansGfm
|
||||
}),
|
||||
highlight()
|
||||
]);
|
||||
|
||||
// 表单数据
|
||||
const form = reactive<TaskRecord>({
|
||||
taskRecordId: undefined,
|
||||
taskId: 0,
|
||||
content: '',
|
||||
files: "",
|
||||
userId: 0
|
||||
});
|
||||
const useForm = Form.useForm;
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
content: [
|
||||
{
|
||||
required: true,
|
||||
type: "string",
|
||||
message: "请输入工单内容",
|
||||
trigger: "blur",
|
||||
validator: async (_rule: RuleObject, value: string) => {
|
||||
if (content.value == "") {
|
||||
return Promise.reject("请输入文字内容");
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
const userStore = useUserStore();
|
||||
const loginUser = computed(() => userStore.info ?? {});
|
||||
// 请求状态
|
||||
const loading = ref(true);
|
||||
const detail = ref<Task | null>(null);
|
||||
const appId = ref<number>(0);
|
||||
const appInfo = ref<App | null>({});
|
||||
const taskId = ref(0);
|
||||
const parentId = ref<any>(0);
|
||||
const replyName = ref<string>();
|
||||
const activeKey = ref([]);
|
||||
const showAppSecret = ref(false);
|
||||
const taskProgressDict = getDictionaryOptions("taskProgress");
|
||||
const record = ref<TaskRecord[] | undefined>([]);
|
||||
const content = ref('');
|
||||
const files = ref<ItemType[]>([]);
|
||||
const fileList = ref<ItemType[]>([]);
|
||||
const openEdit = ref(false);
|
||||
const openUsers = ref(false);
|
||||
const showAddUserForm = ref(false);
|
||||
const developerId = ref();
|
||||
const commander = ref<any>();
|
||||
// 选中步骤
|
||||
const active = ref(0);
|
||||
|
||||
const { resetFields, validate, validateInfos } = useForm(form, rules);
|
||||
|
||||
/* 图片上传事件 */
|
||||
const uploadHandler = (file: File) => {
|
||||
const item: ItemType = {
|
||||
file,
|
||||
uid: (file as any).uid,
|
||||
name: file.name
|
||||
};
|
||||
if (!file.type.startsWith("image")) {
|
||||
message.error("只能选择图片");
|
||||
return;
|
||||
}
|
||||
if (file.size / 1024 / 1024 > 2) {
|
||||
message.error("大小不能超过 2MB");
|
||||
return;
|
||||
}
|
||||
onUpload(item);
|
||||
};
|
||||
|
||||
// 文件上传事件
|
||||
const beforeUpload = (file: File) => {
|
||||
const item: ItemType = {
|
||||
file,
|
||||
uid: (file as any).uid,
|
||||
name: file.name
|
||||
}
|
||||
if (!file.type.startsWith("image")) {
|
||||
if (file.size / 1024 / 1024 > 100) {
|
||||
message.error("大小不能超过 100MB");
|
||||
return;
|
||||
}
|
||||
}
|
||||
onUpload(item);
|
||||
return false;
|
||||
};
|
||||
|
||||
const onUpload = (d: ItemType) => {
|
||||
uploadFile(<File>d.file)
|
||||
.then((result) => {
|
||||
files.value.push({
|
||||
uid: result.id,
|
||||
url: FILE_SERVER + result.path,
|
||||
name: isImage(result.path) ? 'image' : result.name,
|
||||
status: "done"
|
||||
});
|
||||
console.log(files.value);
|
||||
message.success("上传成功");
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
const complete = () => {
|
||||
Modal.confirm({
|
||||
title: "提示",
|
||||
content: "确定问题已解决？",
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
updateTask({ taskId: taskId.value, progress: 3 }).then((res) => {
|
||||
message.success(res);
|
||||
updateVisible(false);
|
||||
emit("done");
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const closeTask = () => {
|
||||
Modal.confirm({
|
||||
title: "提示",
|
||||
content: "确定关闭工单吗？",
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
updateTask({ taskId: taskId.value, status: 1, progress: 5 }).then((res) => {
|
||||
message.success(res);
|
||||
updateVisible(false);
|
||||
emit("done");
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const completedTask = () => {
|
||||
Modal.confirm({
|
||||
title: "提示",
|
||||
content: "确定工单已完接了吗？",
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
updateTask({ taskId: taskId.value, status: 1, progress: 4 }).then((res) => {
|
||||
message.success(res);
|
||||
updateVisible(false);
|
||||
emit("done");
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const openTask = () => {
|
||||
Modal.confirm({
|
||||
title: "提示",
|
||||
content: "重新开启后可以继续追加内容，需要重新开启工单吗？",
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
updateTask({ taskId: taskId.value, status: 0, progress: 2 }).then((res) => {
|
||||
message.success(res);
|
||||
updateVisible(false);
|
||||
emit("done");
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const showEdit = () => {
|
||||
replyName.value = '';
|
||||
parentId.value = 0;
|
||||
openEdit.value = true;
|
||||
openUsers.value = false;
|
||||
};
|
||||
const showUsers = () => {
|
||||
openUsers.value = true;
|
||||
openEdit.value = false;
|
||||
}
|
||||
|
||||
const onReply = (row: TaskRecord) => {
|
||||
parentId.value = row.taskRecordId;
|
||||
replyName.value = row.nickname;
|
||||
openEdit.value = true;
|
||||
}
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: TaskRecord) => {
|
||||
removeTaskRecord(row.taskRecordId)
|
||||
.then((msg) => {
|
||||
message.success(msg);
|
||||
// 加载工单明细
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
// 指派工单
|
||||
const onUpdateTask = () => {
|
||||
updateTask({
|
||||
commander: commander.value,
|
||||
taskId: taskId.value,
|
||||
progress: 1
|
||||
}).then(() => {
|
||||
message.success("操作成功");
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
}).catch(err => {
|
||||
message.error(err.message)
|
||||
})
|
||||
};
|
||||
|
||||
// 选择用户
|
||||
const onSelect = (userId) => {
|
||||
commander.value = userId;
|
||||
};
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if(content.value == ''){
|
||||
message.error('请填写回复内容！');
|
||||
return false;
|
||||
}
|
||||
validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const data = {
|
||||
...form,
|
||||
taskId: taskId.value,
|
||||
parentId: parentId.value,
|
||||
// 处理工单内容
|
||||
content: content.value,
|
||||
files: JSON.stringify(files.value)
|
||||
};
|
||||
// 转字符串
|
||||
addTaskRecord(data)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
files.value = [];
|
||||
content.value = '';
|
||||
fileList.value = [];
|
||||
// 加载工单明细
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
});
|
||||
};
|
||||
|
||||
const onClose = () => {
|
||||
emit("done");
|
||||
}
|
||||
|
||||
/* 粘贴图片上传服务器并插入编辑器 */
|
||||
const onPaste = (e) => {
|
||||
const items = (e.clipboardData || e.originalEvent.clipboardData).items;
|
||||
let hasFile = false;
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
if (items[i].type.indexOf('image') !== -1) {
|
||||
let file = items[i].getAsFile();
|
||||
const item: ItemType = {
|
||||
file,
|
||||
uid: (file as any).lastModified,
|
||||
name: file.name
|
||||
};
|
||||
uploadFile(<File>item.file)
|
||||
.then((result) => {
|
||||
const addPath = '\n\r';
|
||||
content.value = content.value + addPath
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
hasFile = true;
|
||||
}
|
||||
}
|
||||
if (hasFile) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
const reload = () => {
|
||||
// 加载工单明细
|
||||
listTaskRecord({ taskId: taskId.value }).then((data) => {
|
||||
record.value = toTreeData({
|
||||
data: data.map((d) => {
|
||||
return { ...d, key: d.taskRecordId, value: d.taskRecordId };
|
||||
}),
|
||||
idField: 'taskRecordId',
|
||||
parentIdField: 'parentId'
|
||||
});
|
||||
loading.value = false;
|
||||
});
|
||||
// 加载应用信息
|
||||
if (appId.value) {
|
||||
getApp(appId.value).then(result => {
|
||||
appInfo.value = result;
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 查看秘钥
|
||||
const onAppSecret = (appId) => {
|
||||
getAppSecret({ appId }).then((res) => {
|
||||
showAppSecret.value = !showAppSecret.value;
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
detail.value = props.data;
|
||||
appId.value = Number(props.data.appId);
|
||||
active.value = Number(props.data.progress);
|
||||
taskId.value = Number(props.data.taskId);
|
||||
commander.value = props.data.commanderName;
|
||||
reload();
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "TaskDetailContent"
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.content {
|
||||
background-color: #ffffff;
|
||||
padding: 10px 0;
|
||||
min-height: 40px;
|
||||
max-width: 80%;
|
||||
overflow: hidden;
|
||||
.edit-md {
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.screenshot {
|
||||
margin: auto !important;
|
||||
}
|
||||
|
||||
.task-card {
|
||||
background-color: var(--body-background);
|
||||
margin-bottom: 20px;
|
||||
//margin: 20px auto;
|
||||
|
||||
.comment {
|
||||
}
|
||||
}
|
||||
|
||||
.task-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 20px;
|
||||
}
|
||||
.ant-page-header{
|
||||
padding: 0 !important;
|
||||
}
|
||||
.replay-bg{
|
||||
//box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.upload-list-inline :deep(.ant-upload-list-item) {
|
||||
float: left;
|
||||
width: 200px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.upload-list-inline [class*='-upload-list-rtl'] :deep(.ant-upload-list-item) {
|
||||
float: right;
|
||||
}
|
||||
/* 应用详情字段列表 */
|
||||
.app-item-list {
|
||||
& > .ele-cell {
|
||||
padding: 16px 8px;
|
||||
.ele-cell-content {
|
||||
.ele-cell-desc {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.ele-cell-title {
|
||||
max-width: 900px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-item-icon {
|
||||
color: #fff;
|
||||
padding: 8px;
|
||||
font-size: 26px;
|
||||
border-radius: 50%;
|
||||
|
||||
&.anticon-qq {
|
||||
background: #3492ed;
|
||||
}
|
||||
|
||||
&.anticon-wechat {
|
||||
background: #4daf29;
|
||||
}
|
||||
|
||||
&.anticon-alipay {
|
||||
background: #1476fe;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,85 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
width="500px"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:title="`添加成员`"
|
||||
:body-style="{ paddingBottom: '8px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<a-form
|
||||
:label-col="{ sm: 5, xs: 24 }"
|
||||
:wrapper-col="{ sm: 19, xs: 24 }"
|
||||
layout="horizontal"
|
||||
>
|
||||
<a-form-item>
|
||||
<a-input
|
||||
placeholder="请输入开发者账号"
|
||||
v-model:value="content"
|
||||
@pressEnter="save"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { addTaskUser } from '@/api/oa/task-user';
|
||||
import { reloadPageTab } from '@/utils/page-tab-util';
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
taskId?: number | 10;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
const content = ref('');
|
||||
const role = ref(20);
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
console.log('sdfsdfdsfds');
|
||||
loading.value = true;
|
||||
addTaskUser({
|
||||
username: content.value,
|
||||
role: role.value,
|
||||
taskId: props.taskId
|
||||
})
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
<style lang="less">
|
||||
.tab-pane {
|
||||
min-height: 300px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<a-tabs
|
||||
type="card"
|
||||
tabPosition="top"
|
||||
v-model:activeKey="activeKey"
|
||||
@change="query"
|
||||
>
|
||||
<a-tab-pane
|
||||
v-for="(item, index) in data"
|
||||
:key="index"
|
||||
:tab="`${item.tab}(${item.count})`"
|
||||
>
|
||||
<list :data="item" />
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref } from 'vue';
|
||||
import List from './list.vue';
|
||||
import { getCount } from '@/api/oa/task';
|
||||
import { TabsParam } from '@/api/tabs';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
|
||||
// 加载状态
|
||||
const loading = ref(true);
|
||||
|
||||
// 当前选项卡
|
||||
const activeKey = ref(0);
|
||||
|
||||
// 获取字典数据
|
||||
const data = ref<TabsParam | null>(null);
|
||||
|
||||
/* 查询 */
|
||||
const query = () => {
|
||||
loading.value = true;
|
||||
const userStore = useUserStore();
|
||||
const loginUser = computed(() => userStore.info ?? {});
|
||||
getCount({ userId: loginUser.value.userId }).then((result) => {
|
||||
data.value = result;
|
||||
});
|
||||
};
|
||||
|
||||
query();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'Task'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.sys-organization-list {
|
||||
padding: 12px 6px;
|
||||
height: calc(100vh - 242px);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,425 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="taskId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
v-model:selection="selection"
|
||||
:customRow="customRow"
|
||||
:scroll="{ x: 1200 }"
|
||||
tool-class="ele-toolbar-form"
|
||||
class="sys-org-table"
|
||||
>
|
||||
<template #toolbar>
|
||||
<search
|
||||
@search="reload"
|
||||
:selection="selection"
|
||||
@add="openEdit"
|
||||
@remove="removeBatch"
|
||||
/>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'name'">
|
||||
<a-tooltip title="查看详情">
|
||||
<span href="#">{{ record.name }}</span>
|
||||
</a-tooltip>
|
||||
<!-- <div class="ele-text-placeholder">{{ record.comments }}</div>-->
|
||||
</template>
|
||||
<template v-if="column.key === 'progress'">
|
||||
<template v-for="(item, index) in taskProgress" :key="index">
|
||||
<a-badge
|
||||
:dot="
|
||||
record.isRead === 0 && loginUser.userId !== record.lastReadUser
|
||||
"
|
||||
v-if="Number(item.value) === Number(record.progress)"
|
||||
>
|
||||
<a-tag v-if="record.status === 0" color="orange">
|
||||
{{ item.label }}
|
||||
</a-tag>
|
||||
<a-tag v-if="record.status === 1" color="green">
|
||||
{{ item.label }}
|
||||
</a-tag>
|
||||
</a-badge>
|
||||
</template>
|
||||
</template>
|
||||
<template v-if="column.key === 'taskType'">
|
||||
<div v-for="(d, i) in JSON.parse(taskType)" :key="i">
|
||||
<span v-if="d.value === record.taskType">{{ d.value }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-tag v-if="record.progress === 0" color="red">待处理</a-tag>
|
||||
<a-tag v-if="record.progress === 1" color="green">已完成</a-tag>
|
||||
<a-tag v-if="record.progress === 2" color="purple">已回复</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'promoter'">
|
||||
<div class="user-box">
|
||||
<a-tooltip :title="`ID:${record.promoter}`">
|
||||
<a-avatar
|
||||
:size="30"
|
||||
:src="`${record.promoterAvatar}`"
|
||||
style="margin-right: 4px"
|
||||
>
|
||||
<template #icon>
|
||||
<UserOutlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
</a-tooltip>
|
||||
<div class="user-info" @click="onPromoter(record)">
|
||||
<span>{{ record.promoterAlias }}</span>
|
||||
<span class="ele-text-placeholder">
|
||||
{{ record.promoterName }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'commander'">
|
||||
<div class="user-box" v-if="record.commander">
|
||||
<a-tooltip :title="`ID:${record.commander}`">
|
||||
<a-avatar
|
||||
:size="30"
|
||||
:src="`${record.commanderAvatar}`"
|
||||
style="margin-right: 4px"
|
||||
>
|
||||
<template #icon>
|
||||
<UserOutlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
</a-tooltip>
|
||||
<div class="user-info" @click="onCommander(record)">
|
||||
<span>{{ record.commanderAlias }}</span>
|
||||
<span class="ele-text-placeholder">
|
||||
{{ record.commanderName }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<a-tag v-if="record.commander === 0" color="red">工单退回</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'createTime'">
|
||||
<a-tooltip :title="`${toDateString(record.createTime)}`">
|
||||
<span class="ele-text-placeholder">
|
||||
{{ timeAgo(record.createTime) }}
|
||||
</span>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template v-if="column.key === 'updateTime'">
|
||||
<div class="user-box">
|
||||
<a-tooltip :title="`ID:${record.lastReadUser}`">
|
||||
<a-avatar
|
||||
:size="30"
|
||||
v-if="record.lastReadUser > 0"
|
||||
:src="`${record.lastAvatar}`"
|
||||
style="margin-right: 4px"
|
||||
>
|
||||
<template #icon>
|
||||
<UserOutlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
</a-tooltip>
|
||||
<div class="user-info">
|
||||
<span class="ele-text-placeholder">
|
||||
{{ record.lastNickname }}
|
||||
</span>
|
||||
<span class="ele-text-placeholder">
|
||||
{{ timeAgo(record.updateTime) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'users'">
|
||||
<a-space>
|
||||
<ele-avatar-list :data="record.users" :size="22" />
|
||||
</a-space>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a-button @click="openInfo(record)">查看</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
<!-- 编辑弹窗 -->
|
||||
<TaskEdit v-model:visible="showEdit" :data="current" @done="reload" />
|
||||
<!-- 用户详情 -->
|
||||
<TaskInfo v-model:visible="showInfo" :data="current" @done="reload" />
|
||||
<!-- 成员管理 -->
|
||||
<TaskUser v-model:visible="showUsers" :data="current" @done="reload" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref, computed, watch } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import {
|
||||
UserOutlined,
|
||||
ExclamationCircleOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import { toDateString } from 'ele-admin-pro';
|
||||
import Search from './components/search.vue';
|
||||
import TaskEdit from './components/task-edit.vue';
|
||||
import TaskInfo from './components/task-info.vue';
|
||||
import { pageTask, removeTask, removeBatchTask } from '@/api/oa/task';
|
||||
import { timeAgo } from 'ele-admin-pro';
|
||||
import type { Task, TaskParam } from '@/api/oa/task/model';
|
||||
import TaskUser from '@/views/oa/task/components/task-user.vue';
|
||||
import { getDictionaryOptions } from '@/utils/common';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
|
||||
const userStore = useUserStore();
|
||||
// 当前用户信息
|
||||
const loginUser = computed(() => userStore.info ?? {});
|
||||
const taskType = localStorage.getItem('taskType');
|
||||
const props = defineProps<{
|
||||
// 机构 id
|
||||
data?: any;
|
||||
}>();
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<Task[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<Task | null>(null);
|
||||
// const users = ref()
|
||||
// 获取字典数据
|
||||
const taskProgress = getDictionaryOptions('taskProgress');
|
||||
const filters = getDictionaryOptions('taskType');
|
||||
|
||||
// 是否显示资产详情
|
||||
const showInfo = ref(false);
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
const showUsers = ref(false);
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({
|
||||
page,
|
||||
limit,
|
||||
where,
|
||||
orders,
|
||||
filters
|
||||
}) => {
|
||||
if (filters) {
|
||||
where.progress = filters.progress;
|
||||
where.taskSource = filters.taskSource;
|
||||
where.taskType = filters.taskType;
|
||||
where.status = filters.status;
|
||||
}
|
||||
// 搜索条件
|
||||
if (props.data.key) {
|
||||
where.status = props.data.key;
|
||||
}
|
||||
where.userId = loginUser.value.userId;
|
||||
return pageTask({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
// {
|
||||
// key: 'index',
|
||||
// width: 48,
|
||||
// align: 'center',
|
||||
// fixed: 'left',
|
||||
// hideInSetting: true,
|
||||
// customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
|
||||
// },
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 100,
|
||||
align: 'center',
|
||||
fixed: 'left',
|
||||
hideInSetting: true
|
||||
},
|
||||
{
|
||||
title: '工单号',
|
||||
dataIndex: 'taskId',
|
||||
width: 90,
|
||||
align: 'center',
|
||||
key: 'taskId'
|
||||
},
|
||||
{
|
||||
title: '工单标题',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '工单类型',
|
||||
dataIndex: 'taskType',
|
||||
key: 'taskType',
|
||||
align: 'center',
|
||||
filters: filters.value
|
||||
},
|
||||
{
|
||||
title: '受理人',
|
||||
dataIndex: 'commander',
|
||||
key: 'commander',
|
||||
hideInSetting: true
|
||||
},
|
||||
{
|
||||
title: '工单状态',
|
||||
dataIndex: 'progress',
|
||||
key: 'progress',
|
||||
align: 'center',
|
||||
filters: taskProgress.value
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
sorter: true,
|
||||
align: 'center',
|
||||
ellipsis: true,
|
||||
customRender: ({ text }) => toDateString(text)
|
||||
},
|
||||
{
|
||||
title: '更新时间',
|
||||
dataIndex: 'updateTime',
|
||||
key: 'updateTime',
|
||||
sorter: true,
|
||||
align: 'center',
|
||||
ellipsis: true,
|
||||
customRender: ({ text }) => toDateString(text)
|
||||
}
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: TaskParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: Task) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开用户详情弹窗 */
|
||||
const openInfo = (row?: Task) => {
|
||||
current.value = row ?? null;
|
||||
showInfo.value = true;
|
||||
};
|
||||
|
||||
const onPromoter = (row?: Task) => {
|
||||
reload({
|
||||
promoter: row?.promoter
|
||||
});
|
||||
};
|
||||
|
||||
const onCommander = (row?: Task) => {
|
||||
reload({
|
||||
commander: row?.commander
|
||||
});
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: Task) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeTask(row.taskId)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 批量删除 */
|
||||
const removeBatch = () => {
|
||||
if (!selection.value.length) {
|
||||
message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
content: '确定要删除选中的记录吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeBatchTask(selection.value.map((d) => d.taskId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: Task) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openInfo(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.data,
|
||||
(visible) => {
|
||||
reload();
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
reload();
|
||||
} else {
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'Task'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.sys-org-table :deep(.ant-table-body) {
|
||||
overflow: auto !important;
|
||||
overflow: overlay !important;
|
||||
}
|
||||
|
||||
.sys-org-table :deep(.ant-table-pagination.ant-pagination) {
|
||||
padding: 0 4px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.user-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.user-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user