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 { ...@@ -274,8 +274,8 @@ div {
} }
.el-dialog__body { .el-dialog__body {
font-size: 18px; font-size: 16px;
color: #242c43; color: #404a62;
text-align: center; text-align: center;
padding: 0 16px; padding: 0 16px;
} }
...@@ -285,12 +285,6 @@ div { ...@@ -285,12 +285,6 @@ div {
.dialog_box .el-dialog__footer { .dialog_box .el-dialog__footer {
padding: 16px; padding: 16px;
} }
.result_box .el-dialog__body {
padding: 0px;
}
.sold_up_dialog .el-dialog__body {
padding: 24px 24px 4px;
}
/* 设置tab切换的样式 */ /* 设置tab切换的样式 */
.el-tabs__item.is-disabled { .el-tabs__item.is-disabled {
color: #8890a7 !important; color: #8890a7 !important;
......
src/bg-ui/bg-filter-group.vue
View file @ b07a29b8
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<slot name="left_action"></slot> <slot name="left_action"></slot>
</div> </div>
<div class="right-filter"> <div class="right-filter">
<el-input :placeholder="placeholder" v-model="modelValue"> <el-input :placeholder="placeholder" v-model="value">
<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"></bg-icon>
...@@ -32,7 +32,7 @@ import { computed, onMounted, reactive, toRefs, watch,ref } from "vue" ...@@ -32,7 +32,7 @@ import { computed, onMounted, reactive, toRefs, watch,ref } from "vue"
const state = reactive({ const state = reactive({
showFlag: false, showFlag: false,
modelValue: "" value: ""
}) })
const props = defineProps({ const props = defineProps({
...@@ -47,20 +47,20 @@ const props = defineProps({ ...@@ -47,20 +47,20 @@ const props = defineProps({
}) })
watch(props,(n,o) => { 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) emit('update:modelValue',n)
}) })
const emit = defineEmits(['search','update:modelValue']) const emit = defineEmits(['search','update:modelValue'])
const search = () => { const search = () => {
emit('search',state.modelValue) emit('search',state.value)
} }
const moreFilter = () => { const moreFilter = () => {
state.showFlag = !state.showFlag state.showFlag = !state.showFlag
} }
onMounted(() => { onMounted(() => {
state.modelValue = props.modelValue state.value = props.modelValue
}) })
const { modelValue,showFlag } = toRefs(state) const { value,showFlag } = toRefs(state)
</script> </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 { ...@@ -58,24 +58,22 @@ export default {
}, },
now_style() { now_style() {
return { return {
color: this.colors[this.now_index],
borderColor: this.colors[this.now_index], borderColor: this.colors[this.now_index],
backgroundColor: this.colors[this.now_index],
}; };
}, },
now_label_style() { now_label_style() {
return this.now_index == 0 return this.now_index == 0
? { left: this.circle_height + this.gap + 5 + "px" } ? { left: this.circle_height + this.gap + 5 + "px" }
: { left: "10px" }; : { left: "6px" };
}, },
now_circle_style() { now_circle_style() {
return this.now_index == 0 return this.now_index == 0
? { ? {
left: this.gap + "px", left: this.gap + "px",
backgroundColor: this.colors[this.now_index],
} }
: { : {
right: this.gap + "px", 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 @@ ...@@ -33,6 +33,8 @@
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 BgSwitchEle from './bg-switch-ele.vue'
import BgTableBtns from './bg-table-btns.vue'
const components = { const components = {
BgIcon,//字体图标 BgIcon,//字体图标
...@@ -67,6 +69,8 @@ const components = { ...@@ -67,6 +69,8 @@ const components = {
BgPagination,// 分页组件 BgPagination,// 分页组件
BgInnerTabs,//内部tab BgInnerTabs,//内部tab
BgFilterGroup,//高级搜索 BgFilterGroup,//高级搜索
BgSwitchEle,
BgTableBtns,
}; };
const install = (Vue) => { const install = (Vue) => {
......
src/bg-ui/index.scss
View file @ b07a29b8
...@@ -659,11 +659,11 @@ a { ...@@ -659,11 +659,11 @@ a {
} }
th, th,
td { td {
padding: 12px 0!important; padding: 11px 0!important;
> .cell { > .cell {
padding: 0 10px !important; padding: 0 10px !important;
color: #404a62; color: #404a62;
line-height: 18px; line-height: 14px;
} }
} }
...@@ -2036,29 +2036,31 @@ a { ...@@ -2036,29 +2036,31 @@ a {
.bg-switch { .bg-switch {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
width: 64px; width: 44px;
height: 28px; height: 20px;
border-radius: 14px; border-radius: 10px;
border: solid 2px #275a9d; border: solid 2px #2b4695;
position: relative; position: relative;
color: #275a9d; color: #fff;
background-color: #2b4695;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
> .label { > .label {
font-size: 12px; font-size: 12px;
font-weight: 600; font-weight: 400;
line-height: 24px; line-height: 15px;
position: absolute; position: absolute;
color: #fff;
} }
> .circle { > .circle {
width: 18px; width: 16px;
height: 18px; height: 16px;
border-radius: 50%; border-radius: 50%;
position: absolute; position: absolute;
top: 3px; // top: 2px;
background-color: #275a9d; background-color: #fff;
} }
&.disabled { &.disabled {
...@@ -2471,4 +2473,64 @@ a { ...@@ -2471,4 +2473,64 @@ a {
border: 1px solid #e6e9ef; border: 1px solid #e6e9ef;
padding: 24px 16px 8px; 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 @@ ...@@ -9,11 +9,11 @@
<div class="flex_row"> <div class="flex_row">
<div class="flex_left"> <div class="flex_left">
<div class="box"> <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_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"> <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.name}} {{item.classify_name}}
</div> </div>
</div> </div>
</div> </div>
...@@ -57,19 +57,21 @@ ...@@ -57,19 +57,21 @@
</bg-filter-group> </bg-filter-group>
<div class="table_container"> <div class="table_container">
<bg-table ref="bgTable" :headers="headers" :rows="tableRows" :isIndex="true" :stripe="true"> <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 }"> <template v-slot:updated_time="{ row }">
{{ row.updated_time.split("+")[0].replace("T", " ").replace("Z", " ") }} {{ row.updated_time.split("+")[0].replace("T", " ").replace("Z", " ") }}
</template> </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 }"> <template v-slot:action="{ row }">
<bg-table-btn class="btn" :click="()=>{edit_row(row)}" :disabled="row.state == 1"> <bg-table-btns :operations="getOperations(row)" />
编辑
</bg-table-btn>
<bg-table-btn class="btn" :click="()=>{delete_row(row)}" :disabled="row.state == 1">
删除
</bg-table-btn>
</template> </template>
</bg-table> </bg-table>
<bg-pagination <bg-pagination
...@@ -84,40 +86,97 @@ ...@@ -84,40 +86,97 @@
</div> </div>
</div> </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> </div>
</template> </template>
<script setup> <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 { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import axios from '../../../../request/http.js' import axios from '../../../../request/http.js'
const bgForm = ref(null)
const state = reactive({ const state = reactive({
typeList: [ bgForm,
{ typeList: [], // 分类数据
name: "业务分类", typeKeyword: "", // 分类删选关键词
id: 1, nodeClassifyId: null, // 当前选中分类的uuid 用于新建字典
}, nodeId: null, // 当前选中分类的id 用于请求列表
{ timer: null, // 定时器
name: "业务领域",
id: 2,
},
{
name: "开放程度",
id: 3,
},
{
name: "开发厂商",
id: 4,
},
{
name: "菜单分组",
id: 5,
},
],
search: "",
nodeId: null,
timer: null,
headers: [ headers: [
{ {
label: "业务分类名称", label: "业务分类名称",
...@@ -126,38 +185,32 @@ const state = reactive({ ...@@ -126,38 +185,32 @@ const state = reactive({
{ {
label: "描述", label: "描述",
prop: "describe", prop: "describe",
}, minWidth: 360
{
label: "状态",
prop: "state",
}, },
{ {
label: "更新时间", label: "更新时间",
prop: "updated_time", prop: "updated_time",
width: 220,
},
{
label: "状态",
prop: "state",
}, },
{ {
label: "操作", label: "操作",
prop: "action", prop: "action",
width: 260, width: 176,
fixed: "right", fixed: "right",
}, },
], ], // 表格数据表头
tableRows: [ tableRows: [], // 表格数据
{ tableTotal: 0, // 表格数据条数
name: "www",
describe: "sajdashkjdhsdjfkhsadjkfhkjsdahfkjashdkfjhsdjkafhkjsdhfkjshjkdfhajkhsdjkf",
state: 1,
updated_time: "2022-10-12 12:12:12"
},
],
tableTotal: 0,
filter: { filter: {
state: "", state: "",
search: "", search: "",
page: 1, page: 1,
limit: 10, limit: 10,
kind: "business_type", }, // 表格筛选项
},
stateOptions: [ stateOptions: [
{ {
name: "全部", name: "全部",
...@@ -171,11 +224,43 @@ const state = reactive({ ...@@ -171,11 +224,43 @@ const state = reactive({
name: "禁用", name: "禁用",
value: "2" 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) => { const nodeClick = (item) => {
state.nodeId = item.id state.nodeId = item.id
} state.nodeClassifyId = item.classify_id
state.filter = {
state: "",
search: "",
page: 1,
limit: 10,
}
getTableRows()
} // 切换字典分类
const searchType = () => { const searchType = () => {
if (state.timer) { if (state.timer) {
clearTimeout(state.timer); clearTimeout(state.timer);
...@@ -183,29 +268,74 @@ const searchType = () => { ...@@ -183,29 +268,74 @@ const searchType = () => {
state.timer = setTimeout(() => { state.timer = setTimeout(() => {
getTypeList() getTypeList()
}, 500); }, 500);
} } // 字典分类筛选
const getTypeList = () => { 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) => { const changeSearch = (val) => {
state.filter.search = val state.filter.search = val
console.log(state.filter) changePage(1)
} } // 表格关键字筛选
const filterAction = () => { const filterAction = () => {
console.log(state.filter) changePage(1)
} } // 查询按钮
const filterClear = () => { const filterClear = () => {
state.filter = { state.filter = {
state: "", state: "",
search: "", search: "",
limit: 10, limit: 10,
page: 1, 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 = () => { const getTableRows = () => {
let params = {...state.filter} let params = {...state.filter}
params.id = state.nodeId
axios axios
.get( .get(
`/apaas/system/v5/dictionary/list`, `/apaas/system/v5/dictionary/list`,
...@@ -217,39 +347,213 @@ const getTableRows = () => { ...@@ -217,39 +347,213 @@ const getTableRows = () => {
if (res.data.code == 200) { if (res.data.code == 200) {
state.tableRows = res.data.data || [] state.tableRows = res.data.data || []
state.tableTotal = res.data.total 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 { }else {
ElMessage.error(res.data.msg) ElMessage.error(res.data.data)
} }
}) })
} // 获取数据 } // 获取表格数据
const changePage = () => {
} const changeUseRow = (row) => {
const changeSize = () => { 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 = () => { 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) => { 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) => { 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 { const {
typeList, typeList,
search, typeKeyword,
nodeId, nodeClassifyId,
headers, headers,
tableRows, tableRows,
tableTotal, tableTotal,
filter, filter,
stateOptions, stateOptions,
dialogDelete,
addType,
addDialog,
formData,
rules,
} = toRefs(state) } = toRefs(state)
...@@ -274,7 +578,7 @@ const { ...@@ -274,7 +578,7 @@ const {
position: relative; position: relative;
height: calc(100% - 62px); height: calc(100% - 62px);
.flex_left { .flex_left {
width: 280px; width: 240px;
background-color: #fff; background-color: #fff;
margin-right: 16px; margin-right: 16px;
border-radius: 6px; border-radius: 6px;
...@@ -285,29 +589,27 @@ const { ...@@ -285,29 +589,27 @@ const {
overflow: hidden; overflow: hidden;
.box { .box {
width: 248px; width: 208px;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
.type_station { .type_station {
width: 100%; width: 100%;
margin-top: 16px; margin-top: 16px;
height: calc(100% - 50px); height: calc(100% - 50px);
// overflow: hidden;
.type-box { .type-box {
height: 32px; height: 32px;
line-height: 32px; line-height: 32px;
padding-left: 38px; text-align: center;
font-size: 14px; font-size: 14px;
color: #404a62; color: #404a62;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: #3759be; background-color: #f2f3f7;
background-color: #dfe5f6;
} }
} }
.current-type{ .current-type{
color: #3759be; background-color: #f2f3f7;
background-color: #dfe5f6; border-radius: 4px;
} }
} }
} }
...@@ -341,6 +643,42 @@ const { ...@@ -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> </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