弹框设计的改动

src/components/global/my-dialog/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <t-dialog v-bind="attrs">
+  <t-dialog v-bind="cutAttrs" @close="readyCloseWithAnimation">
     <template #body>
       <slot></slot>
     </template>
@@ -9,7 +9,21 @@
   </t-dialog>
 </template>
 <script setup name="MyDialog">
-import { useAttrs, useSlots } from 'vue';
+import { useAttrs, useSlots, onMounted, computed } from 'vue';
+import { omit } from 'lodash';
 const attrs = useAttrs();
 const slots = useSlots();
+const emit = defineEmits(['update:visible', 'close']);
+const cutAttrs = computed(() => {
+  return omit(attrs, 'onClose');
+});
+onMounted(() => {
+  emit('update:visible', true);
+});
+const readyCloseWithAnimation = () => {
+  emit('update:visible', false);
+  setTimeout(() => {
+    emit('close');
+  }, 200); //t-dialog的动画时间是0.2秒，所以对父组件的v-if进行200毫秒延迟置为false
+};
 </script>

src/directives/perm.js

@@ -4,7 +4,8 @@ const perm = (el, binding) => {
   const { value } = binding;
   if (!!value) {
     if (!userStore.finePermissionIds.includes(String(value))) {
-      el.parentNode && el.parentNode.removeChild(el);
+      // el.parentNode && el.parentNode.removeChild(el);
+      el.remove();
     }
   } else {
     throw new Error(`请设置操作权限标签值`);

src/store/modules/user.js

@@ -135,7 +135,7 @@ const useUserStore = defineStore('user', {
           ...(item.links || []),
         ];
         arr.map((v) => {
-          ids.push(v.id);
+          ids.push(`${item.url}_${v.type}_${v.url}`);
         });
       }
       this.finePermissionIds = ids.map((item) => String(item));

src/views/login/index.vue

@@ -94,8 +94,8 @@ const route = useRoute();
 const router = useRouter();
 
 const formData = reactive({
-  loginName: '',
-  password: '',
+  loginName: 'sysadmin',
+  password: '123456',
 });
 const rules = {
   loginName: [

src/views/user/auth-manage/user-manage/add-user-dialog.vue

@@ -1,8 +1,8 @@
 <template>
   <my-dialog
-    :visible="visible"
-    @close="emit('update:visible', false)"
-    :header="`${isEdit ? '修改' : '新增'}用户`"
+    v-model:visible="visible"
+    @close="emit('close')"
+    :header="`${!!curRow ? '修改' : '新增'}用户`"
     :width="600"
     :closeOnOverlayClick="false"
   >
@@ -38,24 +38,31 @@
       </t-form-item>
     </t-form>
     <template #foot>
-      <t-button theme="default" @click="emit('update:visible', false)"
-        >取消</t-button
-      >
+      <t-button theme="default" @click="emit('close')">取消</t-button>
       <t-button theme="primary" @click="save">保存</t-button>
     </template>
   </my-dialog>
 </template>
 <script setup name="AddUserDialog">
-import useClearDialog from '@/hooks/useClearDialog';
-import { ref, computed } from 'vue';
+// import useClearDialog from '@/hooks/useClearDialog';
+import { ref, computed, reactive } from 'vue';
 import { getOrgStructList, getRoleList, addUser } from '@/api/user';
 import { useRequest } from 'vue-request';
+const visible = ref(false);
 const props = defineProps({
-  visible: Boolean,
+  // visible: Boolean,
   curRow: Object,
 });
-const emit = defineEmits(['update:visible', 'success']);
+const emit = defineEmits(['close', 'success']);
 const formRef = ref(null);
+const formData = reactive({
+  loginName: '',
+  realName: '',
+  genderStr: '男',
+  mobileNumber: '',
+  orgId: '',
+  roleIds: [],
+});
 const getDetail = async () => {
   //编辑状态下获取回显数据的接口请求业务,如果curRow里的字段够用，就直接把curRow里的字段赋值给formData
   for (let key in formData) {
@@ -65,19 +72,10 @@ const getDetail = async () => {
   }
   formData.roleIds = props.curRow.roles.map((item) => item.id);
 };
-const { formData, isEdit } = useClearDialog(
-  {
-    loginName: '',
-    realName: '',
-    genderStr: '男',
-    mobileNumber: '',
-    orgId: '',
-    roleIds: '',
-  },
-  props,
-  formRef,
-  getDetail
-);
+
+if (!!props.curRow) {
+  getDetail();
+}
 const { data: treeData } = useRequest(getOrgStructList, {
   manual: false,
 });

src/views/user/auth-manage/user-manage/index.vue

@@ -3,6 +3,7 @@
     <div class="flex-1 page-wrap">
       <div class="btn-group">
         <t-button
+          v-perm="'user_BUTTON_Add'"
           theme="success"
           @click="
             curRow = null;
@@ -34,9 +35,10 @@
       </t-table>
     </div>
     <AddUserDialog
-      v-model:visible="showAddUserDialog"
+      v-if="showAddUserDialog"
       :curRow="curRow"
       @success="addSuccess"
+      @close="showAddUserDialog = false"
     ></AddUserDialog>
   </div>
 </template>
@@ -72,6 +74,7 @@ const columns = [
       return (
         <div class="table-operations">
           <t-link
+            v-perm="user_LINK_Update"
             theme="primary"
             hover="color"
             onClick={(e) => {
@@ -83,6 +86,7 @@ const columns = [
             修改
           </t-link>
           <t-link
+            v-perm="user_LINK_Enable"
             theme={row.enable ? 'danger' : 'success'}
             hover="color"
             onClick={(e) => {

src/views/user/org-struct-manage/struct-manage/index.vue

@@ -3,7 +3,7 @@
     <div class="flex-1 page-wrap">
       <div class="btn-group">
         <t-button
-          v-perm="112"
+          v-perm="'org_BUTTON_Add'"
           theme="success"
           @click="
             curRow = null;