|
|
@@ -3,12 +3,11 @@
|
|
|
<div class="page_search">
|
|
|
<div class="search_content">
|
|
|
<div class="content_left">
|
|
|
- <el-button class="button_background">启用用户</el-button>
|
|
|
- <el-button class="button_refresh">禁用用户</el-button>
|
|
|
+ <TabSearch tabType="box" :tabList="tabList" :defaultTabKey="defaultUserType" />
|
|
|
<FormSearchGroup :searchList="formSearhList"></FormSearchGroup>
|
|
|
</div>
|
|
|
<div class="content_right">
|
|
|
- <el-button class="button_border">新增用户</el-button>
|
|
|
+ <el-button class="button_border" @click="OpenUserFormDialog()">新增用户</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -19,8 +18,67 @@
|
|
|
<template #num="{row,currentIndex}">
|
|
|
{{ (currentIndex - 1 ) * pageSize + pageNum }}
|
|
|
</template>
|
|
|
+
|
|
|
+ <template #gender="{row}">
|
|
|
+ {{row.gender === '0' ? '女' : '男' }}
|
|
|
+ </template>
|
|
|
+ <template #status="{row}">
|
|
|
+ <TableRowStatus :statusMsg="statusMsg" :useStatus="row.status" />
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #publicSeaFollowRecord="{row}">
|
|
|
+ <el-switch
|
|
|
+ :model-value="Boolean(row.publicSeaFollowRecord)"
|
|
|
+ @change="(val)=>HandleCardSwitchOnOff({id:row.id,onOffVal:val})"
|
|
|
+ style="--el-switch-on-color: #2e64fa; --el-switch-off-color: #bbbbbb"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #historyFollowRecord="{row}">
|
|
|
+ <el-switch
|
|
|
+ :model-value="Boolean(row.historyFollowRecord)"
|
|
|
+ @change="(val)=>HandleCardSwitchOnOff({id:row.id,onOffVal:val})"
|
|
|
+ style="--el-switch-on-color: #2e64fa; --el-switch-off-color: #bbbbbb"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #operation="{row}">
|
|
|
+ <div class="table_row_option">
|
|
|
+ <span class="option_button_editor" @click="OpenUserFormDialog(row)">编辑</span>
|
|
|
+ <span class="option_button_editor" @click="OpenresetPasswordFormDialog(row)">重置密码</span>
|
|
|
+ <span class="option_button_editor">禁用</span>
|
|
|
+ <span class="el_button_delete">删除</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
</Table>
|
|
|
</div>
|
|
|
+
|
|
|
+ <!-- 新增用户 弹窗 -->
|
|
|
+ <FormDialog
|
|
|
+ class="user_form_dialog"
|
|
|
+ style="flex-grow: 0;" width="482px"
|
|
|
+ v-if="userFormDialogVisible"
|
|
|
+ :formItemList="userFormItemList" :defaultFormData="defaultUserFormData"
|
|
|
+ :title="userFormDialogTitle"
|
|
|
+ :submitLoading="userFormDialogSubmiting"
|
|
|
+ :visible="userFormDialogVisible"
|
|
|
+ @close="CloseUserFormDialog"
|
|
|
+ @confirm="HandleUserFormDialogConfirm">
|
|
|
+ </FormDialog>
|
|
|
+
|
|
|
+ <!-- 重置密码弹窗 -->
|
|
|
+ <FormDialog
|
|
|
+ class="reset_password_form_dialog"
|
|
|
+ style="flex-grow: 0;" width="500px"
|
|
|
+ v-if="resetPasswordFormDialogVisible"
|
|
|
+ :formItemList="resetPasswordFormItemList" :defaultFormData="defaultResetPasswordFormData"
|
|
|
+ title="重置密码"
|
|
|
+ :submitLoading="resetPasswordFormDialogSubmiting"
|
|
|
+ :visible="resetPasswordFormDialogVisible"
|
|
|
+ @close="CloseResetPasswordFormDialog"
|
|
|
+ @confirm="HandleresetPasswordFormDialogConfirm">
|
|
|
+ </FormDialog>
|
|
|
+
|
|
|
</template>
|
|
|
|
|
|
|
|
|
@@ -29,31 +87,158 @@ import { ref } from 'vue';
|
|
|
import FormSearchGroup from '@/baseComponents/FormSearchGroup.vue';
|
|
|
import {formSearhList} from './formSearch'
|
|
|
import Table from '@/baseComponents/Table.vue';
|
|
|
-
|
|
|
import {tableColumns} from './table'
|
|
|
+import TableRowStatus from '@/baseComponents/TableRowStatus.vue';
|
|
|
+import TabSearch from '@/baseComponents/TabSearch.vue';
|
|
|
+import {tabList} from './tabSearch'
|
|
|
+import FormDialog from '@/baseComponents/FormDialog.vue';
|
|
|
+import {userFormItemList, resetPasswordFormItemList} from './formDialog'
|
|
|
|
|
|
+/**
|
|
|
+ * 1. 表格 有关数据
|
|
|
+ */
|
|
|
const pageNum = ref(1)
|
|
|
const pageSize = ref(20)
|
|
|
const totalNum = ref(0)
|
|
|
|
|
|
const userTableData = ref([
|
|
|
{
|
|
|
+ id:'1',
|
|
|
account:'xxx',
|
|
|
name:'xxx',
|
|
|
- gender:'xxx',
|
|
|
+ gender:'1',
|
|
|
phone:'xxx',
|
|
|
- status:'xxx',
|
|
|
- publicFollow:'xxx',
|
|
|
- historyFollow:'xxx',
|
|
|
- holdLimit:'xxx',
|
|
|
- dailyReturnLimit:'xxx',
|
|
|
- returnDays:'xxx',
|
|
|
- action:'xxx',
|
|
|
- }
|
|
|
+ status:0,
|
|
|
+ publicSeaFollowRecord:true,
|
|
|
+ historyFollowRecord:false,
|
|
|
+
|
|
|
+ customerHoldLimit:40,
|
|
|
+ dailyManualReturnLimit:16,
|
|
|
+ noFollowAutoReturnDays:10,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:'2',
|
|
|
+ account:'xxx',
|
|
|
+ name:'xxx',
|
|
|
+ gender:'0',
|
|
|
+ phone:'xxx',
|
|
|
+ status:1,
|
|
|
+ publicSeaFollowRecord:false,
|
|
|
+ historyFollowRecord:true,
|
|
|
+
|
|
|
+
|
|
|
+ customerHoldLimit:50,
|
|
|
+ dailyManualReturnLimit:20,
|
|
|
+ noFollowAutoReturnDays:30,
|
|
|
+ },
|
|
|
+])
|
|
|
+
|
|
|
+const statusMsg = ref([
|
|
|
+ {
|
|
|
+ statusFlag:0,
|
|
|
+ title:'禁用',
|
|
|
+ themeClass: 'not_included_icon',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ statusFlag:1,
|
|
|
+ title:'启用',
|
|
|
+ themeClass: 'normal_icon',
|
|
|
+ },
|
|
|
])
|
|
|
+// 默认展示的用户类型
|
|
|
+const defaultUserType = ref('onlinePeople')
|
|
|
+
|
|
|
+/**
|
|
|
+ * 2. 新增用户弹窗相关数据
|
|
|
+ */
|
|
|
+const userFormDialogVisible = ref(false)
|
|
|
+const userFormDialogSubmiting = ref(false)
|
|
|
+const userFormDialogTitle = ref('')
|
|
|
+const defaultUserFormData = ref({
|
|
|
+ customerHoldLimit:100,
|
|
|
+ dailyManualReturnLimit:15,
|
|
|
+ noFollowAutoReturnDays:15,
|
|
|
+})
|
|
|
+// 打开新增/修改用户弹窗
|
|
|
+const OpenUserFormDialog = (row?:any)=>{
|
|
|
+ if(row?.id){
|
|
|
+ userFormDialogTitle.value = '修改用户'
|
|
|
+ defaultUserFormData.value = {...row}
|
|
|
+ console.log('当前赋值的form表单值',defaultUserFormData.value)
|
|
|
+ }else{
|
|
|
+ userFormDialogTitle.value = '新增用户'
|
|
|
+ }
|
|
|
+ userFormDialogVisible.value = true
|
|
|
+}
|
|
|
+// 关闭新增/修改用户弹窗
|
|
|
+const CloseUserFormDialog = ()=>{
|
|
|
+ userFormDialogVisible.value = false
|
|
|
+ defaultUserFormData.value = {
|
|
|
+ customerHoldLimit:100,
|
|
|
+ dailyManualReturnLimit:15,
|
|
|
+ noFollowAutoReturnDays:15,
|
|
|
+ }
|
|
|
+}
|
|
|
+// 保存新增/修改用户弹窗
|
|
|
+const HandleUserFormDialogConfirm = ()=>{
|
|
|
+ CloseUserFormDialog()
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 3. 重置密码弹窗相关数据
|
|
|
+ */
|
|
|
+const resetPasswordFormDialogVisible = ref(false)
|
|
|
+const resetPasswordFormDialogSubmiting = ref(false)
|
|
|
+const defaultResetPasswordFormData = ref({})
|
|
|
+// 打开 重置密码弹窗
|
|
|
+const OpenresetPasswordFormDialog = (row?:any)=>{
|
|
|
+ defaultResetPasswordFormData.value = {...row}
|
|
|
+ resetPasswordFormDialogVisible.value = true
|
|
|
+}
|
|
|
+// 关闭 重置密码弹窗
|
|
|
+const CloseResetPasswordFormDialog = ()=>{
|
|
|
+ resetPasswordFormDialogVisible.value = false
|
|
|
+ defaultResetPasswordFormData.value = {}
|
|
|
+}
|
|
|
+// 保存 重置密码弹窗
|
|
|
+const HandleresetPasswordFormDialogConfirm = ()=>{
|
|
|
+ CloseResetPasswordFormDialog()
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
+.search_content{
|
|
|
+ :deep(.box_tab){
|
|
|
+ gap:10px;
|
|
|
+ .selected + span{
|
|
|
+ border-left: 1px solid #dcdfe6;
|
|
|
+ }
|
|
|
+ >span:nth-child(n):not(:last-child):not(.selected){
|
|
|
+ border-right: 1px solid #dcdfe6;
|
|
|
+ }
|
|
|
+ > span{
|
|
|
+ border-radius: 4px !important ;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.user_form_dialog{
|
|
|
+ :deep(.el-dialog__body){
|
|
|
+ min-height: 520px !important;
|
|
|
+ max-height: 520px !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.reset_password_form_dialog{
|
|
|
+ :deep(.el-dialog__body){
|
|
|
+ min-height: 210px !important;
|
|
|
+ max-height: 210px !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
</style>
|
lm