rev:界面优化和新增点位角度

This commit is contained in:
2023-12-14 14:23:50 +08:00
parent 053751c58f
commit d5f9fc472b
31 changed files with 1088 additions and 187 deletions

View File

@@ -59,7 +59,7 @@
size="mini"
:placeholder="$t('user.table_title.State')"
class="filter-item"
style="width: 90px"
style="width: 200px"
@change="crud.toQuery"
>
<el-option
@@ -82,45 +82,45 @@
:before-close="crud.cancelCU"
:visible.sync="crud.status.cu > 0"
:title="crud.status.title"
width="700px"
width="800px"
>
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="mini" label-width="100px">
<el-form-item label="用户名" prop="username">
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="mini" label-width="150px">
<el-form-item :label="$t('user.table_value.Username')" prop="username">
<el-input v-model="form.username" style="width: 200px;" />
</el-form-item>
<el-form-item label="电话" prop="phone">
<el-form-item :label="$t('user.table_value.Phone')" prop="phone">
<el-input v-model.number="form.phone" style="width: 200px;" />
</el-form-item>
<el-form-item label="姓名" prop="preson_name">
<el-form-item :label="$t('user.table_value.Name')" prop="preson_name">
<el-input v-model="form.person_name" style="width: 200px;" />
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-form-item :label="$t('user.table_value.Mailbox')" prop="email">
<el-input v-model="form.email" style="width: 200px;" />
</el-form-item>
<br v-if="!crud.status.edit">
<el-form-item v-if="crud.status.add" label="部门" prop="depts" :rules="[{ required: true, message: '请选择部门', trigger: 'change' }]">
<el-form-item v-if="crud.status.add" :label="$t('user.table_value.Department')" prop="depts" :rules="[{ required: true, message: '请选择部门', trigger: 'change' }]">
<treeselect
v-model="form.depts"
:load-options="loadDepts"
:options="deptDatas"
style="width: 370px;"
style="width: 200px;"
:multiple="true"
:flat="true"
:normalizer="normalizer"
placeholder="选择部门类目"
:placeholder="$t('user.table_value.Select_Sector_Categories')"
/>
</el-form-item>
<br v-if="!crud.status.add">
<el-form-item v-if="crud.status.add" label="密码" prop="password">
<el-form-item v-if="crud.status.add" :label="$t('user.table_value.Password')" prop="password">
<el-input v-model="form.password" style="width: 200px;" show-password auto-complete="new-password" />
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="form.gender" style="width: 178px">
<el-radio label="">男</el-radio>
<el-radio label="">女</el-radio>
<el-form-item :label="$t('user.table_value.Sex')">
<el-radio-group v-model="form.gender" style="width: 200px">
<el-radio :label="$t('user.table_value.boy')">{{ $t('user.table_value.boy') }}</el-radio>
<el-radio :label="$t('user.table_value.girl')">{{ $t('user.table_value.girl') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="状态" prop="is_uesd">
<el-form-item :label="$t('user.table_value.State')" prop="is_uesd">
<el-switch
v-model="form.is_used"
active-color="#409EFF"
@@ -128,14 +128,14 @@
/>
</el-form-item>
<br v-if="!crud.status.edit">
<el-form-item v-if="crud.status.add" style="margin-bottom: 0;" label="角色" prop="roles">
<el-form-item v-if="crud.status.add" style="margin-bottom: 0;" :label="$t('role.table_value.Role')" prop="roles">
<el-select
v-model="roleDatas"
style="width: 512px"
style="width: 200px"
multiple
active-value="1"
inactive-value="0"
placeholder="请选择"
:placeholder="$t('common.please')"
@remove-tag="deleteTag"
@change="changeRole"
>
@@ -150,8 +150,8 @@
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="text" @click="crud.cancelCU">取消</el-button>
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
<el-button type="text" @click="crud.cancelCU">{{ $t('common.Cancel') }}</el-button>
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">{{ $t('common.Confirm') }}</el-button>
</div>
</el-dialog>
<!--表格渲染-->
@@ -171,42 +171,42 @@
/>
<el-table-column prop="gender" :label="$t('user.table_value.Sex')" :min-width="flexWidth('gender',crud.data,$t('user.table_value.Sex'))" />
<el-table-column prop="phone" :label="$t('user.table_value.Phone')" :min-width="flexWidth('phone',crud.data,$t('user.table_value.Phone'))" />
<el-table-column prop="email" label="邮箱" :min-width="flexWidth('email',crud.data,'邮箱')" />
<el-table-column show-overflow-tooltip prop="depts" label="部门" :min-width="flexWidth('depts',crud.data,'邮箱')">
<el-table-column prop="email" :label="$t('user.table_value.Mailbox')" :min-width="flexWidth('email',crud.data,$t('user.table_value.Mailbox'))" />
<el-table-column show-overflow-tooltip prop="depts" :label="$t('user.table_value.Department')" :min-width="flexWidth('depts',crud.data,$t('user.table_value.Department'))">
<template slot-scope="scope">
<span v-for="(item, index) in scope.row.depts" :key="index">
{{ item.name }}<span v-if="index !== scope.row.depts.length - 1">、</span>
</span>
</template>
</el-table-column>
<el-table-column label="状态" align="center" prop="enabled">
<el-table-column :label="$t('user.table_value.State')" align="center" prop="enabled" :min-width="flexWidth('enabled',crud.data,$t('user.table_value.State'))">
<template slot-scope="scope">
<span :style="{'color': caseStatusColorFilter(scope.row.is_used)}">{{ enabledTypeOptions.find(item => {return item.key == scope.row.is_used}).display_name }}</span>
</template>
</el-table-column>
<el-table-column prop="create_time" label="创建日期" :min-width="flexWidth('create_time',crud.data,'创建日期')" />
<el-table-column prop="create_time" :label="$t('user.table_value.create_Date')" :min-width="flexWidth('create_time',crud.data,$t('user.table_value.create_Date'))" />
<el-table-column
label="操作"
:label="$t('user.table_value.Operate')"
fixed="right"
align="center"
width="200"
>
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit" @click="crud.toEdit(scope.row)">修改</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handdeleted(scope.row)">删除</el-button>
<el-button size="mini" type="text" icon="el-icon-edit" @click="crud.toEdit(scope.row)">{{ $t('user.other.Revise') }}</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handdeleted(scope.row)">{{ $t('user.other.Delete') }}</el-button>
<el-dropdown v-hasPermi="['system:user:resetPwd', 'system:user:edit']" size="mini">
<el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
<el-button size="mini" type="text" icon="el-icon-d-arrow-right">{{ $t('user.other.More') }}</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-refresh-right"><span @click="resetPassword(scope.row)">重置密码</span></el-dropdown-item>
<el-dropdown-item icon="el-icon-refresh-right"><span @click="resetPassword(scope.row)">{{ $t('user.other.Reset') }}</span></el-dropdown-item>
<el-dropdown-item icon="el-icon-key">
<span @click="openDeptDrawer(scope.row)">部门权限</span>
<span @click="openDeptDrawer(scope.row)">{{ $t('user.other.Department_permissions') }}</span>
</el-dropdown-item>
<el-dropdown-item icon="el-icon-key">
<span @click="openDataDialog(scope.row)">数据权限</span>
<span @click="openDataDialog(scope.row)">{{ $t('user.other.Data_Permissions') }}</span>
</el-dropdown-item>
<el-dropdown-item icon="el-icon-lock"><span @click="changeEnabled(scope.row)">{{ enabledTypeOptions.find(item => {return item.key !== scope.row.is_used}).display_name }}账号</span></el-dropdown-item>
<el-dropdown-item icon="el-icon-lock"><span @click="changeEnabled(scope.row)">{{ enabledTypeOptions.find(item => {return item.key !== scope.row.is_used}).display_name }}{{ $t('user.other.Lock_account') }}</span></el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-check">
<span @click="openRoleDrawer(scope.row)">分配角色</span>
<span @click="openRoleDrawer(scope.row)">{{ $t('user.other.Assign_roles') }}</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
@@ -356,6 +356,7 @@ import { mapGetters } from 'vuex'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import RelevanceUserDialog from '@/views/system/user/dialog/relevanceUserDialog'
import RelevanceDeptDialog from '@/views/system/user/dialog/relevanceDeptDialog'
import i18n from '@/i18n'
let userRoles = []
const defaultForm = {
@@ -374,7 +375,7 @@ export default {
name: 'User',
components: { RelevanceDeptDialog, RelevanceUserDialog, Treeselect, crudOperation, rrOperation, udOperation, pagination },
cruds() {
return CRUD({ title: '用户', idField: 'user_id', url: 'api/users', crudMethod: { ...crudUser }})
return CRUD({ title: i18n.t('user.table_value.User'), idField: 'user_id', url: 'api/users', crudMethod: { ...crudUser }})
},
mixins: [presenter(), header(), form(defaultForm), crud()],
// 数据字典
@@ -384,7 +385,7 @@ export default {
height: document.documentElement.clientHeight - 180 + 'px;',
deptName: '', depts: [], deptDatas: [], level: 3, roles: [],
roleDatas: [], // 多选时使用
defaultProps: { children: 'children', label: 'name' },
defaultProps: { children: 'children', label: this.$langPre.computedProp('name') },
deptProps: { children: 'children', label: 'name' },
permission: {
add: ['admin', 'user:add'],
@@ -392,8 +393,8 @@ export default {
del: ['admin', 'user:del']
},
enabledTypeOptions: [
{ key: true, display_name: '激活' },
{ key: false, display_name: '锁定' }
{ key: true, display_name: i18n.t('user.table_value.activation') },
{ key: false, display_name: i18n.t('user.table_value.lock') }
],
rules: {
username: [