mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-11-03 13:44:47 +08:00
chore: update the latest version of element-plus
This commit is contained in:
@@ -56,7 +56,12 @@ function changeDirection(val) {
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>无缝滚动示例</span>
|
||||
<el-button class="button" type="text" @click="changeDirection('top')">
|
||||
<el-button
|
||||
class="button"
|
||||
link
|
||||
type="primary"
|
||||
@click="changeDirection('top')"
|
||||
>
|
||||
<span
|
||||
:style="{ color: classOption.direction === 'top' ? 'red' : '' }"
|
||||
>
|
||||
@@ -65,7 +70,8 @@ function changeDirection(val) {
|
||||
</el-button>
|
||||
<el-button
|
||||
class="button"
|
||||
type="text"
|
||||
link
|
||||
type="primary"
|
||||
@click="changeDirection('bottom')"
|
||||
>
|
||||
<span
|
||||
@@ -78,7 +84,8 @@ function changeDirection(val) {
|
||||
</el-button>
|
||||
<el-button
|
||||
class="button"
|
||||
type="text"
|
||||
link
|
||||
type="primary"
|
||||
@click="changeDirection('left')"
|
||||
>
|
||||
<span
|
||||
@@ -89,7 +96,8 @@ function changeDirection(val) {
|
||||
</el-button>
|
||||
<el-button
|
||||
class="button"
|
||||
type="text"
|
||||
link
|
||||
type="primary"
|
||||
@click="changeDirection('right')"
|
||||
>
|
||||
<span
|
||||
|
||||
@@ -143,7 +143,7 @@ function onBack() {
|
||||
<Motion :delay="300">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="checked"> 我已仔细阅读并接受 </el-checkbox>
|
||||
<el-button type="text"> 《隐私政策》 </el-button>
|
||||
<el-button link type="primary"> 《隐私政策》 </el-button>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
|
||||
@@ -134,7 +134,8 @@ watch(imgCode, value => {
|
||||
<div class="w-full h-20px flex justify-between items-center">
|
||||
<el-checkbox v-model="checked">记住密码</el-checkbox>
|
||||
<el-button
|
||||
type="text"
|
||||
link
|
||||
type="primary"
|
||||
@click="useUserStoreHook().SET_CURRENTPAGE(4)"
|
||||
>
|
||||
忘记密码?
|
||||
|
||||
@@ -161,7 +161,8 @@ onMounted(() => {
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
type="text"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
@click="handleUpdate(scope.row)"
|
||||
:icon="useRenderIcon('edits')"
|
||||
@@ -172,7 +173,8 @@ onMounted(() => {
|
||||
<template #reference>
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
type="text"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon('delete')"
|
||||
@click="handleDelete(scope.row)"
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { VxeTableEvents } from "vxe-table";
|
||||
import { templateRef } from "@vueuse/core";
|
||||
import { ref, reactive } from "vue";
|
||||
import { type Direction } from "element-plus";
|
||||
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
|
||||
import { type VxeTableEvents, type VxeTableInstance } from "vxe-table";
|
||||
|
||||
interface Props {
|
||||
drawer: boolean;
|
||||
drawTitle?: string;
|
||||
direction?: string;
|
||||
direction?: Direction;
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
@@ -22,7 +23,7 @@ const emit = defineEmits<{
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const xTable = templateRef<any>("xTable", null);
|
||||
const xTable = ref({} as VxeTableInstance);
|
||||
|
||||
const configData = reactive({
|
||||
tableData: [
|
||||
@@ -72,7 +73,7 @@ const changeAllEvent = () => {
|
||||
const checkboxChangeEvent: VxeTableEvents.CheckboxChange = ({ records }) => {
|
||||
const $table = xTable.value;
|
||||
configData.isAllChecked = $table.isAllCheckboxChecked();
|
||||
configData.isIndeterminate = $table.isCheckboxIndeterminate();
|
||||
configData.isIndeterminate = $table.isAllCheckboxIndeterminate();
|
||||
configData.selectRecords = records;
|
||||
};
|
||||
</script>
|
||||
@@ -85,11 +86,11 @@ const checkboxChangeEvent: VxeTableEvents.CheckboxChange = ({ records }) => {
|
||||
:direction="direction"
|
||||
:before-close="handleClose"
|
||||
destroy-on-close
|
||||
size="640px"
|
||||
size="680px"
|
||||
>
|
||||
<el-divider />
|
||||
<!-- 列表 -->
|
||||
<div class="list">
|
||||
<div class="p-2">
|
||||
<vxe-table
|
||||
ref="xTable"
|
||||
border
|
||||
@@ -102,20 +103,22 @@ const checkboxChangeEvent: VxeTableEvents.CheckboxChange = ({ records }) => {
|
||||
<vxe-table-column field="dataval" title="数据值" />
|
||||
<vxe-table-column title="操作" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<vxe-button
|
||||
type="text"
|
||||
icon="fa fa-pencil-square-o"
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
:icon="useRenderIcon('edits')"
|
||||
@click="editConfig(row)"
|
||||
>
|
||||
编辑
|
||||
</vxe-button>
|
||||
<vxe-button
|
||||
type="text"
|
||||
icon="fa fa-trash-o"
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
:icon="useRenderIcon('delete')"
|
||||
@click="delConfig(row)"
|
||||
>
|
||||
删除
|
||||
</vxe-button>
|
||||
</el-button>
|
||||
</template>
|
||||
</vxe-table-column>
|
||||
</vxe-table>
|
||||
@@ -136,16 +139,16 @@ const checkboxChangeEvent: VxeTableEvents.CheckboxChange = ({ records }) => {
|
||||
]"
|
||||
>
|
||||
<template #left>
|
||||
<span class="page-left">
|
||||
<span class="absolute left-3 flex items-center">
|
||||
<vxe-checkbox
|
||||
v-model="configData.isAllChecked"
|
||||
:indeterminate="configData.isIndeterminate"
|
||||
@change="changeAllEvent"
|
||||
/>
|
||||
<span class="select-count">
|
||||
已选中{{ configData.selectRecords.length }}条
|
||||
</span>
|
||||
<vxe-button size="small">{{ t("buttons.hsdelete") }}</vxe-button>
|
||||
<p>已选中{{ configData.selectRecords.length }}条</p>
|
||||
<el-button link type="danger" class="ml-1">
|
||||
{{ t("buttons.hsdelete") }}
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</vxe-pager>
|
||||
@@ -155,22 +158,6 @@ const checkboxChangeEvent: VxeTableEvents.CheckboxChange = ({ records }) => {
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.list {
|
||||
padding: 10px;
|
||||
|
||||
.page-left {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.select-count) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
:deep(.el-drawer__header) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@@ -3,15 +3,18 @@ import XEUtils from "xe-utils";
|
||||
import Config from "./config.vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { cloneDeep } from "lodash-unified";
|
||||
import { templateRef } from "@vueuse/core";
|
||||
import { reactive, ref, unref, nextTick } from "vue";
|
||||
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
|
||||
import { useCopyToClipboard } from "/@/utils/useCopyToClipboard";
|
||||
import {
|
||||
VXETable,
|
||||
VxeTableInstance,
|
||||
VxeTableEvents,
|
||||
VxeFormPropTypes
|
||||
type TablePublicMethods,
|
||||
type VxeTableInstance,
|
||||
type VxeFormPropTypes,
|
||||
type VxeTableEvents,
|
||||
type FormMethods
|
||||
} from "vxe-table";
|
||||
|
||||
type onEditNRow = {
|
||||
name: string;
|
||||
model: string;
|
||||
@@ -91,7 +94,8 @@ const dictData = reactive({
|
||||
|
||||
let originData = cloneDeep(dictData.tableData);
|
||||
|
||||
const xTree = templateRef<HTMLElement | any>("xTree", null);
|
||||
const xTree = ref<TablePublicMethods>();
|
||||
const xForm = ref<FormMethods>();
|
||||
|
||||
const handleSearch = () => {
|
||||
const filterName = XEUtils.toValueString(dictData.filterName).trim();
|
||||
@@ -201,6 +205,18 @@ function onDeploy(value?: object) {
|
||||
function handleClose() {
|
||||
drawer.value = false;
|
||||
}
|
||||
|
||||
function onExpand() {
|
||||
xTree.value.setAllTreeExpand(true);
|
||||
}
|
||||
|
||||
function onUnExpand() {
|
||||
xTree.value.clearTreeExpand();
|
||||
}
|
||||
|
||||
function onHide() {
|
||||
xForm.value.reset();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -215,23 +231,29 @@ function handleClose() {
|
||||
/>
|
||||
</template>
|
||||
<template #tools>
|
||||
<vxe-button icon="fa fa-plus-square-o" status="primary" @click="onAdd">
|
||||
{{ t("buttons.hsadd") }}
|
||||
</vxe-button>
|
||||
<vxe-button
|
||||
icon="fa fa-folder-open-o"
|
||||
status="primary"
|
||||
@click="$refs.xTree.setAllTreeExpand(true)"
|
||||
>
|
||||
{{ t("buttons.hsexpendAll") }}
|
||||
</vxe-button>
|
||||
<vxe-button
|
||||
icon="fa fa-folder-o"
|
||||
status="primary"
|
||||
@click="$refs.xTree.clearTreeExpand()"
|
||||
>
|
||||
{{ t("buttons.hscollapseAll") }}
|
||||
</vxe-button>
|
||||
<el-button-group>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon('fa:plus-square-o', { online: true })"
|
||||
@click="onAdd"
|
||||
>
|
||||
{{ t("buttons.hsadd") }}
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon('fa:folder-open-o', { online: true })"
|
||||
@click="onExpand"
|
||||
>
|
||||
{{ t("buttons.hsexpendAll") }}
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon('fa:folder-o', { online: true })"
|
||||
@click="onUnExpand"
|
||||
>
|
||||
{{ t("buttons.hscollapseAll") }}
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
</template>
|
||||
</vxe-toolbar>
|
||||
|
||||
@@ -262,31 +284,39 @@ function handleClose() {
|
||||
</vxe-table-column>
|
||||
<vxe-table-column title="操作" width="330" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<vxe-button
|
||||
type="text"
|
||||
icon="fa fa-pencil-square-o"
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
:icon="useRenderIcon('edits')"
|
||||
@click="onEdit(row)"
|
||||
>
|
||||
编辑
|
||||
</vxe-button>
|
||||
<vxe-button
|
||||
type="text"
|
||||
icon="fa fa-plus-square-o"
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
:icon="useRenderIcon('fa:plus-square-o', { online: true })"
|
||||
@click="onAddChild(row)"
|
||||
>
|
||||
新增子类型
|
||||
</vxe-button>
|
||||
<vxe-button
|
||||
</el-button>
|
||||
<el-button
|
||||
v-show="row.model"
|
||||
type="text"
|
||||
icon="fa fa-cog"
|
||||
link
|
||||
type="primary"
|
||||
:icon="useRenderIcon('fa:cog', { online: true })"
|
||||
@click="onDeploy(row)"
|
||||
>
|
||||
字典配置
|
||||
</vxe-button>
|
||||
<vxe-button type="text" icon="fa fa-trash-o" @click="confirmEvent">
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
:icon="useRenderIcon('delete')"
|
||||
@click="confirmEvent"
|
||||
>
|
||||
删除
|
||||
</vxe-button>
|
||||
</el-button>
|
||||
</template>
|
||||
</vxe-table-column>
|
||||
</vxe-table>
|
||||
@@ -298,7 +328,7 @@ function handleClose() {
|
||||
v-model="dictData.showEdit"
|
||||
:title="dictData.selectRow ? '编辑' : '新增'"
|
||||
:loading="dictData.submitLoading"
|
||||
@hide="$refs.xForm.reset()"
|
||||
@hide="onHide"
|
||||
>
|
||||
<template #default>
|
||||
<vxe-form
|
||||
|
||||
@@ -228,7 +228,8 @@ onMounted(() => {
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
type="text"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
@click="handleUpdate(scope.row)"
|
||||
:icon="useRenderIcon('edits')"
|
||||
@@ -239,7 +240,8 @@ onMounted(() => {
|
||||
<template #reference>
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
type="text"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon('delete')"
|
||||
@click="handleDelete(scope.row)"
|
||||
@@ -251,7 +253,8 @@ onMounted(() => {
|
||||
<el-dropdown>
|
||||
<el-button
|
||||
class="ml-3"
|
||||
type="text"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
@click="handleUpdate(scope.row)"
|
||||
:icon="useRenderIcon('more')"
|
||||
@@ -261,7 +264,8 @@ onMounted(() => {
|
||||
<el-dropdown-item>
|
||||
<el-button
|
||||
class="reset-margin !h-20px !text-gray-500"
|
||||
type="text"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon('menu')"
|
||||
>
|
||||
@@ -271,7 +275,8 @@ onMounted(() => {
|
||||
<el-dropdown-item>
|
||||
<el-button
|
||||
class="reset-margin !h-20px !text-gray-500"
|
||||
type="text"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon('database')"
|
||||
>
|
||||
|
||||
@@ -252,7 +252,8 @@ onMounted(() => {
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
type="text"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
@click="handleUpdate(scope.row)"
|
||||
:icon="useRenderIcon('edits')"
|
||||
@@ -263,7 +264,8 @@ onMounted(() => {
|
||||
<template #reference>
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
type="text"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon('delete')"
|
||||
@click="handleDelete(scope.row)"
|
||||
@@ -275,7 +277,8 @@ onMounted(() => {
|
||||
<el-dropdown>
|
||||
<el-button
|
||||
class="ml-3"
|
||||
type="text"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
@click="handleUpdate(scope.row)"
|
||||
:icon="useRenderIcon('more')"
|
||||
@@ -285,7 +288,8 @@ onMounted(() => {
|
||||
<el-dropdown-item>
|
||||
<el-button
|
||||
class="reset-margin !h-20px !text-gray-500"
|
||||
type="text"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon('password')"
|
||||
>
|
||||
@@ -295,7 +299,8 @@ onMounted(() => {
|
||||
<el-dropdown-item>
|
||||
<el-button
|
||||
class="reset-margin !h-20px !text-gray-500"
|
||||
type="text"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon('role')"
|
||||
>
|
||||
|
||||
@@ -102,7 +102,8 @@ onMounted(async () => {
|
||||
<el-dropdown-item>
|
||||
<el-button
|
||||
class="reset-margin !h-20px !text-gray-500"
|
||||
type="text"
|
||||
link
|
||||
type="primary"
|
||||
:icon="useRenderIcon('expand')"
|
||||
@click="toggleRowExpansionAll(true)"
|
||||
>
|
||||
@@ -112,7 +113,8 @@ onMounted(async () => {
|
||||
<el-dropdown-item>
|
||||
<el-button
|
||||
class="reset-margin !h-20px !text-gray-500"
|
||||
type="text"
|
||||
link
|
||||
type="primary"
|
||||
:icon="useRenderIcon('unExpand')"
|
||||
@click="toggleRowExpansionAll(false)"
|
||||
>
|
||||
@@ -122,7 +124,8 @@ onMounted(async () => {
|
||||
<el-dropdown-item>
|
||||
<el-button
|
||||
class="reset-margin !h-20px !text-gray-500"
|
||||
type="text"
|
||||
link
|
||||
type="primary"
|
||||
:icon="useRenderIcon('reset')"
|
||||
@click="onReset"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user