Skip to content

B
bg-ui-demos
Commit a28ec906 authored by 白舜's avatar 白舜 🎱
Browse files
Options

规范化代码和bg-ui一些问题修复

parent 974c61c9
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1593 additions and 502 deletions
.editorconfig 0 → 100644
View file @ a28ec906
root = true
[*]
indent_size = 2
end_of_line = lf
insert_final_newline = true
.eslintignore 0 → 100644
View file @ a28ec906
auto-imports.d.ts
components.d.ts
env.d.ts
pnpm-lock.yaml
*.md
iconfont.js
.eslintrc.js 0 → 100644
View file @ a28ec906
const INLINE_ELEMENTS = [
"a",
"abbr",
"audio",
"b",
"bdi",
"bdo",
"canvas",
"cite",
"code",
"data",
"del",
"dfn",
"em",
"i",
"iframe",
"ins",
"kbd",
"label",
"map",
"mark",
"noscript",
"object",
"output",
"picture",
"q",
"ruby",
"s",
"samp",
"small",
"span",
"strong",
"sub",
"sup",
"svg",
"time",
"u",
"var",
"video",
];
module.exports = {
root: true,
env: {
browser: true,
es2021: true,
node: true,
},
parser: "vue-eslint-parser",
extends: [
"plugin:vue/vue3-recommended",
"eslint:recommended",
],
parserOptions: {
ecmaVersion: 2021,
},
rules: {
"quote-props": ["error", "as-needed"],
"import/prefer-default-export": "off",
"no-param-reassign": "off",
"space-before-function-paren": ["error", "never"],
"no-unused-vars": "off",
"no-undef": "off", // auto import
"prefer-rest-params": "off",
"vue/script-setup-uses-vars": "off",
"@typescript-eslint/no-unused-vars": "off",
// "@typescript-eslint/no-explicit-any": "off",
// "@typescript-eslint/no-var-requires": "off",
"no-empty-function": "off",
"no-non-null-assertion": "off",
"@typescript-eslint/no-non-null-assertion": "off",
"@typescript-eslint/no-empty-function": "off",
"@typescript-eslint/no-explicit-any": "off",
"@typescript-eslint/explicit-module-boundary-types": "off",
quotes: [2, "double"],
semi: [2, "always"],
"vue/html-closing-bracket-newline": [
2,
{
singleline: "never",
multiline: "never",
},
],
"vue/singleline-html-element-content-newline": "off",
"vue/max-attributes-per-line": [
2,
{
singleline: 3,
multiline: 1,
},
],
"vue/html-self-closing": [
"error",
{
html: {
normal: "never",
void: "always",
},
svg: "always",
math: "always",
},
],
"vue/no-unused-vars": [
"error",
{
ignorePattern: "^[_scope]",
},
],
"vue/no-setup-props-destructure": "off",
"vue/no-mutating-props": "off",
"eslint no-empty": "off",
"vue/multiline-html-element-content-newline": [
"error",
{
ignoreWhenEmpty: true,
ignores: ["el-button", ...INLINE_ELEMENTS],
allowEmptyLines: false,
},
],
},
};
.prettierignore 0 → 100644
View file @ a28ec906
node_modules
dist
pnpm-lock.yaml
auto-imports.d.ts
components.d.ts
.prettierrc 0 → 100644
View file @ a28ec906
{
"$schema": "http://json.schemastore.org/prettierrc",
"semi": true,
"singleQuote": false
}
package.json
View file @ a28ec906
......@@ -6,7 +6,9 @@
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
"preview": "vite preview",
"lint": "eslint --ext .js,vue --ignore-pattern '!.*ignore' .",
"lint:fix": "pnpm lint --fix"
},
"dependencies": {
"@element-plus/icons-vue": "^2.0.10",
......@@ -22,6 +24,9 @@
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.0.0",
"eslint": "^8.34.0",
"eslint-define-config": "^1.15.0",
"eslint-plugin-vue": "^9.9.0",
"sass": "^1.58.2",
"vite": "^4.1.1"
}
......
src/App.vue
View file @ a28ec906
......@@ -121,7 +121,7 @@ const { title: cardTitle, icon: cardIcon } = toRefs(card);
<div class="container">
<cw title="bg-btns">
<bg-btns :options="btnsOption" v-model="btnsCurrentValue"></bg-btns>
<bg-btns v-model="btnsCurrentValue" :options="btnsOption" />
</cw>
<cw title="bg-card">
......@@ -134,29 +134,33 @@ const { title: cardTitle, icon: cardIcon } = toRefs(card);
</bg-card>
</cw>
<cw title="bg-code-editor"></cw>
<cw title="bg-code-editor" />
<cw title="bg-detail-table">
<bg-detail-table :data="detailTable.data" :layout="{ line_num: 4 }"></bg-detail-table>
<bg-detail-table :data="detailTable.data" :layout="{ line_num: 4 }" />
</cw>
<cw title="bg-detail-table2">
<bg-detail-table2 :list="[{ label: 'label', value: 'table2 demo' }]" itemWidth="200px"></bg-detail-table2>
<bg-detail-table2 :list="[{ label: 'label', value: 'table2 demo' }]" item-width="200px" />
</cw>
<cw title="bg-filter-date"></cw>
<cw title="bg-filter-group"></cw>
<cw title="bg-filter"></cw>
<cw title="bg-filtrate"></cw>
<cw title="bg-filter-date" />
<cw title="bg-filter-group" />
<cw title="bg-filter" />
<cw title="bg-filtrate" />
<cw title="bg-icon">
<bg-icon icon="#bg-ic-s-circle-close"></bg-icon>
<bg-icon icon="#bg-ic-c-file-doc"></bg-icon>
<bg-icon icon="#bg-ic-s-circle-close" />
<bg-icon icon="#bg-ic-c-file-doc" />
</cw>
<cw title="bg-info">
<bg-info :data="info.data"></bg-info>
<bg-info :data="info.data" />
</cw>
<cw title="bg-inner-tabs">
<bg-inner-tabs :data="['a', 'b', 'c']" :v-model="1" :default="1" :height="[36, 32, 16]"></bg-inner-tabs>
<bg-inner-tabs
:data="['a', 'b', 'c']"
:v-model="1"
:default="1"
:height="[36, 32, 16]" />
</cw>
<cw title="bg-layout-card">
<!-- <bg-layout-card title="title" width="420px" :btns="[1, 2]" @update:btn="handleUpdateBtnIndex"></bg-layout-card> -->
......@@ -167,24 +171,24 @@ const { title: cardTitle, icon: cardIcon } = toRefs(card);
<template #header>list header</template>
</bg-list>
</cw>
<cw title="bg-nav-list"></cw>
<cw title="bg-nav"></cw>
<cw title="bg-pagination"></cw>
<cw title="bg-rich-text"></cw>
<cw title="bg-sort"></cw>
<cw title="bg-step"></cw>
<cw title="bg-steps"></cw>
<cw title="bg-switch"></cw>
<cw title="bg-nav-list" />
<cw title="bg-nav" />
<cw title="bg-pagination" />
<cw title="bg-rich-text" />
<cw title="bg-sort" />
<cw title="bg-step" />
<cw title="bg-steps" />
<cw title="bg-switch" />
<!-- <cw title="bg-tab">
<bg-tab label="label">
<div>content</div>
</bg-tab>
</cw> -->
<cw title="bg-table-btn"></cw>
<cw title="bg-table-btns-more"></cw>
<cw title="bg-table-btns"></cw>
<cw title="bg-table-pro"></cw>
<cw title="bg-table"></cw>
<cw title="bg-table-btn" />
<cw title="bg-table-btns-more" />
<cw title="bg-table-btns" />
<cw title="bg-table-pro" />
<cw title="bg-table" />
<!-- <cw title="bg-tabs">
<bg-tabs>
<div>a</div>
......@@ -204,15 +208,14 @@ const { title: cardTitle, icon: cardIcon } = toRefs(card);
(v) => {
console.log(v);
}
"
></bg-tags>
" />
<template #notes>该组件引用了的el-button需要调整size，以便兼容Element-Plus</template>
</cw>
<cw title="bg-upload-image"></cw>
<cw title="bg-upload-image" />
<cw title="bg-upload">
<!-- <bg-upload :data="upload.data"></bg-upload> -->
</cw>
<cw title="bg-user-upload-image"></cw>
<cw title="bg-user-upload-image" />
</div>
</template>
......
src/bg-ui/bg-btns.vue
View file @ a28ec906
......@@ -3,12 +3,11 @@
<ul>
<li
v-for="btn in options"
:key="btn.value"
:class="{
'is-active': modelValue === btn.value,
}"
:key="btn.value"
@click="selectBtn(btn)"
>
@click="selectBtn(btn)">
{{ btn.name }}
</li>
</ul>
......@@ -16,20 +15,20 @@
</template>
<script setup>
import { reactive, ref,onBeforeMount,toRefs } from 'vue'
import { reactive, ref,onBeforeMount,toRefs } from "vue";
const props = defineProps({
modelValue: {
type: [String, Number],
default: []
default: 0
},
options: {
type: Array,
default: () => [],
}
})
const emit = defineEmits(['update:modelValue'])
});
const emit = defineEmits(["update:modelValue"]);
const selectBtn = ({value})=>{
emit("update:modelValue", value);
}
};
</script>
src/bg-ui/bg-card.vue
View file @ a28ec906
......@@ -3,18 +3,18 @@
<div class="card-header">
<slot name="title">
<h3 class="card-title text-clip">
<span class="title-icon" v-if="icon">
<span v-if="icon" class="title-icon">
<bg-icon :icon="icon" />
</span>
<span class="easy-icon" v-if="easyIcon"></span>
<span v-if="easyIcon" class="easy-icon"></span>
<span class="title-text">{{ title }}</span>
<span class="subtitle-text" v-if="subTitle">{{ subTitle }}</span>
<span v-if="subTitle" class="subtitle-text">{{ subTitle }}</span>
</h3>
</slot>
<slot name="title-extra"></slot>
</div>
<div class="card-content" ref="content">
<slot />
<div ref="content" class="card-content">
<slot></slot>
</div>
</div>
</template>
......@@ -37,7 +37,7 @@ const props = defineProps({
type:Boolean,
default:false,
}
})
});
</script>
<style scoped>
......
src/bg-ui/bg-code-editor.vue
View file @ a28ec906
......@@ -3,40 +3,39 @@
v-model:value="states.content"
class="vue-ace-editor"
:class="{'vue-ace-editor-disable':props.disabled}"
@input="codeChange"
:lang="props.lang"
:lang="props.lang"
:theme="props.theme"
:options="{
useWorker: true,
readOnly: props.disabled,
wrap: true
}"
/>
@input="codeChange" />
</template>
<script setup>
import { reactive, toRefs, watch,onMounted } from "vue";
import { VAceEditor } from "vue3-ace-editor";
import ace from 'ace-builds';
import modeJsonUrl from 'ace-builds/src-noconflict/mode-json?url';
import modeJavascriptUrl from 'ace-builds/src-noconflict/mode-javascript?url';
import modeHtmlUrl from 'ace-builds/src-noconflict/mode-html?url';
import themeGithubUrl from 'ace-builds/src-noconflict/theme-github?url';
import themeChromeUrl from 'ace-builds/src-noconflict/theme-chrome?url';
import themeMonokaiUrl from 'ace-builds/src-noconflict/theme-monokai?url';
import workerBaseUrl from 'ace-builds/src-noconflict/worker-base?url';
import workerJsonUrl from 'ace-builds/src-noconflict/worker-json?url';
import workerJavascriptUrl from 'ace-builds/src-noconflict/worker-javascript?url';
import workerHtmlUrl from 'ace-builds/src-noconflict/worker-html?url';
ace.config.setModuleUrl('ace/mode/json', modeJsonUrl);
ace.config.setModuleUrl('ace/mode/javascript', modeJavascriptUrl);
ace.config.setModuleUrl('ace/mode/html', modeHtmlUrl);
ace.config.setModuleUrl('ace/theme/github', themeGithubUrl);
ace.config.setModuleUrl('ace/theme/chrome', themeChromeUrl);
ace.config.setModuleUrl('ace/theme/monokai', themeMonokaiUrl);
ace.config.setModuleUrl('ace/mode/base', workerBaseUrl);
ace.config.setModuleUrl('ace/mode/json_worker', workerJsonUrl);
ace.config.setModuleUrl('ace/mode/javascript_worker', workerJavascriptUrl);
ace.config.setModuleUrl('ace/mode/html_worker', workerHtmlUrl);
import ace from "ace-builds";
import modeJsonUrl from "ace-builds/src-noconflict/mode-json?url";
import modeJavascriptUrl from "ace-builds/src-noconflict/mode-javascript?url";
import modeHtmlUrl from "ace-builds/src-noconflict/mode-html?url";
import themeGithubUrl from "ace-builds/src-noconflict/theme-github?url";
import themeChromeUrl from "ace-builds/src-noconflict/theme-chrome?url";
import themeMonokaiUrl from "ace-builds/src-noconflict/theme-monokai?url";
import workerBaseUrl from "ace-builds/src-noconflict/worker-base?url";
import workerJsonUrl from "ace-builds/src-noconflict/worker-json?url";
import workerJavascriptUrl from "ace-builds/src-noconflict/worker-javascript?url";
import workerHtmlUrl from "ace-builds/src-noconflict/worker-html?url";
ace.config.setModuleUrl("ace/mode/json", modeJsonUrl);
ace.config.setModuleUrl("ace/mode/javascript", modeJavascriptUrl);
ace.config.setModuleUrl("ace/mode/html", modeHtmlUrl);
ace.config.setModuleUrl("ace/theme/github", themeGithubUrl);
ace.config.setModuleUrl("ace/theme/chrome", themeChromeUrl);
ace.config.setModuleUrl("ace/theme/monokai", themeMonokaiUrl);
ace.config.setModuleUrl("ace/mode/base", workerBaseUrl);
ace.config.setModuleUrl("ace/mode/json_worker", workerJsonUrl);
ace.config.setModuleUrl("ace/mode/javascript_worker", workerJavascriptUrl);
ace.config.setModuleUrl("ace/mode/html_worker", workerHtmlUrl);
const props = defineProps(
{
modelValue: {
......@@ -60,8 +59,8 @@ const props = defineProps(
default:"100%"
},
}
)
const emit = defineEmits(['update:modelValue'])
);
const emit = defineEmits(["update:modelValue"]);
// watch(
// props.modelValue,
// (n,o) => {
......@@ -84,7 +83,7 @@ const states = reactive({
const codeChange = ()=>{
emit("update:modelValue", states.content);
}
};
onMounted(() => {
let obj = "";
......@@ -98,10 +97,10 @@ onMounted(() => {
} catch (e) {
obj = props.modelValue;
}
states.content = obj
})
states.content = obj;
});
const {content} = toRefs(states)
const {content} = toRefs(states);
</script>
......
src/bg-ui/bg-detail-table.vue
View file @ a28ec906
<template>
<div class="detail_box">
<div
class="detail_text text_clip"
:style="index == data.length - 1 ? last_width : unit_width"
v-for="(item, index) in data"
:key="'data' + index">
:key="'data' + index"
class="detail_text text_clip"
:style="index == data.length - 1 ? last_width : unit_width">
<span>{{ item.title }}</span>
<!-- 拓展功能 -->
<template v-if="item.slot">
<span>
<slot v-bind:item="item" :name="item.slot"></slot>
<slot :item="item" :name="item.slot"></slot>
</span>
</template>
<!-- 原有下载功能 -->
......@@ -17,40 +17,38 @@
<span
v-if="!item.urls"
:title="item.info"
@click="down_file(item.url)"
:style="item.url ? { color: '#515fe7', cursor: 'pointer' } : ''"
>{{ item.info }}</span
>
@click="down_file(item.url)">{{ item.info }}</span>
<span v-else :title="item.info">
<span
v-for="(it, idx) in item.urls"
@click="down_file(it)"
style="color: #515fe7; cursor: pointer"
:key="'urls' + idx"
>{{ helper.downloadFileFormatNew(it) }}、</span
>
style="color: #515fe7; cursor: pointer"
@click="down_file(it)">{{ helper.downloadFileFormatNew(it) }}、</span>
</span>
</template>
</div>
<div
class="bg"
:style="{ top: (2 * index + 1) * 42 + 'px' }"
v-for="(item, index) in bg_num"
:key="'bg' + index"></div>
:key="'bg' + index"
class="bg"
:style="{ top: (2 * index + 1) * 42 + 'px' }"></div>
</div>
</template>
<script setup>
import { reactive, ref, onBeforeMount, toRefs, watch } from "vue";
import helper from "./utils/index.js";
console.log(helper);
const props = defineProps({
data: {
type: Array,
default: () => [],
},
layout: {
line_num: 4,
type: Object,
default: () => {
4;
},
},
});
......@@ -67,7 +65,11 @@ watch(
if (props.layout.line_num && n.length % props.layout.line_num !== 0) {
//计算最后一个格子的宽度
last_width.value = {
width: ((props.layout.line_num - (n.length % this.layout.line_num) + 1) / this.layout.line_num) * 100 + "%",
width:
((props.layout.line_num - (n.length % this.layout.line_num) + 1) /
this.layout.line_num) *
100 +
"%",
};
} else {
last_width.value = { width: 100 / props.layout.line_num + "%" };
......@@ -75,7 +77,9 @@ watch(
if (n.length < props.layout.line_num) {
return;
} else {
bg_num.value = Math.floor(Math.ceil(n.length / props.layout.line_num) / 2);
bg_num.value = Math.floor(
Math.ceil(n.length / props.layout.line_num) / 2
);
}
}
);
......
src/bg-ui/bg-detail-table2.vue
View file @ a28ec906
<template>
<div class="out-detail">
<div class="row-box" v-for="(item, index) in list" :style="{ width: item.width }" :key="'row-box' + index">
<p class="detail-module" v-if="!item.slot">
<div
v-for="(item, index) in list"
:key="'row-box' + index"
class="row-box"
:style="{ width: item.width }">
<p v-if="!item.slot" class="detail-module">
<span :style="{ width: itemWidth }">{{ item.label }}</span>
<span class="text_clip" :title="item.value" v-if="!item.childSlot">{{ item.value }}</span>
<span v-if="!item.childSlot" class="text_clip" :title="item.value">{{ item.value }}</span>
<span v-else>
<slot :name="item.childSlot" :data="item"></slot>
</span>
......
src/bg-ui/bg-detail.vue
View file @ a28ec906
<template>
<div class="bg-detail bg-form" ref="bgDetail">
<div ref="bgDetail" class="bg-detail bg-form">
<!-- 固定导航 -->
<div class="bg-tabs-nav--fixed" v-show="showFixedBars">
<div v-show="showFixedBars" class="bg-tabs-nav--fixed">
<ul v-if="calcTabs().length">
<li
v-for="(item, index) in calcTabs()"
......@@ -9,8 +9,7 @@
:class="{
current: activeName === item.name,
}"
@click="changeActiveName(item, index)"
>
@click="changeActiveName(item, index)">
{{ item.label }}
</li>
<li>
......@@ -21,22 +20,22 @@
<!-- 面包屑 -->
<div class="bg-breadcrumb">
<slot name="breadcrumb" />
<slot name="breadcrumb"></slot>
</div>
<!-- 基本信息 -->
<div class="bg-detail-info" v-if="$slots.info">
<slot name="info" />
<div v-if="$slots.info" class="bg-detail-info">
<slot name="info"></slot>
</div>
<!-- 兼容意外模块 -->
<div v-if="$slots.other">
<slot name="other" />
<slot name="other"></slot>
</div>
<!-- 详情 -->
<div class="bg-tabs bg-detail-tabs">
<div class="bg-tabs-nav" v-if="calcTabs().length">
<div v-if="calcTabs().length" class="bg-tabs-nav">
<ul>
<li
v-for="(item, index) in calcTabs()"
......@@ -44,8 +43,7 @@
:class="{
current: activeName === item.name,
}"
@click="changeActiveName(item, index)"
>
@click="changeActiveName(item, index)">
{{ item.label }}
</li>
<li>
......@@ -54,30 +52,30 @@
</ul>
</div>
<div class="bg-tabs-content">
<slot />
<slot></slot>
</div>
</div>
</div>
</template>
<script setup>
import { ref, provide,reactive,onBeforeMount,onMounted,onUnmounted,nextTick,toRefs,useSlots } from 'vue'
import { ref, provide,reactive,onBeforeMount,onMounted,onUnmounted,nextTick,toRefs,useSlots } from "vue";
const slots = useSlots()
const slots = useSlots();
const activeName = ref('')
const activeName = ref("");
const bgDetail = ref(null)
const bgDetail = ref(null);
provide('getActiveName',activeName.value)
provide("getActiveName",activeName.value);
provide('getIsTabs',false)
provide("getIsTabs",false);
const showFixedBars = ref(false)
const showFixedBars = ref(false);
const state = reactive({
scrollCallback:null
})
});
const calcTabs=()=> {
let tabSlots = [];
......@@ -94,10 +92,10 @@ const calcTabs=()=> {
}
return tabSlots;
}
};
const changeActiveName=({ name }, index)=> {
let targetEl = bgDetail.value.querySelectorAll(`.bg-tab`)[index];
let targetCtx = document.querySelector(`.bg-main`);
let targetEl = bgDetail.value.querySelectorAll(".bg-tab")[index];
let targetCtx = document.querySelector(".bg-main");
targetCtx.scrollTop = targetEl && targetEl.offsetTop - 165;
......@@ -105,11 +103,11 @@ const changeActiveName=({ name }, index)=> {
state.scrollCallback = () => {
activeName.value = name;
};
}
};
const scrollAction=()=> {
let targetCtx = document.querySelector(`.bg-main`);
let targetCtx = document.querySelector(".bg-main");
let ctxScrollTop = targetCtx.scrollTop || 0;
let targetEls = bgDetail.value.querySelectorAll(`.bg-tab`);
let targetEls = bgDetail.value.querySelectorAll(".bg-tab");
let tabs = calcTabs();
for (let i = 0; i < targetEls.length; i++) {
......@@ -123,7 +121,7 @@ const scrollAction=()=> {
showFixedBars.value = ctxScrollTop > 222;
state.scrollCallback && state.scrollCallback();
state.scrollCallback = null;
}
};
onMounted(()=>{
nextTick().then(() => {
......@@ -132,9 +130,9 @@ onMounted(()=>{
scrollAction();
window.addEventListener("scroll", scrollAction, true);
});
})
});
onUnmounted(()=>{
window.removeEventListener("scroll", scrollAction, true);
})
});
</script>
src/bg-ui/bg-filter-date.vue
View file @ a28ec906
......@@ -9,8 +9,7 @@
range-separator="~"
start-placeholder="开始日期"
end-placeholder="结束日期"
@change="change">
</el-date-picker>
@change="change" />
</div>
</div>
</template>
......
src/bg-ui/bg-filter-group.vue
View file @ a28ec906
......@@ -13,30 +13,30 @@
<div class="right-filter">
<el-input
v-if="showSearch"
v-model.trim="modelValue"
:placeholder="placeholder"
@keydown.enter="search"
@clear="search"
clearable
v-model.trim="modelValue">
@keydown.enter="search"
@clear="search">
<template #append>
<div class="append-btn" @click="search">
<bg-icon style="font-size: 12px; color: #404a62" icon="#bg-ic-search"></bg-icon>
<bg-icon style="font-size: 12px; color: #404a62" icon="#bg-ic-search" />
</div>
</template>
</el-input>
<div class="more-btn" :class="showFlag ? 'more-btn1' : ''" v-if="$slots.filter_group">
<div v-if="$slots.filter_group" class="more-btn" :class="showFlag ? 'more-btn1' : ''">
<el-button type="default" class="more-filter" @click="moreFilter">
高级搜索
<bg-icon
v-if="!showFlag"
style="font-size: 8px; color: #404a62; margin-left: 8px"
icon="#bg-ic-arrow-down"
v-if="!showFlag"></bg-icon>
<bg-icon style="font-size: 8px; color: #404a62; margin-left: 8px" icon="#bg-ic-arrow-up" v-else></bg-icon>
icon="#bg-ic-arrow-down" />
<bg-icon v-else style="font-size: 8px; color: #404a62; margin-left: 8px" icon="#bg-ic-arrow-up" />
</el-button>
</div>
</div>
</div>
<div class="filter-group" ref="filterGroup" v-show="showFlag">
<div v-show="showFlag" ref="filterGroup" class="filter-group">
<slot name="filter_group"></slot>
</div>
</div>
......@@ -46,7 +46,7 @@
import { computed, onMounted, reactive, toRefs, watch, ref, nextTick } from "vue";
const state = reactive({
showFlag: true,
showFlag: false,
modelValue: "",
});
......
src/bg-ui/bg-filter.vue
View file @ a28ec906
<template>
<div class="bg-filter" v-if="options.length > 0">
<div v-if="options.length > 0" class="bg-filter">
<span>{{ name }}：</span>
<ul>
<li
v-for="(item, index) in fullOptions"
:class="{ current: selection.indexOf(item.value) > -1 }"
:key="'li_' + index"
@click="selectAction(item)"
>
:class="{ current: selection.indexOf(item.value) > -1 }"
@click="selectAction(item)">
{{ item.name }}
</li>
</ul>
......@@ -20,7 +19,7 @@ import {computed} from "vue";
const props = defineProps({
modelValue: {
type: [Number, String],
default: '',
default: "",
},
isCalc:{
type:Boolean,
......@@ -48,7 +47,7 @@ const props = defineProps({
},
});
const emit = defineEmits(['update:modelValue'])
const emit = defineEmits(["update:modelValue"]);
const fullOptions = computed(()=> {
return [
......@@ -64,12 +63,12 @@ const fullOptions = computed(()=> {
};
}),
];
})
});
const selection = computed(()=> {
let value = props.modelValue + "";
return value.split(",");
})
});
const selectAction = ({ value, name, sub_cate })=> {
if (value && props.multiple) {
......@@ -86,5 +85,5 @@ const selectAction = ({ value, name, sub_cate })=> {
} else {
emit("update:modelValue", value, name, sub_cate ? sub_cate : "");
}
}
};
</script>
src/bg-ui/bg-filtrate.vue
View file @ a28ec906
......@@ -4,8 +4,8 @@
<ul class="bg-filtrate-list">
<li
v-for="(item, index) in fullOptions"
:class="{ current: selection.indexOf(item.value) > -1 }"
:key="'li_' + index"
:class="{ current: selection.indexOf(item.value) > -1 }"
@click="selectAction(item)">
{{ item.name }}
</li>
......
src/bg-ui/bg-icon.vue
View file @ a28ec906
<template>
<svg class="bg-icon" aria-hidden="true">
<use :xlink:href="icon"></use>
<use :xlink:href="icon" />
</svg>
</template>
......@@ -12,5 +12,5 @@ const props = defineProps({
type: String,
default: "",
},
})
});
</script>
src/bg-ui/bg-info.vue
View file @ a28ec906
......@@ -17,25 +17,29 @@
width: item.copy ? 'calc(100% - 36px)' : item.download || item.password ? 'calc(100% - 22px)' : '100%',
color: item.download ? '#3759be' : '#404a62',
}">
<span v-if="item.callback" @click.stop="item.callback && item.callback()" class="can_click_text" style="text-decoration:underline">{{
item.value
}}</span>
<span
v-if="item.callback"
class="can_click_text"
style="text-decoration:underline"
@click.stop="item.callback && item.callback()">{{
item.value
}}</span>
<span v-else>{{ item.value }}</span>
</span>
<a class="copy-btn" @click="copyText(item.value, $event)" v-if="item.copy"> 复制 </a>
<a v-if="item.copy" class="copy-btn" @click="copyText(item.value, $event)"> 复制 </a>
<bg-icon
v-if="item.download"
class="copy-btn"
:class="item.url.indexOf('/') == -1 ? 'copy-btn-dis' : ''"
style="font-size: 14px; cursor: pointer"
icon="#bg-ic-download"
v-if="item.download"
@click="download(item.url)"></bg-icon>
@click="download(item.url)" />
<bg-icon
v-if="item.password"
class="copy-btn"
style="font-size: 14px; cursor: pointer"
:icon="show ? '#bg-ic-eye-close' : '#bg-ic-eye'"
v-if="item.password"
@click="changeView(item)"></bg-icon>
@click="changeView(item)" />
</span>
</li>
</ul>
......
src/bg-ui/bg-inner-tabs.vue
View file @ a28ec906
<template>
<div class="inner-container" :style="{height:height[0]+'px',fontSize:height[2]+'px'}">
<div :style="{height:height[1]+'px',lineHeight:height[1]-2+'px'}" :class="{'now-inner':nowIndex==index}" @click="changeInner(index)" v-for="(item,index) in data" :key="'inner'+index">{{item}}</div>
<div
class="inner-container"
:style="{ height: height[0] + 'px', fontSize: height[2] + 'px' }">
<div
v-for="(item, index) in data"
:key="'inner' + index"
:style="{ height: height[1] + 'px', lineHeight: height[1] - 2 + 'px' }"
:class="{ 'now-inner': nowIndex == index }"
@click="changeInner(index)">
{{ item }}
</div>
</div>
</template>
<script setup>
import { reactive, ref,onBeforeMount,toRefs } from 'vue'
import { reactive, ref, onBeforeMount, toRefs } from "vue";
const props = defineProps({
modelValue:{
type: [String,Number],
modelValue: {
type: [String, Number],
default: 0,
},
data: {
type: Array,
default: [],
default: () => [],
},
default:{
type: [String,Number],
default: 0
default: {
type: [String, Number],
default: 0,
},
height: {
type: Array,
default: () => [36, 32, 16],
},
height:{
type:Array,
default:[36,32,16]
}
})
const emit = defineEmits(['update:modelValue','change'])
});
const emit = defineEmits(["update:modelValue", "change"]);
const nowIndex = ref('')
const nowIndex = ref("");
const changeInner = (val)=>{
nowIndex.value = val
emit('update:modelValue',val)
emit('change',val)
}
const changeInner = (val) => {
nowIndex.value = val;
emit("update:modelValue", val);
emit("change", val);
};
onBeforeMount(()=>{
nowIndex.value = props.default
})
onBeforeMount(() => {
nowIndex.value = props.default;
});
</script>
<style scoped>
.inner-container{
height: 36px;
background-color: #edeef0;
border-radius: 4px;
padding: 2px;
display: inline-block;
overflow: hidden;
.inner-container {
height: 36px;
background-color: #edeef0;
border-radius: 4px;
padding: 2px;
display: inline-block;
overflow: hidden;
}
.inner-container div{
height: 32px;
line-height: 30px;
border-radius: 4px;
padding:0 15px;
float: left;
color: #404a62;
cursor: pointer;
.inner-container div {
height: 32px;
line-height: 30px;
border-radius: 4px;
padding: 0 15px;
float: left;
color: #404a62;
cursor: pointer;
}
.inner-container .now-inner{
background-color: #2b4695;
color: #ffffff;
.inner-container .now-inner {
background-color: #2b4695;
color: #ffffff;
}
</style>
src/bg-ui/bg-layout-card.vue
View file @ a28ec906
......@@ -2,7 +2,7 @@
<div class="bg-layout-card" :style="style">
<div class="card-title">
<h3 class="title-text text-clip">{{ title }}</h3>
<ul class="filter-list" v-if="btns.length > 0">
<ul v-if="btns.length > 0" class="filter-list">
<li
v-for="(item, index) in btns"
:key="item"
......@@ -12,16 +12,16 @@
</li>
</ul>
<div
class="download-btn"
@click="downloadAction"
v-if="download"
v-loading="downloading"
class="download-btn"
element-loading-spinner="el-icon-loading"
v-if="download">
@click="downloadAction">
<img src="./imgs/btn_daochu.png" />
</div>
</div>
<div class="card-content" ref="content">
<slot />
<div ref="content" class="card-content">
<slot></slot>
</div>
</div>
</template>
......@@ -57,6 +57,7 @@ const props = defineProps({
},
});
const emit = defineEmits(["update:btn"]);
const style = computed(() => {
return {
width: `calc(${props.width} - 20px)`,
......
src/bg-ui/bg-list.vue
View file @ a28ec906
......@@ -2,67 +2,71 @@
<div class="bg-list bg-form">
<!-- 面包屑 -->
<div class="bg-breadcrumb">
<slot name="breadcrumb" />
<slot name="breadcrumb"></slot>
</div>
<!-- 头部 -->
<div class="bg-list-header" v-if="$slots.header">
<slot name="header" />
<div v-if="$slots.header" class="bg-list-header">
<slot name="header"></slot>
</div>
<!-- 筛选条件 -->
<div class="bg-list-filter" v-if="$slots.filters">
<div class="fiter-header" v-if="!inlineFilters">
<div v-if="$slots.filters" class="bg-list-filter">
<div v-if="!inlineFilters" class="fiter-header">
<span v-if="noMoreFilters">
<!-- -->
</span>
<template v-else>
<el-button @click="$emit('update:visible', !visible)" v-if="visible">
<el-button v-if="visible" @click="$emit('update:visible', !visible)">
<span>收起</span>
<i class="el-icon-caret-top el-icon--right"></i>
</el-button>
<el-button @click="$emit('update:visible', !visible)" v-else>
<el-button v-else @click="$emit('update:visible', !visible)">
<span>更多选项</span>
<i class="el-icon-caret-bottom el-icon--right"></i>
</el-button>
</template>
<div class="filter-header-right">
<slot name="filter" />
<slot name="filter"></slot>
</div>
</div>
<div class="filter-content" :class="{ 'inline-filters': inlineFilters, 'show-more': visible }">
<div
class="filter-content"
:class="{ 'inline-filters': inlineFilters, 'show-more': visible }">
<div class="filter-list">
<slot name="filters" />
<slot name="filters"></slot>
</div>
<div class="filter-action" v-if="inlineFilters">
<div class="filters-right" v-if="$slots['filters-right']">
<slot name="filters-right" />
<div v-if="inlineFilters" class="filter-action">
<div v-if="$slots['filters-right']" class="filters-right">
<slot name="filters-right"></slot>
</div>
<el-button type="primary" @click="$emit('search-action')"> 查询 </el-button>
<el-button type="primary" @click="$emit('search-action')">
查询
</el-button>
<el-button @click="$emit('search-reset')"> 重置 </el-button>
</div>
</div>
</div>
<!-- 其他信息 -->
<div class="bg-list-top" v-if="$slots.top">
<slot name="top" />
<div v-if="$slots.top" class="bg-list-top">
<slot name="top"></slot>
</div>
<!-- 列表 -->
<div class="bg-list-main" :class="{ 'has-action': !!$slots.action }">
<div class="main-action" v-if="$slots.action">
<slot name="action" />
<div v-if="$slots.action" class="main-action">
<slot name="action"></slot>
</div>
<div class="main-table">
<slot name="table" />
<slot name="table"></slot>
</div>
<div class="main-pagination">
<slot name="pagination" />
<slot name="pagination"></slot>
</div>
</div>
<slot />
<slot></slot>
</div>
</template>
......@@ -81,4 +85,6 @@ const props = defineProps({
default: false,
},
});
const emit = defineEmits(["update:visible", "search-action", "search-reset"]);
</script>
src/bg-ui/bg-nav-list.vue
View file @ a28ec906
<template>
<ul class="nav-list bg-no-scroll" v-if="list && list.length">
<li v-for="(item, index) in list" v-show="item.menuType !== 2" :key="'nav_' + index">
<template v-if="item.children && item.children.length && item.menuType == 0">
<ul v-if="list && list.length" class="nav-list bg-no-scroll">
<li
v-for="(item, index) in list"
v-show="item.menuType !== 2"
:key="'nav_' + index">
<template
v-if="item.children && item.children.length && item.menuType == 0">
<div
class="nav-item nav-more text-clip"
:class="{ current: isCurrent([item.path]) }"
@click="showMoreAction(index)">
<span :style="{ paddingLeft: `${deep * 2}em` }">
<!-- <img v-if="item.icon" :src="item.icon" alt=""> -->
<bg-icon v-if="item.icon" style="color: #7c8292" :icon="'#' + item.icon"></bg-icon>
<bg-icon
v-if="item.icon"
style="color: #7c8292"
:icon="'#' + item.icon" />
{{ item.menuName }}
<bg-icon
v-show="showMore[index] !== false"
style="font-size: 8px; position: absolute; right: 10px; top: 20px"
icon="#bg-ic-arrow-up"></bg-icon>
icon="#bg-ic-arrow-up" />
<bg-icon
v-show="showMore[index] == false"
style="font-size: 8px; position: absolute; right: 10px; top: 20px"
icon="#bg-ic-arrow-down"></bg-icon>
icon="#bg-ic-arrow-down" />
</span>
&ensp;
</div>
<transition name="slideOutUp">
<NavList
v-if="showMore[index] !== false"
:list="item.children"
:deep="deep + 1"
:highlight-parent-rule="highlightParentRule"
v-if="showMore[index] !== false" />
:highlight-parent-rule="highlightParentRule" />
</transition>
</template>
<template v-else>
......@@ -34,12 +41,20 @@
class="nav-item text-clip"
:class="{
current: isCurrent(
item.children && item.children.length ? [...getChildrenPath(item.children), item.path] : [item.path]
item.children && item.children.length
? [...getChildrenPath(item.children), item.path]
: [item.path]
),
}"
@click="$router.push(item.path)">
<span :style="{ paddingLeft: item.icon ? `${deep * 2 - 1.37}em` : `${deep * 2}em` }">
<bg-icon v-if="item.icon" style="color: #7c8292" :icon="'#' + item.icon"></bg-icon>
<span
:style="{
paddingLeft: item.icon ? `${deep * 2 - 1.37}em` : `${deep * 2}em`,
}">
<bg-icon
v-if="item.icon"
style="color: #7c8292"
:icon="'#' + item.icon" />
{{ item.menuName }}
</span>
</div>
......@@ -48,7 +63,6 @@
</ul>
</template>
<script>
export default {
name: "NavList",
......@@ -67,6 +81,7 @@ const props = defineProps({
},
highlightParentRule: {
type: Function,
default: () => null,
},
});
......@@ -91,25 +106,27 @@ const getChildrenPath = (arr, temp = []) => {
return temp;
};
const isCurrent = (path) => {
return (props.highlightParentRule && props.highlightParentRule(path)) || false;
return (
(props.highlightParentRule && props.highlightParentRule(path)) || false
);
};
/**
* @description 菜单高度过长，对于不在视野中的元素需要scrollIntoView
*/
const setCurrentIntoView = ()=>{
let current = document.querySelector(".current")
if(!current){
return
const setCurrentIntoView = () => {
let current = document.querySelector(".current");
if (!current) {
return;
}
let screenHeight = document.body.clientHeight
let currentClient = current.getBoundingClientRect()
if(currentClient.top+currentClient.height>screenHeight-10){
current.scrollIntoView()
let screenHeight = document.body.clientHeight;
let currentClient = current.getBoundingClientRect();
if (currentClient.top + currentClient.height > screenHeight - 10) {
current.scrollIntoView();
}
}
};
onMounted(()=>{
setCurrentIntoView()
})
onMounted(() => {
setCurrentIntoView();
});
</script>
src/bg-ui/bg-nav.vue
View file @ a28ec906
<template>
<div class="bg-nav" :style="{ width: width }">
<div class="bg-nav-title" v-if="title">
<div v-if="title" class="bg-nav-title">
<h3 class="text-clip">{{ title }}</h3>
</div>
<div class="bg-nav-list">
......@@ -27,6 +27,7 @@ const props = defineProps({
}, // 导航列表 [ { name: "xxx", path: "xxx" } ]
highlightParentRule: {
type: Function,
default: () => null,
},
});
</script>
src/bg-ui/bg-pagination.vue
View file @ a28ec906
......@@ -2,20 +2,20 @@
<div class="bg-pagination">
<el-pagination
:small="small"
:currentPage="numberOfPage"
:current-page="numberOfPage"
:page-size="numberOfPageSize"
:page-sizes="pageSizes"
:layout="layout"
:total="total"
@size-change="changeSize"
@current-change="changePage"
:background="background"
:disabled="disabled" />
:disabled="disabled"
@size-change="changeSize"
@current-change="changePage" />
</div>
</template>
<script setup>
import { computed } from 'vue';
import { computed } from "vue";
const props = defineProps({
small: {
type: Boolean,
......@@ -31,7 +31,7 @@ const props = defineProps({
},
pageSizes: {
type: Array,
default: [10, 50, 100],
default: () => [10, 50, 100],
},
total: {
type: Number,
......@@ -51,8 +51,8 @@ const props = defineProps({
},
});
const emit = defineEmits(["change-page", "change-size"]);
const numberOfPage = computed(() => Number(props.page))
const numberOfPageSize = computed(() => Number(props.size))
const numberOfPage = computed(() => Number(props.page));
const numberOfPageSize = computed(() => Number(props.size));
const changePage = (val) => {
emit("change-page", val);
};
......
src/bg-ui/bg-rich-text.vue
View file @ a28ec906
<template>
<div style="border: 1px solid #ccc; z-index: 100">
<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
<Toolbar
style="border-bottom: 1px solid #ccc"
:editor="editorRef"
:default-config="toolbarConfig"
:mode="mode" />
<Editor
style="height: 500px; overflow-y: hidden"
v-model="valueHtml"
@onChange="handleChange"
@onBlur="handleBlur"
:defaultConfig="editorConfig"
style="height: 500px; overflow-y: hidden"
:default-config="editorConfig"
:mode="mode"
@onCreated="handleCreated" />
@on-change="handleChange"
@on-blur="handleBlur"
@on-created="handleCreated" />
</div>
</template>
<script setup>
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { useFormItem } from "element-plus";
const props = defineProps({
......@@ -34,8 +36,14 @@ const props = defineProps({
default: "default",
},
});
const emit = defineEmits(["update:modelValue", "change", "blur"]);
const emit = defineEmits([
"update:modelValue",
"update:visible",
"search-action",
"search-reset",
"change",
"blur",
]);
const valueHtml = ref("");
// change次数
......
src/bg-ui/bg-switch.vue
View file @ a28ec906
<template>
<div ref="bgSwitch" class="bg-switch" :class="{ disabled: disabled }" :style="now_style" @click="switch_data">
<div
ref="bgSwitch"
class="bg-switch"
:class="{ disabled: disabled }"
:style="now_style"
@click="switch_data">
<span class="label" :style="now_label_style">
{{ labels[now_index] }}
</span>
<span class="circle" :style="now_circle_style" ref="circle">
<span ref="circle" class="circle" :style="now_circle_style">
<!-- circle -->
</span>
</div>
......
src/bg-ui/bg-tab.vue
View file @ a28ec906
<template>
<div class="bg-tab" v-show="showTab">
<div class="tab-title" v-if="!isTabs">
<div v-show="showTab" class="bg-tab">
<div v-if="!isTabs" class="tab-title">
<h3>{{ label }}</h3>
</div>
<div class="tab-content">
<slot />
<slot></slot>
</div>
</div>
</template>
......@@ -15,7 +15,7 @@ import { reactive, ref, onBeforeMount, toRefs, computed, inject } from "vue";
const getActiveName = inject(
"activeName",
()=>{
return ''
return "";
},
false
);
......
src/bg-ui/bg-table-btn.vue
View file @ a28ec906
<template>
<a class="bg-table-btn" :class="{ disabled: disabled }" @click="clickAction">
<slot />
<slot></slot>
</a>
</template>
......
src/bg-ui/bg-table-btns-more.vue
View file @ a28ec906
......@@ -4,8 +4,7 @@
v-for="(item, index) in operations"
:key="index"
:disabled="isDisabled(item)"
@click="clickAction(item)"
>
@click="clickAction(item)">
{{ getName(item) }}
</bg-table-btn>
</div>
......@@ -25,6 +24,13 @@ export default {
style: {},
};
},
mounted() {
document.body.append(this.$el);
this.upStyle();
},
beforeUnmount() {
this.$el && this.$el.remove();
},
methods: {
isDisabled({ disabled }) {
if (typeof disabled === "function") {
......@@ -38,7 +44,7 @@ export default {
}
},
clickAction({ callback }) {
this.$parent.hideBox()
this.$parent.hideBox();
typeof callback === "function" && callback();
},
getName({ name }) {
......@@ -59,12 +65,5 @@ export default {
};
},
},
mounted() {
document.body.append(this.$el);
this.upStyle();
},
beforeDestroy() {
this.$el && this.$el.remove();
},
};
</script>
src/bg-ui/bg-table-btns.vue
View file @ a28ec906
<template>
<div class="bg-table-btns">
<bg-table-btn
class="can_click_text"
v-for="(item, index) in curOperations"
:key="index"
class="can_click_text"
:disabled="isDisabled(item)"
@click="clickAction(item)"
>
@click="clickAction(item)">
{{ getName(item) }}
</bg-table-btn>
<a
v-if="otherOperations.length > 0"
class="bg-table-btn"
@mouseenter="showMoreBtns"
@mouseleave="hideMoreBtns"
v-if="otherOperations.length > 0"
>
@mouseleave="hideMoreBtns">
<!-- <i class="el-icon-more" /> -->
<bg-icon style="font-size: 12px; color: #2b4695;" icon="#bg-ic-s-more" />
<bg-table-btns-more
v-if="showMore"
:operations="otherOperations"
@mouseenter="showMoreBtns"
@mouseleave="hideMoreBtns"
v-if="showMore"
/>
@mouseleave="hideMoreBtns" />
</a>
</div>
</template>
......@@ -55,7 +52,7 @@ export default {
},
methods: {
hideBox() {
this.showMore = false
this.showMore = false;
},
isDisabled({ disabled }) {
if (typeof disabled === "function") {
......
src/bg-ui/bg-table-btns2.vue
View file @ a28ec906
<template>
<div class="bg-table-btns" ref="bgTableBtnsRef">
<div ref="bgTableBtnsRef" class="bg-table-btns">
<slot></slot>
<span
class="bg-table-btn more"
id="more_btn"
v-if="state.children.length > limit"
id="more_btn"
ref="lastEl"
class="bg-table-btn more"
@mouseenter="showMoreBtns"
@mouseleave="hideMoreBtns">
<bg-icon style="font-size: 12px; color: #2b4695" icon="#bg-ic-s-more" />
<teleport to="body">
<div
v-if="state.showMore"
class="more-box"
:style="state.style"
v-if="state.showMore"
@mouseenter="showMoreBtns"
@mouseleave="hideMoreBtns">
<span
v-for="(item, index) in state.lastChildren"
:key="'as' + index"
@click="action(item.onClick, item.disabled)"
:class="item.disabled ? 'disabled' : ''"
>{{ item.name }}</span
>
@click="action(item.onClick, item.disabled)">{{ item.name }}</span>
</div>
</teleport>
</span>
......@@ -56,7 +54,7 @@ const action = (event, disable) => {
return;
}
event();
state.showMore = false
state.showMore = false;
};
const calcTabs = () => {
......
src/bg-ui/bg-table-pro.vue
View file @ a28ec906
......@@ -7,18 +7,23 @@
:data="data"
:row-key="rowKey"
:tree-props="treeProps"
@selection-change="selectionChange"
tooltip-effect="light"
:default-expand-all="defaultExpandAll">
<el-table-column width="60" v-if="showIndex">
<template v-slot:header>
:default-expand-all="defaultExpandAll"
@selection-change="selectionChange">
<el-table-column v-if="showIndex" width="60">
<template #header>
<p style="width: 100%; text-align: center">序号</p>
</template>
<template v-slot:default="{ $index }">
<template #default="{ $index }">
<p style="width: 100%; text-align: center">{{ $index + 1 }}</p>
</template>
</el-table-column>
<el-table-column type="selection" :selectable="selectable" width="60" align="center" v-if="showSelectColumn" />
<el-table-column
v-if="showSelectColumn"
type="selection"
:selectable="selectable"
width="60"
align="center" />
<el-table-column
v-for="(header, index) in headers"
:key="`col_${index}`"
......@@ -27,9 +32,9 @@
:align="header.align"
:show-overflow-tooltip="!$slots[header.prop]"
:fixed="header.fixed">
<template v-slot:header>
<template #header>
<template v-if="$slots[`header-${header.prop}`]">
<slot :name="`header-${header.prop}`" />
<slot :name="`header-${header.prop}`"></slot>
</template>
<template v-else>
<p class="text-clip">
......@@ -39,13 +44,16 @@
</template>
</template>
<template v-slot:default="{ row, $index }">
<template #default="{ row, $index }">
<template v-if="$slots[header.prop]">
<slot :name="header.prop" :row="row" :index="$index" />
<slot :name="header.prop" :row="row" :index="$index"></slot>
</template>
<template v-else-if="$slots[`text-${header.prop}`]">
<p class="text-clip">
<slot :name="`text-${header.prop}`" :row="row" :index="$index" />
<slot
:name="`text-${header.prop}`"
:row="row"
:index="$index"></slot>
</p>
</template>
<template v-else>
......@@ -64,16 +72,20 @@ const attrs = useAttrs();
const props = defineProps({
headers: {
type: Array,
default: () => [],
require: true,
},
data: {
type: Array,
default: () => [],
},
rowKey: {
type: String,
default: "",
},
treeProps: {
type: Object,
default: () => {},
},
showIndex: {
type: Boolean,
......@@ -81,6 +93,7 @@ const props = defineProps({
},
selectable: {
type: Function,
default: () => null,
},
defaultExpandAll: {
type: Boolean,
......@@ -138,7 +151,9 @@ const upAllSelection = (selection) => {
selectionIds = selectionIds.filter((v) => rowIds.indexOf(v) === -1);
// allSelection仅保留selectionIds存在的
allSelection1 = allSelection1.filter((v) => selectionIds.indexOf(v[props.rowKey]) > -1);
allSelection1 = allSelection1.filter(
(v) => selectionIds.indexOf(v[props.rowKey]) > -1
);
// 然后再加入当前页的选中
allSelection1.push(...selection);
......@@ -182,5 +197,5 @@ const getRowInfo = (row, key) => {
defineExpose({
getRowInfo,
})
});
</script>
src/bg-ui/bg-table.vue
View file @ a28ec906
<template>
<el-table
:height="height"
ref="table"
:height="height"
class="bg-table"
:data="rows"
@selection-change="selectAction"
@select="selectActionRow"
@select-all="selectActionAll"
:stripe="stripe"
:row-class-name="stripe ? tableRowClassName : ''"
tooltip-effect="light">
<template v-slot:empty>
tooltip-effect="light"
@selection-change="selectAction"
@select="selectActionRow"
@select-all="selectActionAll">
<template #empty>
<div class="empty_container">
<img src="../assets/imgs/img-no-data.png" alt="" />
<img src="./imgs/img-no-data.png" alt="" />
<div class="text">暂无数据</div>
</div>
</template>
<el-table-column v-if="paddingLeft > 10" :width="paddingLeft - 10"></el-table-column>
<el-table-column type="selection" :selectable="selectable" width="38" v-if="select">
<el-table-column v-if="paddingLeft > 10" :width="paddingLeft - 10" />
<el-table-column
v-if="select"
type="selection"
:selectable="selectable"
width="38">
<!-- checkbox -->
</el-table-column>
<el-table-column v-if="isIndex" type="index" :label="indexLabel" :width="indexWidth" align="left">
<el-table-column
v-if="isIndex"
type="index"
:label="indexLabel"
:width="indexWidth"
align="left">
<!-- 序号 -->
</el-table-column>
<el-table-column v-if="sort" width="54" align="center">
<template v-slot:header>
<template #header>
<p style="width: 100%; text-align: center">排名</p>
</template>
<template v-slot:default="{ row,$index }">
<p style="width: 100%; text-align: center;display: flex;align-items: center;">
<bg-icon style="font-size: 12px; color: #429e8a;margin-right: 9px;" icon="#bg-ic-arrow-up-2" v-if="row.sort == 1" />
<bg-icon style="font-size: 12px; color: #d75138;margin-right: 9px;" icon="#bg-ic-arrow-down-2" v-else-if="row.sort == 2" />
<bg-icon style="font-size: 12px; color: #909bb6;margin-right: 9px;" icon="#bg-ic-minus" v-else />
<template #default="{ row, $index }">
<p
style="
width: 100%;
text-align: center;
display: flex;
align-items: center;
">
<bg-icon
v-if="row.sort == 1"
style="font-size: 12px; color: #429e8a; margin-right: 9px"
icon="#bg-ic-arrow-up-2" />
<bg-icon
v-else-if="row.sort == 2"
style="font-size: 12px; color: #d75138; margin-right: 9px"
icon="#bg-ic-arrow-down-2" />
<bg-icon
v-else
style="font-size: 12px; color: #909bb6; margin-right: 9px"
icon="#bg-ic-minus" />
<span>{{ $index + 1 }}</span>
</p>
</template>
</el-table-column>
<el-table-column
v-for="(header, index) in headers"
:key="'col_' + index"
:width="header.width"
:min-width="header.minWidth"
:align="header.align"
:key="'col_' + index"
:fixed="header.fixed"
show-overflow-tooltip>
<template v-slot:header>
<template #header>
<template v-if="$slots[`header-${header.prop}`]">
<slot :name="`header-${header.prop}`" />
<slot :name="`header-${header.prop}`"></slot>
</template>
<p class="text-clip" v-else>{{ header.label }}</p>
<p v-else class="text-clip">{{ header.label }}</p>
</template>
<template v-slot:default="{ row }">
<slot v-if="$slots[header.prop]" :name="header.prop" :row="row" />
<template #default="{ row, $index }">
<slot
v-if="$slots[header.prop]"
:name="header.prop"
:index="$index"
:row="row"></slot>
<template v-else>
<col-node :val="row[header.prop]" :emptyColPlaceholder="emptyColPlaceholder"></col-node>
<col-node
:val="row[header.prop]"
:empty-col-placeholder="emptyColPlaceholder" />
<!-- {{ row[header.prop] | ellipsis(header.max) }} -->
</template>
</template>
......@@ -65,7 +95,14 @@
<script setup>
import { h, watch, ref } from "vue";
import { selectTableMixin } from "./hook/mixin-select-table";
let { nowSelectData, allSelectData, selectData, initSelectTableData, runPage, dealSelectData } = selectTableMixin();
let {
nowSelectData,
allSelectData,
selectData,
initSelectTableData,
runPage,
dealSelectData,
} = selectTableMixin();
const props = defineProps({
height: {
......@@ -74,6 +111,7 @@ const props = defineProps({
},
headers: {
type: Array,
default: () => [],
require: true,
},
rows: {
......@@ -109,7 +147,7 @@ const props = defineProps({
}, // 多选框是否禁用
canEditFlag: {
type: Boolean,
default: "",
default: false,
}, // 决定多选框是否禁用的字段
sort: {
type: Boolean,
......@@ -121,8 +159,8 @@ const props = defineProps({
}, // 后端行数据某列为空时显示的占位符号
indexWidth: {
type: Number,
default: 54
}
default: 54,
},
});
const table = ref(null);
......@@ -148,11 +186,17 @@ const toggleRowSelection = (row, flag = true) => {
table.value.toggleRowSelection(row, flag);
};
const selectAction = (selection) => {
emit("selectAc", { allLength: Object.keys(allSelectData).length + nowSelectData.length, selection });
emit("selectAc", {
allLength: Object.keys(allSelectData).length + nowSelectData.length,
selection,
});
};
const clearSelection = () => {
table.value.clearSelection();
emit("select", { allLength: Object.keys(allSelectData).length + nowSelectData.length, selection: [] });
emit("select", {
allLength: Object.keys(allSelectData).length + nowSelectData.length,
selection: [],
});
};
const setSelectedRow = (row) => {
toggleRowSelection(row);
......@@ -164,11 +208,17 @@ const toggleRowArrSelection = (arr, flag = true) => {
};
const selectActionRow = (selection, row) => {
selectData(selection);
emit("select", { allLength: Object.keys(allSelectData).length + nowSelectData.length, selection });
emit("select", {
allLength: Object.keys(allSelectData).length + nowSelectData.length,
selection,
});
};
const selectActionAll = (selection) => {
selectData(selection);
emit("select", { allLength: Object.keys(allSelectData).length + nowSelectData.length, selection });
emit("select", {
allLength: Object.keys(allSelectData).length + nowSelectData.length,
selection,
});
};
const clearTable = () => {
//清除选中数据,在页面状态更新时使用
......@@ -203,15 +253,15 @@ const selectable = (row, index) => {
*/
const colNode = (props) => {
if (props.val === "") {
if (typeof props.emptyColPlaceholder === 'string') {
if (typeof props.emptyColPlaceholder === "string") {
return h("span", props.emptyColPlaceholder);
}
if (typeof props.emptyColPlaceholder === 'function') {
return props.emptyColPlaceholder()
if (typeof props.emptyColPlaceholder === "function") {
return props.emptyColPlaceholder();
}
}
return h("span", props.val);
}
};
defineExpose({
clearTable,
toggleRowSelection,
......
src/bg-ui/bg-tabs.vue
View file @ a28ec906
......@@ -8,8 +8,7 @@
:class="{
current: modelValue === item.name,
}"
@click="changeActiveName(item, index)"
>
@click="changeActiveName(item, index)">
{{ item.label }}
</li>
<li>
......@@ -18,10 +17,10 @@
</ul>
</div>
<div class="bg-tabs-content">
<slot />
<slot></slot>
</div>
<div class="bg-tabs-action" v-if="$slots.action">
<slot name="action" />
<div v-if="$slots.action" class="bg-tabs-action">
<slot name="action"></slot>
</div>
</div>
</template>
......@@ -38,7 +37,7 @@ const props = defineProps({
},
});
const getActiveName = provide("activeName", ()=>{return props.modelValue});
const getActiveName = provide("activeName", ()=>{return props.modelValue;});
const getIsTabs = provide("isTabs", true);
const emit = defineEmits(["update:modelValue"]);
......@@ -54,7 +53,7 @@ const calcTabs = () => {
.map((vnode) => vnode.props);
}
console.log(tabSlots)
console.log(tabSlots);
return tabSlots;
};
......
src/bg-ui/bg-tags.vue
View file @ a28ec906
......@@ -5,13 +5,17 @@
<span>
{{ tag }}
</span>
<a @click="deleteTag(index)" v-if="!disabled">
<a v-if="!disabled" @click="deleteTag(index)">
<i class="el-icon-close"></i>
</a>
</li>
<li v-if="!disabled">
<el-button type="primary" size="small" @click="showInput = true" v-if="!showInput"> 新增 </el-button>
<el-input v-model.trim="newTag" @blur="addTag" v-else />
<el-button
v-if="!showInput"
type="primary"
size="small"
@click="showInput = true"> 新增 </el-button>
<el-input v-else v-model.trim="newTag" @blur="addTag" />
</li>
</ul>
</div>
......
src/bg-ui/bg-upload-image.vue
View file @ a28ec906
......@@ -18,35 +18,50 @@
:on-remove="handleRemove"
:on-preview="handlePreview"
:multiple="multiple">
<template v-slot:trigger>
<template #trigger>
<el-icon v-if="listType === 'picture-card'"><Plus /></el-icon>
<!-- <i class="el-icon-plus" v-if="listType === 'picture-card'"></i> -->
<el-button type="primary" :icon="UploadFilled" v-else>
<el-button v-else type="primary" :icon="UploadFilled">
{{ triggerText }}
</el-button>
</template>
<template v-if="!autoUpload">
<el-button type="success" icon="el-icon-position" @click="submitUpload" style="margin-left: 16px">
<el-button
type="success"
icon="el-icon-position"
style="margin-left: 16px"
@click="submitUpload">
上传到服务器
</el-button>
</template>
<template v-slot:tip v-if="showTips && tips">
<template v-if="showTips && tips" #tip>
<div class="el-upload__tip" style="color: #909bb6">
{{ customTips || tips }}
</div>
</template>
</el-upload>
<el-dialog title="图片预览" v-model="dialogVisible">
<img style="margin: 30px 0; width: 100%" :src="dialogImageUrl" alt="Preview Image" />
<el-dialog v-model="dialogVisible" title="图片预览">
<img
style="margin: 30px 0; width: 100%"
:src="dialogImageUrl"
alt="Preview Image" />
</el-dialog>
</template>
<script setup>
import { UploadFilled } from "@element-plus/icons-vue";
import { computed, watch, onMounted, reactive, ref, nextTick, toRefs } from "vue";
import {
computed,
watch,
onMounted,
reactive,
ref,
nextTick,
toRefs,
} from "vue";
import { ElMessage } from "element-plus";
const props = defineProps({
......@@ -68,6 +83,7 @@ const props = defineProps({
},
limit: {
type: Number,
default: 3,
},
multiple: {
type: Boolean,
......@@ -76,9 +92,11 @@ const props = defineProps({
accept: {
type: [Array, String],
default: "",
}, // 接受类型
fileSize: {
type: Number,
default: 2048,
}, // 文件大小
fileSizeUnit: {
type: String,
......@@ -161,7 +179,9 @@ watch(
() => props.modelValue,
() => {
let newStr = props.modelValue.map((v) => v.url).join(",");
let oldStr = state.fileList.map((v) => (v.response && v.response.data) || v.url).join(",");
let oldStr = state.fileList
.map((v) => (v.response && v.response.data) || v.url)
.join(",");
if (newStr !== oldStr) {
state.fileList = [...props.modelValue];
......@@ -182,7 +202,9 @@ const handleBeforeUpload = (file) => {
let type = "." + temp[temp.length - 1].toLocaleLowerCase();
let fileTypeIsOk = types.value.length === 0 || types.value.indexOf(type) > -1;
let fileSizeIsOk =
props.fileSize === 0 || props.fileSize === undefined || file.size / units[props.fileSizeUnit] <= props.fileSize;
props.fileSize === 0 ||
props.fileSize === undefined ||
file.size / units[props.fileSizeUnit] <= props.fileSize;
let checked = fileTypeIsOk && fileSizeIsOk;
if (!checked) {
......
src/bg-ui/bg-upload.vue
View file @ a28ec906
<template>
<div class="bg-upload" :class="{ 'is-disabled': actionDisabled, 'is-easy': isEasy }">
<div
class="bg-upload"
:class="{ 'is-disabled': actionDisabled, 'is-easy': isEasy }">
<el-upload
action="/apaas/common/file/upload"
:data="{
directory: 'file',
uniqueCode: false,
}"
ref="uploadRef"
:action="actionUrl"
:data="actionData"
:name="actionName"
:auto-upload="auto"
:accept="acceptType"
:before-upload="handleBeforeUpload"
:file-list="fileList"
:on-exceed="handleExceed"
:on-success="handleSuccess"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
:on-change="auto ? () => {} : onChangeFile"
:disabled="actionDisabled"
style="max-width: 600px"
drag
......@@ -23,25 +27,28 @@
支持上传{{ fileTypes.join("、") }}，最大{{ fileMaxSize }}M
</div> -->
<template v-if="isEasy">
<el-button type="primary" size="small">
<bg-icon :icon="`#${triggerIcon}`" v-if="triggerIcon" style="margin-right: 8px" />
<el-button type="primary" size="mini">
<bg-icon
v-if="triggerIcon"
:icon="`#${triggerIcon}`"
style="margin-right: 8px" />
{{ triggerText }}
</el-button>
</template>
<div class="trigger-content" v-else>
<div v-else class="trigger-content">
<div class="trigger-icon">
<img src="./imgs/ic_updata_cloud.png" />
</div>
<p class="trigger-tip" style="text-align: center" v-if="customTips">
<p v-if="customTips" class="trigger-tip" style="text-align: center">
<slot></slot>
</p>
<p class="trigger-tip" v-else>
<p v-else class="trigger-tip">
1.最多允许上传{{ limit }}个附件 <br />
2.单个附件最大{{ fileMaxSize }}M； <br />
3.允许上传后缀为传{{ fileTypes.join("、") }} <br />
</p>
</div>
<template v-slot:tip v-if="otherInfo != ''">
<template v-if="otherInfo != ''" #tip>
<div class="el-upload__tip" style="color: #909bb6; line-height: 18px">
{{ otherInfo }}
</div>
......@@ -51,7 +58,15 @@
</template>
<script setup>
import { computed, watch, onMounted, reactive, ref, nextTick, toRefs } from "vue";
import {
computed,
watch,
onMounted,
reactive,
ref,
nextTick,
toRefs,
} from "vue";
import { ElMessage } from "element-plus";
const props = defineProps({
......@@ -99,29 +114,73 @@ const props = defineProps({
type: Number,
default: 9999,
},
/**
* @description true:自动上传 false:手动上传
*/
auto: {
type: Boolean,
default: true,
},
actionUrl: {
type: String,
default: "/apaas/common/file/upload",
},
actionData: {
type: Object,
default: () => ({
directory: "file",
uniqueCode: false,
}),
},
actionName: {
type: String,
default: "file",
},
saveType: {
type: String,
default: "url",
},
});
const emit = defineEmits(["update:modelValue", "change"]);
const emit = defineEmits(["update:modelValue", "change", "delete"]);
const uploadRef = ref(null);
const state = reactive({
fileList: [],
initFileList: [],
});
const actionDisabled = computed(() => {
return props.disabled;
});
const acceptType = computed(() => {
let str = "";
props.fileTypes.forEach((e, idx) => {
if (idx == props.fileTypes.length - 1) {
str = str + "." + e;
} else {
str = str + "." + e + ",";
}
});
return str;
});
watch(
() => props.modelValue,
() => {
let newStr = props.modelValue.map((v) => v.url).join(",");
let oldStr = state.fileList.map((v) => (v.response && v.response.data) || v.url).join(",");
let oldStr = state.fileList
.map((v) => (v.response && v.response.data) || v.url)
.join(",");
if (newStr !== oldStr) {
state.fileList = [...props.modelValue];
}
}
);
const handleBeforeUpload = (file) => {
if (state.fileList && state.fileList.length >= props.limit) {
ElMessage.error(`只允许上传${props.limit}个文件`);
......@@ -129,7 +188,8 @@ const handleBeforeUpload = (file) => {
}
let temp = file.name.split(".");
let type = temp[temp.length - 1].toLocaleLowerCase();
let fileTypesOk = props.fileTypes.indexOf(type) > -1 || props.fileTypes.length == 0;
let fileTypesOk =
props.fileTypes.indexOf(type) > -1 || props.fileTypes.length == 0;
let fileMaxSizeOk = file.size / 1024 / 1024 <= props.fileMaxSize;
if (!fileTypesOk) {
......@@ -155,16 +215,25 @@ const handlePreview = (val) => {
};
const handleRemove = (file, fileList) => {
updateFileList(fileList);
emit("delete", file);
};
const handleSuccess = (response, file, fileList) => {
updateFileList(fileList);
};
const updateFileList = (fileList) => {
let values = fileList.map((v) => {
return {
name: v.name,
url: (v.response && v.response.data) || v.url,
};
//默认保存地址到modelValue，需要保留文件的场景返回文件
if (props.saveType == "url") {
return {
name: v.name,
url: (v.response && v.response.data) || v.url || v.raw,
};
} else {
return {
name: v.name,
url: v.raw,
};
}
});
state.fileList = fileList;
......@@ -173,8 +242,18 @@ const updateFileList = (fileList) => {
emit("change", values);
};
const onChangeFile = (file, fileList) => {
console.log(file, fileList);
if (!handleBeforeUpload(file.raw)) {
state.fileList = state.fileList.filter(({ uid }) => file.uid !== uid);
return;
}
updateFileList(fileList);
};
onMounted(() => {
state.fileList = [...props.modelValue];
state.initFileList = [...props.modelValue];
});
const { fileList } = toRefs(state);
......
src/bg-ui/bg-user-upload-image.vue
View file @ a28ec906
<template>
<div class="bg-upload-image user-upload-image">
<el-upload
action="#"
ref="upload"
action="#"
:auto-upload="false"
:on-change="onChangeFile"
:file-list="fileList"
:disabled="disabled">
<template v-slot:trigger>
<template #trigger>
<div class="trigger-content">
<div class="image-trigger" v-if="modelValue">
<div v-if="modelValue" class="image-trigger">
<img :src="modelValue" />
<div class="refresh-image">
<i class="el-icon-refresh-right"></i>
</div>
</div>
<div class="upload-trigger" v-else>
<div v-else class="upload-trigger">
<span class="upload-icon"></span>
</div>
</div>
......
src/bg-ui/debounce.js
View file @ a28ec906
......@@ -8,39 +8,39 @@
*/
const debounce = (func, time, type, ctx) => {
var timer, lastCall, rtn
var timer, lastCall, rtn;
// 防抖函数
if (type === 'debounce') {
if (type === "debounce") {
rtn = (...params) => {
if (timer) clearTimeout(timer)
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
func.apply(ctx, params)
}, time)
}
} else if (type === 'throttle') {
func.apply(ctx, params);
}, time);
};
} else if (type === "throttle") {
// 节流函数
rtn = (...params) => {
const now = new Date().getTime()
if (now - lastCall < time && lastCall) return
lastCall = now
func.apply(ctx, params)
}
const now = new Date().getTime();
if (now - lastCall < time && lastCall) return;
lastCall = now;
func.apply(ctx, params);
};
} else {
// 立即执行的防抖函数
rtn = (...params) => {
if (timer) clearTimeout(timer)
let callNow = !timer
if (timer) clearTimeout(timer);
let callNow = !timer;
timer = setTimeout(() => {
timer = null
}, time)
if (callNow) func.apply(ctx, params)
}
timer = null;
}, time);
if (callNow) func.apply(ctx, params);
};
}
return rtn
}
return rtn;
};
export default {
name: 'Debounce',
name: "Debounce",
abstract: true,
props: {
time: {
......@@ -49,33 +49,34 @@
},
events: {
type: String,
default: 'click', // 默认点击事件
default: "click", // 默认点击事件
},
type: {
type: String,
default: 'throttle', // 默认节流
default: "throttle", // 默认节流
},
},
created() {
this.eventKeys = this.events.split(',') // 分隔事件
this.originMap = {} // 储存事件，用于重新render时与子事件的对比
this.debouncedMap = {} // 储存防抖节流事件
this.eventKeys = this.events.split(","); // 分隔事件
this.originMap = {}; // 储存事件，用于重新render时与子事件的对比
this.debouncedMap = {}; // 储存防抖节流事件
},
render() {
try {
const vnode = this.$slots.default[0]
const vnode = this.$slots.default[0];
this.eventKeys.forEach(key => {
const target = vnode.data.on[key]
const target = vnode.data.on[key];
if (target === this.originMap[key] && this.debouncedMap[key]) {
vnode.data.on[key] = this.debouncedMap[key]
vnode.data.on[key] = this.debouncedMap[key];
} else if (target) {
this.originMap[key] = target
this.debouncedMap[key] = debounce(target, this.time, this.type, vnode)
vnode.data.on[key] = this.debouncedMap[key] // 重写子组件的事件
this.originMap[key] = target;
this.debouncedMap[key] = debounce(target, this.time, this.type, vnode);
vnode.data.on[key] = this.debouncedMap[key]; // 重写子组件的事件
}
})
return vnode
} catch (error) {}
});
return vnode;
} catch (error) {
console.error(error);
}
},
}
\ No newline at end of file
};
src/bg-ui/hook/mixin-select-table.js
View file @ a28ec906
import { reactive, toRefs,useAttrs } from 'vue'
import { reactive, toRefs,useAttrs } from "vue";
export function selectTableMixin(){
const state = reactive({
nowSelectData:[],
allSelectData:{}
})
});
const attrs = useAttrs()
const attrs = useAttrs();
// const nowSelectData = reactive([])
// const allSelectData = reactive({})
const selectData = (val)=>{
console.log(val);
state.nowSelectData = val
console.log('allSelectData');
state.nowSelectData = val;
console.log("allSelectData");
console.log(state.allSelectData);
console.log(Object.keys(state.allSelectData).length);
}
};
const initSelectTableData = (data)=>{
return new Promise((reslove,reject)=>{
data.forEach(e => {
if(state.allSelectData[e[attrs.rowKey||'id']]){
delete state.allSelectData[e[attrs.rowKey||'id']]
state.nowSelectData.push(e)
if(state.allSelectData[e[attrs.rowKey||"id"]]){
delete state.allSelectData[e[attrs.rowKey||"id"]];
state.nowSelectData.push(e);
}
});
console.log(state.nowSelectData);
reslove(state.nowSelectData)
})
}
reslove(state.nowSelectData);
});
};
const runPage=()=>{//翻页数据推进
state.nowSelectData.forEach(e => {
state.allSelectData[e[attrs.rowKey||'id']] = e
state.allSelectData[e[attrs.rowKey||"id"]] = e;
});
state.nowSelectData = []
}
state.nowSelectData = [];
};
const clearTable=()=>{//清除选中数据,在页面状态更新时使用
state.allSelectData={}
state.nowSelectData=[]
state.allSelectData={};
state.nowSelectData=[];
clearSelection();
}
};
const dealSelectData=()=>{//最后提交处理数据
state.nowSelectData.forEach(e => {
state.allSelectData[e[attrs.rowKey||'id']] = e
state.allSelectData[e[attrs.rowKey||"id"]] = e;
});
return state.allSelectData
}
return state.allSelectData;
};
const { nowSelectData, allSelectData } = toRefs(state)
const { nowSelectData, allSelectData } = toRefs(state);
return{
nowSelectData,
......@@ -61,7 +61,7 @@ return{
runPage,
clearTable,
dealSelectData
}
};
}
......
src/bg-ui/iconfont/iconfont.js
View file @ a28ec906
This diff is collapsed.
src/bg-ui/index.js
View file @ a28ec906
/**
* 全局组件
*/
import BgIcon from './bg-icon.vue'
import BgNav from './bg-nav.vue'
import BgList from './bg-list.vue'
import BgDetail from './bg-detail.vue'
import BgFiltrate from './bg-filtrate.vue'
import BgTable from './bg-table.vue'
import BgTablePro from './bg-table-pro.vue'
import BgTableBtn from './bg-table-btn.vue'
import BgTabs from './bg-tabs.vue'
import BgTab from './bg-tab.vue'
import BgLayoutCard from './bg-layout-card.vue'
import BgCard from './bg-card.vue'
import BgInfo from './bg-info.vue'
import BgBtns from './bg-btns.vue'
import BgUpload from './bg-upload.vue'
import BgUploadImage from './bg-upload-image.vue'
import BgTags from './bg-tags.vue'
import BgSwitch from './bg-switch.vue'
import BgRichText from './bg-rich-text.vue'
import BgCodeEditor from './bg-code-editor.vue'
import BgFilter from './bg-filter.vue'
import BgSort from './bg-sort.vue'
import BgFilterDate from './bg-filter-date.vue'
import bgUserUploadImage from './bg-user-upload-image.vue'
import bgDetailTable from './bg-detail-table.vue'
import bgDetailTable2 from './bg-detail-table2.vue'
import debounce from './debounce'
import BgPagination from './bg-pagination.vue'
import BgInnerTabs from './bg-inner-tabs.vue'
import BgFilterGroup from './bg-filter-group.vue'
import BgTableBtns from './bg-table-btns.vue'
import BgTableBtns2 from './bg-table-btns2.vue'
import BgIcon from "./bg-icon.vue";
import BgNav from "./bg-nav.vue";
import BgList from "./bg-list.vue";
import BgDetail from "./bg-detail.vue";
import BgFiltrate from "./bg-filtrate.vue";
import BgTable from "./bg-table.vue";
import BgTablePro from "./bg-table-pro.vue";
import BgTableBtn from "./bg-table-btn.vue";
import BgTabs from "./bg-tabs.vue";
import BgTab from "./bg-tab.vue";
import BgLayoutCard from "./bg-layout-card.vue";
import BgCard from "./bg-card.vue";
import BgInfo from "./bg-info.vue";
import BgBtns from "./bg-btns.vue";
import BgUpload from "./bg-upload.vue";
import BgUploadImage from "./bg-upload-image.vue";
import BgTags from "./bg-tags.vue";
import BgSwitch from "./bg-switch.vue";
import BgRichText from "./bg-rich-text.vue";
import BgCodeEditor from "./bg-code-editor.vue";
import BgFilter from "./bg-filter.vue";
import BgSort from "./bg-sort.vue";
import BgFilterDate from "./bg-filter-date.vue";
import bgUserUploadImage from "./bg-user-upload-image.vue";
import bgDetailTable from "./bg-detail-table.vue";
import bgDetailTable2 from "./bg-detail-table2.vue";
import debounce from "./debounce";
import BgPagination from "./bg-pagination.vue";
import BgInnerTabs from "./bg-inner-tabs.vue";
import BgFilterGroup from "./bg-filter-group.vue";
import BgTableBtns from "./bg-table-btns.vue";
import BgTableBtns2 from "./bg-table-btns2.vue";
const components = {
BgIcon,//字体图标
......
src/bg-ui/utils/index.js
View file @ a28ec906
var downloadFileFormatNew = function (fileUrl) {
var downloadFileFormatNew = function(fileUrl) {
/*
input: /apaas/common/docs/image/images/1234_qq234ewr123.png
output: 1234.png
*/
if (fileUrl != "") {
var temp = fileUrl.split('/')[fileUrl.split('/').length-1]
var name = temp.split('_')[0]
var type = temp.split('_')[temp.split('_').length-1].split('.')[1]
if(temp.indexOf('_')==-1){
return name
var temp = fileUrl.split("/")[fileUrl.split("/").length-1];
var name = temp.split("_")[0];
var type = temp.split("_")[temp.split("_").length-1].split(".")[1];
if(temp.indexOf("_")==-1){
return name;
}else{
return name+'.'+type
return name+"."+type;
}
} else {
return "";
}
}
};
export default {
downloadFileFormatNew
}
\ No newline at end of file
};
\ No newline at end of file
src/components/componentWrapper.vue
View file @ a28ec906
......@@ -14,9 +14,9 @@
const props = defineProps({
title: {
type: String,
default: 'component name'
default: "component name"
}
})
});
</script>
<style lang="scss" scoped>
......
yarn.lock
View file @ a28ec906
This diff is collapsed.
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