Skip to content

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

update：字典配置

parent 1c201c47
Hide whitespace changes
Inline Side-by-side
Showing with 730 additions and 120 deletions
src/assets/css/index.css
View file @ b07a29b8
......@@ -274,8 +274,8 @@ div {
}
.el-dialog__body {
font-size: 18px;
color: #242c43;
font-size: 16px;
color: #404a62;
text-align: center;
padding: 0 16px;
}
......@@ -285,12 +285,6 @@ div {
.dialog_box .el-dialog__footer {
padding: 16px;
}
.result_box .el-dialog__body {
padding: 0px;
}
.sold_up_dialog .el-dialog__body {
padding: 24px 24px 4px;
}
/* 设置tab切换的样式 */
.el-tabs__item.is-disabled {
color: #8890a7 !important;
......
src/bg-ui/bg-filter-group.vue
View file @ b07a29b8
......@@ -5,7 +5,7 @@
<slot name="left_action"></slot>
</div>
<div class="right-filter">
<el-input :placeholder="placeholder" v-model="modelValue">
<el-input :placeholder="placeholder" v-model="value">
<template #append>
<div class="append-btn" @click="search">
<bg-icon style="font-size: 12px; color: #404a62; " icon="#bg-ic-search"></bg-icon>
......@@ -32,7 +32,7 @@ import { computed, onMounted, reactive, toRefs, watch,ref } from "vue"
const state = reactive({
showFlag: false,
modelValue: ""
value: ""
})
const props = defineProps({
......@@ -47,20 +47,20 @@ const props = defineProps({
})
watch(props,(n,o) => {
state.modelValue = n.modelValue
state.value = n.modelValue
})
watch(() => state.modelValue,(n,o) => {
watch(() => state.value,(n,o) => {
emit('update:modelValue',n)
})
const emit = defineEmits(['search','update:modelValue'])
const search = () => {
emit('search',state.modelValue)
emit('search',state.value)
}
const moreFilter = () => {
state.showFlag = !state.showFlag
}
onMounted(() => {
state.modelValue = props.modelValue
state.value = props.modelValue
})
const { modelValue,showFlag } = toRefs(state)
const { value,showFlag } = toRefs(state)
</script>
\ No newline at end of file
src/bg-ui/bg-switch-ele.vue 0 → 100644
View file @ b07a29b8
<template>
<el-switch
class="bg-switch-ele"
v-model="value"
:active-value="1"
:inactive-value="0"
inline-prompt
:active-text="activeText"
:inactive-text="inactiveText"
@change="changeState"
/>
</template>
<script setup>
import { onMounted, reactive, toRefs, watch } from "vue"
const props = defineProps({
modelValue: {
type: Number,
default: 0
},
activeText: {
type: String,
default: "是",
},
inactiveText: {
type: String,
default: "否"
},
rowId: {
type: Number,
default: null
}
})
const state = reactive({
value: 1
})
const emit = defineEmits(['changeState'])
const changeState = () => {
if (props.rowId) {
let params = {
state: state.value,
id: props.rowId
}
emit('changeState',params)
}else {
emit('changeState',state.value)
}
}
onMounted(()=> {
state.value = props.modelValue
})
const { value } = toRefs(state)
</script>
src/bg-ui/bg-switch.vue
View file @ b07a29b8
......@@ -58,24 +58,22 @@ export default {
},
now_style() {
return {
color: this.colors[this.now_index],
borderColor: this.colors[this.now_index],
backgroundColor: this.colors[this.now_index],
};
},
now_label_style() {
return this.now_index == 0
? { left: this.circle_height + this.gap + 5 + "px" }
: { left: "10px" };
: { left: "6px" };
},
now_circle_style() {
return this.now_index == 0
? {
left: this.gap + "px",
backgroundColor: this.colors[this.now_index],
}
: {
right: this.gap + "px",
backgroundColor: this.colors[this.now_index],
};
},
},
......
src/bg-ui/bg-table-btns-more.vue 0 → 100644
View file @ b07a29b8
<template>
<div class="bg-table-btns-more" :style="style" @click.stop>
<bg-table-btn
v-for="(item, index) in operations"
:key="index"
:disabled="isDisabled(item)"
@click="clickAction(item)"
>
{{ getName(item) }}
</bg-table-btn>
</div>
</template>
<script>
export default {
name: "BgTableBtnsMore",
props: {
operations: {
type: Array,
default: () => [],
},
},
data() {
return {
style: {},
};
},
methods: {
isDisabled({ disabled }) {
if (typeof disabled === "function") {
return disabled();
} else if (typeof disabled === "boolean") {
return disabled;
} else if (typeof disabled === "undefined") {
return false;
} else {
return !!disabled;
}
},
clickAction({ callback }) {
typeof callback === "function" && callback();
},
getName({ name }) {
if (typeof name === "function") {
return name();
} else {
return name;
}
},
upStyle() {
let { top, right } = this.$parent.$el.getBoundingClientRect();
let { width } = window.document.body.getBoundingClientRect();
this.style = {
position: "fixed",
top: `${top + 16}px`,
right: `${width - right - 16}px`,
};
},
},
mounted() {
document.body.append(this.$el);
this.upStyle();
},
beforeDestroy() {
this.$el && this.$el.remove();
},
};
</script>
src/bg-ui/bg-table-btns.vue 0 → 100644
View file @ b07a29b8
<template>
<div class="bg-table-btns">
<bg-table-btn
v-for="(item, index) in curOperations"
:key="index"
:disabled="isDisabled(item)"
@click="clickAction(item)"
>
{{ getName(item) }}
</bg-table-btn>
<a
class="bg-table-btn"
@mouseenter="showMOreBtns"
@mouseleave="hideMoreBtns"
v-if="otherOperations.length > 0"
>
<!-- <i class="el-icon-more" /> -->
<bg-icon style="font-size: 12px; color: #2b4695;" icon="#bg-ic-s-more" />
<bg-table-btns-more
:operations="otherOperations"
@mouseenter="showMOreBtns"
@mouseleave="hideMoreBtns"
v-if="showMore"
/>
</a>
</div>
</template>
<script>
import BgTableBtnsMore from "./bg-table-btns-more.vue";
export default {
name: "BgTableBtns",
components: { BgTableBtnsMore },
props: {
operations: {
type: Array,
default: () => [],
},
},
data() {
return {
showMore: false,
timer: null,
};
},
computed: {
curOperations() {
return this.operations.slice(0, this.operations.length > 3 ? 2 : 3);
},
otherOperations() {
return this.operations.slice(2, this.operations.length);
},
},
methods: {
isDisabled({ disabled }) {
if (typeof disabled === "function") {
return disabled();
} else if (typeof disabled === "boolean") {
return disabled;
} else if (typeof disabled === "undefined") {
return false;
} else {
return !!disabled;
}
},
clickAction({ callback }) {
typeof callback === "function" && callback();
},
getName({ name }) {
if (typeof name === "function") {
return name();
} else {
return name;
}
},
showMOreBtns() {
if (this.timer) clearTimeout(this.timer);
this.showMore = true;
},
hideMoreBtns() {
if (this.timer) clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.showMore = false;
}, 50);
},
},
};
</script>
src/bg-ui/index.js
View file @ b07a29b8
......@@ -33,6 +33,8 @@
import BgPagination from './bg-pagination.vue'
import BgInnerTabs from './bg-inner-tabs.vue'
import BgFilterGroup from './bg-filter-group.vue'
import BgSwitchEle from './bg-switch-ele.vue'
import BgTableBtns from './bg-table-btns.vue'
const components = {
BgIcon,//字体图标
......@@ -67,6 +69,8 @@ const components = {
BgPagination,// 分页组件
BgInnerTabs,//内部tab
BgFilterGroup,//高级搜索
BgSwitchEle,
BgTableBtns,
};
const install = (Vue) => {
......
src/bg-ui/index.scss
View file @ b07a29b8
......@@ -659,11 +659,11 @@ a {
}
th,
td {
padding: 12px 0!important;
padding: 11px 0!important;
> .cell {
padding: 0 10px !important;
color: #404a62;
line-height: 18px;
line-height: 14px;
}
}
......@@ -2036,29 +2036,31 @@ a {
.bg-switch {
display: inline-block;
vertical-align: middle;
width: 64px;
height: 28px;
border-radius: 14px;
border: solid 2px #275a9d;
width: 44px;
height: 20px;
border-radius: 10px;
border: solid 2px #2b4695;
position: relative;
color: #275a9d;
color: #fff;
background-color: #2b4695;
cursor: pointer;
user-select: none;
> .label {
font-size: 12px;
font-weight: 600;
line-height: 24px;
font-weight: 400;
line-height: 15px;
position: absolute;
color: #fff;
}
> .circle {
width: 18px;
height: 18px;
width: 16px;
height: 16px;
border-radius: 50%;
position: absolute;
top: 3px;
background-color: #275a9d;
// top: 2px;
background-color: #fff;
}
&.disabled {
......@@ -2471,4 +2473,64 @@ a {
border: 1px solid #e6e9ef;
padding: 24px 16px 8px;
}
}
// 表格操作按钮组
.bg-table-btns {
position: relative;
display: inline-block;
vertical-align: middle;
}
.bg-table-btns-more {
position: absolute;
top: 28px;
right: -16px;
z-index: 19;
padding: 4px 0;
background-color: #ffffff;
box-shadow: 0px 4px 12px 0px rgba(18, 30, 63, 0.1);
border-radius: 4px;
border: solid 1px #e6e9ef;
width: 88px;
.bg-table-btn {
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
white-space: nowrap;
display: block;
padding: 0 16px;
margin: 0;
color: #202531;
line-height: 34px;
padding-left: 16px;
&:hover {
background-color: #f2f3f7;
color: #202531;
}
&.disabled {
color: #a9b1c7;
}
&::before {
display: none;
}
}
&::before {
content: "";
position: absolute;
top: -10px;
left: 0;
height: 10px;
width: 100%;
}
}
.bg-switch-ele {
width: 44px;
height: 20px;
.el-switch__core {
width: 100%;
}
}
\ No newline at end of file
src/page/main/config/dict/index.vue
View file @ b07a29b8
......@@ -9,11 +9,11 @@
<div class="flex_row">
<div class="flex_left">
<div class="box">
<el-input class="type-input" v-model="search" @input="searchType" placeholder="请输入内容"></el-input>
<el-input class="type-input" v-model="typeKeyword" @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 class="type-box" :class="{'current-type':nodeClassifyId==item.classify_id}" @click="nodeClick(item)" v-for="(item,index) in typeList" :key="'type'+index+200">
{{item.classify_name}}
</div>
</div>
</div>
......@@ -57,19 +57,21 @@
</bg-filter-group>
<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:state="{ row }">
<bg-switch-ele
v-model="row.state"
:rowId="row.id"
inline-prompt
activeText="是"
inactiveText="否"
@changeState="changeUseRow"
/>
</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>
<bg-table-btns :operations="getOperations(row)" />
</template>
</bg-table>
<bg-pagination
......@@ -84,40 +86,97 @@
</div>
</div>
</div>
<!-- 新建/编辑弹窗 -->
<el-dialog
custom-class="dialog_box"
:title=" addType == 1 ? '新建' : '编辑'"
v-model="addDialog"
width="758px"
:before-close="
() => {
addDialog = false;
}
"
>
<el-form
ref="bgForm"
:model="formData"
:rules="rules"
label-width="80px"
class="bg_form"
>
<el-form-item label="名称" prop="name">
<el-input
v-model="formData.name"
placeholder="请输入名称"
></el-input>
</el-form-item>
<el-form-item label="描述" prop="describe">
<el-input
v-model="formData.describe"
type="textarea"
:autosize="{ minRows: 5 }"
show-word-limit
maxlength="200"
resize="vertical"
placeholder="请输入描述"
></el-input>
</el-form-item>
<el-form-item label="是否启用" prop="state" style="margin-bottom: 0px">
<el-switch
class="bg-switch-ele"
v-model="formData.state"
:active-value="1"
:inactive-value="0"
inline-prompt
active-text="是"
inactive-text="否"
/>
</el-form-item>
</el-form>
<template v-slot:footer>
<div class="apaas_button">
<el-button type="default" @click="addDialog = false">取 消</el-button>
<el-button type="primary" @click="addConfirm">确 定</el-button>
</div>
</template>
</el-dialog>
<!-- 删除弹窗 -->
<el-dialog
custom-class="dialog_box"
title="提示"
v-model="dialogDelete"
width="400px"
:before-close="
() => {
dialogDelete = false;
}
"
>
<div>确定要删除此字典值吗？</div>
<template v-slot:footer>
<div class="apaas_button">
<el-button type="default" @click="dialogDelete = false">取 消</el-button>
<el-button type="primary" @click="deleteData">确 定</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { reactive, ref,onBeforeMount,toRefs,computed,watch } from 'vue'
import { reactive, ref,onBeforeMount,toRefs,computed, watch, nextTick } from 'vue'
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus'
import axios from '../../../../request/http.js'
const bgForm = ref(null)
const state = reactive({
typeList: [
{
name: "业务分类",
id: 1,
},
{
name: "业务领域",
id: 2,
},
{
name: "开放程度",
id: 3,
},
{
name: "开发厂商",
id: 4,
},
{
name: "菜单分组",
id: 5,
},
],
search: "",
nodeId: null,
timer: null,
bgForm,
typeList: [], // 分类数据
typeKeyword: "", // 分类删选关键词
nodeClassifyId: null, // 当前选中分类的uuid 用于新建字典
nodeId: null, // 当前选中分类的id 用于请求列表
timer: null, // 定时器
headers: [
{
label: "业务分类名称",
......@@ -126,38 +185,32 @@ const state = reactive({
{
label: "描述",
prop: "describe",
},
{
label: "状态",
prop: "state",
minWidth: 360
},
{
label: "更新时间",
prop: "updated_time",
width: 220,
},
{
label: "状态",
prop: "state",
},
{
label: "操作",
prop: "action",
width: 260,
width: 176,
fixed: "right",
},
],
tableRows: [
{
name: "www",
describe: "sajdashkjdhsdjfkhsadjkfhkjsdahfkjashdkfjhsdjkafhkjsdhfkjshjkdfhajkhsdjkf",
state: 1,
updated_time: "2022-10-12 12:12:12"
},
],
tableTotal: 0,
], // 表格数据表头
tableRows: [], // 表格数据
tableTotal: 0, // 表格数据条数
filter: {
state: "",
search: "",
page: 1,
limit: 10,
kind: "business_type",
},
}, // 表格筛选项
stateOptions: [
{
name: "全部",
......@@ -171,11 +224,43 @@ const state = reactive({
name: "禁用",
value: "2"
},
],
], // 启用禁用
actionRow: null, // 当前操作的数据
dialogDelete: false, // 删除弹窗
addType: 0, //
addDialog: false,
formData: {
name: "",
describe: "",
state: 1,
},
rules: {
name: [
{ required: true, message: "请输入名称", trigger: "blur" },
{ max: 20, message: "名称最大为20字", trigger: "blur"}
],
describe: [
{ required: true, message: "请输入描述", trigger: "blur" },
{ max: 200, message: "描述最大为200字", trigger: "blur"}
],
state: [
{ required: true, message: "请选择是否启用", trigger: "change" }
]
},
})
const nodeClick = (item) => {
state.nodeId = item.id
}
state.nodeClassifyId = item.classify_id
state.filter = {
state: "",
search: "",
page: 1,
limit: 10,
}
getTableRows()
} // 切换字典分类
const searchType = () => {
if (state.timer) {
clearTimeout(state.timer);
......@@ -183,29 +268,74 @@ const searchType = () => {
state.timer = setTimeout(() => {
getTypeList()
}, 500);
}
} // 字典分类筛选
const getTypeList = () => {
console.log(state.search)
}
axios
.get(`/apaas/system/v5/dictionary/classify/list?name=${state.typeKeyword}`)
.then( (res) => {
if (res.data.code == 200) {
state.typeList = res.data.data || []
state.nodeClassifyId = state.typeList[0].classify_id || null
state.nodeId = state.typeList[0].id || null
if (state.nodeId) {
getTableRows()
}
}else {
ElMessage.error(res.data.data)
}
}).catch((err) => {
console.log(err)
})
} // 获取字典分类
const changeSearch = (val) => {
state.filter.search = val
console.log(state.filter)
}
changePage(1)
} // 表格关键字筛选
const filterAction = () => {
console.log(state.filter)
}
changePage(1)
} // 查询按钮
const filterClear = () => {
state.filter = {
state: "",
search: "",
limit: 10,
page: 1,
kind: "business_type",
}
console.log(state.filter)
}
changePage(1)
} // 重置筛选项
const getOperations = (row) => {
return [
{
name: "编辑",
callback: () => edit_row(row),
disabled: row.state == 1,
},
{
name: "删除",
callback: () => delete_row(row),
disabled: row.state == 1,
},
{
name: "上移",
callback: () => moveRow(row,1),
disabled: !row.canMoveUp,
},
{
name: "下移",
callback: () => moveRow(row,2),
disabled: !row.canMoveDown,
},
];
} // 表格操作按钮
const getTableRows = () => {
let params = {...state.filter}
params.id = state.nodeId
axios
.get(
`/apaas/system/v5/dictionary/list`,
......@@ -217,39 +347,213 @@ const getTableRows = () => {
if (res.data.code == 200) {
state.tableRows = res.data.data || []
state.tableTotal = res.data.total
if (state.tableRows.length > 0) {
state.tableRows.forEach(e => {
e.canMoveUp = true
e.canMoveDown = true
})
state.tableRows[0].canMoveUp = false
state.tableRows[state.tableRows.length - 1].canMoveDown = false
}
}else {
ElMessage.error(res.data.msg)
ElMessage.error(res.data.data)
}
})
} // 获取数据
const changePage = () => {
} // 获取表格数据
}
const changeSize = () => {
const changeUseRow = (row) => {
axios
.put(`/apaas/system/v5/dictionary/state?id=${row.id}&state=${row.state}`)
.then((res) => {
if (res.data.code == 200) {
ElMessage.success(res.data.data)
changePage(1)
}else {
ElMessage.error(res.data.data)
}
})
} // 启用禁用
const changePage = (page) => {
state.filter.page = page
getTableRows()
} // 改变页码
const changeSize = (size) => {
state.filter.limit = size
changePage(1)
} // 改变每页条数
}
const register = () => {
state.formData = {
name: "",
describe: "",
state: 1,
}
if (state.bgForm) {
nextTick().then(() => {
state.bgForm.validate(valid => {
if (!valid) {
state.bgForm.clearValidate()
}
})
})
}
state.addType = 1
state.addDialog = true
} // 新建字典按钮
}
const edit_row = (row) => {
axios
.get(`/apaas/system/v5/dictionary/${row.id}`)
.then((res) => {
if (res.data.code == 200) {
state.actionRow = res.data.data
state.formData = {
name: state.actionRow.name,
describe: state.actionRow.describe,
state: state.actionRow.state
}
}else {
ElMessage.error(res.data.data)
}
}).catch((err) => {
console.log(err)
})
if (state.bgForm) {
nextTick().then(() => {
state.bgForm.validate(valid => {
if (!valid) {
state.bgForm.clearValidate()
}
})
})
}
state.addType = 2
state.addDialog = true
} // 编辑按钮
const addConfirm = () => {
state.bgForm.validate(valid => {
if (valid) {
if (state.addType == 1) { // 新增
let params = {
classify_id: state.nodeClassifyId,
...state.formData
}
axios
.post(`/apaas/system/v5/dictionary/add`,params)
.then((res) => {
if (res.data.code == 200) {
ElMessage.success(res.data.data)
state.tableRows = []
state.addDialog = false
changePage(1)
}else {
ElMessage.error(res.data.data)
}
})
}else { // 编辑
let params = {
id: state.actionRow.id,
...state.formData
}
axios
.put(`/apaas/system/v5/dictionary/update`,params)
.then((res) => {
if (res.data.code == 200) {
ElMessage.success(res.data.data)
state.tableRows = []
state.addDialog = false
changePage(1)
}else {
ElMessage.error(res.data.data)
}
})
}
}
})
} // 确定新增/编辑
}
const delete_row = (row) => {
state.dialogDelete = true
state.actionRow = row
} // 删除按钮
const deleteData = () => {
axios
.delete(
`/apaas/system/v5/dictionary/${state.actionRow.id}`
)
.then((res) => {
if (res.data.code == 200) {
ElMessage.success(res.data.data)
state.dialogDelete = false
state.tableRows = []
changePage(1)
}else {
ElMessage.error(res.data.data)
}
})
} // 确定删除
const moveRow = (row,type) => {
let index
state.tableRows.forEach((e,i) => {
if (e.id == row.id) {
index = i
}
})
let nextRow
if (type == 1) { // 上移
nextRow = state.tableRows[index - 1]
}else { // 下移
nextRow = state.tableRows[index + 1]
}
let params = [
{
id: row.id,
sort: nextRow.sort
},
{
id: nextRow.id,
sort: row.sort
}
]
// axios
// .put(``,[...params])
// .then((res) => {
// if (res.data.code == 200) {
// ElMessage.success(res.data.data)
// state.tableRows = []
// changePage(1)
// }else {
// ElMessage.error(res.data.data)
// }
// })
// .catch((err) => {
// console.log(err)
// })
}
onBeforeMount(() => {
state.nodeId = 1
onBeforeMount(() => {
getTypeList()
})
const {
typeList,
search,
nodeId,
typeKeyword,
nodeClassifyId,
headers,
tableRows,
tableTotal,
filter,
stateOptions,
dialogDelete,
addType,
addDialog,
formData,
rules,
} = toRefs(state)
......@@ -274,7 +578,7 @@ const {
position: relative;
height: calc(100% - 62px);
.flex_left {
width: 280px;
width: 240px;
background-color: #fff;
margin-right: 16px;
border-radius: 6px;
......@@ -285,29 +589,27 @@ const {
overflow: hidden;
.box {
width: 248px;
width: 208px;
height: 100%;
overflow: hidden;
.type_station {
width: 100%;
margin-top: 16px;
height: calc(100% - 50px);
// overflow: hidden;
.type-box {
height: 32px;
line-height: 32px;
padding-left: 38px;
text-align: center;
font-size: 14px;
color: #404a62;
cursor: pointer;
&:hover {
color: #3759be;
background-color: #dfe5f6;
&:hover {
background-color: #f2f3f7;
}
}
.current-type{
color: #3759be;
background-color: #dfe5f6;
background-color: #f2f3f7;
border-radius: 4px;
}
}
}
......@@ -341,6 +643,42 @@ const {
}
}
.bg_form {
width: 100%;
box-sizing: border-box;
.el-form-item {
margin-bottom: 24px;
:deep().el-form-item__label {
line-height: 36px;
height: 36px;
}
.el-form-item__content {
width: 100%;
.el-textarea {
:deep().el-input__count {
bottom: -16px;
right: 4px;
font-family: Roboto-Regular;
color: #a9b1c7;
}
}
.bg-switch-ele {
width: 52px;
height: 24px;
:deep().el-switch__core {
width: 100%;
height: 24px;
.el-switch__inner,
.el-switch__action {
top: 3px;
}
}
}
}
}
}
}
</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