优化：优化设置表单控件尺寸大小的写法

2023-02-16 20:45:44 +08:00 · 2023-02-16 20:45:44 +08:00 · db345664a3
commit db345664a3
parent 6d72537125
6 changed files with 90 additions and 80 deletions
--- a/continew-admin-ui/src/views/login/components/login-form.vue
+++ b/continew-admin-ui/src/views/login/components/login-form.vue
@ -7,6 +7,7 @@
      :model="form"
      :rules="rules"
      layout="vertical"
+      size="large"
      class="login-form"
      @submit="handleLogin"
    >
@ -15,7 +16,6 @@
          v-model="form.username"
          :placeholder="$t('login.form.placeholder.username')"
          max-length="50"
-          size="large"
        >
          <template #prefix><icon-user /></template>
        </a-input>
@ -26,7 +26,6 @@
          :placeholder="$t('login.form.placeholder.password')"
          max-length="32"
          allow-clear
-          size="large"
        >
          <template #prefix><icon-lock /></template>
        </a-input-password>
@ -36,12 +35,15 @@
          v-model="form.captcha"
          :placeholder="$t('login.form.placeholder.captcha')"
          allow-clear
-          size="large"
          style="width: 63%"
        >
          <template #prefix><icon-check-circle /></template>
        </a-input>
-        <img :src="captchaImgBase64" :alt="$t('login.form.captcha')" @click="getCaptcha">
+        <img
+          :src="captchaImgBase64"
+          :alt="$t('login.form.captcha')"
+          @click="getCaptcha"
+        />
      </a-form-item>
      <a-space :size="16" direction="vertical">
        <div class="login-form-remember-me">
@ -53,7 +55,12 @@
            {{ $t('login.form.rememberMe') }}
          </a-checkbox>
        </div>
-        <a-button :loading="loading" type="primary" size="large" long html-type="submit">
+        <a-button
+          :loading="loading"
+          type="primary"
+          long
+          html-type="submit"
+        >
          {{ $t('login.form.login') }}
        </a-button>
      </a-space>
@ -98,9 +105,15 @@
    // 表单验证规则
    rules: computed((): Record<string, FieldRule[]> => {
      return {
-        username: [{ required: true, message: t('login.form.error.required.username') }],
-        password: [{ required: true, message: t('login.form.error.required.password') }],
-        captcha: [{ required: true, message: t('login.form.error.required.captcha') }],
+        username: [
+          { required: true, message: t('login.form.error.required.username') },
+        ],
+        password: [
+          { required: true, message: t('login.form.error.required.password') },
+        ],
+        captcha: [
+          { required: true, message: t('login.form.error.required.captcha') },
+        ],
      };
    }),
  });
@ -123,35 +136,42 @@
   * @param errors 表单验证错误
   * @param values 表单数据
   */
-  const handleLogin = ({ errors, values, }: {
+  const handleLogin = ({
+    errors,
+    values,
+  }: {
    errors: Record<string, ValidatedError> | undefined;
    values: Record<string, any>;
  }) => {
    if (loading.value) return;
    if (!errors) {
      loading.value = true;
-      loginStore.login({
-        username: values.username,
-        password: encryptByRsa(values.password) || '',
-        captcha: values.captcha,
-        uuid: values.uuid
-      }).then(() => {
-        const { redirect, ...othersQuery } = router.currentRoute.value.query;
-        router.push({
-          name: (redirect as string) || 'Workplace',
-          query: {
-            ...othersQuery,
-          },
+      loginStore
+        .login({
+          username: values.username,
+          password: encryptByRsa(values.password) || '',
+          captcha: values.captcha,
+          uuid: values.uuid,
+        })
+        .then(() => {
+          const { redirect, ...othersQuery } = router.currentRoute.value.query;
+          router.push({
+            name: (redirect as string) || 'Workplace',
+            query: {
+              ...othersQuery,
+            },
+          });
+          const { rememberMe } = loginConfig.value;
+          const { username } = values;
+          loginConfig.value.username = rememberMe ? username : '';
+          proxy.$message.success(t('login.form.login.success'));
+        })
+        .catch(() => {
+          getCaptcha();
+        })
+        .finally(() => {
+          loading.value = false;
        });
-        const { rememberMe } = loginConfig.value;
-        const { username } = values;
-        loginConfig.value.username = rememberMe ? username : '';
-        proxy.$message.success(t('login.form.login.success'));
-      }).catch(() => {
-        getCaptcha();
-      }).finally(() => {
-        loading.value = false;
-      });
    }
  };

--- a/continew-admin-ui/src/views/monitor/log/operation/index.vue
+++ b/continew-admin-ui/src/views/monitor/log/operation/index.vue
@ -12,7 +12,7 @@
                v-model="queryParams.description"
                placeholder="输入操作内容搜索"
                allow-clear
-                style="width: 150px;"
+                style="width: 150px"
                @press-enter="handleQuery"
              />
            </a-form-item>
@ -22,7 +22,7 @@
                :options="statusOptions"
                placeholder="操作状态搜索"
                allow-clear
-                style="width: 150px;"
+                style="width: 150px"
              />
            </a-form-item>
            <a-form-item field="createTime" hide-label>
@ -128,12 +128,14 @@
   */
  const getList = (params: OperationLogParam = { ...queryParams.value }) => {
    loading.value = true;
-    listOperationLog(params).then((res) => {
-      operationLogList.value = res.data.list;
-      total.value = res.data.total;
-    }).finally(() => {
-      loading.value = false;
-    });
+    listOperationLog(params)
+      .then((res) => {
+        operationLogList.value = res.data.list;
+        total.value = res.data.total;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
  };
  getList();

--- a/continew-admin-ui/src/views/system/role/index.vue
+++ b/continew-admin-ui/src/views/system/role/index.vue
@ -188,27 +188,18 @@
        @ok="handleOk"
        @cancel="handleCancel"
      >
-        <a-form ref="formRef" :model="form" :rules="rules">
+        <a-form ref="formRef" :model="form" :rules="rules" size="large">
          <a-form-item label="角色名称" field="roleName">
-            <a-input
-              v-model="form.roleName"
-              placeholder="请输入角色名称"
-              size="large"
-            />
+            <a-input v-model="form.roleName" placeholder="请输入角色名称" />
          </a-form-item>
          <a-form-item label="角色编码" field="roleCode">
-            <a-input
-              v-model="form.roleCode"
-              placeholder="请输入角色编码"
-              size="large"
-            />
+            <a-input v-model="form.roleCode" placeholder="请输入角色编码" />
          </a-form-item>
          <a-form-item label="数据权限" field="dataScope">
            <a-select
              v-model="form.dataScope"
              :options="dataScopeOptions"
              placeholder="请选择数据权限"
-              size="large"
            />
          </a-form-item>
          <a-form-item
@ -226,7 +217,6 @@
              tree-check-strictly
              :filter-tree-node="filterDeptTree"
              :fallback-option="false"
-              size="large"
            />
          </a-form-item>
          <a-form-item label="角色排序" field="roleSort">
@ -235,7 +225,6 @@
              placeholder="请输入角色排序"
              :min="1"
              mode="button"
-              size="large"
            />
          </a-form-item>
          <a-form-item label="描述" field="description">
@ -247,7 +236,6 @@
                minRows: 3,
              }"
              show-word-limit
-              size="large"
            />
          </a-form-item>
        </a-form>
@ -281,12 +269,8 @@
              <a-skeleton-line :rows="1" />
            </a-skeleton>
            <span v-else>
-              <a-tag v-if="role.status === 1" color="green">
-                <span class="circle pass"></span>启用
-              </a-tag>
-              <a-tag v-else color="red">
-                <span class="circle fail"></span>禁用
-              </a-tag>
+              <a-tag v-if="role.status === 1" color="green">启用</a-tag>
+              <a-tag v-else color="red">禁用</a-tag>
            </span>
          </a-descriptions-item>
          <a-descriptions-item label="数据权限">
@ -580,7 +564,7 @@
  };

  /**
-   * 多选
+   * 已选择的数据行发生改变时触发
   *
   * @param rowKeys ID 列表
   */
--- a/continew-admin-ui/src/views/system/user/center/components/basic-info.vue
+++ b/continew-admin-ui/src/views/system/user/center/components/basic-info.vue
@ -5,6 +5,7 @@
    :rules="rules"
    :label-col-props="{ span: 8 }"
    :wrapper-col-props="{ span: 16 }"
+    size="large"
    class="form"
  >
    <a-form-item :label="$t('userCenter.basicInfo.form.label.username')" disabled>
@ -12,14 +13,12 @@
        v-model="form.username"
        :placeholder="$t('userCenter.basicInfo.form.placeholder.username')"
        max-length="50"
-        size="large"
      />
    </a-form-item>
    <a-form-item :label="$t('userCenter.basicInfo.form.label.nickname')" field="nickname">
      <a-input
        v-model="form.nickname"
        :placeholder="$t('userCenter.basicInfo.form.placeholder.nickname')"
-        size="large"
        max-length="32"
      />
    </a-form-item>
@ -46,7 +45,7 @@
 <script lang="ts" setup>
  import { getCurrentInstance, ref, toRefs, reactive, computed } from 'vue';
  import { FieldRule } from '@arco-design/web-vue';
-  import { BasicInfoModel, updateBasicInfo } from "@/api/system/user-center";
+  import { BasicInfoModel, updateBasicInfo } from '@/api/system/user-center';
  import { useI18n } from 'vue-i18n';
  import { useLoginStore } from '@/store';

@ -66,8 +65,18 @@
    // 表单验证规则
    rules: computed((): Record<string, FieldRule[]> => {
      return {
-        username: [{ required: true, message: t('userCenter.basicInfo.form.error.required.username') }],
-        nickname: [{ required: true, message: t('userCenter.basicInfo.form.error.required.nickname') }],
+        username: [
+          {
+            required: true,
+            message: t('userCenter.basicInfo.form.error.required.username'),
+          },
+        ],
+        nickname: [
+          {
+            required: true,
+            message: t('userCenter.basicInfo.form.error.required.nickname'),
+          },
+        ],
      };
    }),
  });
@ -84,12 +93,14 @@
        updateBasicInfo({
          nickname: form.value.nickname,
          gender: form.value.gender,
-        }).then((res) => {
-          loginStore.getInfo();
-          proxy.$message.success(t('userCenter.basicInfo.form.save.success'));
-        }).finally(() => {
-          loading.value = false;
-        });
+        })
+          .then((res) => {
+            loginStore.getInfo();
+            proxy.$message.success(t('userCenter.basicInfo.form.save.success'));
+          })
+          .finally(() => {
+            loading.value = false;
+          });
      }
    });
  };
--- a/continew-admin-ui/src/views/system/user/center/components/security-settings/update-email.vue
+++ b/continew-admin-ui/src/views/system/user/center/components/security-settings/update-email.vue
@ -29,13 +29,12 @@
    @ok="handleUpdate"
    @cancel="handleCancel"
  >
-    <a-form ref="formRef" :model="form" :rules="rules">
+    <a-form ref="formRef" :model="form" :rules="rules" size="large">
      <a-form-item :label="$t('userCenter.securitySettings.updateEmail.form.label.newEmail')" field="newEmail">
        <a-input
          v-model="form.newEmail"
          :placeholder="$t('userCenter.securitySettings.updateEmail.form.placeholder.newEmail')"
          allow-clear
-          size="large"
        />
      </a-form-item>
      <a-form-item :label="$t('userCenter.securitySettings.updateEmail.form.label.captcha')" field="captcha">
@ -44,13 +43,11 @@
          :placeholder="$t('userCenter.securitySettings.updateEmail.form.placeholder.captcha')"
          max-length="6"
          allow-clear
-          size="large"
          style="width: 80%"
        />
        <a-button
          :loading="captchaLoading"
          type="primary"
-          size="large"
          :disabled="captchaDisable"
          class="captcha-btn"
          @click="handleSendCaptcha"
@ -64,7 +61,6 @@
          :placeholder="$t('userCenter.securitySettings.updateEmail.form.placeholder.currentPassword')"
          max-length="32"
          allow-clear
-          size="large"
        />
      </a-form-item>
    </a-form>
--- a/continew-admin-ui/src/views/system/user/center/components/security-settings/update-pwd.vue
+++ b/continew-admin-ui/src/views/system/user/center/components/security-settings/update-pwd.vue
@ -29,14 +29,13 @@
    @ok="handleUpdate"
    @cancel="handleCancel"
  >
-    <a-form ref="formRef" :model="form" :rules="rules">
+    <a-form ref="formRef" :model="form" :rules="rules" size="large">
      <a-form-item :label="$t('userCenter.securitySettings.updatePwd.form.label.oldPassword')" field="oldPassword">
        <a-input-password
          v-model="form.oldPassword"
          :placeholder="$t('userCenter.securitySettings.updatePwd.form.placeholder.oldPassword')"
          max-length="32"
          allow-clear
-          size="large"
        />
      </a-form-item>
      <a-form-item :label="$t('userCenter.securitySettings.updatePwd.form.label.newPassword')" field="newPassword">
@ -45,7 +44,6 @@
          :placeholder="$t('userCenter.securitySettings.updatePwd.form.placeholder.newPassword')"
          max-length="32"
          allow-clear
-          size="large"
        />
      </a-form-item>
      <a-form-item :label="$t('userCenter.securitySettings.updatePwd.form.label.rePassword')" field="rePassword">
@ -54,7 +52,6 @@
          :placeholder="$t('userCenter.securitySettings.updatePwd.form.placeholder.rePassword')"
          max-length="32"
          allow-clear
-          size="large"
        />
      </a-form-item>
    </a-form>