zianxin/pj_admin_cloud
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:人员搜索组件

Browse Source
This commit is contained in:
dzc committed 2024-12-31 11:14:12 +08:00
1 parent 6925cf0eca
commit ffe6ba4390
8 files changed
+158 -93
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/assets/styles/global.scss
View File
Whitespace-only changes.
src/components/Select/SelectUser.vue
+73
View File
@@ -0,0 +1,73 @@
<template>
<el-select style="width: 100%;" v-model="state.selectId" :placeholder="props.placeholder" clearable
remote-show-suffix filterable remote :remote-method="remoteSearch" :loading="state.loading"
@visible-change="(e: boolean) => e && getOptions()">
<el-option v-for="v in state.options" :key="v.userId" :label="`${v.name}-${v.phone}`" :value="v.userId">
<div class="flex items-center">
<div class="color-primary">{{ v.name }}</div>
<div class="pl5 color-success">{{ v.phone }}</div>
</div>
<template #loading>
<svg class="circular" viewBox="0 0 50 50">
<circle class="path" cx="25" cy="25" r="20" fill="none" />
</svg>
</template>
</el-option>
</el-select>
</template>
<script setup lang="ts" name="select-user">
import { reactive, computed, defineModel, withDefaults, defineProps } from 'vue'
import * as userApi from '/@/api/admin/user'
const selectId = defineModel()
export type Props = {
placeholder?: string,
}
const props = withDefaults(defineProps<Props>(), {
placeholder: "请选择",
})
const queryForm = reactive<any>({
name: "",
current: 1,
size: 10,
})
const state = reactive<any>({
loading: true,
selectId: selectId,
options: []
})
watch(selectId, (newVal, oldValue) => {
if (newVal == oldValue) return
state.selectId = newVal
getOptions()
}, { immediate: true })
async function getOptions() {
try {
state.loading = true
const _pa = {
...queryForm
}
const { data } = await userApi.pageList(_pa)
state.options = data.records ?? []
} finally {
setTimeout(() => state.loading = false, 500);
}
}
function remoteSearch(params: string) {
queryForm.name = params
getOptions()
}
function clear() {
state.selectId = null
getOptions()
}
</script>
src/components/index.ts
+7 -2
View File
@@ -13,6 +13,10 @@ import TagList from '/@/components/TagList/index.vue';
import SvgIcon from '/@/components/SvgIcon/index.vue';
import PreviewImage from "/@/components/PreviewImage/index.vue"
// 业务组件
import SelectUser from '/@/components/Select/SelectUser.vue'
// 第三方组件
import ElementPlus from 'element-plus';
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
@@ -34,7 +38,7 @@ import { App } from 'vue';
export default {
install(app: App) {
app.component('DictTag', DictTag);
app.component('DictSelect',DictSelect)
app.component('DictSelect', DictSelect)
app.component('Pagination', Pagination);
app.component('RightToolbar', RightToolbar);
app.component('uploadExcel', UploadExcel);
@@ -46,7 +50,8 @@ export default {
app.component('DelWrap', DelWrap);
app.component('TagList', TagList);
app.component('SvgIcon', SvgIcon);
app.component('PreviewImage',PreviewImage)
app.component('PreviewImage', PreviewImage)
app.component('SelectUser', SelectUser)
// 导入全部的elmenet-plus的图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
src/main.ts
+1
View File
@@ -7,6 +7,7 @@ import Components from '/@/components';
import { i18n } from '/@/i18n';
import { properties } from '/@/utils/globalProperties';
import { initAntiDebug } from '/@/utils/anti-debug';
import "/@/assets/styles/global.scss"
// Initialize anti-debug protection
initAntiDebug();
src/views/admin/system/user/index.vue
+49 -60
View File
@@ -4,12 +4,13 @@
<pane size="15">
<div class="layout-padding-auto layout-padding-view">
<el-scrollbar>
<query-tree :placeholder="$t('common.queryDeptTip')" :query="deptData.queryList" :show-expand="true" @node-click="handleNodeClick">
<query-tree :placeholder="$t('common.queryDeptTip')" :query="deptData.queryList"
:show-expand="true" @node-click="handleNodeClick">
<!-- 没有数据权限提示 -->
<template #default="{ node, data }">
<el-tooltip v-if="data.isLock" class="item" effect="dark" :content="$t('sysuser.noDataScopeTip')" placement="right-start">
<span
>{{ node.label }}
<el-tooltip v-if="data.isLock" class="item" effect="dark"
:content="$t('sysuser.noDataScopeTip')" placement="right-start">
<span>{{ node.label }}
<SvgIcon name="ele-Lock" />
</span>
</el-tooltip>
@@ -24,75 +25,68 @@
<el-row v-show="showSearch">
<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
<el-form-item :label="$t('sysuser.username')" prop="username">
<el-input v-model="state.queryForm.username" :placeholder="$t('sysuser.inputUsernameTip')" clearable />
<el-input v-model="state.queryForm.username"
:placeholder="$t('sysuser.inputUsernameTip')" clearable />
</el-form-item>
<el-form-item :label="$t('sysuser.phone')" prop="phone">
<el-input v-model="state.queryForm.phone" :placeholder="$t('sysuser.inputPhoneTip')" clearable />
<el-input v-model="state.queryForm.phone" :placeholder="$t('sysuser.inputPhoneTip')"
clearable />
</el-form-item>
<el-form-item>
<el-button icon="Search" type="primary" @click="getDataList">{{ $t('common.queryBtn') }}</el-button>
<el-button icon="Search" type="primary" @click="getDataList">{{ $t('common.queryBtn')
}}</el-button>
<el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
</el-form-item>
</el-form>
</el-row>
<el-row>
<div class="mb8" style="width: 100%">
<el-button v-auth="'sys_user_add'" icon="folder-add" type="primary" @click="userDialogRef.openDialog()">
<el-button v-auth="'sys_user_add'" icon="folder-add" type="primary"
@click="userDialogRef.openDialog()">
{{ $t('common.addBtn') }}
</el-button>
<el-button plain v-auth="'sys_user_add'" class="ml10" icon="upload-filled" type="primary" @click="excelUploadRef.show()">
<el-button plain v-auth="'sys_user_add'" class="ml10" icon="upload-filled" type="primary"
@click="excelUploadRef.show()">
{{ $t('common.importBtn') }}
</el-button>
<el-button
plain
v-auth="'sys_user_del'"
:disabled="multiple"
class="ml10"
icon="Delete"
type="primary"
@click="handleDelete(selectObjs)"
>
<el-button plain v-auth="'sys_user_del'" :disabled="multiple" class="ml10" icon="Delete"
type="primary" @click="handleDelete(selectObjs)">
{{ $t('common.delBtn') }}
</el-button>
<right-toolbar
v-model:showSearch="showSearch"
:export="'sys_user_export'"
@exportExcel="exportExcel"
@queryTable="getDataList"
class="ml10 mr20"
style="float: right"
/>
<right-toolbar v-model:showSearch="showSearch" :export="'sys_user_export'"
@exportExcel="exportExcel" @queryTable="getDataList" class="ml10 mr20"
style="float: right" />
</div>
</el-row>
<el-table
v-loading="state.loading"
:data="state.dataList"
@selection-change="handleSelectionChange"
row-key="userId"
border
:cell-style="tableStyle.cellStyle"
:header-cell-style="tableStyle.headerCellStyle"
>
<el-table v-loading="state.loading" :data="state.dataList" @selection-change="handleSelectionChange"
row-key="userId" border :cell-style="tableStyle.cellStyle"
:header-cell-style="tableStyle.headerCellStyle">
<el-table-column :selectable="handleSelectable" type="selection" width="40" />
<el-table-column :label="$t('sysuser.index')" type="index" width="60" fixed="left" />
<el-table-column :label="$t('sysuser.username')" prop="username" fixed="left" show-overflow-tooltip></el-table-column>
<el-table-column :label="$t('sysuser.name')" prop="name" show-overflow-tooltip></el-table-column>
<el-table-column :label="$t('sysuser.phone')" prop="phone" show-overflow-tooltip></el-table-column>
<el-table-column :label="$t('sysuser.username')" prop="username" fixed="left"
show-overflow-tooltip></el-table-column>
<el-table-column :label="$t('sysuser.name')" prop="name"
show-overflow-tooltip></el-table-column>
<el-table-column :label="$t('sysuser.phone')" prop="phone"
show-overflow-tooltip></el-table-column>
<el-table-column :label="$t('sysuser.post')" show-overflow-tooltip>
<template #default="scope">
<el-tag v-for="(item, index) in scope.row.postList" :key="index">{{ item.postName }}</el-tag>
<el-tag v-for="(item, index) in scope.row.postList" :key="index">{{ item.postName
}}</el-tag>
</template>
</el-table-column>
<el-table-column :label="$t('sysuser.role')" show-overflow-tooltip>
<template #default="scope">
<el-tag v-for="(item, index) in scope.row.roleList" :key="index">{{ item.roleName }}</el-tag>
<el-tag v-for="(item, index) in scope.row.roleList" :key="index">{{ item.roleName
}}</el-tag>
</template>
</el-table-column>
<el-table-column :label="$t('sysuser.lockFlag')" show-overflow-tooltip>
<template #default="scope">
<el-switch v-model="scope.row.lockFlag" @change="changeSwitch(scope.row)" active-value="0" inactive-value="9"></el-switch>
<el-switch v-model="scope.row.lockFlag" @change="changeSwitch(scope.row)"
active-value="0" inactive-value="9"></el-switch>
</template>
</el-table-column>
<el-table-column :label="$t('common.action')" width="200" fixed="right">
@@ -101,26 +95,24 @@
<!-- 重置密码 -->
<popover-input v-model="inputPassword" @confirm="changePassword(scope.row)">
<template #default>
<el-button v-auth="'sys_user_edit'" icon="RefreshLeft" text type="primary" class="mr-4">
<el-button v-auth="'sys_user_edit'" icon="RefreshLeft" text type="primary"
class="mr-4">
{{ $t('sysuser.passwordBtn') }}
</el-button>
</template>
</popover-input>
<!-- 修改信息 -->
<el-button v-auth="'sys_user_edit'" icon="edit-pen" text type="primary" @click="userDialogRef.openDialog(scope.row.userId)">
<el-button v-auth="'sys_user_edit'" icon="edit-pen" text type="primary"
@click="userDialogRef.openDialog(scope.row.userId)">
{{ $t('common.editBtn') }}
</el-button>
<!-- 删除用户 -->
<el-tooltip :content="$t('sysuser.deleteDisabledTip')" :disabled="scope.row.userId !== '1'" placement="top">
<el-tooltip :content="$t('sysuser.deleteDisabledTip')"
:disabled="scope.row.userId !== '1'" placement="top">
<span style="margin-left: 12px">
<el-button
icon="delete"
v-auth="'sys_user_del'"
:disabled="scope.row.username === 'admin'"
text
type="primary"
@click="handleDelete([scope.row.userId])"
>{{ $t('common.delBtn') }}
<el-button icon="delete" v-auth="'sys_user_del'"
:disabled="scope.row.username === 'admin'" text type="primary"
@click="handleDelete([scope.row.userId])">{{ $t('common.delBtn') }}
</el-button>
</span>
</el-tooltip>
@@ -128,20 +120,17 @@
</template>
</el-table-column>
</el-table>
<pagination v-bind="state.pagination" @current-change="currentChangeHandle" @size-change="sizeChangeHandle"> </pagination>
<pagination v-bind="state.pagination" @current-change="currentChangeHandle"
@size-change="sizeChangeHandle">
</pagination>
</div>
</pane>
</splitpanes>
<user-form ref="userDialogRef" @refresh="getDataList(false)" :deptId="state.queryForm.deptId" />
<upload-excel
ref="excelUploadRef"
:title="$t('sysuser.importUserTip')"
temp-url="/admin/sys-file/local/file/user.xlsx"
url="/admin/user/import"
@refreshDataList="getDataList"
/>
<upload-excel ref="excelUploadRef" :title="$t('sysuser.importUserTip')"
temp-url="/admin/sys-file/local/file/user.xlsx" url="/admin/user/import" @refreshDataList="getDataList" />
</div>
</template>
src/views/wallet/wallet-manage/index.vue
+21 -2
View File
@@ -1,6 +1,25 @@
<template>
<div class="layout-padding">
<div class="layout-padding-auto layout-padding-view">
<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
<el-row :gutter="24">
<el-col :span="4">
<el-form-item class="w100" label="用户" prop="userIds">
<select-user v-model="state.queryForm.userIds" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item class="w100" label="饭卡卡号" prop="cardNumber">
<el-input v-model="state.queryForm.cardNumber" placeholder="饭卡卡号" clearable />
</el-form-item>
</el-col>
<el-form-item>
<el-button icon="Search" type="primary" @click="getDataList">{{ $t('common.queryBtn')
}}</el-button>
<el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
</el-form-item>
</el-row>
</el-form>
<el-row>
<div class="mb8" style="width: 100%">
<el-button plain :disabled="multiple" icon="Delete" type="primary" v-auth="'wallet_walletManage_del'"
@@ -55,9 +74,9 @@
<el-table-column prop="createTime" width="200" label="创建时间" show-overflow-tooltip />
<el-table-column label="操作" fixed="right" width="200">
<template #default="{ row }">
<el-button icon="edit-pen" text type="primary" v-auth="'wallet_walletManage_edit'"
<el-button icon="InfoFilled" text type="primary" v-auth="'wallet_walletManage_edit'"
@click="formDialogRef.openDialog(row.id)">详情</el-button>
<el-button icon="edit-pen" text type="primary" v-auth="'wallet_walletManage_edit'"
<el-button icon="Money" text type="primary" v-auth="'wallet_walletManage_edit'"
@click="changeBalanceRef.openDialog(row.userId, row.id)">充值/扣款</el-button>
</template>
</el-table-column>
src/views/wallet/wallet-manage/transaction-list.vue
+4 -27
View File
@@ -30,27 +30,19 @@ import { displayPrice } from "/@/utils/formatMoney"
const emit = defineEmits(['refresh']);
// 定义变量内容
const dataFormRef = ref();
const visible = ref(false)
const loading = ref(false)
// 定义字典
// 提交表单数据
const form = reactive({
id: '',
isFreeze: '',
activeBindTime: '',
activeBindStatus: '',
});
const state: BasicTableProps = reactive<BasicTableProps>({
pagination: { size: 5, },
queryForm: {},
pageList: walletTransactionApi.pageJoin
})
// 定义校验规则
const dataRules = ref({
})
// table hook
const {
getDataList,
@@ -65,30 +57,15 @@ const {
const openDialog = (id: string) => {
visible.value = true
form.id = ''
// 重置表单数据
nextTick(() => {
dataFormRef.value?.resetFields();
});
// 获取walletManage信息
if (id) {
form.id = id
getwalletManageData(id)
state.queryForm.walletId = id
state.dataList = []
getDataList()
}
};
// 初始化表单数据
const getwalletManageData = (id: string) => {
// 获取数据
loading.value = true
const res = walletTransactionApi.pageJoin({ walletId: id });
console.log(res);
};
// 暴露变量
defineExpose({
openDialog
src/views/wallet/wallet-type/index.vue
+3 -2
View File
@@ -11,8 +11,9 @@
@click="handleDelete(selectObjs)">
删除
</el-button>
<right-toolbar v-model:showSearch="showSearch" :export="'wallet_walletType_export'" @exportExcel="exportExcel"
class="ml10 mr20" style="float: right;" @queryTable="getDataList"></right-toolbar>
<right-toolbar :search="false" v-model:showSearch="showSearch" :export="'wallet_walletType_export'"
@exportExcel="exportExcel" class="ml10 mr20" style="float: right;"
@queryTable="getDataList"></right-toolbar>
</div>
</el-row>
<el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"