Skip to content

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

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

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