From 425be9414a9bbc7e67e39725e18868e34aead346 Mon Sep 17 00:00:00 2001
From: "YUN-PC5\\user" <bmdzh11713@163.com>
Date: Thu, 28 Sep 2023 16:26:42 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9A=82=E5=AD=98=E5=AD=97=E6=AE=B5=E6=9D=83?=
 =?UTF-8?q?=E9=99=90=E5=8F=8Aelement=20plus=20dialog=20=E5=BC=B9=E7=AA=97?=
 =?UTF-8?q?=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/field.ts               |  8 ++++++
 src/assets/styles/animation.scss      | 33 ++++++++++++++++++++++
 src/assets/styles/index.scss          |  1 +
 src/assets/styles/transition.scss     | 19 +++++++++++--
 src/i18n/lang/en.json                 |  5 ++--
 src/i18n/lang/zh-cn.json              |  3 +-
 src/i18n/lang/zh-tw.json              |  5 ++--
 src/views/system/rolefields/index.vue | 40 ++++++++++++++++++---------
 8 files changed, 93 insertions(+), 21 deletions(-)
 create mode 100644 src/assets/styles/animation.scss

diff --git a/src/api/system/field.ts b/src/api/system/field.ts
index fcdb817..6f60186 100644
--- a/src/api/system/field.ts
+++ b/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
+  })
+}
diff --git a/src/assets/styles/animation.scss b/src/assets/styles/animation.scss
new file mode 100644
index 0000000..97b932b
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 2079591..99e3381 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -8,6 +8,7 @@
 @import './sidebar.scss';
 @import './btn.scss';
 @import './waves.scss';
+// @import './animation.scss';
 
 html,
 body,
diff --git a/src/assets/styles/transition.scss b/src/assets/styles/transition.scss
index 4cb27cc..13aa2e5 100644
--- a/src/assets/styles/transition.scss
+++ b/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);
+//   }
+// }
diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json
index 758bc85..7561cc5 100644
--- a/src/i18n/lang/en.json
+++ b/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"
   }
-}
\ No newline at end of file
+}
diff --git a/src/i18n/lang/zh-cn.json b/src/i18n/lang/zh-cn.json
index b3cbcaf..a064ae9 100644
--- a/src/i18n/lang/zh-cn.json
+++ b/src/i18n/lang/zh-cn.json
@@ -147,7 +147,8 @@
     "view": "查看",
     "copy": "复制",
     "operate": "操作",
-    "clean": "清空"
+    "clean": "清空",
+    "init": "初始化"
   },
   "user": {
     "personalInfo": "个人信息",
diff --git a/src/i18n/lang/zh-tw.json b/src/i18n/lang/zh-tw.json
index 13f9f33..c8169c0 100644
--- a/src/i18n/lang/zh-tw.json
+++ b/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": "用戶暱稱"
   }
-}
\ No newline at end of file
+}
diff --git a/src/views/system/rolefields/index.vue b/src/views/system/rolefields/index.vue
index 24b0e79..669580b 100644
--- a/src/views/system/rolefields/index.vue
+++ b/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()
 })