暂存字段权限及element plus dialog 弹窗动画

src/api/system/field.ts

@@ -22,3 +22,11 @@ export const initFields = () => {
     method: 'post'
   })
 }
+
+export const addOrUpdateSysRoleField = (roleId: any, data: any) => {
+  return request({
+    url: url + 'addOrUpdateSysRoleField' + '/' + roleId,
+    method: 'put',
+    data
+  })
+}

src/assets/styles/animation.scss

@@ -0,0 +1,33 @@
+/* animation.scss */
+
+@keyframes dialog-open {
+  0% {
+    opacity: 0;
+    transform: scale(0.2);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes dialog-close {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.2);
+  }
+}
+
+// 遮罩层动画
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}

src/assets/styles/index.scss

@@ -8,6 +8,7 @@
 @import './sidebar.scss';
 @import './btn.scss';
 @import './waves.scss';
+// @import './animation.scss';
 
 html,
 body,

src/assets/styles/transition.scss

@@ -14,7 +14,7 @@
 /* fade-transform */
 .fade-transform-leave-active,
 .fade-transform-enter-active {
-  transition: all .5s;
+  transition: all 0.5s;
 }
 
 .fade-transform-enter {
@@ -30,7 +30,7 @@
 /* breadcrumb transition */
 .breadcrumb-enter-active,
 .breadcrumb-leave-active {
-  transition: all .5s;
+  transition: all 0.5s;
 }
 
 .breadcrumb-enter,
@@ -40,9 +40,22 @@
 }
 
 .breadcrumb-move {
-  transition: all .5s;
+  transition: all 0.5s;
 }
 
 .breadcrumb-leave-active {
   position: absolute;
 }
+
+// .dialog-fade-enter-active {
+//   .el-dialog {
+//     animation: dialog-open 0.3s cubic-bezier(0.32, 0.14, 0.15, 0.86);
+//   }
+// }
+
+// .dialog-fade-leave-active {
+//   animation: fade-out 0.2s linear;
+//   .el-dialog {
+//     animation: dialog-close 0.2s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+//   }
+// }

src/i18n/lang/en.json

@@ -146,7 +146,8 @@
     "view": "To view",
     "copy": "Copy",
     "operate": "Operate",
-    "clean": "Clean"
+    "clean": "Clean",
+    "init": "Init"
   },
   "language": "Language",
   "languageKey": "LanguageKey",
@@ -167,4 +168,4 @@
     "oldPwd": "Old Password",
     "nickName": "User's Nickname"
   }
-}
+}

src/i18n/lang/zh-cn.json

@@ -147,7 +147,8 @@
     "view": "查看",
     "copy": "复制",
     "operate": "操作",
-    "clean": "清空"
+    "clean": "清空",
+    "init": "初始化"
   },
   "user": {
     "personalInfo": "个人信息",

src/i18n/lang/zh-tw.json

@@ -146,7 +146,8 @@
     "authorize": "授權",
     "close": "關閉",
     "multi": "批量",
-    "clean": "清空"
+    "clean": "清空",
+    "init": "初始化"
   },
   "language": "語言",
   "languageKey": "語言key",
@@ -167,4 +168,4 @@
     "oldPwd": "舊密碼",
     "nickName": "用戶暱稱"
   }
-}
+}

src/views/system/rolefields/index.vue

@@ -5,7 +5,7 @@
         <template #content>
           <el-row :gutter="10">
             <el-col :span="1.5">
-              <el-button type="default" plain icon="Refresh" @click="handleInit"> 初始化 </el-button>
+              <el-button type="default" plain icon="Refresh" @click="handleInit" :loading="initBtnLoading"> {{ $t('btn.init') }} </el-button>
             </el-col>
           </el-row>
         </template>
@@ -17,7 +17,7 @@
             <template #header>
               <b>模型</b>
             </template>
-            <el-table :data="modelList" height="580" border highlight-current-row @current-change="handleCurrentChange">
+            <el-table ref="modelTable" :data="modelList" height="580" border highlight-current-row @current-change="handleCurrentChange">
               <el-table-column prop="fullName" label="模型" />
             </el-table>
           </el-card>
@@ -27,7 +27,7 @@
             <template #header>
               <div class="flex justify-between items-center">
                 <b>数据字段</b>
-                <el-button type="primary" plain>{{ $t('btn.save') }}</el-button>
+                <el-button type="primary" plain @click="handleSave" :loading="saveBtnLoading">{{ $t('btn.save') }}</el-button>
               </div>
             </template>
             <el-table v-loading="fieldListLoading" :data="fieldList" height="580" border>
@@ -48,7 +48,9 @@
 
 <script setup lang="ts">
 import useTagsViewStore from '@/store/modules/tagsView.js'
-import { getModelList, initFields, getFields } from '@/api/system/field'
+import { getModelList, initFields, getFields, addOrUpdateSysRoleField } from '@/api/system/field'
+import modal from '@/plugins/modal'
+import { ElTable } from 'element-plus'
 const router = useRouter()
 const route = useRoute()
 const cardLoading = ref(false)
@@ -56,9 +58,14 @@ const goBack = () => {
   useTagsViewStore().delView(router.currentRoute.value)
   router.push('/system/role')
 }
-console.log(route.query.roleId)
+const modelTable = ref<InstanceType<typeof ElTable>>()
+const initBtnLoading = ref(false)
 const handleInit = async () => {
+  initBtnLoading.value = true
   await initFields()
+  initBtnLoading.value = false
+  modal.msgSuccess('初始化完成')
+  getList()
 }
 interface model {
   fullName: string
@@ -79,16 +86,23 @@ const getList = async () => {
   cardLoading.value = false
 }
 const handleCurrentChange = async (val: any) => {
-  fieldListLoading.value = true
-  const { data } = await getFields({ fullName: val.fullName, roleId: route.query.roleId })
-  fieldList.value = data
-  fieldListLoading.value = false
-}
-const getProperties = (row) => {
-  console.log(row)
+  if (val) {
+    fieldListLoading.value = true
+    const { data } = await getFields({ fullName: val.fullName, roleId: route.query.roleId })
+    fieldList.value = data
+    fieldListLoading.value = false
+  } else {
+    fieldList.value = []
+  }
 }
 const fieldListLoading = ref(false)
-const value2 = ref(true)
+const saveBtnLoading = ref(false)
+const handleSave = async () => {
+  saveBtnLoading.value = true
+  await addOrUpdateSysRoleField(route.query.roleId, fieldList.value)
+  modal.msgSuccess('保存成功')
+  saveBtnLoading.value = false
+}
 onMounted(() => {
   getList()
 })