You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
145 lines
4.3 KiB
145 lines
4.3 KiB
<template>
|
|
<table-list
|
|
v-loading="loading"
|
|
:code="code"
|
|
:config="config"
|
|
:data="list"
|
|
:operation="['search']"
|
|
:reset="handleReset"
|
|
title="用户"
|
|
:total="total"
|
|
@search="handleSearch"
|
|
>
|
|
<template #search>
|
|
<el-form inline>
|
|
<el-form-item label="账号" prop="account">
|
|
<el-input v-model="state.condition.account" />
|
|
</el-form-item>
|
|
<el-form-item label="昵称" prop="nickname">
|
|
<el-input v-model="state.condition.nickname" />
|
|
</el-form-item>
|
|
<el-form-item label="注册时间" prop="dateRange">
|
|
<el-date-picker
|
|
v-model="state.condition.dateRange"
|
|
:default-time="[new Date(0, 0, 0, 0, 0, 0), new Date(0, 0, 0, 23, 59, 59)]"
|
|
type="daterange"
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
|
/>
|
|
</el-form-item>
|
|
</el-form>
|
|
</template>
|
|
</table-list>
|
|
</template>
|
|
|
|
<script setup lang="jsx">
|
|
import ElImage from '@/components/extra/ElImage.vue';
|
|
import { ElSwitch } from 'element-plus/es';
|
|
const { proxy } = getCurrentInstance();
|
|
const store = useStore();
|
|
const loading = ref(false);
|
|
const code = computed(() => store.state.customer.code);
|
|
const list = computed(() => store.state.customer.list);
|
|
const total = computed(() => store.state.customer.total);
|
|
const opts = computed(() => store.state.customer.opts);
|
|
if (!unref(opts).init) {
|
|
store.dispatch('customer/load');
|
|
}
|
|
const state = reactive({
|
|
condition: {
|
|
account: null,
|
|
nickname: null,
|
|
dateRange: [],
|
|
},
|
|
});
|
|
watch(
|
|
() => state.condition,
|
|
(value) => {
|
|
store.commit('customer/setCondition', _.cloneDeep(value));
|
|
},
|
|
{ immediate: true, deep: true }
|
|
);
|
|
const handleReset = () => {
|
|
state.condition = {
|
|
account: null,
|
|
nickname: null,
|
|
dateRange: [],
|
|
};
|
|
};
|
|
const handleSearch = async () => {
|
|
loading.value = true;
|
|
await store.dispatch('customer/search');
|
|
loading.value = false;
|
|
};
|
|
onActivated(handleSearch);
|
|
const handleEnable = async (row) => {
|
|
loading.value = true;
|
|
await store.dispatch('customer/enable', { userId: row.id, isEnable: !row.isEnable });
|
|
loading.value = false;
|
|
};
|
|
const config = reactive({
|
|
// 表格列配置
|
|
columns: [
|
|
{
|
|
type: 'selection',
|
|
fixed: 'left',
|
|
width: 60,
|
|
},
|
|
{
|
|
label: '账号',
|
|
prop: 'account',
|
|
minWidth: 160,
|
|
fixed: 'left',
|
|
},
|
|
{
|
|
label: '昵称',
|
|
prop: 'nickname',
|
|
minWidth: 160,
|
|
},
|
|
{
|
|
label: '头像',
|
|
width: 160,
|
|
slots: {
|
|
default: ({ row }) => <ElImage src={row.avatar} alt="用户头像" />,
|
|
},
|
|
},
|
|
{
|
|
label: '性别',
|
|
width: 120,
|
|
slots: {
|
|
default: ({ row }) => proxy.$dict(unref(opts).gender, row.gender),
|
|
},
|
|
},
|
|
{
|
|
label: '手机',
|
|
prop: 'phone',
|
|
width: 160,
|
|
},
|
|
{
|
|
label: '证件号码',
|
|
prop: 'idCard',
|
|
width: 160,
|
|
},
|
|
{
|
|
label: '注册来源',
|
|
prop: 'source',
|
|
width: 160,
|
|
},
|
|
{
|
|
label: '注册时间',
|
|
prop: 'createTime',
|
|
width: 180,
|
|
},
|
|
{
|
|
label: '是否启用',
|
|
width: 100,
|
|
fixed: 'right',
|
|
slots: {
|
|
default: ({ row }) => <ElSwitch modelValue={row.isEnable} onInput={() => handleEnable(row)} />,
|
|
},
|
|
},
|
|
],
|
|
});
|
|
</script>
|
|
|
|
<style lang="less" scoped></style>
|