Skip to content

S
so-manage-ui
Commit b09ea86a authored by 赵伟庚's avatar 赵伟庚
Browse files
Options

test：表格组件引入

parent ee08f2e2
Hide whitespace changes
Inline Side-by-side
Showing with 370 additions and 19 deletions
src/bg-ui/bg-filter-group.vue 0 → 100644
View file @ b09ea86a
<template>
<div class="bg-filter-group" :style="{'border-bottom': showFlag? 'none' : '','padding-bottom': showFlag? '8px':'16px'}">
<div class="top-filter">
<div class="left-slot">
<slot name="left_action"></slot>
</div>
<div class="right-filter">
<el-input :placeholder="placeholder" v-model="modelValue">
<template #append>
<div class="append-btn" @click="search">
<bg-icon style="font-size: 12px; color: #404a62; " icon="#bg-ic-search"></bg-icon>
</div>
</template>
</el-input>
<div class="more-btn" :class="showFlag ? 'more-btn1': ''" v-if="$slots.filter_group">
<el-button type="default" class="more-filter" @click="moreFilter">
高级搜索
<bg-icon 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>
</el-button>
</div>
</div>
</div>
<div class="filter-group" v-if="showFlag">
<slot name="filter_group"></slot>
</div>
</div>
</template>
<script setup>
import { computed, onMounted, reactive, toRefs, watch,ref } from "vue-demi"
const state = reactive({
showFlag: false,
modelValue: ""
})
const props = defineProps({
keyword: {
type: String,
default: ""
},
placeholder: {
type: String,
default: "请输入关键词"
}
})
watch(props,(n,o) => {
state.modelValue = n.keyword
})
const emit = defineEmits(['search'])
const search = () => {
emit('search',state.modelValue)
}
const moreFilter = () => {
state.showFlag = !state.showFlag
}
onMounted(() => {
state.modelValue = props.keyword
})
const { modelValue,showFlag } = toRefs(state)
</script>
\ No newline at end of file
src/bg-ui/index.scss
View file @ b09ea86a
......@@ -2390,4 +2390,73 @@ a {
.card-content {
padding: 24px;
}
}
.bg-filter-group {
width: 100%;
padding: 16px;
border-bottom: 1px solid #e6e9ef;
.top-filter {
width: 100%;
display: flex;
.left-slot {
flex: 1;
}
.right-filter {
width: 398px;
justify-content: end;
display: flex;
.el-input {
width: 280px;
height: 36px;
.el-input-group__append {
border-radius: 0 4px 4px 0;
background-color: #f7f7f9;
padding: 0;
.append-btn {
padding: 0 16px;
cursor: pointer;
}
}
}
.more-btn {
margin-left: 16px;
width: 102px;
box-sizing: border-box;
border: 1px solid #e6e9ef;
border-radius: 4px;
height: 36px;
.more-filter {
width: 100px;
border: none;
height: 34px;
padding: 10px 15px;
line-height: 1;
&:active,
&:hover{
background-color: #fff;
color: #3759be;
}
&:focus {
background-color: #fff;
}
}
}
.more-btn1 {
height: 53px;
border-bottom: 1px solid #fff;
border-radius: 4px 4px 0 0;
margin-bottom: -1px;
}
}
}
.filter-group {
display: flex;
align-items: flex-end;
border-radius: 4px 0 4px 4px;
width: 100%;
border: 1px solid #e6e9ef;
padding: 24px 16px 8px;
}
}
\ No newline at end of file
src/components/bg-menu.vue
View file @ b09ea86a
......@@ -169,7 +169,7 @@ export default {
this.$trace.setOptionValue('appID',item.value)
},
getLogo(){
// this.$axios.get(`/apaas/backmgt/getPicAndSystemName`).then(res=>{
// this.$axios.get(`/apaas/system/getPicAndSystemName`).then(res=>{
// if(res.data.code==200){
// let data = res.data.data
// this.name=data.systemName
......@@ -186,7 +186,7 @@ export default {
},
menuAction(n,parent) {
if (n == "logout") {
this.$axios.get(`/apaas/backmgt/logout`).then(res=>{
this.$axios.get(`/apaas/system/logout`).then(res=>{
if(res.data.code=='200'){
this.$router.push('/login')
this.$store.commit('setUserInfo',null)
......@@ -210,7 +210,7 @@ export default {
if(this.$store.state.menuObj[n].menuType=='font'||this.$store.state.menuObj[n].menuType=='system'){
temp = '/apaas/ui/#'
}else if(this.$store.state.menuObj[n].menuType=='manager'){
temp = '/apaas/system/uir/#'
temp = '/apaas/system/ui/#'
}
window.location.href = temp+n
}
......@@ -248,7 +248,7 @@ export default {
if(this.$store.state.menuObj[path].menuType=='font'||this.$store.state.menuObj[path].menuType=='system'){
temp = '/apaas/ui/#'
}else if(this.$store.state.menuObj[path].menuType=='manager'){
temp = '/apaas/system/uir/#'
temp = '/apaas/system/ui/#'
}
window.location.href = temp+path
}
......
src/main.js
View file @ b09ea86a
......@@ -10,6 +10,7 @@ import bgui from "@/bg-ui";
import "@/bg-ui/index.scss";
console.log(bgui,"-=-=-=-=-=-=-=-=-=")
import App from './App.vue'
import router from './router'
......
src/page/login/index.vue
View file @ b09ea86a
......@@ -57,7 +57,7 @@ export default {
computed: {},
created() {
console.log(111);
this.getImg();
// this.getImg();
},
mounted() {},
methods: {
......
src/page/main/config/dict/index.vue
View file @ b09ea86a
<template>
<div class="detail_container">
字典管理
<div class="bg-breadcrumb">
<el-breadcrumb separator="/">
<el-breadcrumb-item> 配置管理 </el-breadcrumb-item>
<el-breadcrumb-item> 字典配置 </el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="main_container">
<div class="left_type">
<el-input class="type-input" v-model="search" @input="searchType" placeholder="请输入内容"></el-input>
<div class="type_station bg-scroll">
<div class="type-box" :class="{'current-type':nodeId==item.id}" @click="nodeClick(item)" v-for="(item,index) in typeList" :key="'type'+index+200">
{{item.name}}
</div>
</div>
</div>
<div class="right_container">
<div class="apaas_button">
<el-button class="register_btn" type="primary" @click="register">
<bg-icon style="font-size: 12px; color: #fff; margin-right: 8px" icon="#bg-ic-add"></bg-icon>
新建
</el-button>
</div>
<div class="table_container">
<bg-table ref="bgTable" :headers="headers" :rows="tableRows" :isIndex="true" :stripe="true">
<template v-slot:state="{ row }">
{{ ["-","启用","禁用"][row.state] }}
</template>
<template v-slot:updated_time="{ row }">
{{ row.updated_time.split("+")[0].replace("T", " ").replace("Z", " ") }}
</template>
<template v-slot:action="{ row }">
<bg-table-btn class="btn" :click="()=>{edit_row(row)}" :disabled="row.state == 1">
编辑
</bg-table-btn>
<bg-table-btn class="btn" :click="()=>{delete_row(row)}" :disabled="row.state == 1">
删除
</bg-table-btn>
</template>
</bg-table>
<bg-pagination
:page="filter.page"
:size="filter.size"
:total="tableTotal"
@change-page="changePage"
@change-size="changeSize"
>
</bg-pagination>
</div>
</div>
</div>
</div>
</template>
<script >
<script setup>
import { reactive, toRefs, ref, } from '@vue/reactivity'
import { getCurrentInstance } from 'vue'
import { computed, onBeforeMount } from '@vue/runtime-core'
import { computed, onBeforeMount, watch } from '@vue/runtime-core'
import { useRouter } from 'vue-router';
export default {
components: {
import bgTable from '@/bg-ui/bg-table.vue'
// const bgTable = ref(null)
const { proxy } = getCurrentInstance()
const { $message, $axios } = proxy
const state = reactive({
typeList: [
{
name: "业务分类",
id: 1,
},
{
name: "业务领域",
id: 2,
},
{
name: "开放程度",
id: 3,
},
{
name: "开发厂商",
id: 4,
},
{
name: "菜单分组",
id: 5,
},
],
search: "",
nodeId: null,
timer: null,
headers: [
{
label: "业务分类名称",
prop: "name",
},
{
label: "描述",
prop: "describe",
minWidth: 360
},
{
label: "状态",
prop: "state",
},
{
label: "更新时间",
prop: "updated_time",
},
{
label: "操作",
prop: "action",
width: 260,
fixed: "right",
},
],
tableRows: [],
tableTotal: 0,
filter: {
state: "",
search: "",
page: 1,
limit: 10,
kind: "business_type",
},
setup() {
onBeforeMount(() => {
})
const nodeClick = (item) => {
state.nodeId = item.id
}
const searchType = () => {
if (state.timer) {
clearTimeout(state.timer);
}
state.timer = setTimeout(() => {
getTypeList()
}, 500);
}
const getTypeList = () => {
console.log(state.search)
}
const getTableRows = () => {
let params = {...state.filter}
$axios
.get(
`/apaas/system/v5/dictionary/list`,
{
params,
}
)
.then((res) => {
if (res.data.code == 200) {
state.tableRows = res.data.data || []
state.tableTotal = res.data.total
}else {
$message.error(res.data.msg)
}
})
return {
...toRefs(),
}
},
} // 获取数据
const changePage = () => {
}
const changeSize = () => {
}
const register = () => {
}
const edit_row = (row) => {
}
const delete_row = (row) => {
}
onBeforeMount(() => {
state.nodeId = 1
})
const {
typeList,
search,
nodeId,
headers,
tableRows,
tableTotal,
filter,
} = toRefs(state)
</script>
<style lang="scss" scoped>
.detail_container {
width: 100%;
padding: 0 24px;
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
.main_container {
flex-grow: 1;
width: 100%;
display: flex;
// box-shadow: 0px 1px 4px 0px rgba(0,7,101,0.15);
margin-bottom: 16px;
position: relative;
.left_type {
height: calc(100vh - 118px);
width: 280px;
background-color: #fff;
margin-right: 16px;
border-radius: 6px;
overflow: hidden;
padding: 16px;
.type_station {
margin-top: 16px;
height: calc(100% - 50px);
.type-box {
height: 32px;
line-height: 32px;
padding-left: 38px;
font-size: 14px;
color: #404a62;
cursor: pointer;
&:hover {
color: #3759be;
background-color: #dfe5f6;
}
}
.current-type{
color: #3759be;
background-color: #dfe5f6;
}
}
}
.right_container {
flex: 1;
background-color: #fff;
border-radius: 6px;
}
}
}
</style>
\ No newline at end of file
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