@arkxos/arkos-system 0.1.0

package/src/business/layout/personnel/index.vue

@@ -0,0 +1,549 @@
+<template>
+  <el-dropdown
+    ref="dropdownRef"
+    :hide-timeout="100"
+    trigger="hover"
+    popper-class="popper-box"
+  >
+    <div class="dropdown-box">
+      <span class="personnel-box" style="cursor: pointer">
+        <cc-icon iconId="018ece4f7121ccd29180" style="font-size: 18px" />
+      </span>
+    </div>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item
+          v-if="user.orgName"
+          class="active"
+        >{{ user.orgName }}</el-dropdown-item>
+        <template v-if="user.organizationList">
+          <el-dropdown-item
+            v-for="item in user.organizationList.filter(i=>i.id !== user.orgId)"
+            :key="item.id"
+            @click="changeOrganization(item.id)"
+          >
+            <span>切换：{{ item.name }}</span>
+          </el-dropdown-item>
+        </template>
+        <el-dropdown-item @click="showPasswordDialog">
+          <span style="display: block">修改密码</span>
+        </el-dropdown-item>
+        <el-dropdown-item @click="showThemeDialog">
+          <span style="display: block">切换主题</span>
+        </el-dropdown-item>
+        <el-dropdown-item @click="userStore.logout" divided>
+          <cc-icon iconId="018dca813800b4902c00" style="margin-right: 10px; color: #FF0033" />登 出
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+
+  <el-dialog
+    title="密码修改"
+    width="550px"
+    height="300px"
+    v-model="dialogVisible"
+    class="edit-dialog"
+    :close-on-click-modal="false"
+    :append-to-body="true"
+    :show-close="dialogShowClose"
+    @close="dialogVisible = false"
+    destroy-on-close
+    draggable
+  >
+    <el-form
+      label-width="120px"
+      ref="dataForm"
+      label-position="right"
+      :model="formData"
+      :rules="rules"
+    >
+      <el-form-item label="新密码" prop="password">
+        <el-input
+          type="password"
+          v-model="formData.password"
+          auto-complete="off"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="确认密码" prop="cPassword">
+        <el-input
+          type="password"
+          v-model="formData.cPassword"
+          auto-complete="off"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button
+        v-if="dialogShowClose"
+        type="info"
+        size="default"
+        @click.prevent="cancelForm()"
+      >取消</el-button>
+      <el-button
+        type="primary"
+        size="default"
+        :loading="editLoading"
+        @click.prevent="submitForm()"
+      >提交</el-button>
+    </template>
+  </el-dialog>
+
+  <el-dialog
+    title="切换主题"
+    width="600px"
+    height="100px"
+    v-model="themeVisible"
+    class="edit-dialog"
+    :close-on-click-modal="false"
+    :append-to-body="true"
+    destroy-on-close
+    draggable
+  >
+    <el-form
+      label-width="120px"
+      ref="dataForm"
+      label-position="right"
+      :model="themeData"
+    >
+      <el-form-item label="自定义主题颜色">
+        <el-switch v-model="themeData.custom" @change="changeCustom" />
+      </el-form-item>
+      <el-form-item label="主题样式" v-if="!themeData.custom">
+        <el-radio-group v-model="themeData.theme" @change="changeTheme">
+          <el-radio value="default">默认</el-radio>
+          <el-radio value="blue">蓝色</el-radio>
+          <el-radio value="green">绿色</el-radio>
+          <el-radio value="purple">紫色</el-radio>
+          <el-radio value="red">红色</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="主题颜色"  v-if="themeData.custom">
+        <el-color-picker
+          v-model="themeData.themeColor"
+          color-format="hex"
+          :predefine="predefineColors"
+          @change="changeThemeColor"
+        />
+      </el-form-item>
+      <el-form-item label="菜单样式">
+        <el-radio-group v-model="themeData.menuColor" @change="changeMenuColor">
+          <el-radio value="default">默认</el-radio>
+          <el-radio value="black">黑色</el-radio>
+          <el-radio value="grey">灰色</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="菜单位置">
+        <el-radio-group v-model="themeData.menuPos" @change="changeMenuPos">
+          <el-radio value="left">左侧</el-radio>
+          <el-radio value="top">顶部</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="显示选项卡">
+        <el-switch
+          v-model="themeData.showMenuTab"
+          active-value="1"
+          inactive-value="0"
+          @change="changeShowMenuTab"
+        />
+      </el-form-item>
+      <el-form-item label="应用于">
+        <el-radio-group v-model="themeData.subsystemId">
+          <el-radio :value="currSubsystemId">当前系统</el-radio>
+          <el-radio value="all">所有系统</el-radio>
+        </el-radio-group>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button
+        type="info"
+        size="default"
+        @click.prevent="closeThemeDialog()"
+      >取消</el-button>
+      <el-button
+        type="primary"
+        size="default"
+        @click.prevent="submitThemeForm()"
+      >确定</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { computed, ref, nextTick, onMounted } from 'vue';
+import { useUserStore } from '@/pinia/modules/user';
+import { getSetting, getSubsystem } from '@/utils/system';
+import api from '@/http/api';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import emitter from '@/utils/bus';
+import date from '@/utils/date';
+import { changePrimaryStyle, loadTheme } from '@/utils/theme';
+
+const userStore = useUserStore();
+const user = computed(() => { return userStore.getUser() || {} });
+const dialogVisible = ref(false);
+const dialogShowClose = ref(true);
+const formData = ref({ password: '', cPassword: '' });
+const editLoading = ref(false);
+const rules = ref({
+  password: [
+    { required: true, message: '请输入新密码', trigger: 'blur' },
+    {
+      validator: async(rule, value, callback) => {
+        const setting = await getSetting();
+        if (setting.passwordCheck === '1') {
+          const upper = /(?=.*[A-Z]).+$/;
+          const lower = /(?=.*[a-z]).+$/;
+          const digit = /(?=.*[0-9]).+$/;
+          const special = /(?=.*[`~!@#$%^&*()_+{}|<>/;:'"]).+$/;
+          if (setting.passwordUpperLetter === '1' && !upper.test(value)) {
+            callback(new Error('密码必须包含有大写字母！'));
+          } else if (setting.passwordLowerLetter === '1' && !lower.test(value)) {
+            callback(new Error('密码必须包含有小写字母！'));
+          } else if (setting.passwordDigit === '1' && !digit.test(value)) {
+            callback(new Error('密码必须包含有数字！'));
+          } else if (setting.passwordSpecialChar === '1' && !special.test(value)) {
+            callback(new Error('密码必须包含有特殊字符！'));
+          } else if (setting.passwordMinLen > 0 && value.length < setting.passwordMinLen) {
+            callback(new Error('密码最少 ' + setting.passwordMinLen + ' 个字符！'));
+          } else if (setting.passwordMaxLen > 0 && value.length > setting.passwordMaxLen) {
+            callback(new Error('密码最多 ' + setting.passwordMaxLen + ' 个字符！'));
+          } else {
+            callback();
+          }
+        } else if (value.length < 6) {
+          callback(new Error('密码最少 6 个字符！'));
+        }
+      },
+      trigger: 'blur',
+    }
+  ],
+  cPassword: [
+    { required: true, message: '请输入确认密码', trigger: 'blur' },
+    {
+      validator: (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请再次输入密码'));
+        } else if (value !== formData.value.password) {
+          callback(new Error('两次输入密码不一致'));
+        } else {
+          callback();
+        }
+      },
+      trigger: 'blur',
+    },
+  ]
+});
+const dataForm = ref();
+const dropdownRef = ref();
+const themeVisible = ref(false);
+const themeData = ref({});
+const predefineColors = ref([
+  '#409EFF',
+  '#67C23A',
+  '#E6A23C',
+  '#F56C6C',
+  '#909399',
+  '#ff4500',
+  '#ff8c00',
+  '#00ced1',
+  '#c71585',
+  '#FF7800',
+]);
+const cancelForm = () => {
+  dialogVisible.value = false;
+};
+
+const showPasswordDialog = () => {
+  dialogVisible.value = true;
+  dialogShowClose.value = true;
+  resetForm();
+};
+
+const defaultTheme = ref({
+  custom: false,
+  theme: 'default',
+  themeColor: '',
+  menuColor: 'default',
+  showMenuTab: '0',
+  menuPos: 'left',
+  subsystemId: 'all'
+});
+
+const currSubsystemId = ref('');
+const oldTheme = ref('');
+const showThemeDialog = async() => {
+  oldTheme.value = user.value.theme;
+  themeData.value = Object.assign({}, defaultTheme.value);
+
+  const subsystem = await getSubsystem();
+  currSubsystemId.value = subsystem.id;
+  themeData.value.showMenuTab = subsystem.showMenuTab || '0';
+
+  let data = null;
+  if (user.value.theme && user.value.theme.startsWith('[')) {
+    const themeList = JSON.parse(user.value.theme);
+    data = themeList.find(item => item.subsystemId === currSubsystemId.value);
+    if (!data) {
+      data = themeList.find(item => item.subsystemId === 'all');
+    }
+  }
+
+  if (data) {
+    themeData.value.custom = data.custom === true || themeData.value.custom;
+    themeData.value.theme = data.theme || themeData.value.theme;
+    themeData.value.themeColor = data.themeColor || themeData.value.themeColor;
+    themeData.value.menuColor = data.menuColor || themeData.value.menuColor;
+    themeData.value.showMenuTab = data.showMenuTab || themeData.value.showMenuTab;
+    themeData.value.menuPos = data.menuPos || themeData.value.menuPos;
+    themeData.value.subsystemId = data.subsystemId || themeData.value.subsystemId;
+  }
+  themeVisible.value = true;
+};
+
+const changeCustom = (custom) => {
+  if (custom) {
+    changeThemeColor(themeData.value.themeColor);
+  } else {
+    changeTheme(themeData.value.theme);
+  }
+};
+
+const changeTheme = (theme) => {
+  theme = theme || 'default';
+  if (theme.startsWith('#')) {
+    changePrimaryStyle(theme);
+  } else {
+    loadTheme('global', theme);
+  }
+};
+
+const changeThemeColor = (themeColor) => {
+  loadTheme('global', 'default');
+  changePrimaryStyle(themeColor);
+};
+
+const changeMenuColor = (menuColor) => {
+  loadTheme('menu', menuColor);
+};
+
+const changeMenuPos = async(menuPos) => {
+  let data = null;
+  let themeList = [];
+  if (user.value.theme && user.value.theme.startsWith('[')) {
+    themeList = JSON.parse(user.value.theme);
+    data = themeList.find(item => item.subsystemId === currSubsystemId.value);
+    if (!data) {
+      data = themeList.find(item => item.subsystemId === 'all');
+    }
+  }
+
+  if (data) {
+    data.menuPos = menuPos;
+    user.value.theme = JSON.stringify(themeList);
+  } else {
+    const subsystem = await getSubsystem();
+    const subsystemId = themeData.value.subsystemId || 'all';
+    themeList.push({ subsystemId: subsystemId, menuPos: menuPos, showMenuTab: subsystem.showMenuTab || '0' });
+    user.value.theme = JSON.stringify(themeList);
+  }
+};
+
+const changeShowMenuTab = (showMenuTab) => {
+  let data = null;
+  let themeList = [];
+  if (user.value.theme && user.value.theme.startsWith('[')) {
+    themeList = JSON.parse(user.value.theme);
+    data = themeList.find(item => item.subsystemId === currSubsystemId.value);
+    if (!data) {
+      data = themeList.find(item => item.subsystemId === 'all');
+    }
+  }
+
+  if (data) {
+    data.showMenuTab = showMenuTab;
+    user.value.theme = JSON.stringify(themeList);
+  } else {
+    const subsystemId = themeData.value.subsystemId || 'all';
+    themeList.push({ subsystemId: subsystemId, showMenuTab: showMenuTab });
+    user.value.theme = JSON.stringify(themeList);
+  }
+};
+
+const submitThemeForm = () => {
+  const custom = themeData.value.custom || false;
+  const theme = themeData.value.theme || 'default';
+  const themeColor = themeData.value.themeColor || '';
+  const menuColor = themeData.value.menuColor || 'default';
+  const showMenuTab = themeData.value.showMenuTab || '0';
+  const menuPos = themeData.value.menuPos || 'left';
+  const subsystemId = themeData.value.subsystemId || 'all';
+
+  const data = {
+    custom: custom,
+    theme: theme,
+    themeColor: themeColor,
+    menuColor: menuColor,
+    showMenuTab: showMenuTab,
+    menuPos: menuPos,
+    subsystemId: subsystemId
+  };
+
+  let themeList = [];
+  if (oldTheme.value && oldTheme.value.startsWith('[')) {
+    themeList = JSON.parse(oldTheme.value);
+    let hasItem = false;
+    for (const item of themeList) {
+      if (item.subsystemId === subsystemId) {
+        Object.assign(item, data);
+        hasItem = true;
+      }
+    }
+    if (!hasItem) {
+      themeList.push(data);
+    }
+  } else {
+    themeList.push(data);
+  }
+
+  if (subsystemId === 'all') {
+    const index = themeList.findIndex(item => item.subsystemId === currSubsystemId.value);
+    if (index >= 0) {
+      themeList.splice(index, 1)
+    }
+  }
+
+  const dataJson = JSON.stringify(themeList);
+  api.post('/business/updateTheme', { theme: dataJson });
+  user.value.theme = dataJson;
+  themeVisible.value = false;
+}
+
+const closeThemeDialog = () => {
+  let data = null;
+  if (oldTheme.value && oldTheme.value.startsWith('[')) {
+    const themeList = JSON.parse(oldTheme.value);
+    data = themeList.find(item => item.subsystemId === currSubsystemId.value);
+    if (!data) {
+      data = themeList.find(item => item.subsystemId === 'all');
+    }
+  }
+
+  if (data) {
+    if (data.custom) {
+      loadTheme('global', 'default');
+      changePrimaryStyle(data.themeColor);
+    } else {
+      loadTheme('global', data.theme || 'default');
+    }
+    loadTheme('menu', data.menuColor || 'black');
+  } else {
+    loadTheme('global', 'default');
+    loadTheme('menu', 'default');
+  }
+
+  user.value.theme = oldTheme.value;
+  themeVisible.value = false;
+};
+
+const resetForm = () => {
+  dataForm.value && dataForm.value.resetFields();
+};
+
+const submitForm = async() => {
+  dataForm.value && dataForm.value.validate((valid) => {
+    if (valid) {
+      ElMessageBox.confirm('请确认是否修改密码？', '提示', { type: 'info' })
+        .then(() => {
+          editLoading.value = true;
+          api
+            .post('/business/password/update', formData.value)
+            .then((res) => {
+              ElMessage.success(res.message);
+              editLoading.value = false;
+              dataForm.value && dataForm.value.resetFields();
+              editLoading.value = false;
+              dialogVisible.value = false;
+            })
+            .catch(() => {
+              editLoading.value = false;
+            });
+        }).catch(() => {});
+    }
+  });
+};
+
+const changeOrganization = (id) => {
+  api.post('/business/organization/change/' + id).then(() => {
+    ElMessage.success('切换成功！');
+
+    nextTick(() => {
+      emitter.emit('closeAllPage');
+      window.location.replace('#/home/index');
+      window.location.reload();
+    });
+  });
+};
+
+onMounted(async() => {
+  getSetting().then(setting => {
+    if (setting.passwordCheck === '1') {
+      if (setting.passwordInitialEdit === '1' &&
+          (!user.value.passwordInit || user.value.passwordInit !== '0')) {
+        ElMessage.error('请修改初始密码！')
+        dialogVisible.value = true;
+        dialogShowClose.value = false;
+        resetForm();
+        return;
+      }
+
+      if ((setting.passwordDay || 0) > 0) {
+        if (!user.value.passwordTime) {
+          ElMessage.warning('密码已过期，请先修改密码！')
+          dialogVisible.value = true;
+          dialogShowClose.value = false;
+          resetForm();
+        } else {
+          const diffDay = setting.passwordDay - date.getDiffDay(user.value.passwordTime, date.getCurrTime());
+          if (diffDay === 30 || diffDay === 20 || diffDay === 10 || diffDay <= 5) {
+            ElMessage.warning('密码还有' + diffDay + '天过期，请修改密码！');
+          } else if (diffDay < 0) {
+            ElMessage.warning('密码已过期，请先修改密码！');
+            dialogVisible.value = true;
+            dialogShowClose.value = false;
+            resetForm();
+          }
+        }
+      }
+    }
+  });
+});
+</script>
+
+<style scoped lang="scss">
+.popper-box {
+  :deep(.active) {
+    background-color: #e7e7e7;
+    color: #2989da;
+    font-weight: 700;
+  }
+}
+.dropdown-box:focus-visible {
+  outline: unset;
+}
+.personnel-box:hover {
+  border: none;
+}
+.personnel-box {
+  color: white;
+  display: flex;
+  flex-direction: row;
+
+  > span {
+    font-size: 16px;
+  }
+  .cc-icon {
+    font-size: 16px;
+  }
+}
+</style>

package/src/business/layout/search/index.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="search">
+    <transition name="el-fade-in-linear">
+      <div v-show="show" style="display: inline-block;width: 200px">
+        <el-select
+          ref="searchInput"
+          v-model="value"
+          filterable
+          placeholder="请选择"
+          @blur="hiddenSearch"
+          @change="changeRouter"
+        >
+          <el-option
+            v-for="item in routerStore.routerList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </div>
+    </transition>
+    <cc-icon
+      v-if="btnShow"
+      iconId="018dc9c3efe489a7d117"
+      @click="showSearch"
+      title="查找菜单"
+      style="font-size: 18px;cursor: pointer"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, nextTick } from 'vue';
+import { useRouter } from 'vue-router';
+import { useRouterStore } from '@/business/pinia/router';
+
+const router = useRouter();
+const routerStore = useRouterStore();
+
+const value = ref('');
+const changeRouter = () => {
+  router.push({ name: value.value });
+  value.value = '';
+  hiddenSearch();
+};
+
+const show = ref(false);
+const btnShow = ref(true);
+const hiddenSearch = () => {
+  show.value = false;
+  btnShow.value = true
+};
+
+const searchInput = ref(null);
+const showSearch = () => {
+  btnShow.value = false;
+  show.value = true;
+  nextTick(() => {
+    searchInput.value.focus();
+    searchInput.value.toggleMenu()
+  });
+};
+</script>
+
+<style scoped>
+.search {
+  display: inline-flex;
+  overflow: hidden;
+  text-align: center;
+  align-items: center;
+}
+.search.el-input__inner {
+  border: none;
+}
+</style>