feat: (staff login) 增加部分字段

src/views/corporation/chargeModal.vue

@@ -1,140 +1,140 @@
-<template>
-  <BasicModal
-    v-bind="$attrs"
-    @register="register"
-    title="设备充值"
-    @ok="submit"
-    @visible-change="handleVisibleChange"
-  >
-    <div class="pt-3px pr-3px">
-      <BasicForm @register="registerForm" :model="modelRef">
-        <template #userName="{ record }">
-          {{ record.userName }}
-        </template>
-        <template #text="{ model, field }">
-          {{ model[field] }}
-        </template>
-      </BasicForm>
-    </div>
-  </BasicModal>
-</template>
-<script lang="ts">
-  import { defineComponent, ref, nextTick, inject } from 'vue';
-  import { BasicModal, useModalInner } from '/@/components/Modal';
-  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
-  import { useI18n } from '/@/hooks/web/useI18n';
-  import { addPoint } from '/@/api/corporation/modal';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  const schemas: FormSchema[] = [
-    {
-      field: 'userName',
-      component: 'Input',
-      label: '充值账号',
-      labelWidth: 100,
-      slot: 'text',
-      colProps: {
-        span: 20,
-      },
-    },
-    {
-      field: 'point',
-      component: 'Input',
-      slot: 'text',
-      label: '当前余额',
-      labelWidth: 100,
-      colProps: {
-        span: 20,
-      },
-      componentProps: {
-        disabled: true,
-      },
-    },
-    {
-      field: 'addPointnumber',
-      component: 'InputNumber',
-      label: '充 值',
-      labelWidth: 100,
-      colProps: {
-        span: 20,
-      },
-      defaultValue: 0,
-    },
-  ];
-  export default defineComponent({
-    components: { BasicModal, BasicForm },
-    props: {
-      userData: { type: Object },
-    },
-    emits: ['register', 'update'],
-    setup(props, { emit }) {
-      const { t } = useI18n();
-      const { createConfirm, createMessage } = useMessage();
-      const reload = inject('tablereload');
-      const modelRef = ref({
-        id: 0,
-      });
-      const [registerForm, { setFieldsValue, resetFields, getFieldsValue }] = useForm({
-        labelWidth: 120,
-        schemas,
-        showActionButtonGroup: false,
-        actionColOptions: {
-          span: 24,
-        },
-      });
-
-      const [register, { closeModal }] = useModalInner((data) => {
-        data && onDataReceive(data);
-      });
-      async function saveTable() {
-        let { addPointnumber } = getFieldsValue();
-        let res = await addPoint({
-          id: modelRef.value.id,
-          point: Number(addPointnumber),
-        });
-        console.log('saveTable', res, addPoint);
-        createMessage.success(t('common.optSuccess'));
-        // reload();
-        emit('update');
-        closeModal();
-      }
-      async function submit() {
-        createConfirm({
-          iconType: 'warning',
-          title: '提示',
-          content: '此操作将对该账号进行充值, 是否继续?',
-          onOk: async () => {
-            saveTable();
-          },
-        });
-      }
-      function onDataReceive(data) {
-        console.log('Data Received', data.record);
-        // 方式1;
-        resetFields();
-        setFieldsValue({
-          ...data.record,
-        });
-
-        // // 方式2
-        modelRef.value = {
-          ...data.record,
-        };
-      }
-
-      function handleVisibleChange(v) {
-        v && props.userData && nextTick(() => onDataReceive(props.userData));
-      }
-
-      return {
-        register,
-        submit,
-        saveTable,
-        reload,
-        schemas,
-        registerForm,
-        modelRef,
-        handleVisibleChange,
-      };
-    },
-  });
-</script>
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="register"
+    title="设备充值"
+    @ok="submit"
+    @visible-change="handleVisibleChange"
+  >
+    <div class="pt-3px pr-3px">
+      <BasicForm @register="registerForm" :model="modelRef">
+        <template #userName="{ record }">
+          {{ record.userName }}
+        </template>
+        <template #text="{ model, field }">
+          {{ model[field] }}
+        </template>
+      </BasicForm>
+    </div>
+  </BasicModal>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, nextTick } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { addPoint } from '/@/api/corporation/modal';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  const schemas: FormSchema[] = [
+    {
+      field: 'userName',
+      component: 'Input',
+      label: '充值账号',
+      labelWidth: 100,
+      slot: 'text',
+      colProps: {
+        span: 20,
+      },
+    },
+    {
+      field: 'point',
+      component: 'Input',
+      slot: 'text',
+      label: '当前余额',
+      labelWidth: 100,
+      colProps: {
+        span: 20,
+      },
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      field: 'addPointnumber',
+      component: 'InputNumber',
+      label: '充 值',
+      labelWidth: 100,
+      colProps: {
+        span: 20,
+      },
+      defaultValue: 0,
+    },
+  ];
+  export default defineComponent({
+    components: { BasicModal, BasicForm },
+    props: {
+      userData: { type: Object },
+    },
+    emits: ['register', 'update'],
+    setup(props, { emit }) {
+      const { t } = useI18n();
+      const { createConfirm, createMessage } = useMessage();
+      // const reload = inject('tablereload');
+      const modelRef = ref({
+        id: 0,
+      });
+      const [registerForm, { setFieldsValue, resetFields, getFieldsValue }] = useForm({
+        labelWidth: 120,
+        schemas,
+        showActionButtonGroup: false,
+        actionColOptions: {
+          span: 24,
+        },
+      });
+
+      const [register, { closeModal }] = useModalInner((data) => {
+        data && onDataReceive(data);
+      });
+      async function saveTable() {
+        let { addPointnumber } = getFieldsValue();
+        let res = await addPoint({
+          id: modelRef.value.id,
+          point: Number(addPointnumber),
+        });
+        console.log('saveTable', res, addPoint);
+        createMessage.success(t('common.optSuccess'));
+        // reload();
+        emit('update');
+        closeModal();
+      }
+      async function submit() {
+        createConfirm({
+          iconType: 'warning',
+          title: '提示',
+          content: '此操作将对该账号进行充值, 是否继续?',
+          onOk: async () => {
+            saveTable();
+          },
+        });
+      }
+      function onDataReceive(data) {
+        console.log('Data Received', data.record);
+        // 方式1;
+        resetFields();
+        setFieldsValue({
+          ...data.record,
+        });
+
+        // // 方式2
+        modelRef.value = {
+          ...data.record,
+        };
+      }
+
+      function handleVisibleChange(v) {
+        v && props.userData && nextTick(() => onDataReceive(props.userData));
+      }
+
+      return {
+        register,
+        submit,
+        saveTable,
+        reload,
+        schemas,
+        registerForm,
+        modelRef,
+        handleVisibleChange,
+      };
+    },
+  });
+</script>

src/views/staff/delListModal.vue

@@ -29,7 +29,7 @@
     props: {
       userData: { type: Object },
     },
-    emits: ['reload'],
+    emits: ['register', 'reload'],
     setup(_, context) {
       const modelRef = ref({
         toUserId: 0,

src/views/staff/detailsModal.vue

@@ -27,7 +27,7 @@
     props: {
       userData: { type: Object },
     },
-    emits: ['ok'],
+    emits: ['register', 'ok'],
     setup(_, context) {
       const modelRef = ref({});
       const userStore = useUserStore();
@@ -217,6 +217,32 @@
         //     ],
         //   },
         // },
+        // {
+        //   field: 'avatar',
+        //   component: 'Upload',
+        //   label: '员工头像',
+        //   required: true,
+        //   rules: [{ required: true, message: '请选择上传文件' }],
+        //   helpMessage: '推荐大小：400 * 400 像素',
+        //   itemProps: {
+        //     validateTrigger: 'onBlur',
+        //   },
+        //   // componentProps: {
+        //   //   api: uploadLogoApi,
+        //   //   maxNumber: 1,
+        //   //   maxSize: 10,
+        //   //   accept: ['jpg', 'jpeg', 'gif', 'png'],
+        //   //   afterFetch: function (data) {
+        //   //     console.log('data', data);
+        //   //     Reflect.set(data, 'url', data.message);
+        //   //     return data;
+        //   //   },
+        //   // },
+
+        //   colProps: {
+        //     span: 22,
+        //   },
+        // },
         {
           field: 'id',
           component: 'Input',

src/views/staff/list.vue

@@ -82,6 +82,7 @@
       DelListModal,
       Alert,
     },
+    emits: ['register'],
     setup() {
       const [register, { openModal }] = useModal();
       const surplusSubNum = ref({

src/views/staff/setpaswordModal.vue

@@ -1,98 +1,99 @@
-<template>
-  <BasicModal
-    v-bind="$attrs"
-    @register="register"
-    @ok="handSubmit"
-    :title="t('routes.staff.updateBtn')"
-    @visible-change="handleVisibleChange"
-    @cancel="resetFields"
-  >
-    <div class="pt-3px pr-3px">
-      <BasicForm @register="registerForm" />
-    </div>
-  </BasicModal>
-</template>
-<script lang="ts">
-  import { useI18n } from '/@/hooks/web/useI18n';
-  import { encodeStr } from '/@/utils/encodeUtil';
-  import { defineComponent, nextTick } from 'vue';
-  import { BasicModal, useModalInner } from '/@/components/Modal';
-  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
-  import { updatePasswordApi } from '/@/api/sys/user';
-  import { useMessage } from '/@/hooks/web/useMessage';
-
-  const { createMessage } = useMessage();
-
-  export default defineComponent({
-    components: { BasicModal, BasicForm },
-    props: {
-      userData: { type: Object },
-    },
-    setup(props) {
-      const { t } = useI18n();
-      const schemas: FormSchema[] = [
-        {
-          field: 'id',
-          component: 'Input',
-          label: 'id',
-          show: false,
-        },
-        {
-          field: 'password',
-          component: 'StrengthMeter',
-          label: t('routes.staff.password'),
-          labelWidth: 120,
-          required: true,
-          colProps: { span: 18 },
-        },
-      ];
-
-      const [
-        registerForm,
-        {
-          setFieldsValue,
-          validate,
-          resetFields,
-          // setProps
-        },
-      ] = useForm({
-        labelWidth: 120,
-        schemas,
-        showActionButtonGroup: false,
-        actionColOptions: {
-          span: 24,
-        },
-      });
-
-      const [register, { closeModal }] = useModalInner((data) => {
-        data && onDataReceive(data);
-      });
-
-      function onDataReceive(data) {
-        setFieldsValue({
-          id: data.id,
-        });
-      }
-      async function handSubmit() {
-        const { id, password } = await validate();
-        await updatePasswordApi({ id, newPassword: encodeStr(window.btoa(password)) });
-        createMessage.success(t('common.optSuccess'));
-        resetFields();
-        closeModal();
-      }
-      function handleVisibleChange(v) {
-        v && props.userData && nextTick(() => onDataReceive(props.userData));
-      }
-
-      return {
-        handSubmit,
-        register,
-        t,
-        schemas,
-        registerForm,
-        handleVisibleChange,
-        resetFields,
-      };
-    },
-  });
-</script>
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="register"
+    @ok="handSubmit"
+    :title="t('routes.staff.updateBtn')"
+    @visible-change="handleVisibleChange"
+    @cancel="resetFields"
+  >
+    <div class="pt-3px pr-3px">
+      <BasicForm @register="registerForm" />
+    </div>
+  </BasicModal>
+</template>
+<script lang="ts">
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { encodeStr } from '/@/utils/encodeUtil';
+  import { defineComponent, nextTick } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
+  import { updatePasswordApi } from '/@/api/sys/user';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  const { createMessage } = useMessage();
+
+  export default defineComponent({
+    components: { BasicModal, BasicForm },
+    props: {
+      userData: { type: Object },
+    },
+    emits: ['register'],
+    setup(props) {
+      const { t } = useI18n();
+      const schemas: FormSchema[] = [
+        {
+          field: 'id',
+          component: 'Input',
+          label: 'id',
+          show: false,
+        },
+        {
+          field: 'password',
+          component: 'StrengthMeter',
+          label: t('routes.staff.password'),
+          labelWidth: 120,
+          required: true,
+          colProps: { span: 18 },
+        },
+      ];
+
+      const [
+        registerForm,
+        {
+          setFieldsValue,
+          validate,
+          resetFields,
+          // setProps
+        },
+      ] = useForm({
+        labelWidth: 120,
+        schemas,
+        showActionButtonGroup: false,
+        actionColOptions: {
+          span: 24,
+        },
+      });
+
+      const [register, { closeModal }] = useModalInner((data) => {
+        data && onDataReceive(data);
+      });
+
+      function onDataReceive(data) {
+        setFieldsValue({
+          id: data.id,
+        });
+      }
+      async function handSubmit() {
+        const { id, password } = await validate();
+        await updatePasswordApi({ id, newPassword: encodeStr(window.btoa(password)) });
+        createMessage.success(t('common.optSuccess'));
+        resetFields();
+        closeModal();
+      }
+      function handleVisibleChange(v) {
+        v && props.userData && nextTick(() => onDataReceive(props.userData));
+      }
+
+      return {
+        handSubmit,
+        register,
+        t,
+        schemas,
+        registerForm,
+        handleVisibleChange,
+        resetFields,
+      };
+    },
+  });
+</script>

src/views/sys/login/LoginForm.vue

@@ -16,16 +16,8 @@
         class="fix-auto-fill"
       />
     </FormItem>
-    <FormItem name="password" class="enter-x">
-      <InputPassword
-        size="large"
-        visibilityToggle
-        v-model:value="formData.password"
-        :placeholder="t('sys.login.password')"
-      />
-    </FormItem>
 
-    <!-- <ARow class="enter-x">
+    <!-- <ARow class="enter-x captcha-container">
       <ACol :span="12">
         <FormItem name="captcha">
           <Input
@@ -34,12 +26,18 @@
             :placeholder="t('sys.login.captcha')"
             class="captcha"
           />
+          <a-button class="btn" size="small" type="primary"> 获取手机验证码 </a-button>
         </FormItem>
       </ACol>
-      <ACol :span="12" :style="{ 'text-align': 'right' }">
-        <img class="captcha-img" :src="`http://192.168.0.47:8190/captcha.jpg?t=${Date.now()}`" />
-      </ACol>
     </ARow> -->
+    <FormItem name="password" class="enter-x">
+      <InputPassword
+        size="large"
+        visibilityToggle
+        v-model:value="formData.password"
+        :placeholder="t('sys.login.password')"
+      />
+    </FormItem>
 
     <FormItem name="drag" class="enter-x" :style="{ 'text-align': 'right' }">
       <BasicDragVerify
@@ -71,9 +69,9 @@
       <Button type="primary" size="large" block @click="handleLogin" :loading="loading">
         {{ t('sys.login.loginButton') }}
       </Button>
-      <!-- <Button size="large" class="mt-4 enter-x" block @click="handleRegister">
+      <Button size="large" class="mt-4 enter-x" block @click="handleRegister">
         {{ t('sys.login.registerButton') }}
-      </Button> -->
+      </Button>
     </FormItem>
 
     <!-- <ARow class="enter-x">
@@ -138,7 +136,7 @@
   const { prefixCls } = useDesign('login');
   const userStore = useUserStore();
   // setLoginState
-  const { getLoginState } = useLoginState();
+  const { getLoginState, setLoginState } = useLoginState();
   const { getFormRules } = useFormRules();
 
   const formRef = ref();
@@ -150,7 +148,7 @@
     account: '',
     password: '',
     // password: encodeStr(window.btoa('zfb123456')),
-    // captcha: '',
+    captcha: '',
   });
 
   const { validForm } = useFormValid(formRef);
@@ -164,6 +162,10 @@
     isDragValidate.value = true;
   }
 
+  async function handleRegister() {
+    setLoginState(LoginStateEnum.REGISTER);
+  }
+
   async function handleLogin() {
     const data = await validForm();
     if (!data) return;

src/views/sys/login/RegisterForm.vue

@@ -1,104 +1,104 @@
-<template>
-  <template v-if="getShow">
-    <LoginFormTitle class="enter-x" />
-    <Form class="p-4 enter-x" :model="formData" :rules="getFormRules" ref="formRef">
-      <FormItem name="account" class="enter-x">
-        <Input
-          class="fix-auto-fill"
-          size="large"
-          v-model:value="formData.account"
-          :placeholder="t('sys.login.userName')"
-        />
-      </FormItem>
-      <FormItem name="mobile" class="enter-x">
-        <Input
-          size="large"
-          v-model:value="formData.mobile"
-          :placeholder="t('sys.login.mobile')"
-          class="fix-auto-fill"
-        />
-      </FormItem>
-      <FormItem name="sms" class="enter-x">
-        <CountdownInput
-          size="large"
-          class="fix-auto-fill"
-          v-model:value="formData.sms"
-          :placeholder="t('sys.login.smsCode')"
-        />
-      </FormItem>
-      <FormItem name="password" class="enter-x">
-        <StrengthMeter
-          size="large"
-          v-model:value="formData.password"
-          :placeholder="t('sys.login.password')"
-        />
-      </FormItem>
-      <FormItem name="confirmPassword" class="enter-x">
-        <InputPassword
-          size="large"
-          visibilityToggle
-          v-model:value="formData.confirmPassword"
-          :placeholder="t('sys.login.confirmPassword')"
-        />
-      </FormItem>
-
-      <FormItem class="enter-x" name="policy">
-        <!-- No logic, you need to deal with it yourself -->
-        <Checkbox v-model:checked="formData.policy" size="small">
-          {{ t('sys.login.policy') }}
-        </Checkbox>
-      </FormItem>
-
-      <Button
-        type="primary"
-        class="enter-x"
-        size="large"
-        block
-        @click="handleRegister"
-        :loading="loading"
-      >
-        {{ t('sys.login.registerButton') }}
-      </Button>
-      <Button size="large" block class="mt-4 enter-x" @click="handleBackLogin">
-        {{ t('sys.login.backSignIn') }}
-      </Button>
-    </Form>
-  </template>
-</template>
-<script lang="ts" setup>
-  import { reactive, ref, unref, computed } from 'vue';
-  import LoginFormTitle from './LoginFormTitle.vue';
-  import { Form, Input, Button, Checkbox } from 'ant-design-vue';
-  import { StrengthMeter } from '/@/components/StrengthMeter';
-  import { CountdownInput } from '/@/components/CountDown';
-  import { useI18n } from '/@/hooks/web/useI18n';
-  import { useLoginState, useFormRules, useFormValid, LoginStateEnum } from './useLogin';
-
-  const FormItem = Form.Item;
-  const InputPassword = Input.Password;
-  const { t } = useI18n();
-  const { handleBackLogin, getLoginState } = useLoginState();
-
-  const formRef = ref();
-  const loading = ref(false);
-
-  const formData = reactive({
-    account: '',
-    password: '',
-    confirmPassword: '',
-    mobile: '',
-    sms: '',
-    policy: false,
-  });
-
-  const { getFormRules } = useFormRules(formData);
-  const { validForm } = useFormValid(formRef);
-
-  const getShow = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER);
-
-  async function handleRegister() {
-    const data = await validForm();
-    if (!data) return;
-    console.log(data);
-  }
-</script>
+<template>
+  <template v-if="getShow">
+    <LoginFormTitle class="enter-x" />
+    <Form class="p-4 enter-x" :model="formData" :rules="getFormRules" ref="formRef">
+      <FormItem name="account" class="enter-x">
+        <Input
+          class="fix-auto-fill"
+          size="large"
+          v-model:value="formData.account"
+          placeholder="请输入手机号"
+        />
+      </FormItem>
+      <!-- <FormItem name="mobile" class="enter-x">
+        <Input
+          size="large"
+          v-model:value="formData.mobile"
+          :placeholder="t('sys.login.mobile')"
+          class="fix-auto-fill"
+        />
+      </FormItem> -->
+      <FormItem name="sms" class="enter-x">
+        <CountdownInput
+          size="large"
+          class="fix-auto-fill"
+          v-model:value="formData.sms"
+          placeholder="请输入手机验证码"
+        />
+      </FormItem>
+      <FormItem name="password" class="enter-x">
+        <StrengthMeter
+          size="large"
+          v-model:value="formData.password"
+          placeholder="请输入账号密码"
+        />
+      </FormItem>
+      <!-- <FormItem name="confirmPassword" class="enter-x">
+        <InputPassword
+          size="large"
+          visibilityToggle
+          v-model:value="formData.confirmPassword"
+          :placeholder="t('sys.login.confirmPassword')"
+        />
+      </FormItem> -->
+      <!-- 
+      <FormItem class="enter-x" name="policy">
+        <Checkbox v-model:checked="formData.policy" size="small">
+          {{ t('sys.login.policy') }}
+        </Checkbox>
+      </FormItem> -->
+
+      <Button
+        type="primary"
+        class="enter-x"
+        size="large"
+        block
+        @click="handleRegister"
+        :loading="loading"
+      >
+        {{ t('sys.login.registerButton') }}
+      </Button>
+      <Button size="large" block class="mt-4 enter-x" @click="handleBackLogin">
+        {{ t('sys.login.backSignIn') }}
+      </Button>
+    </Form>
+  </template>
+</template>
+<script lang="ts" setup>
+  import { reactive, ref, unref, computed } from 'vue';
+  import LoginFormTitle from './LoginFormTitle.vue';
+  // Checkbox
+  import { Form, Input, Button } from 'ant-design-vue';
+  import { StrengthMeter } from '/@/components/StrengthMeter';
+  import { CountdownInput } from '/@/components/CountDown';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useLoginState, useFormRules, useFormValid, LoginStateEnum } from './useLogin';
+
+  const FormItem = Form.Item;
+  // const InputPassword = Input.Password;
+  const { t } = useI18n();
+  const { handleBackLogin, getLoginState } = useLoginState();
+
+  const formRef = ref();
+  const loading = ref(false);
+
+  const formData = reactive({
+    account: '',
+    password: '',
+    confirmPassword: '',
+    mobile: '',
+    sms: '',
+    policy: false,
+  });
+
+  const { getFormRules } = useFormRules(formData);
+  const { validForm } = useFormValid(formRef);
+
+  const getShow = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER);
+
+  async function handleRegister() {
+    const data = await validForm();
+    if (!data) return;
+    console.log(data);
+  }
+</script>