Skip to content

X
xxx_phaseTwo_web
Commit 1ad7b273 authored by 夏敏伟's avatar 夏敏伟
Browse files
Options

删除部分无用组件

parent f13f920d
Pipeline #508 canceled with stages
      Hide whitespace changes
      Inline Side-by-side
      Showing with 78 additions and 770 deletions
      src/api/user.js 0 → 100644
      View file @ 1ad7b273
      import request from "@/utils/request";
      /**
      * @param data请求接口传递的参数
      * @return {Promise}
      */
      //登录接口
      export const login = (data) => {
      return request({
      url: '/rest/system/user/login',
      method: 'POST',
      data
      })
      }
      \ No newline at end of file
      src/components/Camera.vue deleted 100644 → 0
      View file @ f13f920d
      <template>
      <a-modal class="handleForm" :visible="visible" :title="title" :width="600" :bodyStyle="{ padding: '16px 24px' }" @ok="handleOk" @cancel="handleCancel" :destroyOnClose="true" :maskClosable="false">
      <video ref="local_video1" width="560" height="480" style="object-fit: fill" autoplay></video>
      </a-modal>
      </template>
      <script setup>
      import { reactive, ref, defineProps, onMounted, getCurrentInstance } from "vue";
      import { message } from 'ant-design-vue';
      const props = defineProps({
      visible: Boolean,
      title: String,
      });
      const emit = defineEmits(["handleSubmit", "changeCancel"]);
      const local_video = ref("");
      /**打开摄像头 */
      const OnCamera = () => {
      navigator.getUserMedia(
      {
      audio: false,
      video: true,
      },
      function (stream) {
      local_video.value.srcObject = stream;
      },
      function (error) {
      console.log(error);
      message.warning('未找到摄像头设备，请检查设备是否插紧');
      }
      );
      };
      /**关闭摄像头 */
      const OffCamera = () => {
      if (local_video.value.srcObject != null) {
      let stream = local_video.value.srcObject;
      stream.getTracks().forEach(function (track) {
      track.stop();
      });
      local_video.value.srcObject = null;
      }
      };
      const imgBase64 = ref("");
      /**截图 */
      const screenshot = () => {
      const canvas = document.createElement("canvas");
      const canvasCtx = canvas.getContext("2d");
      const ratio = window.devicePixelRatio || 1;
      canvasCtx.scale(ratio, ratio);
      canvas.width = local_video.value.offsetWidth * ratio;
      canvas.height = local_video.value.offsetHeight * ratio;
      canvasCtx.drawImage(local_video.value, 0, 0, canvas.width, canvas.height);
      imgBase64.value = canvas.toDataURL("image/png");
      OffCamera();
      };
      // 提交事件
      const handleOk = async () => {
      screenshot();
      await emit("handleSubmit", imgBase64, handleCancel);
      };
      // 关闭弹框事件
      const handleCancel = async () => {
      OffCamera();
      await emit("changeCancel", false);
      };
      onMounted(() => {
      const instance = getCurrentInstance();
      local_video.value = instance?.refs.local_video1;
      OnCamera();
      });
      </script>
      <style lang="less" scoped>
      .handleForm {
      :deep(.ant-modal-content .ant-modal-close-x) {
      width: 49px;
      height: 49px;
      line-height: 49px;
      }
      :deep(.ant-modal-content .ant-modal-body) {
      padding-block: 16px;
      }
      .form {
      :deep(.ant-form-item-with-help) {
      margin-bottom: -16px;
      }
      :deep(.ant-input-number, .ant-picker) {
      width: 100%;
      }
      :deep(.ant-form-item) {
      margin-right: 0;
      margin-bottom: 10px;
      }
      }
      .dropPoint {
      display: flex;
      justify-content: space-between;
      align-items: center;
      > .ant-input {
      flex: 1;
      margin-right: 10px;
      }
      }
      }
      </style>
      \ No newline at end of file
      src/components/Cropper.vue deleted 100644 → 0
      View file @ f13f920d
      <template>
      <a-modal
      class="handleForm"
      :visible="visible"
      :title="title"
      :width="800"
      :bodyStyle="{ padding: '16px 24px' }"
      @ok="handleOk"
      @cancel="handleCancel"
      :destroyOnClose="true"
      :maskClosable="false"
      >
      <div style="display: flex">
      <div style="width: 65%">
      <!--使用ref属性给图片元素命名为imageRef-->
      <img ref="imageRef" :src="imageSrc" alt="image" style="width: 600px" />
      <div style="margin-top: 20px">
      <a-space :size="40">
      <a-button type="primary" @click="retake">重拍</a-button>
      <a-button type="primary" @click="cropImage">裁剪图片</a-button>
      </a-space>
      </div>
      </div>
      <div style="width: 35%; text-align: center; margin-left: 20px">
      <div style="font-size: 20px; line-height: 70px; font-weight: 600">
      <span>预览</span>
      </div>
      <div>
      <a-image
      width="186.829px"
      height="230px"
      :src="croppedImage"
      fallback="data:image/png;base64,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"
      />
      </div>
      </div>
      </div>
      </a-modal>
      </template>
      <script setup>
      import { ref, onMounted, onBeforeUnmount } from "vue";
      import Cropper from "cropperjs";
      import "cropperjs/dist/cropper.css";
      const props = defineProps({
      //图片地址
      imageSrc: {
      type: String,
      required: true,
      },
      //aspectRatio:置裁剪框为固定的宽高比
      aspectRatio: {
      type: Number,
      default: 0.812,
      },
      //viewMode: 视图控制
      viewMode: {
      type: Number,
      default: 1,
      },
      //autoCropArea: 设置裁剪区域占图片的大小 值为 0-1 默认 0.8 表示 80%的区域
      autoCropArea: {
      type: Number,
      default: 0.8,
      },
      visible: Boolean,
      title: String,
      });
      //绑定图片的dom对象
      const imageRef = ref(null);
      let cropper = null;
      //使用Cropper构造函数创建裁剪器实例，并将图片元素和一些裁剪选项传入
      onMounted(() => {
      new_Cropper();
      });
      /**导入图片 */
      const new_Cropper = () => {
      cropper = new Cropper(imageRef.value, {
      aspectRatio: props.aspectRatio,
      viewMode: props.viewMode,
      autoCropArea: props.autoCropArea,
      });
      };
      //定义方法
      const emit = defineEmits([
      "updateImageSrc",
      "changeCancel",
      "handleSubmit",
      "handleRetake",
      ]);
      //在cropImage函数中，获取裁剪后的图片数据URL，并使用emit方法触发updateImageSrc事件，
      // 将裁剪后的图片数据URL传递给父组件。
      const croppedImage = ref("");
      const cropImage = () => {
      const canvas = cropper.getCroppedCanvas();
      croppedImage.value = canvas.toDataURL();
      // emit("updateImageSrc", croppedImage);
      };
      /**重拍 */
      const retake = async () => {
      await emit("handleRetake", {}, handleCancel);
      };
      // 提交事件
      const handleOk = async () => {
      await emit("handleSubmit", croppedImage, handleCancel);
      };
      // 关闭弹框事件
      const handleCancel = async () => {
      await emit("changeCancel");
      };
      //销毁
      onBeforeUnmount(() => {
      cropper.destroy();
      });
      </script>
      \ No newline at end of file
      src/components/HelloWorld.vue deleted 100644 → 0
      View file @ f13f920d
      <script setup>
      import { onMounted, reactive } from "vue";
      import { getInfo } from "../api/commonapi";//引入接口方法
      import { BorderBox3 as DvBorderBox3 } from '@kjgl77/datav-vue3'
      const userInfo = reactive({
      userName: "XXX",
      age: "XX",
      });
      onMounted(() => {
      //调接口，处理返回结果
      getInfo({ orgid: "3348847743" }).then((res) => {
      userInfo.userName=res.userName
      userInfo.age=res.age
      });
      });
      </script>
      <template>
      <h1>{{ userInfo.userName }}---{{ userInfo.age }}</h1>
      <div w50rem h18rem flex justify-center items-center bg-dark>
      <dv-decoration1 style="width:200px;height:50px;" />
      </div>
      </template>
      <style scoped>
      </style>
      \ No newline at end of file
      src/store/index.js
      View file @ 1ad7b273
      ...@@ -8,217 +8,35 @@ import { ...@@ -8,217 +8,35 @@ import {
      message message
      } from 'ant-design-vue'; } from 'ant-design-vue';
      import router from '@/router/index'; import router from '@/router/index';
      import {
      getAllRoom
      } from '@/api/room.js'
      import {
      // getAllCountry,
      // getAllVisa,
      // getAllGender,
      // getAllForeignGuest,
      // getAllInternalGuest,
      // getAllPlateNumber,
      // getAllReasonEntry,
      // getAllProvinciaUrbanAreas,
      // getAllNation,
      // getAllRoomType,
      getAllCode
      } from '@/api/default';
      export const useStore = defineStore('user', () => { export const useStore = defineStore('user', () => {
      const userInfo = ref(); const userInfo = ref();
      const token = ref(null); const token = ref(null);
      const hotelInfo = ref({
      hotelId: null,
      hotelAddress: null
      });
      const menuParams = ref({
      selectedKeys: ['/inland/inlandAdd'],
      openKeys: ['lkgl', '/inland/inlandAdd'],
      preOpenKeys: ['lkgl'],
      activeKey: '/inland/inlandAdd',
      panes: [{ title: '内宾入住', key: '/inland/inlandAdd', closable: false }]
      });
      // const hotelId = ref(null);
      const roomAll = ref([]);
      // const defaultType = ref({
      // countryAll: [],
      // visaAll: [],
      // genderAll: [],
      // foreignGuestAll: [],
      // internalGuestAll: [],
      // plateNumberAll: [],
      // reasonEntryAll: [],
      // provinciaUrbanAreasAll: [],
      // nationAll: [],
      // roomAllType: [],
      // checkInStatusAll: [],
      // departmentAll: []
      // });
      const defaultType = ref([]);
      const getUserInfo = async (param) => { const getUserInfo = async (param) => {
      login(param).then(res => { // login(param).then(res => {
      if (res.code == '9000') { // if (res.code == '9000') {
      message.success('登录成功!'); // message.success('登录成功!');
      hotelInfo.value.hotelId = param.hotelId; // token.value = res.data;
      hotelInfo.value.hotelAddress = param.address; // let strings = res.data.split("."); //截取token，获取载体
      token.value = res.data; // userInfo.value = JSON.parse(decodeURIComponent(escape(window.atob(strings[1].replace(/-/g, "+").replace(/_/g, "/")))));
      let strings = res.data.split("."); //截取token，获取载体 // router.push({
      userInfo.value = JSON.parse(decodeURIComponent(escape(window.atob(strings[1].replace(/-/g, "+").replace(/_/g, "/"))))); // name: 'homepage'
      router.push({ // });
      name: 'homepage' // }
      }); // }).catch(err => {
      getAllCode().then(res => { // message.error(err.message);
      defaultType.value = res.data; // })
      // for (let i = 0; i < res.data.length; i++) {
      // switch (res.data[i].key) {
      // case 1: //查询房间类型
      // defaultType.value.roomAllType = res.data[i];
      // break;
      // case 2: //查询入住状态
      // defaultType.value.checkInStatusAll = res.data[i];
      // break;
      // case 3: //查询所有内宾证件种类
      // defaultType.value.internalGuestAll = res.data[i];
      // break;
      // case 4: //查询所有外宾证件种类
      // defaultType.value.foreignGuestAll = res.data[i];
      // break;
      // case 5: //查询性别
      // defaultType.value.genderAll = res.data[i];
      // break;
      // case 6: //查询所有车牌类型
      // defaultType.value.plateNumberAll = res.data[i];
      // break;
      // case 7: //查询入境事由
      // defaultType.value.reasonEntryAll = res.data[i];
      // break;
      // case 8: //查询所有签证种类
      // defaultType.value.visaAll = res.data[i];
      // break;
      // case 9: //查询所有国家
      // defaultType.value.countryAll = res.data[i];
      // break;
      // case 10: //查询所有民族
      // defaultType.value.visaAll = res.data[i];
      // break;
      // case 11: //查询全国省市县
      // defaultType.value.departmentAll = res.data[i];
      // break;
      // }
      // }
      })
      //当前酒店下所有的房间号
      getAllRoom({
      hotelid: param.hotelId
      }).then(res => {
      roomAll.value = res.data;
      });
      // //查询所有国家
      // getAllCountry().then(res => {
      // defaultType.value.countryAll = res.data;
      // });
      // //查询所有签证种类
      // getAllVisa().then(res => {
      // defaultType.value.visaAll = res.data;
      // })
      // //查询性别
      // getAllGender().then(res => {
      // defaultType.value.genderAll = res.data;
      // })
      // //查询所有外宾证件种类
      // getAllForeignGuest().then(res => {
      // defaultType.value.foreignGuestAll = res.data;
      // })
      // //查询所有内宾证件种类
      // getAllInternalGuest().then(res => {
      // defaultType.value.internalGuestAll = res.data;
      // })
      // //查询所有车牌类型
      // getAllPlateNumber().then(res => {
      // defaultType.value.plateNumberAll = res.data;
      // });
      // //查询入境事由
      // getAllReasonEntry().then(res => {
      // defaultType.value.reasonEntryAll = res.data;
      // })
      // //查询省市县
      // getAllProvinciaUrbanAreas().then(res => {
      // defaultType.value.provinciaUrbanAreasAll = res.data;
      // })
      // //查询所有民族
      // getAllNation().then(res => {
      // defaultType.value.nationAll = res.data;
      // })
      // //查询所有房间类型
      // getAllRoomType().then(res => {
      // defaultType.value.roomAllType = res.data;
      // })
      }
      }).catch(err => {
      message.error(err.message);
      })
      } }
      const clearUserInfo = () => { const clearUserInfo = () => {
      userInfo.value = {}; userInfo.value = {};
      localStorage.removeItem('user'); localStorage.removeItem('user');
      }; };
      const returnCode = key => {
      if (defaultType.value.length > 0) {
      let mateCode = defaultType.value.filter(item => {
      return item.key == key
      });
      return mateCode[0].value
      } else {
      getCode();
      }
      }
      const getCode = () => {
      getAllCode().then(res => {
      defaultType.value = res.data;
      let mateCode = defaultType.value.filter(item => {
      return item.key == key
      });
      return mateCode[0].value
      })
      }
      const clearAll = () => {
      defaultType.value = [];
      roomAll.value = [];
      }
      const setAll = (dataCode,dataRoom) => {
      defaultType.value = dataCode;
      roomAll.value = dataRoom
      }
      return { return {
      userInfo, userInfo,
      token, token
      hotelInfo,
      menuParams,
      // hotelId,
      roomAll,
      defaultType,
      returnCode,
      getUserInfo,
      clearUserInfo,
      clearAll,
      setAll,
      } }
      }, { }, {
      persist: true persist: true
      ......
      src/views/homePage/homepage.vue
      View file @ 1ad7b273
      ...@@ -2,326 +2,35 @@ ...@@ -2,326 +2,35 @@
      <a-layout class="homepage"> <a-layout class="homepage">
      <a-layout-header class="home-header"> <a-layout-header class="home-header">
      <div class="header-logo"> <div class="header-logo">
      <img :src="homeLogo" alt="" style="width:40px;height:40px;">&nbsp; <span>3z二期</span>
      <span>旅游业治安管理信息系统</span>
      </div> </div>
      <div class="header-btn"> <div class="header-btn">
      <a-button type="primary" @click="()=>{router.push('/inland/inlandAdd')}"> <div class="header-info">
      <template #icon> <a-dropdown>
      <IdcardOutlined /> <a class="ant-dropdown-link" style="color:white;">
      </template> <DownOutlined />
      内宾入住 </a>
      </a-button> <template #overlay>
      <a-button type="primary" @click="()=>{router.push('/abroad/abroadAdd')}"> </template>
      <template #icon> </a-dropdown>
      <ScheduleOutlined /> </div>
      </template>
      外宾入住
      </a-button>
      <a-button type="primary">
      <template #icon>
      <UserDeleteOutlined />
      </template>
      离店
      </a-button>
      <a-dropdown>
      <template #overlay>
      <a-menu @click="handleMenuClick">
      <!-- <a-menu-item key="1">
      <EditOutlined />
      修改密码
      </a-menu-item>
      <a-menu-item key="2">
      <LoginOutlined />
      退出
      </a-menu-item> -->
      </a-menu>
      </template>
      <a-button>
      其他
      <DownOutlined />
      </a-button>
      </a-dropdown>
      </div>
      <div class="header-info">
      <a-dropdown>
      <a class="ant-dropdown-link" @click.prevent style="color:white;">
      {{loginUser}}
      <DownOutlined />
      </a>
      <template #overlay>
      <a-menu>
      <a-menu-item key="1">
      <a-button @click="editPassword">修改密码</a-button>
      </a-menu-item>
      <a-menu-item key="2">
      <a-button @click="clearCache">刷新缓存</a-button>
      </a-menu-item>
      <a-menu-item key="2">
      <a-button @click="loginOut">退出系统</a-button>
      </a-menu-item>
      </a-menu>
      </template>
      </a-dropdown>
      </div> </div>
      </a-layout-header> </a-layout-header>
      <a-layout class="home-bottom" style="background: white;"> <a-layout class="home-bottom" style="background: white;">
      <a-layout-sider class="bottom-sider" :collapsed="collapsed" width="260"> <a-layout-sider class="bottom-sider" width="260">
      <div> <div>
      <a-button type="primary" class="collapsedButton" @click="toggleCollapsed">
      <MenuUnfoldOutlined v-if="collapsed" />
      <MenuFoldOutlined v-else />
      </a-button>
      <a-menu class="myMenu" mode="inline" theme="dark" v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys" @click="handleClick" @openChange="changeOpenClick">
      <template v-for="item in menuList" :key="item.path">
      <template v-if="item.children.length==0">
      <a-menu-item :key="item.path" :text='item.label'>
      <template #icon>
      <PieChartOutlined />
      </template>
      {{ item.label }}
      </a-menu-item>
      </template>
      <template v-else>
      <a-sub-menu :key="item.path" :text='item.label'>
      <template #icon>
      <MailOutlined />
      </template>
      <template #title>{{ item.label }}</template>
      <template v-for="item1 in item.children" :key="item.path">
      <template v-if="item1.children.length==0">
      <a-menu-item :key="item1.path" :text='item1.label'>
      <template #icon>
      <PieChartOutlined />
      </template>
      {{ item1.label }}
      </a-menu-item>
      </template>
      <template v-else>
      <a-sub-menu :key="item1.path" :text='item1.label'>
      <template #icon>
      <MailOutlined />
      </template>
      <template #title>{{ item1.label }}</template>
      <template v-for="item11 in item1.children" :key="item.path">
      <template v-if="item11.children.length==0">
      <a-menu-item :key="item11.path" :text='item11.label'>
      <template #icon>
      <PieChartOutlined />
      </template>
      {{ item11.label }}
      </a-menu-item>
      </template>
      <template v-else>
      <!-- <sub-menu :menu-info="item" :key="item.id" /> -->
      </template>
      </template>
      </a-sub-menu>
      </template>
      </template>
      </a-sub-menu>
      </template>
      </template>
      </a-menu>
      </div> </div>
      </a-layout-sider> </a-layout-sider>
      <a-layout-content class="bottom-content">
      <a-tabs class="myTabs" v-model:activeKey="activeKey" hide-add type="editable-card" @edit="onEdit" size="small">
      <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="pane.closable">
      </a-tab-pane>
      </a-tabs>
      <router-view v-if="visible" class="router-content"></router-view>
      </a-layout-content>
      </a-layout> </a-layout>
      </a-layout> </a-layout>
      <EditPassword ref="editPasswordRef" />
      </template> </template>
      <script setup> <script setup>
      import { onMounted, watch } from "vue";
      import { useRouter } from "vue-router";
      import { getTree } from '@/api/menu';
      import { useStore } from '@/store/index.js'
      import EditPassword from '@/views/homePage/components/editPasswordModal.vue';
      import { addRoutes } from '@/router/dynamicRoutes';
      import homeLogo from '@/assets/img/homepage/logo.png';
      import { getAllCode } from '@/api/default';
      import { getAllRoom } from '@/api/room.js';
      import { message } from "ant-design-vue";
      const userStore = useStore();
      const editPasswordRef = ref();
      //左侧菜单栏参数
      const router = useRouter();
      const menuList = ref([]);
      const collapsed = ref(false);
      const selectedKeys = ref([]);
      const openKeys = ref([]);
      const preOpenKeys = ref([]);
      const loginUser = ref('');
      watch(
      () => openKeys,
      (val, oldVal) => {
      preOpenKeys.value = oldVal;
      userStore.menuParams.preOpenKeys = preOpenKeys.value;
      },
      );
      //折叠菜单栏
      const toggleCollapsed = () => {
      collapsed.value = !collapsed.value;
      openKeys.value = collapsed.value ? [] : preOpenKeys.value;
      userStore.menuParams.openKeys = openKeys.value;
      };
      //左侧菜单栏点击
      const handleClick = (e) => {
      selectedKeys.value[0] = e.key;
      if (e.key.indexOf('/') > -1) {
      if (panes.value.some(item => item.key == e.key)) {
      activeKey.value = e.key;
      return
      }
      router.push(e.key);
      activeKey.value = e.key;
      panes.value.push({
      title: e.item.text,
      key: e.key,
      });
      userStore.menuParams.selectedKeys = selectedKeys.value;
      userStore.menuParams.panes = panes.value;
      userStore.menuParams.activeKey = activeKey.value;
      }
      }
      //设置左侧菜单栏只能打开一个
      const changeOpenClick = e => {
      if (e.length > 0) {
      if (e.indexOf('cyrygl') <= -1) {
      openKeys.value = openKeys.value.slice(-1);
      } else {
      if (openKeys.value.slice(-1) != 'cyrygl') {
      openKeys.value = openKeys.value.filter(item => item != 'ldgl' && item != 'cyrygl');
      }
      }
      userStore.menuParams.openKeys = openKeys.value;
      }
      }
      //右侧tabs参数
      const panes = ref([]);
      const activeKey = ref('');
      const newTabIndex = ref(0);
      const visible = ref(true);
      //移除tabs
      const remove = targetKey => {
      let lastIndex = 0;
      panes.value.forEach((pane, i) => {
      if (pane.key === targetKey) {
      lastIndex = i - 1;
      }
      });
      panes.value = panes.value.filter(pane => pane.key !== targetKey);
      if (panes.value.length && activeKey.value === targetKey) {
      if (lastIndex >= 0) {
      activeKey.value = panes.value[lastIndex].key;
      } else {
      activeKey.value = panes.value[0].key;
      }
      }
      userStore.menuParams.panes = panes.value;
      userStore.menuParams.activeKey = activeKey.value;
      };
      const onEdit = targetKey => {
      remove(targetKey);
      };
      //监听被选中的tabs的key
      watch(activeKey, (newValue, oldValue) => {
      router.push(activeKey.value);
      userStore.menuParams.activeKey = activeKey.value;
      })
      //监听tabs的数组
      watch(panes, (newValue, oldValue) => {
      visible.value = newValue.length > 0 ? true : false;
      panes.value.forEach((item, index) => {
      if (panes.value.length - 1 != index) {
      delete item.closable
      } else {
      panes.value[panes.value.length - 1]['closable'] = false;
      }
      })
      userStore.menuParams.panes = panes.value;
      }, { deep: true })
      onMounted(() => {
      getTree({ type: 'USER', value: '1' }).then(res => {
      menuList.value = res.data;
      loginUser.value = userStore.userInfo.account;
      selectedKeys.value = userStore.menuParams.selectedKeys;
      openKeys.value = userStore.menuParams.openKeys;
      preOpenKeys.value = userStore.menuParams.preOpenKeys;
      activeKey.value = userStore.menuParams.activeKey;
      panes.value = userStore.menuParams.panes;
      });
      });
      //查询所有字典
      const getAllCode_pro = () => {
      return new Promise((resolve) => {
      getAllCode().then((res) => {
      if (res.code == 9000) {
      resolve(res.data);
      } else {
      resolve("");
      }
      });
      });
      }
      //查询所有房间
      const getAllRoom_pro = () => {
      return new Promise((resolve) => {
      getAllRoom({hotelid: userStore.hotelInfo.hotelId}).then((res) => {
      if (res.code == 9000) {
      resolve(res.data);
      } else {
      resolve("");
      }
      });
      });
      }
      const clearCache = ()=>{
      Promise.all([getAllCode_pro(),getAllRoom_pro()]).then(([res1, res2]) => {
      userStore.clearAll();
      userStore.setAll(res1, res2);
      message.success('刷新缓存完成！');
      router.go(0);
      }).catch(error=>{
      message.warning('刷新缓存失败');
      })
      }
      const loginOut = () => {
      localStorage.removeItem('user')
      userStore.token = null;
      router.push('/login');
      userStore.$patch(state => {
      userStore.menuParams.selectedKeys = ['/inland/inlandAdd'];
      userStore.menuParams.openKeys = ['lkgl', '/inland/inlandAdd'];
      userStore.menuParams.preOpenKeys = ['lkgl'];
      userStore.menuParams.activeKey = '/inland/inlandAdd';
      userStore.menuParams.panes = [{ title: '内宾入住', key: '/inland/inlandAdd', closable: false }]
      })
      }
      //修改密码
      const editPassword = () => {
      editPasswordRef.value.showModal();
      }
      </script> </script>
      ...@@ -329,12 +38,14 @@ const editPassword = () => { ...@@ -329,12 +38,14 @@ const editPassword = () => {
      .homepage { .homepage {
      width: 100%; width: 100%;
      height: 100%; height: 100%;
      .home-header { .home-header {
      width: 100%; width: 100%;
      height: 80px; height: 80px;
      // display: flex; // display: flex;
      color: white; color: white;
      background-color: #0e5de5; background-color: #0e5de5;
      .header-logo { .header-logo {
      width: 350px; width: 350px;
      height: 100%; height: 100%;
      ...@@ -345,11 +56,13 @@ const editPassword = () => { ...@@ -345,11 +56,13 @@ const editPassword = () => {
      justify-content: center; justify-content: center;
      align-items: center; align-items: center;
      } }
      .header-btn { .header-btn {
      display: none; display: none;
      // width: 600px; // width: 600px;
      float: left; float: left;
      padding-top: 15px; padding-top: 15px;
      button { button {
      margin-right: 15px; margin-right: 15px;
      color: white; color: white;
      ...@@ -358,6 +71,7 @@ const editPassword = () => { ...@@ -358,6 +71,7 @@ const editPassword = () => {
      box-shadow: 0px 0px 1px 1px #ddddddb3; box-shadow: 0px 0px 1px 1px #ddddddb3;
      } }
      } }
      .header-info { .header-info {
      width: 200px; width: 200px;
      float: right; float: right;
      ...@@ -366,15 +80,18 @@ const editPassword = () => { ...@@ -366,15 +80,18 @@ const editPassword = () => {
      text-align: right; text-align: right;
      } }
      } }
      .home-bottom { .home-bottom {
      width: 100%; width: 100%;
      height: calc(100% - 80px); height: calc(100% - 80px);
      .bottom-sider { .bottom-sider {
      width: 260px !important; width: 260px !important;
      height: 100%; height: 100%;
      border-top: 2px solid #3c5f9d; border-top: 2px solid #3c5f9d;
      // background-color: rgb(41, 23, 91); // background-color: rgb(41, 23, 91);
      background-color: #0e5de5; background-color: #0e5de5;
      .collapsedButton { .collapsedButton {
      margin-top: 20px; margin-top: 20px;
      margin-left: 16px; margin-left: 16px;
      ...@@ -384,42 +101,45 @@ const editPassword = () => { ...@@ -384,42 +101,45 @@ const editPassword = () => {
      border: 1px solid white; border: 1px solid white;
      box-shadow: 0px 0px 1px 1px #ddddddb3; box-shadow: 0px 0px 1px 1px #ddddddb3;
      } }
      .myMenu { .myMenu {
      // background-color: rgb(41, 23, 91); // background-color: rgb(41, 23, 91);
      background-color: #0e5de5; background-color: #0e5de5;
      :deep(.ant-menu-inline.ant-menu-sub) { :deep(.ant-menu-inline.ant-menu-sub) {
      // background-color: rgb(41, 23, 91); // background-color: rgb(41, 23, 91);
      background-color: #0e5de5; background-color: #0e5de5;
      } }
      } }
      :deep(
      .ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal) :deep(.ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal) .ant-menu-item-selected) {
      .ant-menu-item-selected
      ) {
      background-color: white !important; background-color: white !important;
      span { span {
      // color: rgb(41, 23, 91); // color: rgb(41, 23, 91);
      color: #0e5de5; color: #0e5de5;
      } }
      } }
      } }
      .bottom-content { .bottom-content {
      width: calc(100% - 260px); width: calc(100% - 260px);
      height: 100%; height: 100%;
      padding: 10px; padding: 10px;
      .router-content { .router-content {
      width: 100%; width: 100%;
      height: calc(100% - 60px); height: calc(100% - 60px);
      border-top: 1px solid #ddd; border-top: 1px solid #ddd;
      } }
      :deep(
      .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active, :deep(.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active,
      .ant-tabs-card > div > .ant-tabs-nav .ant-tabs-tab-active .ant-tabs-card > div > .ant-tabs-nav .ant-tabs-tab-active) {
      ) {
      color: white !important; color: white !important;
      background-color: #0e5de5 !important; background-color: #0e5de5 !important;
      // background-color: rgb(41, 23, 91) !important; // background-color: rgb(41, 23, 91) !important;
      } }
      :deep(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) { :deep(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
      color: white !important; color: white !important;
      } }
      ......
      src/views/login/login.vue
      View file @ 1ad7b273
      ...@@ -7,14 +7,14 @@ ...@@ -7,14 +7,14 @@
      <div class="login-content-form"> <div class="login-content-form">
      <a-form :model="formState" @finish="handleFinish" @finishFailed="handleFinishFailed"> <a-form :model="formState" @finish="handleFinish" @finishFailed="handleFinishFailed">
      <a-form-item> <a-form-item>
      <a-input v-model:value="formState.user" placeholder="Username"> <a-input v-model:value="formState.username" placeholder="Username">
      <template #prefix> <template #prefix>
      <UserOutlined style="color: rgba(0, 0, 0, 0.25)" /> <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
      </template> </template>
      </a-input> </a-input>
      </a-form-item> </a-form-item>
      <a-form-item> <a-form-item>
      <a-input v-model:value="formState.password" type="password" placeholder="Password"> <a-input v-model:value="formState.passwordBase64" type="password" placeholder="Password">
      <template #prefix> <template #prefix>
      <LockOutlined style="color: rgba(0, 0, 0, 0.25)" /> <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
      </template> </template>
      ...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
      </a-form-item> </a-form-item>
      <a-form-item> <a-form-item>
      <a-button type="primary" html-type="submit" :loading="loading" <a-button type="primary" html-type="submit" :loading="loading"
      :disabled="formState.user === '' || formState.password === ''"> :disabled="formState.username === '' || formState.passwordBase64 === ''">
      登录 登录
      </a-button> </a-button>
      </a-form-item> </a-form-item>
      ...@@ -36,26 +36,27 @@ ...@@ -36,26 +36,27 @@
      import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'; import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
      import { reactive, ref } from 'vue'; import { reactive, ref } from 'vue';
      import router from '@/router/index.js'; import router from '@/router/index.js';
      // import { login } from '../../api/login/login'; import { login } from '@/api/user.js';
      import { message } from 'ant-design-vue'; import { message } from 'ant-design-vue';
      const loading = ref(false); const loading = ref(false);
      const formState = reactive({ const formState = reactive({
      user:'', username:'',
      password:'' passwordBase64:''
      }); });
      const handleFinish = async (values) => { const handleFinish = async (values) => {
      loading.value = true; loading.value = true;
      // try { try {
      // const response = await login() || []; formState.passwordBase64 = btoa(formState.passwordBase64);
      // if (response.data) { const response = await login(formState) || [];
      // message.success('登录成功！'); if (response.data) {
      // router.push({ message.success('登录成功！');
      // name: 'home' router.push({
      // }); name: 'home'
      // } });
      // } catch (error) { }
      // loading.value = false; } catch (error) {
      // } loading.value = false;
      }
      loading.value = false; loading.value = false;
      ......
      Markdown is supported
      0% or
      You are about to add 0 people to the discussion. Proceed with caution.
      Finish editing this message first!
      Please register or to comment