@bdsoft/element 1.1.13 → 1.1.14

package/src/utils/message.js

@@ -0,0 +1,164 @@
+import { ElMessage, ElMessageBox, ElNotification, ElLoading, ElButton, ElIcon } from 'element-plus'
+import { Warning } from '@element-plus/icons-vue'
+import { h } from 'vue'
+// !!!如果有方法报错 在执行方法外面添加nextTrick函数处理
+export function showsuccess(msg, duration = 3000, showClose = true) {
+  ElMessage({
+    message: msg || '保存成功',
+    type: 'success',
+    duration: duration,
+    showClose: showClose
+  })
+}
+
+export function showerror(msg, duration = 3000, showClose = true) {
+  ElMessage({
+    message: msg || '保存失败',
+    type: 'error',
+    duration: duration,
+    showClose: showClose
+  })
+}
+
+export function showwarning(msg, duration = 3000, showClose = true, clostFn) {
+  ElMessage({
+    message: msg || '警告内容',
+    type: 'warning',
+    duration: duration,
+    showClose: showClose,
+    onClose: clostFn
+  })
+}
+
+export function showinfo(msg, duration = 3000, showClose = true) {
+  ElMessage({
+    message: msg || '提示信息',
+    duration: duration,
+    showClose: showClose
+  })
+}
+
+export function hideloading(msg) {
+  ElMessage.closeAll()
+}
+
+export function showconfirm(done, confirmtitle = '确认关闭?', showtext = { title: '提示', confirmButtonText: '确定', cancelButtonText: '取消' }, cancle) {
+  return ElMessageBox.confirm(confirmtitle, showtext.title, {
+    confirmButtonText: showtext.confirmButtonText,
+    cancelButtonText: showtext.cancelButtonText,
+    distinguishCancelAndClose: true,
+    type: 'warning'
+  })
+    .then((_) => {
+      done(_)
+    })
+    .catch((_) => {
+      console.info('showconfirm catch')
+      console.info(_)
+      cancle && cancle(_)
+    })
+}
+
+/**
+ * 信息提示框
+ * @param {*} msg
+ * @param {*} type
+ * @param {*} title
+ * @param {*} position
+ * @param {*} dangerouslyUseHTMLString
+ */
+export function shownotiinfo(msg, type = 'info', title = '提示', position = 'bottom-right', dangerouslyUseHTMLString = false) {
+  ElNotification({
+    title: title,
+    position: position,
+    message: msg,
+    dangerouslyUseHTMLString: dangerouslyUseHTMLString,
+    type: type
+  })
+}
+
+export function showconfirminfo(msg = '确认删除？', showtext = { type: '', position: 'bottom-right', title: '提示', dangerouslyUseHTMLString: true }, fn1, fn2) {
+  // 按钮
+  const btn1 = h(ElButton, {
+    innerText: '立即刷新',
+    type: 'primary',
+    size: 'small',
+    style: { marginLeft: '16px', float: 'right' },
+    onclick: (_) => {
+      fn1(_)
+    }
+  })
+  const btn2 = h(ElButton, {
+    innerText: '暂不更新',
+    style: { float: 'right' },
+    size: 'small',
+    onclick: (_) => {
+      fn2(_)
+    }
+  })
+  // 信息div
+  const div = h('div', { style: { marginLeft: '8px', marginBottom: '16px', marginTop: '16px' } }, msg)
+  // 图标
+  const icon1 = h(Warning)
+  const icon = h(ElIcon, { style: { fontSize: '18px' } }, [icon1])
+  // 整体div
+  const msgDiv = h('div', { style: { display: 'flex', alignItems: 'center' } }, [icon, div])
+  ElNotification({
+    class: 'custom-notification',
+    title: showtext.title,
+    position: showtext.position,
+    dangerouslyUseHTMLString: showtext.dangerouslyUseHTMLString,
+    message: h('div', [msgDiv, btn1, btn2]),
+    type: showtext.type,
+    duration: 0,
+    showClose: false
+  })
+}
+
+export function showalert(done, alertMsg = 'This is a message', type = 'info', showtext = { title: '提示', confirmButtonText: '确定' }) {
+  return ElMessageBox.alert(alertMsg, showtext.title, {
+    confirmButtonText: showtext.confirmButtonText,
+    type: type
+  })
+    .then((_) => {
+      done(_)
+    })
+    .catch((_) => {
+      console.info('showalert catch')
+      console.info(_)
+    })
+}
+
+export function confirm(confirmtitle = '确认关闭?') {
+  return ElMessageBox.confirm(confirmtitle)
+}
+
+export function showloading(msg, duration = 0, showClose = true) {
+  ElMessage({
+    // <svg viewBox="0 0 1024 1024" focusable="false" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg>
+    icon: 'loadsvg',
+    message: msg || '正在保存,请稍后...',
+    duration: duration,
+    showClose: showClose
+  })
+}
+
+// loading加载 closeLoading
+let loadingObj = null
+export function showLoading(msg, parm) {
+  let _parm = parm || {}
+  loadingObj = ElLoading.service({
+    // 默认配置
+    lock: true,
+    text: '加载中...',
+    spinner: 'el-icon-loading',
+    background: 'rgba(0, 0, 0, 0.7)',
+    // 展开 _parm，其属性会覆盖上面的默认配置
+    ..._parm
+  })
+}
+
+export function closeLoading() {
+  loadingObj.close()
+}
+export { ElMessage, ElMessageBox, ElNotification, ElLoading }

package/src/utils/type.js

@@ -0,0 +1,45 @@
+const is = {
+    type(arg, type) {
+        return Object.prototype.toString.call(arg) === '[object ' + type + ']'
+    },
+    Undef(v) {
+        return v === undefined || v === null
+    },
+    Element(arg) {
+        return typeof arg === 'object' && arg !== null && arg.nodeType === 1 && !is.Object(arg)
+    },
+    trueArray(data) {
+        return Array.isArray(data) && data.length > 0;
+    },
+    Function(v) {
+        const type = this.getType(v);
+        return type === 'Function' || type === 'AsyncFunction';
+    },
+    getType(v) {
+        const str = Object.prototype.toString.call(v)
+        return /^\[object (.*)\]$/.exec(str)[1]
+    },
+    empty(value) {
+        if (value === undefined || value === null) {
+            return true;
+        }
+
+        if (Array.isArray(value) && Array.isArray(value) && !value.length) {
+            return true;
+        }
+
+        return typeof value === 'string' && !value;
+    }
+};
+
+['Date', 'Object', 'String', 'Boolean', 'Array', 'Number'].forEach(t => {
+    is[t] = function (arg) {
+        return is.type(arg, t);
+    }
+})
+
+export function hasProperty(rule, k) {
+    return ({}).hasOwnProperty.call(rule, k)
+}
+
+export default is;

package/src/xm_components/HeadSearch/hook/hookSearch.js

@@ -0,0 +1,96 @@
+import { ref, reactive, onMounted, nextTick } from 'vue'
+
+/**
+ *
+ * @param {*} prefix 前缀，解决项目冲突
+ * @returns
+ */
+export default function useSearrch(prefix = '') {
+  const searchkeysArr = ref([])
+  const search_drop = ref(false)
+  const keyName = ref('')
+  /**
+   * 获取缓存搜索数据
+   * @returns
+   */
+  const getStorageKeys = () => {
+    var keys = localStorage.getItem('searchRerportkeys')
+
+    if (keys && keys !== 'undefined' && keys !== 'null') {
+      keys = JSON.parse(keys)
+      return keys
+    }
+    return []
+  }
+
+  /**
+   * 鼠标foucs
+   */
+  const focusfns = (type) => {
+    searchkeysArr.value = getStorageKeys()
+
+    if (type === 1 && searchkeysArr.value.length > 0) {
+      search_drop.value = true
+    } else {
+      setTimeout(function () {
+        nextTick(function () {
+          search_drop.value = false
+        })
+      }, 200)
+    }
+  }
+
+  /**
+   * 保存搜索记录
+   * @param {*} key
+   */
+  const setSearchKeys = (key) => {
+    if (!key || key == null || key == '' || key == 'null') return
+    let keys = localStorage.getItem('searchRerportkeys')
+
+    if (keys && keys !== 'undefined' && keys !== '{}') {
+      keys = JSON.parse(keys)
+
+      if (keys.length > 5 && keys instanceof Array) {
+        keys.splice(0, 1)
+      }
+      keys.push(key)
+
+      let keys2 = [...new Set(keys)]
+
+      localStorage.setItem('searchRerportkeys', JSON.stringify(keys2))
+    } else {
+      keys = []
+      keys.push(key)
+      localStorage.setItem('searchRerportkeys', JSON.stringify(keys))
+    }
+  }
+
+  // 在hookSearch.js中添加
+  const deleteSearchItem = (index) => {
+    debugger
+    // 删除数组中对应索引的记录
+    searchkeysArr.value.splice(index, 1)
+    // 同步更新本地存储
+    localStorage.setItem('searchRerportkeys', JSON.stringify(searchkeysArr.value))
+  }
+
+  /**
+   * 赋值文本
+   * @param {*} val
+   */
+  const setTxt = (val) => {
+    keyName.value = val
+  }
+
+  return {
+    keyName,
+    searchkeysArr,
+    search_drop,
+    focusfns,
+    setTxt,
+    deleteSearchItem,
+    setSearchKeys,
+    getStorageKeys
+  }
+}

package/src/xm_components/HeadSearch/index.vue

@@ -0,0 +1,206 @@
+<!--
+* @FileDescription:  搜索组件  todo
+* @Author: 李兵泉
+* @Date: 2021-06-08 09 时
+* @LastEditors: 最后更新作者
+* @LastEditTime: 最后更新时间
+-->
+
+<template>
+  <div class="search_warp">
+    <img :src="logoUrl" v-if="logoUrl"
+      style="width: 40px; height: 40px;margin-right: 5px; vertical-align: middle; cursor: pointer" alt=""
+      @click="gohome" />
+    <div class="ipt_search">
+      <el-input :placeholder="placeholderTxt" v-model="keyName" clearable @focus="focusfns(1)" @blur="focusfns(-1)"
+        @keyup.enter="debouncedClick">
+        <template #append>
+          <el-button class="SearchBtn" @click="debouncedClick" type="primary" icon="Search">搜索</el-button>
+        </template>
+      </el-input>
+      <!-- 搜索记录 -->
+      <div v-show="search_drop" class="search_drop" v-if="searchkeysArr && searchkeysArr != ''">
+        <ul>
+          <li v-for="(item, index) in searchkeysArr" :key="index">
+            <span class="search-item-text"  @click="setTxt(item)">{{ item }}</span>
+            <el-icon class="delete-btn"  @click.stop="deleteSearchItem(index)">
+              <Delete />
+            </el-icon>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+  </div>
+  <!-- 搜索记录 -->
+
+  <div v-if="groupData && groupData != ''" class="ipt_search_tip">
+    搜索结果数：
+    <span v-show="props.ismodule">{{ Object.keys(groupData).length }}个系统, </span>
+    {{ searchNum }} 个相关页面模块
+  </div>
+</template>
+<script setup>
+import { ref, reactive, computed, onMounted } from 'vue';
+import { getUrlKey, debounce } from '../../../utils/func.js';
+
+const emits = defineEmits(['getSearchList']);
+//
+import useSearrch from './hook/hookSearch.js';
+// hook
+const { keyName, searchkeysArr, search_drop, getStorageKeys, focusfns, setSearchKeys, deleteSearchItem, setTxt } = useSearrch();
+
+const props = defineProps({
+  ismodule: {
+    type: Boolean,
+    default: false
+  },
+  // logo url
+  logoUrl: {
+    type: String,
+    // default: 'http://123.129.65.205:18012/RabbitDocService/Doc/ptIcon/View?filePath=20250911/006.png'
+  },
+  placeholderTxt: {
+    type: String,
+    default: '请输入搜索内容'
+  },
+  groupData: {
+    type: Object
+  },
+  searchNum: {
+    type: Number
+  }
+});
+// 跳转到首页搜索
+const gohome = () => {
+  // router.push('/');
+};
+onMounted(() => {
+  // 是否有限取浏览器中的值 isQueryFirst==>f
+  let keymc = getUrlKey('txtKey') || '';
+
+  setTxt(keymc);
+  // getModuleList(true);
+});
+
+/**
+ * 触发上层搜索 keyName
+ * 处理防抖
+ */
+const getModuleList = (isfirst = false) => {
+  focusfns(-1);
+  //   setCookieKey('searchKey', keyName.value);
+  setSearchKeys(keyName.value || '');
+  emits('getSearchList', keyName.value, isfirst);
+};
+// 防抖处理
+const debouncedClick = debounce(getModuleList, 500);
+
+defineExpose({
+  setTxt,
+  debouncedClick
+});
+</script>
+<style lang="scss" scoped>
+.search_warp {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ipt_search {
+  width: 700px;
+  height: 40px;
+  position: relative;
+
+  // 样式重写
+  :deep(.el-input__inner) {
+    height: 40px !important;
+    outline: none;
+  }
+
+  :deep(.el-input-group__append) {
+    background: linear-gradient(136deg, #286aff, #4e6ef2, #7274f9, #9f66ff);
+    // border: 1px solid #ffffff !important;
+    color: #fff;
+    height: 40px;
+    margin-top: 1px;
+    box-shadow: none;
+    font-size: 17px;
+    border-radius: 0 8px 8px 0;
+    border: 0;
+    outline-width: 0;
+  }
+
+  :deep(.el-button [class*='el-icon'] + span) {
+    vertical-align: 3px;
+  }
+}
+
+.ipt_search_tip {
+  margin-left: 50px;
+  color: #ccc;
+  font-size: 13px;
+}
+
+.search_drop {
+  position: absolute;
+  z-index: 99999;
+  width: 100%;
+  left: 2px;
+  max-width: 605px;
+  border: solid 1px #e4e7ed;
+  border-radius: 4px;
+  background-color: #fff;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+
+  ul {
+    list-style: none;
+    padding: 6px 0;
+    margin: 0;
+    box-sizing: border-box;
+    text-align: left;
+
+    li {
+      font-size: 14px;
+      padding: 0 20px;
+      position: relative;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: #606266;
+      height: 34px;
+      line-height: 34px;
+      box-sizing: border-box;
+      cursor: pointer;
+      position: relative;
+      padding-right: 50px; // 给删除按钮留出空间
+
+      .search-item-text {
+        display: inline-block;
+        width: calc(100% - 40px);
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .delete-btn {
+        position: absolute;
+        right: 5px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 30px;
+        height: 24px;
+        padding: 0;
+        background: transparent;
+        color: #909399;
+
+        &:hover {
+          color: #f56c6c;
+          background: transparent;
+        }
+      }
+    }
+  }
+}
+</style>

package/src/xm_components/HeadSearch/readme.md

@@ -0,0 +1,12 @@
+
+## 搜索框使用说明 
+功能: 首页搜索框 带搜索历史记录功能
+>>> 注意：
+```
+import {HeadSearch} from '@bdsoft/element'
+
+<div class="search-area">
+        <!-- 搜索组件 -->
+        <HeadSearch @getSearchList="handleSearch"></HeadSearch>
+      </div>
+```