加入VxeTable，逐步替换shallowRef为useTemplateRef

admin/package.json

@@ -39,7 +39,8 @@
         "vue-echarts": "^7.0.3",
         "vue-router": "^4.5.1",
         "vue3-video-play": "^1.3.2",
-        "vuedraggable": "^4.1.0"
+        "vuedraggable": "^4.1.0",
+        "vxe-table": "^4.14.4"
     },
     "devDependencies": {
         "@rushstack/eslint-patch": "^1.11.0",

admin/src/components/editor/index.vue

@@ -29,7 +29,7 @@ import type { IEditorConfig, IToolbarConfig } from '@wangeditor/editor'
 import MaterialPicker from '@/components/material/picker.vue'
 import { addUnit } from '@/utils/util'
 
-import { computed, shallowRef, ref, onBeforeUnmount } from 'vue'
+import { computed, shallowRef, ref, onBeforeUnmount, useTemplateRef } from 'vue'
 import type { CSSProperties } from 'vue'
 
 const props = withDefaults(
@@ -55,7 +55,7 @@ const props = withDefaults(
 
 // 编辑器实例，必须用 shallowRef
 const editorRef = shallowRef()
-const materialPickerRef = shallowRef<InstanceType<typeof MaterialPicker>>()
+const materialPickerRef = useTemplateRef<InstanceType<typeof MaterialPicker>>('materialPickerRef')
 const fileType = ref('')
 
 let insertFn: any

admin/src/components/flow/Approver.vue

@@ -60,7 +60,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, shallowRef, watch } from 'vue'
+import { ref, useTemplateRef, watch } from 'vue'
 import XForm from './XForm/index.vue'
 import FlowEdit from './flowEdit/index.vue'
 import BasicSetting from './BasicSetting/index.vue'
@@ -87,9 +87,9 @@ const props = defineProps({
     }
 })
 
-const basicSetting = shallowRef<InstanceType<typeof BasicSetting>>()
-const formDesign = shallowRef<InstanceType<typeof XForm>>()
-const flowEdit = shallowRef<InstanceType<typeof FlowEdit>>()
+const basicSetting = useTemplateRef<InstanceType<typeof BasicSetting>>('basicSetting')
+const formDesign = useTemplateRef<InstanceType<typeof XForm>>('formDesign')
+const flowEdit = useTemplateRef<InstanceType<typeof FlowEdit>>('flowEdit')
 const dialogVisible = ref(false)
 const activeStep = ref('basicSetting')
 const mockData = ref({

admin/src/components/flow/BasicSetting/index.vue

@@ -51,7 +51,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, shallowRef } from 'vue'
+import { onMounted, ref, useTemplateRef } from 'vue'
 import type { FormInstance } from 'element-plus'
 import { useDictData } from '@/hooks/useDictOptions'
 defineOptions({
@@ -86,7 +86,7 @@ onMounted(() => {
         Object.assign(formData.value, props.conf)
     }
 })
-const elFormRef = shallowRef<FormInstance>()
+const elFormRef = useTemplateRef<FormInstance>('elFormRef')
 function getData() {
     return new Promise<{
         formData: any

admin/src/components/flow/XForm/index.vue

@@ -3,9 +3,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { onMounted, useTemplateRef } from 'vue'
 import 'vform3-builds/dist/designer.style.css' //引入VForm3样式
-const designerRef = ref(null)
+const designerRef = useTemplateRef<any>('designerRef')
 function setData(json) {
     console.log('setFormJson', json)
     designerRef.value.setFormJson(json)

admin/src/components/flow/flowEdit/PropertyPanel/Gateway.vue

@@ -17,13 +17,13 @@
                 >
             </div>
 
-            <el-table fit size="small" :data="props.properties.gateway" style="width: 100%">
-                <el-table-column prop="label" label="表单项">
+            <vxe-table size="small" :data="props.properties.gateway" auto-resize>
+                <vxe-column field="label" title="表单项">
                     <template #default="{ row }">
                         {{ getLabel(row.id) }}
                     </template>
-                </el-table-column>
-                <el-table-column label="判断方式">
+                </vxe-column>
+                <vxe-column title="判断方式">
                     <template #default="{ row }">
                         <el-select v-model="row.condition" placeholder="请选择判断符">
                             <el-option
@@ -34,18 +34,18 @@
                             />
                         </el-select>
                     </template>
-                </el-table-column>
-                <el-table-column label="值">
+                </vxe-column>
+                <vxe-column title="值">
                     <template #default="{ row }">
                         <el-input v-model="row.value" placeholder="请输入"></el-input>
                     </template>
-                </el-table-column>
-                <el-table-column width="50px">
-                    <template #default="{ row, $index }">
-                        <el-button :icon="Close" circle @click="removeCondition(row, $index)" />
+                </vxe-column>
+                <vxe-column width="50">
+                    <template #default="{ row, rowIndex }">
+                        <el-button :icon="Close" circle @click="removeCondition(row, rowIndex)" />
                     </template>
-                </el-table-column>
-            </el-table>
+                </vxe-column>
+            </vxe-table>
         </el-card>
     </div>
 </template>
@@ -54,7 +54,8 @@
 import { ref } from 'vue'
 // import type { PropType } from 'vue'
 import { Close } from '@element-plus/icons-vue'
-
+// import { VxeTable, VxeColumn, VxeTableInstance } from 'vxe-table'
+// import 'vxe-table/lib/style.css'
 import type { NodeType, PropertiesType, FieldListType } from './property.type'
 
 const props = defineProps<{

admin/src/components/flow/flowEdit/index.vue

@@ -10,7 +10,7 @@
         />
         <div class="diagram-main">
             <diagram-sidebar class="diagram-sidebar" @dragInNode="dragInNode" />
-            <div ref="container" class="diagram-container">
+            <div class="diagram-container">
                 <div class="diagram-wrapper">
                     <div ref="diagramRef" class="lf-diagram"></div>
                 </div>
@@ -23,7 +23,7 @@
 
 <script setup lang="ts">
 // Importing necessary functions and components
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, useTemplateRef } from 'vue'
 import LogicFlow from '@logicflow/core'
 import { SelectionSelect, Menu, BpmnElement, MiniMap } from '@logicflow/extension'
 import type { NodeType, PropertiesType } from './PropertyPanel/property.type'
@@ -59,8 +59,8 @@ const props = defineProps({
 // Define refs for reactive data and component references
 const lf = ref(null) // Reference to LogicFlow instance
 const activeEdges = ref([]) // Reactive array for active edges
-const diagramRef = ref(null) // Reference to the diagram container
-const PropertyPanelRef = ref(null) // Reference to the PropertyPanel component
+const diagramRef = useTemplateRef<HTMLInputElement>('diagramRef') // Reference to the diagram container
+const PropertyPanelRef = useTemplateRef<InstanceType<typeof PropertyPanel>>('PropertyPanelRef') // Reference to the PropertyPanel component
 
 // Lifecycle hook to initialize LogicFlow when the component is mounted
 onMounted(() => {

admin/src/components/icon/picker.vue

@@ -67,8 +67,8 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
-import { computed, reactive, shallowRef } from 'vue'
+import { ref, useTemplateRef } from 'vue'
+import { computed, reactive } from 'vue'
 
 import { ElInput } from 'element-plus'
 import { getElementPlusIconNames, getLocalIconNames } from './index'
@@ -98,7 +98,7 @@ const iconTabsMap = [
     }
 ]
 
-const inputRef = shallowRef<InstanceType<typeof ElInput>>()
+const inputRef = useTemplateRef<InstanceType<typeof ElInput>>('inputRef')
 
 const state = reactive({
     inputValue: ''

admin/src/components/link/picker.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, shallowRef, ref, watch } from 'vue'
+import { computed, useTemplateRef, ref, watch } from 'vue'
 import { LinkTypeEnum, type Link } from '.'
 import LinkContent from './index.vue'
 import Popup from '@/components/popup/index.vue'
@@ -34,7 +34,7 @@ const emit = defineEmits<{
     (event: 'update:modelValue', value: any): void
 }>()
 
-const popupRef = shallowRef<InstanceType<typeof Popup>>()
+const popupRef = useTemplateRef<InstanceType<typeof Popup>>('popupRef')
 const activeLink = ref<Link>({ path: '', type: LinkTypeEnum.SHOP_PAGES })
 const handleConfirm = () => {
     emit('update:modelValue', activeLink.value)

admin/src/components/material/preview.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, shallowRef, watch, nextTick } from 'vue'
+import { ref, useTemplateRef, watch, nextTick } from 'vue'
 const props = defineProps({
     modelValue: {
         type: Boolean,
@@ -33,7 +33,7 @@ const props = defineProps({
     }
 })
 
-const playerRef = shallowRef()
+const playerRef = useTemplateRef('playerRef')
 const visible = defineModel({
     type: Boolean
 })

admin/src/components/overflow-tooltip/index.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, shallowRef } from 'vue'
+import { ref, useTemplateRef } from 'vue'
 import { useEventListener } from '@vueuse/core'
 import { useTooltipContentProps, type Placement } from 'element-plus'
 import type { PropType } from 'vue'
@@ -33,7 +33,7 @@ const props = defineProps({
         default: 'ellipsis'
     }
 })
-const textRef = shallowRef<HTMLElement>()
+const textRef = useTemplateRef<HTMLElement>('textRef')
 const disabled = ref(false)
 
 useEventListener(textRef, 'mouseenter', () => {

admin/src/components/upload/index.vue

@@ -40,7 +40,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, toRaw, shallowRef } from 'vue'
+import { computed, defineComponent, ref, toRaw, useTemplateRef } from 'vue'
 import useUserStore from '@/stores/modules/user'
 import config from '@/config'
 import feedback from '@/utils/feedback'
@@ -83,7 +83,7 @@ export default defineComponent({
     emits: ['change', 'error'],
     setup(props, { emit }) {
         const userStore = useUserStore()
-        const uploadRefs = shallowRef<InstanceType<typeof ElUpload>>()
+        const uploadRefs = useTemplateRef<InstanceType<typeof ElUpload>>('uploadRefs')
         let action = ''
         if (props.url && typeof props.url === 'string') {
             console.log('props.url', props.url)

admin/src/components/video-player/index.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, shallowRef } from 'vue'
+import { reactive, useTemplateRef } from 'vue'
 import 'vue3-video-play/dist/style.css'
 import { videoPlay } from 'vue3-video-play/dist/index.mjs'
 const props = defineProps({
@@ -26,7 +26,7 @@ const props = defineProps({
     poster: String
 })
 
-const playerRef = shallowRef()
+const playerRef = useTemplateRef('playerRef')
 const options = reactive({
     color: 'var(--el-color-primary)', //主题色
     muted: false, //静音

admin/src/main.ts

@@ -8,6 +8,8 @@ import './styles/index.scss'
 import 'virtual:svg-icons-register'
 
 import ElementPlus from 'element-plus'
+import { VxeTable, VxeColumn } from 'vxe-table'
+import 'vxe-table/lib/style.css'
 
 import VForm3 from 'vform3-builds' //引入VForm3库
 
@@ -26,5 +28,7 @@ const app = createApp(App)
 app.use(install)
 app.use(ElementPlus)
 app.use(VForm3)
+app.use(VxeTable)
+app.use(VxeColumn)
 
 app.mount('#app')

admin/src/views/account/login.vue

@@ -102,7 +102,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, reactive, shallowRef } from 'vue'
+import { computed, onMounted, reactive, useTemplateRef } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import type { InputInstance, FormInstance } from 'element-plus'
 import LayoutFooter from '@/layout/components/footer.vue'
@@ -116,7 +116,7 @@ import { encryptPassword } from '@/utils/util'
 import Verify from '@/components/verify/Verify.vue'
 import ImageContain from '@/components/image-contain/index.vue'
 // const verifyRef = ref(null)
-const verifyRef = shallowRef<InstanceType<typeof Verify>>()
+const verifyRef = useTemplateRef<InstanceType<typeof Verify>>('verifyRef')
 const onShowCaptcha = () => {
     verifyRef.value.show()
 }
@@ -127,8 +127,8 @@ const handleSuccess = (res) => {
     lockLogin(res)
 }
 
-const passwordRef = shallowRef<InputInstance>()
-const formRef = shallowRef<FormInstance>()
+const passwordRef = useTemplateRef<InputInstance>('passwordRef')
+const formRef = useTemplateRef<FormInstance>('formRef')
 const appStore = useAppStore()
 const userStore = useUserStore()
 const route = useRoute()

admin/src/views/article/column/edit.vue

@@ -26,14 +26,14 @@
     </div>
 </template>
 <script lang="ts" setup>
-import { ref, computed, shallowRef, reactive } from 'vue'
+import { ref, computed, useTemplateRef, reactive } from 'vue'
 import type { FormInstance } from 'element-plus'
 import { articleCateEdit, articleCateAdd, articleCateDetail } from '@/api/article'
 import Popup from '@/components/popup/index.vue'
 import feedback from '@/utils/feedback'
 const emit = defineEmits(['success', 'close'])
-const formRef = shallowRef<FormInstance>()
-const popupRef = shallowRef<InstanceType<typeof Popup>>()
+const formRef = useTemplateRef<FormInstance>('formRef')
+const popupRef = useTemplateRef<InstanceType<typeof Popup>>('popupRef')
 const mode = ref('add')
 const popupTitle = computed(() => {
     return mode.value == 'edit' ? '编辑栏目' : '新增栏目'

admin/src/views/article/column/index.vue

@@ -66,7 +66,7 @@
     </div>
 </template>
 <script lang="ts" setup>
-import { ref, shallowRef, nextTick } from 'vue'
+import { ref, useTemplateRef, nextTick } from 'vue'
 import { articleCateDelete, articleCateLists, articleCateStatus } from '@/api/article'
 import { usePaging } from '@/hooks/usePaging'
 import feedback from '@/utils/feedback'
@@ -75,7 +75,7 @@ import EditPopup from './edit.vue'
 defineOptions({
     name: 'articleColumn'
 })
-const editRef = shallowRef<InstanceType<typeof EditPopup>>()
+const editRef = useTemplateRef<InstanceType<typeof EditPopup>>('editRef')
 const showEdit = ref(false)
 
 const { pager, getLists } = usePaging({

admin/src/views/article/lists/edit.vue

@@ -112,7 +112,7 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive, shallowRef } from 'vue'
+import { reactive, useTemplateRef } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import type { FormInstance } from 'element-plus'
 import feedback from '@/utils/feedback'
@@ -139,7 +139,7 @@ const formData = reactive({
 })
 
 const { removeTab } = useMultipleTabs()
-const formRef = shallowRef<FormInstance>()
+const formRef = useTemplateRef<FormInstance>('formRef')
 const rules = reactive({
     title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
     cid: [{ required: true, message: '请选择文章栏目', trigger: 'blur' }]

admin/src/views/consumer/lists/detail.vue

@@ -85,7 +85,7 @@
 
 <script lang="ts" setup>
 import { useRoute } from 'vue-router'
-import { shallowRef, reactive } from 'vue'
+import { useTemplateRef, reactive } from 'vue'
 import type { FormInstance } from 'element-plus'
 import { getUserDetail, userEdit } from '@/api/consumer'
 import feedback from '@/utils/feedback'
@@ -109,7 +109,7 @@ const formData = reactive({
     username: ''
 })
 
-const formRef = shallowRef<FormInstance>()
+const formRef = useTemplateRef<FormInstance>('formRef')
 
 const getDetails = async () => {
     const data = await getUserDetail({

admin/src/views/setting/permission/menu/index.vue

@@ -8,9 +8,81 @@
                     </template>
                     新增
                 </el-button>
-                <el-button @click="handleExpand"> 展开/折叠 </el-button>
+                <el-button @click="handleExpand"> 展开/收起 </el-button>
             </div>
-            <el-table
+            <div style="height: calc(100vh - 200px)">
+                <vxe-table
+                    ref="tableRef"
+                    :row-config="rowConfig"
+                    :tree-config="treeConfig"
+                    :data="lists"
+                    max-height="100%"
+                >
+                    <vxe-column type="seq" width="60"></vxe-column>
+                    <vxe-column
+                        field="menuName"
+                        title="菜单名称"
+                        min-width="200"
+                        tree-node
+                    ></vxe-column>
+                    <vxe-column field="menuType" title="类型" width="60">
+                        <template #default="{ row }">
+                            <div v-if="row.menuType == MenuEnum.CATALOGUE">目录</div>
+                            <div v-else-if="row.menuType == MenuEnum.MENU">菜单</div>
+                            <div v-else-if="row.menuType == MenuEnum.BUTTON">按钮</div>
+                        </template>
+                    </vxe-column>
+                    <vxe-column field="menuIcon" title="图标" width="60">
+                        <template #default="{ row }">
+                            <div class="flex">
+                                <icon :name="row.menuIcon" :size="20" />
+                            </div>
+                        </template>
+                    </vxe-column>
+                    <vxe-column field="paths" title="路径" min-width="100"></vxe-column>
+                    <vxe-column field="permsArr" title="权限标识" min-width="120">
+                        <template #default="{ row }">
+                            <span v-if="row.perms" type="info">{{ row.perms }}</span>
+                        </template>
+                    </vxe-column>
+                    <vxe-column field="isDisable" title="状态" width="80">
+                        <template #default="{ row }">
+                            <el-tag v-if="row.isDisable == 0" type="primary">正常</el-tag>
+                            <el-tag v-else type="danger">停用</el-tag>
+                        </template>
+                    </vxe-column>
+                    <vxe-column field="menuSort" title="排序" width="60"></vxe-column>
+                    <vxe-column title="操作" width="160">
+                        <template #default="{ row }">
+                            <el-button
+                                v-perms="['admin:system:menu:add']"
+                                type="primary"
+                                link
+                                @click="handleAdd(row.id)"
+                            >
+                                新增
+                            </el-button>
+                            <el-button
+                                v-perms="['admin:system:menu:edit']"
+                                type="primary"
+                                link
+                                @click="handleEdit(row)"
+                            >
+                                编辑
+                            </el-button>
+                            <el-button
+                                v-perms="['admin:system:menu:del']"
+                                type="danger"
+                                link
+                                @click="handleDelete(row.id)"
+                            >
+                                删除
+                            </el-button>
+                        </template>
+                    </vxe-column>
+                </vxe-table>
+            </div>
+            <!-- <el-table
                 v-loading="loading"
                 ref="tableRef"
                 class="mt-4"
@@ -84,25 +156,35 @@
                         </el-button>
                     </template>
                 </el-table-column>
-            </el-table>
+            </el-table> -->
         </el-card>
         <edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
     </div>
 </template>
 <script lang="ts" setup>
-import { ref, shallowRef, nextTick } from 'vue'
+import { ref, useTemplateRef, nextTick } from 'vue'
 import { menuDelete, menuLists } from '@/api/perms/menu'
 import { arrayToTree } from '@/utils/util'
-import type { ElTable } from 'element-plus'
 import { MenuEnum } from '@/enums/appEnums'
 import EditPopup from './edit.vue'
 import feedback from '@/utils/feedback'
+
+import { VxeTableInstance } from 'vxe-table'
+
 defineOptions({
     name: 'MenuView'
 })
-
-const tableRef = shallowRef<InstanceType<typeof ElTable>>()
-const editRef = shallowRef<InstanceType<typeof EditPopup>>()
+const rowConfig = {
+    keyField: 'id'
+}
+const treeConfig = {
+    rowField: 'id',
+    childrenField: 'children',
+    indent: 10,
+    reserve: true
+}
+const tableRef = useTemplateRef<VxeTableInstance<any>>('tableRef')
+const editRef = useTemplateRef<InstanceType<typeof EditPopup>>('editRef')
 let isExpand = false
 const loading = ref(false)
 const showEdit = ref(false)
@@ -149,18 +231,15 @@ const handleDelete = async (id: number) => {
 }
 
 const handleExpand = () => {
-    isExpand = !isExpand
-    toggleExpand(lists.value, isExpand)
-}
-
-const toggleExpand = (children: any[], unfold = true) => {
-    for (const key in children) {
-        tableRef.value?.toggleRowExpansion(children[key], unfold)
-        if (children[key].children) {
-            toggleExpand(children[key].children!, unfold)
+    const $table = tableRef.value
+    if ($table) {
+        isExpand = !isExpand
+        if (isExpand) {
+            $table.setAllTreeExpand(true)
+        } else {
+            $table.clearTreeExpand()
         }
     }
 }
-
 getLists()
 </script>

admin/src/views/setting/permission/role/auth.vue

@@ -43,7 +43,7 @@
     </div>
 </template>
 <script lang="ts" setup>
-import { ref, shallowRef, nextTick, reactive } from 'vue'
+import { ref, useTemplateRef, nextTick, reactive } from 'vue'
 import type { CheckboxValueType, ElTree, FormInstance } from 'element-plus'
 import { roleDetail, roleEdit } from '@/api/perms/role'
 import { menuLists } from '@/api/perms/menu'
@@ -51,9 +51,9 @@ import Popup from '@/components/popup/index.vue'
 import { treeToArray, arrayToTree } from '@/utils/util'
 import feedback from '@/utils/feedback'
 const emit = defineEmits(['success', 'close'])
-const treeRef = shallowRef<InstanceType<typeof ElTree>>()
-const formRef = shallowRef<FormInstance>()
-const popupRef = shallowRef<InstanceType<typeof Popup>>()
+const treeRef = useTemplateRef<InstanceType<typeof ElTree>>('treeRef')
+const formRef = useTemplateRef<FormInstance>('formRef')
+const popupRef = useTemplateRef<InstanceType<typeof Popup>>('popupRef')
 const isExpand = ref(false)
 const checkStrictly = ref(true)
 const menuArray = ref<any[]>([])

admin/src/views/setting/permission/role/edit.vue

@@ -47,14 +47,14 @@
     </div>
 </template>
 <script lang="ts" setup>
-import { ref, computed, shallowRef, reactive } from 'vue'
+import { ref, computed, useTemplateRef, reactive } from 'vue'
 import type { FormInstance } from 'element-plus'
 import { roleAdd, roleDetail, roleEdit } from '@/api/perms/role'
 import Popup from '@/components/popup/index.vue'
 import feedback from '@/utils/feedback'
 const emit = defineEmits(['success', 'close'])
-const formRef = shallowRef<FormInstance>()
-const popupRef = shallowRef<InstanceType<typeof Popup>>()
+const formRef = useTemplateRef<FormInstance>('formRef')
+const popupRef = useTemplateRef<InstanceType<typeof Popup>>('popupRef')
 const mode = ref('add')
 const popupTitle = computed(() => {
     return mode.value == 'edit' ? '编辑角色' : '新增角色'

admin/src/views/setting/permission/role/index.vue

@@ -72,7 +72,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, shallowRef, nextTick } from 'vue'
+import { ref, useTemplateRef, nextTick } from 'vue'
 import { roleLists, roleDelete } from '@/api/perms/role'
 import { usePaging } from '@/hooks/usePaging'
 import feedback from '@/utils/feedback'
@@ -82,8 +82,8 @@ defineOptions({
     name: 'role'
 })
 
-const editRef = shallowRef<InstanceType<typeof EditPopup>>()
-const authRef = shallowRef<InstanceType<typeof AuthPopup>>()
+const editRef = useTemplateRef<InstanceType<typeof EditPopup>>('editRef')
+const authRef = useTemplateRef<InstanceType<typeof AuthPopup>>('authRef')
 const showEdit = ref(false)
 const showAuth = ref(false)
 const { pager, getLists } = usePaging({

admin/src/views/setting/user/login_register.vue

@@ -99,7 +99,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive } from 'vue'
+import { reactive, useTemplateRef } from 'vue'
 import type { LoginSetup } from '@/api/setting/user'
 import { getLogin, setLogin } from '@/api/setting/user'
 import feedback from '@/utils/feedback'
@@ -107,7 +107,7 @@ import type { FormInstance, FormRules } from 'element-plus'
 defineOptions({
     name: 'loginRegister'
 })
-const formRef = ref<FormInstance>()
+const formRef = useTemplateRef<FormInstance>('formRef')
 
 // 表单数据
 const formData = reactive<LoginSetup>({

admin/src/views/setting/website/information.vue

@@ -60,12 +60,12 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive } from 'vue'
+import { useTemplateRef, reactive } from 'vue'
 import { getWebsite, setWebsite } from '@/api/setting/website'
 import useAppStore from '@/stores/modules/app'
 import feedback from '@/utils/feedback'
 import type { FormInstance } from 'element-plus'
-const formRef = ref<FormInstance>()
+const formRef = useTemplateRef<FormInstance>('formRef')
 const { getConfig } = useAppStore()
 
 defineOptions({

admin/src/views/user/protocol/details.vue

@@ -28,7 +28,7 @@ import type { FormInstance } from 'element-plus'
 import { user_protocol_detail } from '@/api/user/protocol'
 import Popup from '@/components/popup/index.vue'
 
-import { shallowRef, computed, reactive } from 'vue'
+import { useTemplateRef, computed, reactive } from 'vue'
 import type { PropType } from 'vue'
 defineProps({
     dictData: {
@@ -41,8 +41,8 @@ defineProps({
     }
 })
 const emit = defineEmits(['close'])
-const formRef = shallowRef<FormInstance>()
-const popupRef = shallowRef<InstanceType<typeof Popup>>()
+const formRef = useTemplateRef<FormInstance>('formRef')
+const popupRef = useTemplateRef<InstanceType<typeof Popup>>('popupRef')
 
 const popupTitle = computed(() => {
     return '预览用户协议'

admin/src/views/user/protocol/edit.vue

@@ -24,7 +24,7 @@
     </div>
 </template>
 <script lang="ts" setup>
-import { ref, computed, shallowRef, reactive } from 'vue'
+import { ref, computed, reactive, useTemplateRef } from 'vue'
 import type { FormInstance } from 'element-plus'
 import { user_protocol_edit, user_protocol_add, user_protocol_detail } from '@/api/user/protocol'
 import Popup from '@/components/popup/index.vue'
@@ -41,8 +41,8 @@ defineProps({
     }
 })
 const emit = defineEmits(['success', 'close'])
-const formRef = shallowRef<FormInstance>()
-const popupRef = shallowRef<InstanceType<typeof Popup>>()
+const formRef = useTemplateRef<FormInstance>('formRef')
+const popupRef = useTemplateRef<InstanceType<typeof Popup>>('popupRef')
 const mode = ref('add')
 const popupTitle = computed(() => {
     return mode.value == 'edit' ? '编辑用户协议' : '新增用户协议'

admin/src/views/user/protocol/index.vue

@@ -77,19 +77,23 @@
                     批量删除
                 </el-button>
             </div>
-            <el-table
+            <vxe-table
+                ref="tableRef"
+                border
+                size="medium"
                 class="mt-4"
-                size="large"
-                v-loading="pager.loading"
                 :data="pager.lists"
-                @selection-change="handleSelectionChange"
+                :loading="pager.loading"
+                auto-resize
+                @checkbox-change="handleSelectionChange"
+                @checkbox-all="handleSelectionChange"
             >
-                <el-table-column type="selection" width="55" />
-                <el-table-column label="标题" prop="Title" min-width="130" />
-                <el-table-column label="排序" prop="Sort" width="60" />
-                <el-table-column label="创建时间" prop="CreateTime" width="180" />
-                <el-table-column label="更新时间" prop="UpdateTime" width="180" />
-                <el-table-column label="操作" width="160" fixed="right">
+                <vxe-column type="checkbox" width="55"></vxe-column>
+                <vxe-column field="Title" title="标题" min-width="130"></vxe-column>
+                <vxe-column field="Sort" title="排序" width="60"></vxe-column>
+                <vxe-column field="CreateTime" title="创建时间" width="180"></vxe-column>
+                <vxe-column field="UpdateTime" title="更新时间" width="180"></vxe-column>
+                <vxe-column title="操作" width="160" fixed="right">
                     <template #default="{ row }">
                         <el-button
                             v-perms="['admin:user_protocol:detail']"
@@ -115,8 +119,8 @@
                             删除
                         </el-button>
                     </template>
-                </el-table-column>
-            </el-table>
+                </vxe-column>
+            </vxe-table>
             <div class="flex justify-end mt-4">
                 <pagination v-model="pager" @change="getLists" />
             </div>
@@ -126,7 +130,7 @@
     </div>
 </template>
 <script lang="ts" setup>
-import { ref, shallowRef, reactive, nextTick } from 'vue'
+import { ref, reactive, nextTick, useTemplateRef } from 'vue'
 import {
     user_protocol_delete,
     user_protocol_delete_batch,
@@ -135,6 +139,7 @@ import {
     user_protocol_export_file
 } from '@/api/user/protocol'
 import type { type_user_protocol, type_user_protocol_query } from '@/api/user/protocol'
+import type { VxeTableInstance } from 'vxe-table'
 
 import { usePaging } from '@/hooks/usePaging'
 import feedback from '@/utils/feedback'
@@ -143,9 +148,9 @@ import DetailsPopup from './details.vue'
 defineOptions({
     name: 'user_protocol'
 })
-const editRef = shallowRef<InstanceType<typeof EditPopup>>()
+const editRef = useTemplateRef<InstanceType<typeof EditPopup>>('editRef')
 const showEdit = ref(false)
-const detailsRef = shallowRef<InstanceType<typeof DetailsPopup>>()
+const detailsRef = useTemplateRef<InstanceType<typeof DetailsPopup>>('detailsRef')
 const showDetails = ref(false)
 const queryParams = reactive<type_user_protocol_query>({
     Title: null,
@@ -180,10 +185,13 @@ const viewDetails = async (data: any) => {
     detailsRef.value?.open()
     detailsRef.value?.getDetail(data)
 }
+
+const tableRef = useTemplateRef<VxeTableInstance<type_user_protocol>>('tableRef')
 const multipleSelection = ref<type_user_protocol[]>([])
-const handleSelectionChange = (val: type_user_protocol[]) => {
-    console.log(val)
-    multipleSelection.value = val
+const handleSelectionChange = () => {
+    if (tableRef.value) {
+        multipleSelection.value = tableRef.value.getCheckboxRecords()
+    }
 }
 
 const handleDelete = async (Id: number) => {

admin/src/views/user/setting.vue

@@ -78,7 +78,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import { useTemplateRef, reactive } from 'vue'
 import { setUserInfo } from '@/api/user'
 import useUserStore from '@/stores/modules/user'
 import feedback from '@/utils/feedback'
@@ -87,7 +87,7 @@ import type { FormInstance } from 'element-plus'
 defineOptions({
     name: 'userSetting'
 })
-const formRef = ref<FormInstance>()
+const formRef = useTemplateRef<FormInstance>('formRef')
 const userStore = useUserStore()
 // 表单数据
 const formData = reactive({