@jzt-packages/components 1.0.0

package/src/JztLogin/hooks/useLogin.ts

@@ -0,0 +1,186 @@
+import {
+  loginApi,
+  getLoginModeApi,
+  getPwdPolicyLoginApi,
+  getCaptchaApi,
+  sendSmsCodeByUserNameApi,
+  verificationCodeByUserNameApi,
+} from "@jzt-spd/utils/commonApi";
+import { OMSEncryptedPubKey } from "@jzt-spd/utils/consts";
+import JSEncrypt from "jsencrypt";
+import { ref, reactive } from "vue";
+import { Login } from "../interface";
+import { ElNotification, ElMessage } from "element-plus";
+import type { ElForm } from "element-plus";
+
+const loginRules = reactive({
+  phone: [{ required: true, message: "请输入用户名", trigger: "blur" }],
+  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
+  code: [
+    { required: true, message: "请输入验证码", trigger: "blur" },
+    { len: 6, message: "请输入6位验证码", trigger: "blur" },
+  ],
+});
+
+const isEncryption = ref(false);
+// 0-用户名+密码 1-用户名+密码+手机验证码 2-用户名+密码+图形验证码
+const loginMode = ref("0");
+const sendLoading = ref(false);
+const timer = ref();
+const second = ref(0);
+const sendDisabled = ref(false);
+const graphicCodeUrl = ref("");
+const savePassword = ref(false);
+
+const errMsg = ref<string>("");
+const loading = ref(false);
+
+const loginForm = reactive<Login.ReqLoginForm>({
+  phone: "jztsystem", //用户名：admin / user
+  password: "JZTeya0",
+  systemId: "SPD",
+});
+
+export const useParams = () => {
+  return {
+    loginRules,
+    loginForm,
+    loginMode,
+    sendLoading,
+    second,
+    graphicCodeUrl,
+    sendDisabled,
+    savePassword,
+    loading,
+    errMsg
+  };
+};
+
+export const useEvents = () => {
+  // 获取登录密码是否加密策略
+  // 0-用户名+密码 1-用户名+密码+手机验证码 2-用户名+密码+图形验证码
+  const getLoginMode = async () => {
+    const res = await getLoginModeApi();
+    if (res && res.result) {
+      loginMode.value = res.result?.configValue || "0";
+      if (loginMode.value === "2") {
+        getCaptchaImg();
+      }
+    }
+  };
+  // 获取登录模式接口
+  const getPwdPolicyLogin = async () => {
+    try {
+      const res = await getPwdPolicyLoginApi()
+      if (res && res.result) {
+        isEncryption.value = res.result.isEncryption || false
+      }
+    } catch (error) {
+      console.log(error)
+    }
+  }
+
+  // 获取图像验证码
+  const getCaptchaImg = async () => {
+    try {
+      const res = await getCaptchaApi();
+      if (res && res.result) {
+        graphicCodeUrl.value = res.result.actionresult;
+        loginForm.id = res.result.id;
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  // 根据用户名查找手机号发送短信验证码
+  const getSmsCode = async () => {
+    try {
+      sendLoading.value = true;
+      const res = await sendSmsCodeByUserNameApi({
+        userName: loginForm.phone,
+      });
+      ElMessage.success("验证码发送成功");
+      startTimerCode();
+    } catch (error) {
+      console.log(error);
+    } finally {
+      sendLoading.value = false;
+    }
+  };
+
+  // 倒计时效果
+  const startTimerCode = async () => {
+    let s = 10; //倒计时间
+    if (!timer.value) {
+      second.value = s
+      sendDisabled.value = true
+      timer.value = setInterval(() => {
+        if (second.value > 0 && second.value <= s) {
+          second.value--;
+        } else {
+          sendDisabled.value = false;
+          clearInterval(timer.value);
+          timer.value = null;
+        }
+      }, 1000);
+    }
+  };
+  const getLoginSetting = () => {
+    getLoginMode();
+    getPwdPolicyLogin();
+  };
+  return {
+    getLoginSetting,
+    getSmsCode,
+    getCaptchaImg,
+  };
+};
+// / 账号加密
+function IsEncrypted(password: string) {
+  const encryptor = new JSEncrypt(); // 创建加密对象实例
+  encryptor.setPublicKey(OMSEncryptedPubKey); // 设置公钥
+  return encryptor.encrypt(password) as string; // 加密
+}
+export async function loginServer(loginCallBack) {
+  loading.value = true;
+  try {
+    if (loginMode.value === "1") {
+      // 验证短信验证码
+      await verificationCodeByUserNameApi({
+        type: 1,
+        userName: loginForm.phone || "",
+        code: loginForm.code || "",
+      });
+    }
+    // 1.执行登录接口
+    const { result } = await loginApi({
+      phone: loginForm.phone,
+      password: isEncryption.value
+        ? IsEncrypted(loginForm.password)
+        : loginForm.password,
+      systemId: loginForm.systemId,
+      ...(loginMode.value === "2"
+        ? { id: loginForm.id, code: loginForm.code }
+        : {}),
+      ...(loginMode.value === "1" ? { code: loginForm.code } : {}),
+    });
+    //  2.添加动态路由 3.清空 tabs、keepAlive 数据
+    loginCallBack && loginCallBack(result);
+    // 4.跳转到首页
+    setTimeout(() => {
+      // ElNotification({
+      //   title: `亲爱的${result.userName}，你好~`,
+      //   message: '新站上线，欢迎体验，祝您今天工作愉快～',
+      //   type: 'success',
+      //   duration: 3000
+      // })
+    }, 500)
+  } catch (error: { code: number; message: string } | any) {
+    errMsg.value = error.message || "登录失败";
+  } finally {
+    setTimeout(() => {
+      loading.value = false;
+    }, 500);
+  }
+}

package/src/JztLogin/index.scss

@@ -0,0 +1,142 @@
+.login-container {
+  height: 100%;
+  min-height: 550px;
+  background-color: #eeeeee;
+  background-image: url("@/assets/images/login/login_bg.svg");
+  background-size: 100% 100%;
+  background-size: cover;
+  &::before {
+    content: "";
+    display: block;
+    height: 68px;
+    background-image: url("@/assets/images/login/login_logo.svg");
+    background-repeat: no-repeat;
+    background-position: left center;
+    background-color: rgba(255, 255, 255, 0.8);
+  }
+  :deep(.el-input-group__append) {
+    padding: 0;
+    color: #fff;
+    overflow: hidden;
+    box-sizing: border-box;
+    .SmsCode {
+      width: 120px;
+      height: 54px;
+      .el-button {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+        background-color: var(--el-color-primary-light-1);
+      }
+    }
+    .login-graphic-img {
+      width: calc(100% - 2px);
+      min-width: 120px;
+      height: 52px;
+      object-fit: cover;
+    }
+  }
+  .login-box {
+    /* .dark {
+      position: absolute;
+      top: 13px;
+      right: 18px;
+    } */
+    .login-form {
+      width: 420px;
+      position: absolute;
+      top: 50%;
+      left: 0;
+      right: 0;
+      margin: 0 auto;
+      transform: translateY(-50%);
+      padding: 64px 70px 72px;
+      background-color: rgba(251, 251, 251, 0.88);
+      border-radius: 2px;
+      backdrop-filter: blur(16px);
+      box-sizing: content-box;
+      .login-logo {
+        text-align: center;
+        margin-bottom: 67px;
+
+        .logo-text {
+          // padding: 0 0 0 25px;
+          margin: 0;
+          font-size: 42px;
+          font-weight: 400;
+          color: var(--el-text-color-primary);
+          white-space: nowrap;
+        }
+
+        .logo-text-tips {
+          font-size: 24px;
+          font-weight: 400;
+          color: var(--el-text-color-primary);
+          margin: 8px;
+        }
+      }
+      .el-form-item {
+        margin-bottom: 30px;
+
+        &.login-form-password {
+          margin-bottom: 20px;
+        }
+
+        .el-input {
+          height: 56px;
+        }
+        .el-checkbox {
+          height: auto;
+
+          :deep {
+            .el-checkbox__input.is-checked .el-checkbox__inner {
+              background-color: var(--el-color-primary);
+              border-color: var(--el-color-primary);
+            }
+            .el-checkbox__label {
+              font-size: 16px;
+            }
+            // .el-checkbox__input.is-checked + .el-checkbox__label {
+            //   color: var(--el-text-color-primary);
+            // }
+          }
+        }
+      }
+      .login-btn {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        margin-top: 30px;
+        white-space: nowrap;
+        .el-button {
+          width: 100%;
+          height: auto;
+          padding: 14px 0;
+          color: #ffffff;
+          font-size: 20px;
+          background: linear-gradient(90deg, #ff6b23 0%, #ff982a 100%);
+          border-radius: 8px;
+          border-color: transparent;
+        }
+      }
+    }
+    .err-msg {
+      height: 30px;
+      margin-top: 10px;
+      color: var(--el-color-error);
+    }
+  }
+}
+
+@media screen and (width <= 1250px) {
+  .login-left {
+    display: none;
+  }
+}
+
+@media screen and (width <= 600px) {
+  .login-form {
+    width: 97% !important;
+  }
+}

package/src/JztLogin/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="login-container">
+    <div class="login-box">
+      <div class="login-form">
+        <div class="login-logo">
+          <h2 class="logo-text">九州通供应链管理平台</h2>
+          <h3 class="logo-text-tips">精益管理，高效协同每一环</h3>
+        </div>
+        <LoginForm :loginCallBack="loginCallBack" />
+      </div>
+    </div>
+    <LoginFooter />
+  </div>
+</template>
+
+<script setup lang="ts" name="login">
+import LoginFooter from "./components/LoginFooter.vue";
+import LoginForm from "./components/LoginForm.vue";
+
+export interface LoginProps {
+  // loginApi: (params: any) => Promise<any>; // 请求表格数据的 api ==> 必传
+  loginCallBack?: (params: any) => Promise<any>;
+}
+
+// 接受父组件参数，配置默认值
+const props = withDefaults(defineProps<LoginProps>(), {});
+</script>
+
+<style scoped lang="scss">
+@use "./index";
+</style>

package/src/JztLogin/interface/index.ts

@@ -0,0 +1,47 @@
+// 登录模块
+export namespace Login {
+  export interface ReqLoginForm {
+    phone: string;
+    password: string;
+    systemId: string;
+    code?: string;
+    id?: string;
+  }
+
+  export interface ResLogin {
+    agencyId: string;
+    agencyName: string;
+    isEncryption: boolean;
+    isFirstLogin: boolean;
+    isNotChangePwd: boolean;
+    loginResult: number | null;
+    loginResultStr: string;
+    notChangePwdErrorMessage: string;
+    refreshToken: string;
+    token: string;
+    userId: string;
+    userName: string;
+  }
+  export interface ResAuthButtons {
+    [key: string]: string[];
+  }
+
+  export interface ResUserInfo {
+    authLists: Menu.authButtonOptions[];
+    baseMenus: Menu.MenuOptions[];
+    collectMenuIds: string[];
+    name: string;
+    phoneNumber: string;
+    phoneNumberConfirmed: boolean | null;
+    rolesIds: string[];
+    rolesName: string[];
+    userName: string;
+    userType: number | null;
+    userTypeStr: string;
+    email: string;
+    extraProperties: {
+      userType: number | null;
+      AgencyId: string;
+    };
+  }
+}

package/src/JztNumericalRange/index.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="numerical-range">
+    <el-input-number
+      v-model="searchParam[startField]"
+      v-bind="handleSearchProps"
+      :controls="false"
+      :placeholder="queryItem?.search?.startPlaceholder || '请输入'"
+      :clearable="true"
+    />
+    <span class="range">{{ queryItem?.search?.rangeSeparator || '至' }}</span>
+    <el-input-number
+      v-model="searchParam[endField]"
+      v-bind="handleSearchProps"
+      :controls="false"
+      :placeholder="queryItem?.search?.endPlaceholder || '请输入'"
+      :clearable="queryItem?.search?.clearable"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import { defineProps, ref, watch, computed } from 'vue'
+const props = defineProps({
+  queryItem: {
+    type: Object,
+    default: () => {}
+  },
+  searchParam: {
+    type: Object,
+    default: () => {}
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+})
+const startField = ref(props.queryItem.search?.startField)
+const endField = ref(props.queryItem.search?.endField)
+watch(
+  () => props.searchParam?.[props.queryItem.prop],
+  val => {
+    if (val && val.length) {
+      props.searchParam[startField.value] = val[0]
+      props.searchParam[endField.value] = val[1]
+    }
+  },
+  { deep: true, immediate: true }
+)
+const handleSearchProps = computed(() => {
+  let searchProps = props.queryItem.search?.props ?? {}
+  return searchProps
+})
+// watch(
+//   () => props.queryItem?.search?.defaultValue,
+//   val => {
+//     if (val && val.length) {
+//       props.searchParam[startField.value] = val[0]
+//       props.searchParam[endField.value] = val[1]
+//       console.log(112345, props.searchParam)
+//     }
+//     console.log(val)
+//   },
+//   { deep: true, immediate: true }
+// )
+</script>
+<style lang="scss" scoped>
+.numerical-range {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 0;
+  .el-input-number {
+    flex: 1;
+  }
+  :deep(.el-input-number .el-input__inner) {
+    text-align: left;
+  }
+  .range {
+    margin: 0 8px;
+  }
+}
+</style>

package/src/JztPageCard/comm/datePicker.vue

@@ -0,0 +1,151 @@
+<template>
+  <div v-if="isShow" class="flex-right-center item">
+    <div class="flex-right-center">
+      <div v-if="dateType1 === 'monthRange'">
+        <el-date-picker
+          v-model="selectMonth1"
+          type="month"
+          placeholder="请选择开始时间"
+          value-format="YYYY-MM"
+          format="YYYY-MM"
+          :clearable="false"
+          :disabled-date="disabledStartDate"
+          @change="changeMonth('start')"
+          style="width: 100px"
+        />
+        <span class="ml5 mr5">-</span>
+        <el-date-picker
+          v-model="selectMonth2"
+          type="month"
+          placeholder="请选择结束时间"
+          value-format="YYYY-MM"
+          format="YYYY-MM"
+          :clearable="false"
+          :disabled-date="disabledEndDate"
+          @change="changeMonth('end')"
+          style="width: 100px"
+        />
+      </div>
+      <el-date-picker
+        v-else
+        v-model="selectYear"
+        :type="dateType1"
+        :value-format="timeFormat"
+        format="YYYY"
+        @change="changeTime"
+        :clearable="false"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="JztPageCard_DatePicker">
+import dayjs from 'dayjs'
+/**
+ * @component 时间组件
+ */
+import { isBefore, isAfter, formatDateTime, formatDateRange } from '@jzt-spd/utils'
+import { ref, onMounted, computed } from 'vue'
+
+interface ProTableProps {
+  isShow?: boolean
+  timeList?: string | string[] //初始时间
+  timeInfo?: string[] //最终时间
+  dateType?: 'year' | 'monthRange'
+  valueFormat?: string
+}
+// 默认值
+const props = withDefaults(defineProps<ProTableProps>(), {
+  isShow: false,
+  timeList: '',
+  timeInfo: () => ['', ''],
+  dateType: 'year',
+  valueFormat: 'YYYY-MM-DD HH:mm:ss'
+})
+const emit = defineEmits(['changeTime'])
+
+const selectMonth1 = ref()
+const selectMonth2 = ref()
+const selectYear = ref() // props传入的初始时间
+const dateType1 = ref(props.dateType) //
+const timeFormat = ref() // 格式化日期格式模版
+
+const initData = () => {
+  if (!props.isShow) return
+  if (dateType1.value === 'year') {
+    timeFormat.value = 'YYYY'
+    selectYear.value = props.timeList || dayjs().format(timeFormat.value)
+  } else if (dateType1.value === 'monthRange') {
+    timeFormat.value = 'YYYY-MM'
+    const isArr = Array.isArray(props.timeList)
+    let startTime = props.timeList || dayjs().startOf('year').format(timeFormat.value)
+    let endTime = props.timeList || dayjs().format(timeFormat.value)
+    if (isArr && props.timeList.length === 2) {
+      startTime = props.timeList[0] ?? ''
+      endTime = props.timeList[1] ?? ''
+    }
+    selectMonth1.value = dayjs(startTime).format(timeFormat.value)
+    selectMonth2.value = dayjs(endTime).format(timeFormat.value)
+  }
+  getFormatDate()
+}
+// 处理时间最终结果
+const getFormatDate = () => {
+  // 1:格式化 2：获取时间
+  let yearInfo = { startTime: '', endTime: '', endTimeAdd: '' }
+  if (dateType1.value === 'year') {
+    yearInfo = formatDateRange({
+      formatStr: props.valueFormat,
+      startTime: selectYear.value,
+      endTime: selectYear.value,
+      type: 'year'
+    })
+  } else if (dateType1.value === 'monthRange') {
+    yearInfo = formatDateRange({
+      formatStr: props.valueFormat,
+      startTime: selectMonth1.value,
+      endTime: selectMonth2.value,
+      type: 'month'
+    })
+  }
+  emit('changeTime', yearInfo)
+}
+initData()
+
+// 禁用结束时间之后的日期
+const disabledStartDate = (time: Date) => {
+  return isAfter(time, selectMonth2.value)
+}
+// 禁用开始时间之钱的日期
+const disabledEndDate = (time: Date) => {
+  return isBefore(time, selectMonth1.value)
+}
+// 年份范围变动
+const changeMonth = (flag: string) => {
+  const startYear = formatDateTime(selectMonth1.value, 'YYYY')
+  const endYear = formatDateTime(selectMonth2.value, 'YYYY')
+  if (startYear != endYear && flag == 'start') {
+    selectMonth2.value = selectMonth1.value
+  } else if (startYear != endYear && flag == 'end') {
+    selectMonth1.value = selectMonth2.value
+  }
+  changeTime()
+}
+// 年份选择变动
+const changeTime = () => {
+  getFormatDate()
+}
+
+onMounted(() => {
+  changeTime()
+})
+</script>
+<style lang="scss" scoped>
+.item {
+  margin-left: 10px;
+}
+:deep(.el-date-editor) {
+  width: 126px;
+  // margin-right: 10px;
+}
+</style>

package/src/JztPageCard/comm/details.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="flx-left-center" :class="[isRadius ? 'radius-title-right' : 'title-right']" @click="goDetails">
+    {{ title }}
+    <div class="flx-center circle ml6">
+      <el-icon color="var(--el-color-primary)"><ArrowRight /></el-icon>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="JztPageCard_Details">
+/**
+ * @component 【更多详情】组件
+ */
+interface ProTableProps {
+  // isShow?: boolean // 是否显示标题右侧内容
+  title?: string //标题右侧内容
+  isRadius?: boolean
+}
+// 默认值
+const props = withDefaults(defineProps<ProTableProps>(), {
+  // isShow: false,
+  title: '查看更多',
+  isRadius: true
+})
+const emits = defineEmits(['goDetails'])
+// 更多详情
+const goDetails = () => {
+  emits('goDetails')
+}
+</script>
+<style lang="scss" scoped>
+.title-right {
+  color: var(--el-color-primary);
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+}
+// .title-right,
+.radius-title-right {
+  .circle {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: #f3f7ff;
+    border: 1px solid #dee8ff;
+  }
+}
+
+.radius-title-right {
+  color: #fff;
+  // color: #178afe;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  border-radius: 14px;
+  padding: 2px 8px;
+  background: linear-gradient(177.5deg, #5f91ff 0%, #105afd 100%);
+  flex-shrink: 0;
+}
+</style>