|
@@ -1,25 +1,28 @@
|
|
<script setup>
|
|
<script setup>
|
|
import { SearchIcon } from 'tdesign-icons-vue-next';
|
|
import { SearchIcon } from 'tdesign-icons-vue-next';
|
|
import EditUser from './components/EditUser.vue'
|
|
import EditUser from './components/EditUser.vue'
|
|
|
|
+import MoveUser from './components/MoveUser.vue'
|
|
|
|
+import ConfirmImportUser from './components/ConfirmImportUser.vue'
|
|
|
|
+import {apiCustomerUser} from '@/api/customer'
|
|
|
|
|
|
const jobOpts = [
|
|
const jobOpts = [
|
|
{
|
|
{
|
|
label: '在职',
|
|
label: '在职',
|
|
- value: '在职'
|
|
|
|
|
|
+ value: 1
|
|
},
|
|
},
|
|
{
|
|
{
|
|
label: '离职',
|
|
label: '离职',
|
|
- value: '离职'
|
|
|
|
|
|
+ value: 0
|
|
}
|
|
}
|
|
]
|
|
]
|
|
const accountStatusOpts = [
|
|
const accountStatusOpts = [
|
|
{
|
|
{
|
|
label: '启用',
|
|
label: '启用',
|
|
- value: '启用'
|
|
|
|
|
|
+ value: 1
|
|
},
|
|
},
|
|
{
|
|
{
|
|
label: '禁用',
|
|
label: '禁用',
|
|
- value: '禁用'
|
|
|
|
|
|
+ value: 0
|
|
}
|
|
}
|
|
]
|
|
]
|
|
|
|
|
|
@@ -31,29 +34,99 @@ const filterState = reactive({
|
|
})
|
|
})
|
|
const tableData = ref([])
|
|
const tableData = ref([])
|
|
const columns = [
|
|
const columns = [
|
|
- { align: 'center', colKey: '', title: '姓名' },
|
|
|
|
- { align: 'center', colKey: '', title: '手机号' },
|
|
|
|
- { align: 'center', colKey: '', title: '岗位-部门' },
|
|
|
|
- { align: 'center', colKey: '', title: '最近登录时间', sorter: true, },
|
|
|
|
- { align: 'center', colKey: '', title: '在职状态' },
|
|
|
|
- { align: 'center', colKey: '', title: '账号状态' },
|
|
|
|
- { align: 'center', colKey: '', title: '客户名称' },
|
|
|
|
|
|
+ { align: 'center', colKey: 'RealName', title: '姓名' },
|
|
|
|
+ { align: 'center', colKey: 'Mobile', title: '手机号',width:'150px' },
|
|
|
|
+ { align: 'center', colKey: 'DepartmentName', title: '岗位-部门',width:'150px' },
|
|
|
|
+ { align: 'center', colKey: 'LastLoginTime', title: '最近登录时间',width:'180px', sorter: true, },
|
|
|
|
+ { align: 'center', colKey: 'PositionStatus', title: '在职状态',width:'100px' },
|
|
|
|
+ { align: 'center', colKey: 'Enabled', title: '账号状态',width:'100px' },
|
|
|
|
+ { align: 'center', colKey: 'BusinessName', title: '客户名称' },
|
|
{
|
|
{
|
|
align: 'center',
|
|
align: 'center',
|
|
colKey: 'opt',
|
|
colKey: 'opt',
|
|
title: '操作',
|
|
title: '操作',
|
|
},
|
|
},
|
|
]
|
|
]
|
|
-const tablePagination = {
|
|
|
|
- defaultCurrent: 1,
|
|
|
|
- defaultPageSize: 20,
|
|
|
|
|
|
+const tablePagination = ref({
|
|
|
|
+ current: 1,
|
|
|
|
+ pageSize: 20,
|
|
total: 0,
|
|
total: 0,
|
|
showPageSize:false
|
|
showPageSize:false
|
|
|
|
+})
|
|
|
|
+async function getUserList(){
|
|
|
|
+ const res=await apiCustomerUser.userList({
|
|
|
|
+ PageSize:tablePagination.pageSize,
|
|
|
|
+ CurrentIndex:tablePagination.current,
|
|
|
|
+ PositionStatus:filterState.jobStatus===''?-1:filterState.jobStatus,
|
|
|
|
+ Enabled:filterState.accountStatus===''?-1:filterState.accountStatus,
|
|
|
|
+ Keyword:filterState.keyword,
|
|
|
|
+ BusinessCode:filterState.customer
|
|
|
|
+ })
|
|
|
|
+ if(res.Ret!==200) return
|
|
|
|
+ const arr=res.Data.List||[]
|
|
|
|
+ tableData.value=arr
|
|
|
|
+ tablePagination.value.total=res.Data.Paging.Totals
|
|
|
|
+}
|
|
|
|
+getUserList()
|
|
|
|
+
|
|
|
|
+function handleRefreshList(){
|
|
|
|
+ tablePagination.value.current=1
|
|
|
|
+ tableData.value=[]
|
|
|
|
+ getUserList()
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+const editUserData=ref(null)
|
|
|
|
|
|
const showEditUser=ref(false)
|
|
const showEditUser=ref(false)
|
|
|
|
+function handleEditUser(data){
|
|
|
|
+ editUserData.value=data
|
|
|
|
+ showEditUser.value=true
|
|
|
|
+}
|
|
|
|
|
|
|
|
+const showMoveUser=ref(false)
|
|
|
|
+function handleMoveUser(data){
|
|
|
|
+ editUserData.value=data
|
|
|
|
+ showMoveUser.value=true
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+// 删除用户
|
|
|
|
+async function handleDelUser(item){
|
|
|
|
+ await $confirmDialog({
|
|
|
|
+ body:'删除后该用户将不能访问ETA社区,是否确认删除?',
|
|
|
|
+ confirmBtn:{default:'确认',theme:'danger'},
|
|
|
|
+ })
|
|
|
|
+ const res=await apiCustomerUser.deleteUser({
|
|
|
|
+ UserId:item.UserId
|
|
|
|
+ })
|
|
|
|
+ if(res.Ret!=200) return
|
|
|
|
+ MessagePlugin.success('删除成功')
|
|
|
|
+ handleRefreshList()
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+// 启用禁用客户
|
|
|
|
+async function handleEnableUserChange(item,type){
|
|
|
|
+ const res=await apiCustomerUser.enableChange({
|
|
|
|
+ UserId:item.UserId,
|
|
|
|
+ Enabled:type
|
|
|
|
+ })
|
|
|
|
+ if(res.Ret!=200) return
|
|
|
|
+ MessagePlugin.success('操作成功')
|
|
|
|
+ item.Enabled=type
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+// 导入用户
|
|
|
|
+const showConfirmImportUser=ref(false)
|
|
|
|
+const confirmImportUserData=ref([])
|
|
|
|
+async function handleImportUser(e){
|
|
|
|
+ confirmImportUserData.value=[]
|
|
|
|
+ const data=new FormData()
|
|
|
|
+ data.append("File", e.raw)
|
|
|
|
+ const res=await apiCustomerUser.getImportUserList(data)
|
|
|
|
+ if(res.Ret!==200) return
|
|
|
|
+ showConfirmImportUser.value=true
|
|
|
|
+ confirmImportUserData.value=res.Data.ValidUser||[]
|
|
|
|
+}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
</script>
|
|
@@ -61,12 +134,22 @@ const showEditUser=ref(false)
|
|
<template>
|
|
<template>
|
|
<div class="customer-userlist-page">
|
|
<div class="customer-userlist-page">
|
|
<div class="bg-white flex top-wrap">
|
|
<div class="bg-white flex top-wrap">
|
|
- <t-button style="width: 120px" @click="showEditUser=true">新增用户</t-button>
|
|
|
|
- <t-button style="width: 120px; margin-left: 10px">批量导入用户</t-button>
|
|
|
|
|
|
+ <t-button style="width: 120px" @click="showEditUser=true;editUserData=null">新增用户</t-button>
|
|
|
|
+ <t-upload
|
|
|
|
+ :request-method="handleImportUser"
|
|
|
|
+ theme="custom"
|
|
|
|
+ accept=".xls,.xlsx"
|
|
|
|
+ >
|
|
|
|
+ <t-button style="width: 120px; margin-left: 10px">批量导入用户</t-button>
|
|
|
|
+ </t-upload>
|
|
|
|
+
|
|
<t-button style="width: 120px; margin-left: 10px" theme="primary" variant="text">下载导入模板</t-button>
|
|
<t-button style="width: 120px; margin-left: 10px" theme="primary" variant="text">下载导入模板</t-button>
|
|
<t-input
|
|
<t-input
|
|
style="width: 310px; margin-left: auto"
|
|
style="width: 310px; margin-left: auto"
|
|
placeholder="姓名/手机号"
|
|
placeholder="姓名/手机号"
|
|
|
|
+ v-model="filterState.keyword"
|
|
|
|
+ clearable
|
|
|
|
+ @change="handleRefreshList"
|
|
>
|
|
>
|
|
<template #prefixIcon><SearchIcon /></template>
|
|
<template #prefixIcon><SearchIcon /></template>
|
|
</t-input>
|
|
</t-input>
|
|
@@ -78,11 +161,12 @@ const showEditUser=ref(false)
|
|
v-model:value="filterState.jobStatus"
|
|
v-model:value="filterState.jobStatus"
|
|
clearable
|
|
clearable
|
|
style="width: 240px"
|
|
style="width: 240px"
|
|
|
|
+ @change="handleRefreshList"
|
|
>
|
|
>
|
|
<t-option
|
|
<t-option
|
|
v-for="item in jobOpts"
|
|
v-for="item in jobOpts"
|
|
:key="item.value"
|
|
:key="item.value"
|
|
- :label="item.value"
|
|
|
|
|
|
+ :label="item.label"
|
|
:value="item.value"
|
|
:value="item.value"
|
|
/>
|
|
/>
|
|
</t-select>
|
|
</t-select>
|
|
@@ -91,30 +175,26 @@ const showEditUser=ref(false)
|
|
v-model:value="filterState.accountStatus"
|
|
v-model:value="filterState.accountStatus"
|
|
clearable
|
|
clearable
|
|
style="width: 240px"
|
|
style="width: 240px"
|
|
|
|
+ @change="handleRefreshList"
|
|
>
|
|
>
|
|
<t-option
|
|
<t-option
|
|
v-for="item in accountStatusOpts"
|
|
v-for="item in accountStatusOpts"
|
|
:key="item.value"
|
|
:key="item.value"
|
|
- :label="item.value"
|
|
|
|
|
|
+ :label="item.label"
|
|
:value="item.value"
|
|
:value="item.value"
|
|
/>
|
|
/>
|
|
</t-select>
|
|
</t-select>
|
|
- <t-select
|
|
|
|
- placeholder="客户名称"
|
|
|
|
- v-model:value="filterState.customer"
|
|
|
|
- clearable
|
|
|
|
|
|
+ <select-business
|
|
|
|
+ placeholder="客户名称"
|
|
|
|
+ clearable
|
|
|
|
+ filterable
|
|
|
|
+ v-model="filterState.customer"
|
|
style="width: 240px"
|
|
style="width: 240px"
|
|
- >
|
|
|
|
- <!-- <t-option
|
|
|
|
- v-for="item in jobOpts"
|
|
|
|
- :key="item.value"
|
|
|
|
- :label="item.value"
|
|
|
|
- :value="item.value"
|
|
|
|
- /> -->
|
|
|
|
- </t-select>
|
|
|
|
|
|
+ @change="handleRefreshList"
|
|
|
|
+ />
|
|
</div>
|
|
</div>
|
|
<t-table
|
|
<t-table
|
|
- rowKey="id"
|
|
|
|
|
|
+ rowKey="UserId"
|
|
:data="tableData"
|
|
:data="tableData"
|
|
:columns="columns"
|
|
:columns="columns"
|
|
bordered
|
|
bordered
|
|
@@ -122,20 +202,40 @@ const showEditUser=ref(false)
|
|
show-header
|
|
show-header
|
|
resizable
|
|
resizable
|
|
>
|
|
>
|
|
- <template #cellEmptyContent="{ col }">
|
|
|
|
- <div v-if="col.colKey === 'opt'">
|
|
|
|
- <t-button size="small" variant="text" theme="primary">编辑</t-button>
|
|
|
|
- <t-button size="small" variant="text" theme="primary">启用</t-button>
|
|
|
|
- <t-button size="small" variant="text" theme="danger">禁用</t-button>
|
|
|
|
- <t-button size="small" variant="text" theme="primary">移动</t-button>
|
|
|
|
- <t-button size="small" variant="text" theme="danger">删除</t-button>
|
|
|
|
- </div>
|
|
|
|
|
|
+ <template #Mobile="{ row }">
|
|
|
|
+ <span>{{row.CountryCode}}-{{row.Mobile}}</span>
|
|
|
|
+ </template>
|
|
|
|
+ <template #DepartmentName="{ row }">
|
|
|
|
+ <span>{{row.Position}}-{{row.DepartmentName}}</span>
|
|
|
|
+ </template>
|
|
|
|
+ <template #PositionStatus="{ row }">
|
|
|
|
+ <t-tag
|
|
|
|
+ :theme="row.PositionStatus?'success':'danger'"
|
|
|
|
+ variant="light"
|
|
|
|
+ >{{row.PositionStatus?'在职':'离职'}}</t-tag>
|
|
|
|
+ </template>
|
|
|
|
+ <template #Enabled="{ row }">
|
|
|
|
+ <t-tag
|
|
|
|
+ :theme="row.Enabled?'success':'danger'"
|
|
|
|
+ variant="light"
|
|
|
|
+ >{{row.PositionStatus?'已启用':'已禁用'}}</t-tag>
|
|
|
|
+ </template>
|
|
|
|
+ <template #opt="{ row }">
|
|
|
|
+ <t-button size="small" variant="text" theme="primary" @click="handleEditUser(row)">编辑</t-button>
|
|
|
|
+ <t-button size="small" variant="text" theme="danger" v-if="row.Enabled" @click="handleEnableUserChange(row,0)">禁用</t-button>
|
|
|
|
+ <t-button size="small" variant="text" theme="primary" v-else @click="handleEnableUserChange(row,1)">启用</t-button>
|
|
|
|
+ <t-button size="small" variant="text" theme="primary" @click="handleMoveUser(row)">移动</t-button>
|
|
|
|
+ <t-button size="small" variant="text" theme="danger" @click="handleDelUser(row)">删除</t-button>
|
|
</template>
|
|
</template>
|
|
</t-table>
|
|
</t-table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 新增\编辑用户 -->
|
|
<!-- 新增\编辑用户 -->
|
|
- <EditUser v-model:show="showEditUser"/>
|
|
|
|
|
|
+ <EditUser v-model:show="showEditUser" :data="editUserData" @change="handleRefreshList"/>
|
|
|
|
+ <!-- 移动用户 -->
|
|
|
|
+ <MoveUser v-model:show="showMoveUser" :data="editUserData" @change="handleRefreshList"/>
|
|
|
|
+ <!-- 确认批量导入的用户 -->
|
|
|
|
+ <ConfirmImportUser v-model:show="showConfirmImportUser" :data="confirmImportUserData"/>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|