@bdsoft/element 1.1.13 → 1.1.14

package/src/components/notice/NoticeList.vue

@@ -0,0 +1,198 @@
+<!--
+* @FileDescription:  公告列表
+* @Author: 郭勇言
+* @Date: 2024-04-26 17 时
+* @LastEditors: 最后更新作者
+* @LastEditTime: 最后更新时间
+-->
+<script setup>
+import { ref, computed, watch, onMounted, nextTick } from 'vue'
+const emits = defineEmits(['liClick'])
+const props = defineProps({
+  imgNum: {
+    type: Number,
+    default: 3
+  },
+  noticeData: {
+    type: Array,
+    default: () => []
+  },
+  noticeInfo: {
+    type: Object,
+    default: () => {
+      return {
+        iconName: 'Reading',
+        title: '公告列表'
+      }
+    }
+  },
+  noticeNum: {
+    type: Number,
+    default: 4
+  },
+  noticeHeight: {
+    type: Number,
+    default: 300
+  }
+})
+/**
+ * 行点击事件
+ */
+const liClick = (item) => {
+  emits('liClick', item)
+}
+const loading = computed(() => {
+  return props.noticeData.length === 0
+})
+</script>
+<template>
+  <div id="noticespan">
+    <el-skeleton :loading="loading" animated>
+      <template #template>
+        <el-row justify="center">
+          <el-col :span="6">
+            <el-skeleton-item variant="image" style="width: 300px; height: 300px; margin-left: 50px" />
+          </el-col>
+          <el-col :span="12">
+            <el-skeleton-item variant="text" style="width: 300px; height: 20px; margin: 10px" /><br>
+            <el-skeleton-item variant="text" style="width: 300px; height: 20px; margin: 10px" /><br>
+            <el-skeleton-item variant="text" style="width: 300px; height: 20px; margin: 10px" /><br>
+            <el-skeleton-item variant="text" style="width: 300px; height: 20px; margin: 10px" /><br>
+            <el-skeleton-item variant="text" style="width: 300px; height: 20px; margin: 10px" />
+          </el-col>
+        </el-row>
+      </template>
+      <template #default>
+        <el-card class="carousel">
+          <template #header>
+            <div class="card-header-title">
+              <div style="display: flex; justify-content: left; align-items: center">
+                <el-icon :size="16"><component :is="noticeInfo.iconName" /></el-icon>
+                <span style="font-size: 16px; margin-left: 6px">{{ noticeInfo.title }}</span>
+              </div>
+              <slot name="header"></slot>
+            </div>
+          </template>
+          <el-row>
+            <el-col :span="9">
+              <el-carousel :interval="5000" arrow="always" :height="noticeHeight + 'px'">
+                <el-carousel-item v-for="item in noticeData.slice(0, imgNum)" :key="item">
+                  <el-image :src="item.imgsrc" fit="cover" style="cursor: pointer; width: 100%; height: 100%"></el-image>
+                </el-carousel-item>
+              </el-carousel>
+            </el-col>
+            <el-col :span="15">
+              <div class="noticeul">
+                <div class="noticeli" v-for="(item, index) in noticeData.slice(0, noticeNum)" :key="item.id" @click="liClick(item)" :style="{ borderTop: index != 0 ? '1px #e0e2e2 solid' : 'none' }">
+                  <el-text type="success">{{ item.typeName }}</el-text>
+                  <span class="noticetitle" :title="item.title">{{ item.title }}</span>
+                  <span class="noticedate" :title="item.title">{{ item.create_date }}</span>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+        </el-card>
+      </template>
+    </el-skeleton>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.card-header-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #909399;
+  span {
+    margin-left: 8px;
+  }
+}
+.noticeul {
+  font-size: 14px;
+  .noticeli {
+    display: flex;
+    align-items: center;
+    margin-left: 20px;
+    line-height: 39px;
+    cursor: pointer;
+    .noticetype {
+      display: inline-block;
+      font-size: 14px;
+      margin-left: 8px;
+      color: #909399;
+      white-space: nowrap; /*强制span不换行*/
+      display: inline-block; /*将span当做块级元素对待*/
+      width: 20px; /*限制宽度*/
+      overflow: hidden; /*超出宽度部分隐藏*/
+      text-overflow: ellipsis; /*超出部分以点号代替*/
+    }
+    .noticetitle {
+      display: inline-block;
+      font-size: 14px;
+      margin-left: 8px;
+      color: #909399;
+      white-space: nowrap; /*强制span不换行*/
+      display: inline-block; /*将span当做块级元素对待*/
+      width: calc(100% - 174px); /*限制宽度*/
+      overflow: hidden; /*超出宽度部分隐藏*/
+      text-overflow: ellipsis; /*超出部分以点号代替*/
+    }
+    .noticedate {
+      display: inline-block;
+      font-size: 14px;
+      margin-left: 8px;
+      color: #909399;
+      white-space: nowrap; /*强制span不换行*/
+      display: inline-block; /*将span当做块级元素对待*/
+      width: 120px; /*限制宽度*/
+      overflow: hidden; /*超出宽度部分隐藏*/
+      text-overflow: ellipsis; /*超出部分以点号代替*/
+    }
+    .title-content {
+      display: inline-block;
+    }
+    .title-content-index {
+      display: inline-block;
+      font-size: 15px;
+      font-weight: bold;
+      width: 22px;
+      height: 30px;
+      line-height: 30px;
+      background-size: 100% 100%;
+      text-align: left;
+      margin-right: 4px;
+      position: relative;
+      color: #9195a3;
+      top: 1px;
+    }
+    .c-index-top1 {
+      color: #fe2d46;
+    }
+    .c-index-top2 {
+      color: #f60;
+    }
+    .c-index-top3 {
+      color: #faa90e;
+    }
+  }
+  .noticeli:hover {
+    color: #409eff;
+    span {
+      color: #409eff;
+    }
+  }
+}
+:deep(.el-carousel__arrow--left) {
+  display: none;
+}
+:deep(.el-carousel__arrow--right) {
+  display: none;
+}
+.carousel {
+  width: 100%;
+  height: 100%;
+  :deep(.el-card__body) {
+    // padding: 10px;
+  }
+}
+</style>

package/src/components/notice/NoticeListPaging.vue

@@ -0,0 +1,281 @@
+<!--
+* @FileDescription:  公告列表带分页
+* @Author: 郭勇言
+* @Date: 2024-04-26 17 时
+* @LastEditors: 最后更新作者
+* @LastEditTime: 最后更新时间
+-->
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue'
+import { parseTime } from '../../utils/index.js'
+const emits = defineEmits(['liClick', 'liRightClick', 'pageChange', 'titleSearch', 'addNew'])
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => []
+  },
+  // 显示标题栏
+  showHeader: {
+    type: Boolean,
+    default: false
+  },
+  // 显示分类
+  showCategory: {
+    type: Boolean,
+    default: false
+  },
+  // 显示边框
+  showBorder: {
+    type: Boolean,
+    default: false
+  },
+  headerStyle: {
+    type: Object,
+    default: () => {
+      return {
+        marginLeft: '0px',
+        height: '38px',
+        backgroundColor: '#F2F2F2',
+        border: '1px solid #BDD7E3',
+        color: 'rgb(68, 68, 68)'
+      }
+    }
+  },
+  pageInfo: {
+    type: Object,
+    default: () => {
+      return {
+        pageSize: 10,
+        currentPage: 1,
+        total: 0
+      }
+    }
+  },
+  // 图标配置
+  icon: {
+    type: String,
+    default: ''
+  },
+  // 是否显示添加按钮
+  showAddBtn: {
+    type: Boolean,
+    default: false
+  },
+  // 显示状态
+  showStatus: {
+    type: Boolean,
+    default: false
+  },
+  // 是否显示时间（非年月日）
+  showTime: {
+    type: Boolean,
+    default: false
+  },
+  // 显示访问次数
+  showVisits: {
+    type: Boolean,
+    default: false
+  },
+  showText: {
+    type: Boolean,
+    default: true
+  }
+})
+const noticeTitle = ref('')
+/**
+ * 行点击事件
+ */
+const liClick = (item) => {
+  emits('liClick', item)
+}
+/**
+ * 行右键点击事件
+ */
+const liRightClick = (event,item) => {
+  emits('liRightClick', event,item)
+}
+/**
+ * 分页点击事件
+ */
+const handlesCurrentChange = (val) => {
+  emits('pageChange', val)
+}
+/**
+ * 标题查询
+ */
+const titleSearch = () => {
+  emits('titleSearch', noticeTitle.value)
+}
+const loading = computed(() => {
+  return props.data.length === 0
+})
+/**
+ * 新增
+ */
+const addNotice = () => {
+  emits('addNew')
+}
+</script>
+<template>
+  <el-skeleton :loading="loading" animated>
+    <template #template>
+      <el-row justify="end">
+        <el-skeleton-item variant="text" style="width: 200px; height: 20px; margin-left: 50px" />
+      </el-row>
+      <el-skeleton-item variant="text" style="width: 80%; height: 20px; margin-left: 50px; margin-top: 20px" />
+      <el-skeleton-item variant="text" style="width: 80%; height: 20px; margin-left: 50px; margin-top: 20px" />
+      <el-skeleton-item variant="text" style="width: 80%; height: 20px; margin-left: 50px; margin-top: 20px" />
+      <el-skeleton-item variant="text" style="width: 80%; height: 20px; margin-left: 50px; margin-top: 20px" />
+      <el-skeleton-item variant="text" style="width: 200px; height: 20px; margin-left: 50px; margin-top: 20px" />
+    </template>
+    <template #default>
+      <el-card>
+        <el-row justify="space-between">
+          <el-col :span="4">
+            <el-button v-if="showAddBtn" type="primary" @click="addNotice">新增</el-button>
+          </el-col>
+          <el-col :span="4">
+            <el-input v-model="noticeTitle" @clear="titleSearch" @keydown.enter="titleSearch" placeholder="标题" clearable>
+              <template #append>
+                <el-button icon="Search" @click="titleSearch" />
+              </template>
+            </el-input>
+          </el-col>
+        </el-row>
+        <el-divider />
+        <div class="noticeul">
+          <!-- 表头 -->
+          <div v-if="showHeader" class="header noticeli" :style="headerStyle">
+            <span class="noticespan">标题</span>
+            <span class="noticespan1">作者</span>
+            <span class="noticespan1" v-if="showVisits" style="width: 50px" title="访问次数">查看</span>
+            <span class="noticespan1" title="发布日期">发布日期</span>
+            <span v-if="showStatus" class="noticespan1" title="状态">状态</span>
+          </div>
+          <!-- 表格列 -->
+          <div class="noticewarp" :style="{ border: showBorder ? '1px solid #e0e2e2' : 'none' }">
+            <el-empty v-if="data && data.length === 0" description="暂未查询到相关数据" />
+            <div class="noticeli" v-for="(item, index) in data" :key="item.id" @click="liClick(item)" @contextmenu.prevent="liRightClick($event, item)" :style="{ borderTop: index != 0 ? '1px #e0e2e2 solid' : 'none' }">
+              <el-text v-show="props.showText" type="success" style="width: 50px">{{ item.typeName }}</el-text>
+              <span class="noticespan" :title="item.title">
+                <span v-if="showCategory" class="noticecategory">[{{ item?.systitle || '--未分类--' }}]</span>
+                <img :src="icon" v-if="icon" style="margin-right: 10px; vertical-align: -3px" />
+                {{ item.title }}</span
+              >
+              <span class="noticespan1" :title="item.user_name">{{ item.user_name }}</span>
+              <span class="noticevisit" v-if="showVisits" style="width: 50px" title="访问次数">{{ item.visits }}</span>
+              <span class="noticespan1" title="发布日期">
+                <span v-if="!showTime">
+                  {{ parseTime(item.create_date, 'yyyy-MM-dd') }}
+                </span>
+                <span v-else>
+                  {{ parseTime(item.create_date, 'MM-dd HH:mm') }}
+                </span>
+              </span>
+              <span v-if="showStatus" class="noticespan1" >
+                <el-text v-if="item.status == '0'">待处理</el-text>
+                <el-text v-if="item.status == '1'">处理中</el-text>
+                <el-text v-if="item.status == '2'">已处理</el-text>
+              </span>
+            </div>
+            <!-- 容器预留处理-扩展右键菜单等 -->
+            <slot name="contextMenu"></slot>
+          </div>
+        </div>
+        <div class="page">
+          <el-pagination class="pagination" :current-page="pageInfo.currentPage" :page-size="pageInfo.pageSize" background @current-change="handlesCurrentChange" layout="total, prev, pager, next, jumper" :pager-count="5" :total="pageInfo.total" v-bind="$attrs" />
+        </div>
+      </el-card>
+    </template>
+  </el-skeleton>
+</template>
+
+<style lang="scss" scoped>
+.header span {
+  color: rgb(68, 68, 68) !important;
+}
+.noticeul {
+  height: calc(100% - 50px);
+  font-size: 14px;
+  .noticeli {
+    display: flex;
+    align-items: center;
+    margin-left: 10px;
+    line-height: 39px;
+    cursor: pointer;
+    .noticespan {
+      display: inline-block;
+      font-size: 14px;
+      margin-left: 8px;
+      color: #333;
+      white-space: nowrap; /*强制span不换行*/
+      display: inline-block; /*将span当做块级元素对待*/
+      width: calc(100% - 294px); /*限制宽度*/
+      overflow: hidden; /*超出宽度部分隐藏*/
+      text-overflow: ellipsis; /*超出部分以点号代替*/
+    }
+    .noticespan1 {
+      display: inline-block;
+      font-size: 14px;
+      margin-left: 8px;
+      white-space: nowrap; /*强制span不换行*/
+      display: inline-block; /*将span当做块级元素对待*/
+      width: 120px; /*限制宽度*/
+      overflow: hidden; /*超出宽度部分隐藏*/
+      text-overflow: ellipsis; /*超出部分以点号代替*/
+    }
+    .title-content {
+      display: inline-block;
+    }
+    .title-content-index {
+      display: inline-block;
+      font-size: 15px;
+      font-weight: bold;
+      width: 22px;
+      height: 30px;
+      line-height: 30px;
+      background-size: 100% 100%;
+      text-align: left;
+      margin-right: 4px;
+      position: relative;
+      color: #9195a3;
+      top: 1px;
+    }
+    .c-index-top1 {
+      color: #fe2d46;
+    }
+    .c-index-top2 {
+      color: #f60;
+    }
+    .c-index-top3 {
+      color: #faa90e;
+    }
+  }
+  .noticeli:hover {
+    color: #409eff;
+    span {
+      color: #409eff;
+    }
+  }
+}
+.page {
+  height: 30px;
+  display: flex;
+  align-items: center;
+  margin-top: 20px;
+  .pagination {
+    margin-left: 10px;
+    text-align: center;
+  }
+}
+.noticevisit {
+  color: #a90000;
+}
+.noticecategory {
+  color: #005eac;
+  margin-right: 10px;
+}
+.noticewarp {
+  position: relative;
+}
+</style>

package/src/components/notice/NoticeView.vue

@@ -0,0 +1,92 @@
+<!--
+* @FileDescription:  公告预览界面
+* @Author: gyy
+* @Date: 2024-04-28 08:49:04
+* @LastEditors: gyy
+* @LastEditTime: 2024-04-28 08:49:04
+-->
+<template>
+  <div class="docview">
+    <h1 class="noticeTitle">{{ data.title }}</h1>
+    <div style="padding: 20px 0 0px 0">
+      <el-text style="color: #999">
+       发布人：
+        {{ data.user_name }}
+      </el-text>
+      <el-text style="margin-left: 14px; color: #999">
+       发布时间：{{ data.create_date }}</el-text
+      >
+      <el-text style="margin-left: 14px; color: #999">
+        查看：{{ data.visits }}</el-text
+      >
+    </div>
+    <el-divider style="margin: 10px 0" />
+    <el-skeleton :loading="loading" :rows="6" animated>
+      <template #template>
+        <el-skeleton-item variant="h1" style="width: 20%; height: 20px; margin: 20px" /><br />
+        <el-skeleton-item variant="text" style="width: 20%; height: 20px; margin: 20px" /><br />
+        <el-skeleton-item variant="h3" style="width: 30%; height: 20px; margin: 20px" /><br />
+        <el-skeleton-item variant="caption" style="width: 30%; height: 20px; margin: 20px" /><br />
+        <el-skeleton-item variant="button" style="width: 30%; height: 20px; margin: 20px" /><br />
+        <el-skeleton-item variant="image" style="width: 120px; height: 120px; margin: 20px" /><br />
+        <el-skeleton-item variant="rect" style="width: 30%; height: 20px; margin: 20px" /><br />
+      </template>
+      <template #default>
+        <div v-html="data.content"></div>
+        <div v-if="data.imgurl">
+          <img :src="bdsdk.getBaseImgUrl(data.imgurl)" alt="">
+        </div>
+      </template>
+    </el-skeleton>
+  </div>
+</template>
+<script setup>
+import { defineComponent, ref, reactive, computed, watch, onMounted, inject, nextTick, onBeforeMount, onUnmounted } from 'vue'
+const emits = defineEmits([])
+const props = defineProps({
+  bdsdk: {
+    type: Object
+  },
+  data: {
+    type: Object,
+    default: () => ({
+      title: '',
+      user_name: '',
+      date: '',
+      content: '',
+      visits: 0
+    })
+  }
+})
+const bdsdk = props.bdsdk
+const loading = computed(() => {
+  return props.data.content == null
+})
+watch(
+  () => props.data,
+  (pdata) => {
+    console.info(props.data, 'props.data')
+    // if (pdata) {
+    //   const sdk = props.bdsdk
+    //   const { sdk.getBaseImgUrl } = sdk
+    // }
+  }
+)
+onBeforeMount(() => {})
+onMounted(() => {})
+defineExpose({})
+</script>
+<style lang="scss" scoped>
+.docview {
+  text-align: center;
+}
+.noticeTitle {
+  font-size: 20px;
+  color: #444;
+  margin-top: 30px;
+  margin: 0 auto;
+}
+.notice_icon {
+  margin-right: 6px;
+}
+</style>

package/src/components/notice/readme.md

@@ -0,0 +1 @@
+## 通知公共组件

package/src/components/pagination/index.vue

@@ -0,0 +1,100 @@
+<!--
+* @FileDescription:  分页组件
+* @Author: 李兵泉
+* @Date: 2021-06-08 09 时
+* @LastEditors: 最后更新作者
+* @LastEditTime: 最后更新时间
+--> 
+<template>
+    <div :class="{ hidden: hidden }" class="pagination-container">
+      <el-pagination :background="background" :current-page="currentPage" :page-size="pageSize" :layout="layout" :page-sizes="pageSizes" :total="total" v-bind="$attrs" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+    </div>
+  </template>
+  
+  <script setup>
+  import { scrollTo } from './scroll-to.js';
+  import {computed } from 'vue';
+  
+  const emits = defineEmits(['update:page', 'update:pageSize', 'pagination']);
+  
+  const props = defineProps({
+    total: {
+      required: true,
+      type: Number
+    },
+    page: {
+      type: Number,
+      default: 1
+    },
+    pageSize: {
+      type: Number,
+      default: 20
+    },
+    pageSizes: {
+      type: Array,
+      default() {
+        return [10, 20, 30, 50];
+      }
+    },
+    layout: {
+      type: String,
+      default: 'prev, pager, next, jumper, ->, total'
+    },
+    background: {
+      type: Boolean,
+      default: true
+    },
+    autoScroll: {
+      type: Boolean,
+      default: true
+    },
+    hidden: {
+      type: Boolean,
+      default: false
+    }
+  });
+  
+  const currentPage = computed({
+    get: () => {
+      return props.page;
+    },
+    set: val => {
+      emits('update:page', val);
+    }
+  });
+  
+  const pageSize = computed({
+    get: () => {
+      return props.pageSize;
+    },
+    set: val => {
+      emits('update:pageSize', val);
+    }
+  });
+  
+  const handleSizeChange = val => {
+    emits('pagination', { page: currentPage.value, pageSize: val });
+    if (props.autoScroll) {
+      scrollTo(0, 800);
+    }
+  };
+  
+  const handleCurrentChange = val => {
+    emits('pagination', { page: val, pageSize: pageSize.value });
+    if (props.autoScroll) {
+      scrollTo(0, 800);
+    }
+  };
+  </script>
+  
+  <style scoped>
+  .pagination-container {
+    background: #fff;
+    padding: 0;
+    /* height: 40px; */
+  }
+  .pagination-container.hidden {
+    display: none;
+  }
+  </style>
+  

package/src/components/pagination/readme.md

@@ -0,0 +1,19 @@
+# 说明文档
+
+```
+import {BdPagination,usePage} from '@bdsoft/element'
+// 分页查询
+const getPageList = (parm = {}) => {
+  let parms = Object.assign({}, parm)
+  getXXX(parms, pageHeader.value).then((res) => {
+    let resData = res.data[0].datas
+    total.value = res.data[0].total
+  })
+}
+
+// 分页hook
+const { currentPage, pageSize, total, pageHeader, handlePagination } = usePage(getPageList)
+
+ <!-- 分页 -->
+<Pagination :pageSize="pageSize" style="margin-top: 8px" :page="currentPage" layout="prev, pager, next,->, total" :total="total" @pagination="handlePagination"></Pagination>
+```