Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
1dbe94eb by yangwei
Options

部分样式调整

1 parent cf8335b9
Inline Side-by-side
Showing 2 changed files with 299 additions and 167 deletions
......@@ -7,11 +7,18 @@
display: flex;
position: relative;
top: -2px;
b {
@include flex-center;
flex: 1;
width: 100%;
font-weight: 200;
display: inline-block;
position: relative;
font-size: 24px;
top: -11px;
width: 38%;
height: 40px;
margin-left: 28px;
// @include flex-center;
display: flex;
justify-content: center;
}
}
......@@ -28,7 +35,7 @@
}
.dialog_footer {
margin-top: 8px;
margin-bottom: 8px;
@include flex-center;
}
......@@ -72,6 +79,9 @@
background-size: 100% 100%;
right: 40px;
top: 33px;
&:hover{
box-shadow: inset 0px 0px 12px 0px #02D9FD;
}
}
.el-dialog__close {
......
<template>
<!-- 编辑 -->
<dialogBox submitForm="submitForm" class="tableClass" @closeDialog="closeDialog" @submitForm="handleSubmit" width="80%" v-model="myValue"
:isSave="details.ISENABLE == 1" title="字典信息">
<dialogBox
submitForm="submitForm"
class="tableClass"
@closeDialog="closeDialog"
@submitForm="handleSubmit"
width="60%"
v-model="myValue"
:isMain="true"
:isButton="false"
:isSave="details.ISENABLE == 1"
title="字典信息"
>
<div class="editDialogBox-box ">
<el-form :model="ruleForm" ref="ruleForm" label-width="100px">
<el-row :gutter="20">
<el-col :span="4">
......@@ -16,86 +27,159 @@
</el-col>
</el-row>
</el-form>
<lb-table :column="column" class="loadingtext" :heightNum="420" :key="key" :expand-row-keys="keyList"
row-key="dictid" :tree-props="{ children: 'children' }" :pagination="false" :data="tableData">
<lb-table
:column="column"
class="loadingtext"
:heightNum="600"
:key="key"
:expand-row-keys="keyList"
row-key="dictid"
:tree-props="{ children: 'children' }"
:pagination="false"
:data="tableData"
>
</lb-table>
</div>
</dialogBox>
</template>
<script>
import { getUuid, judgeSort, realMove, findParents, removeTreeListItem } from '@/utils/operation'
import { editDictNode, getChildDictList } from '@/api/dict'
import {
getUuid,
judgeSort,
realMove,
findParents,
removeTreeListItem,
} from "@/utils/operation";
import { editDictNode, getChildDictList } from "@/api/dict";
export default {
props: {
value: { type: Boolean, default: false },
details: {
type: Object,
default: {}
}
default: {},
},
data () {
},
data() {
return {
key: 0,
myValue: this.value,
keyList: [],
ruleForm: {
DCODE: '',
DNAME: ''
DCODE: "",
DNAME: "",
},
column: [],
columns: [
{
width: '70',
width: "70",
renderHeader: (h, scope) => {
return (<div>
{
this.details.ISENABLE === '0' ?
<span>序号</span> :
<i class="el-icon-plus" onClick={() => { this.handleAdd() }} style="cursor:pointer;color:#409EFF"></i>
}
</div>)
return (
<div>
{this.details.ISENABLE === "0" ? (
<span>序号</span>
) : (
<i
class="el-icon-plus"
onClick={() => {
this.handleAdd();
}}
style="cursor:pointer;color:#409EFF"
></i>
)}
</div>
);
},
render: (h, scope) => {
return (
<span>{scope.row.index}</span>
)
}
return <span>{scope.row.index}</span>;
},
},
{
prop: 'DCODE',
width: '100',
label: '字典项编码',
prop: "DCODE",
width: "100",
label: "字典项编码",
render: (h, scope) => {
return (
<div>
<el-input placeholder="字典项编码" disabled={this.details.isenable == 2} v-show={scope.row.codeShow} v-fo value={scope.row[scope.column.property]}
onFocus={() => { this.itemShowFalse(); scope.row.codeShow = true; }}
onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }} maxlength='8'></el-input>
<el-input
placeholder="字典项编码"
disabled={this.details.isenable == 2}
v-show={scope.row.codeShow}
v-fo
value={scope.row[scope.column.property]}
onFocus={() => {
this.itemShowFalse();
scope.row.codeShow = true;
}}
onInput={(val) => {
scope.row[scope.column.property] = val;
this.itemShowFalse();
scope.row.codeShow = true;
}}
maxlength="8"
></el-input>
<el-input placeholder="字典项编码" disabled={this.details.isenable == 2} v-show={!scope.row.codeShow} value={scope.row[scope.column.property]}
onFocus={() => { this.itemShowFalse(); scope.row.codeShow = true; }}
onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }} maxlength='8'></el-input>
<el-input
placeholder="字典项编码"
disabled={this.details.isenable == 2}
v-show={!scope.row.codeShow}
value={scope.row[scope.column.property]}
onFocus={() => {
this.itemShowFalse();
scope.row.codeShow = true;
}}
onInput={(val) => {
scope.row[scope.column.property] = val;
this.itemShowFalse();
scope.row.codeShow = true;
}}
maxlength="8"
></el-input>
</div>
)
}
);
},
},
{
prop: 'DNAME',
label: '字典项名称',
prop: "DNAME",
label: "字典项名称",
render: (h, scope) => {
return (
<div>
<el-input placeholder="字典项编码" disabled={this.details.isenable == 2} v-show={scope.row.nameShow} v-fo value={scope.row[scope.column.property]}
onFocus={() => { this.itemShowFalse(); scope.row.nameShow = true; }}
onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }}></el-input>
<el-input
placeholder="字典项编码"
disabled={this.details.isenable == 2}
v-show={scope.row.nameShow}
v-fo
value={scope.row[scope.column.property]}
onFocus={() => {
this.itemShowFalse();
scope.row.nameShow = true;
}}
onInput={(val) => {
scope.row[scope.column.property] = val;
this.itemShowFalse();
scope.row.codeShow = true;
}}
></el-input>
<el-input placeholder="字典项名称" disabled={this.details.isenable == 2} v-show={!scope.row.nameShow} value={scope.row[scope.column.property]}
onFocus={() => { this.itemShowFalse(); scope.row.nameShow = true; }}
onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }}></el-input>
<el-input
placeholder="字典项名称"
disabled={this.details.isenable == 2}
v-show={!scope.row.nameShow}
value={scope.row[scope.column.property]}
onFocus={() => {
this.itemShowFalse();
scope.row.nameShow = true;
}}
onInput={(val) => {
scope.row[scope.column.property] = val;
this.itemShowFalse();
scope.row.codeShow = true;
}}
></el-input>
</div>
)
}
);
},
},
// {
// prop: 'normcode',
......@@ -146,187 +230,217 @@ export default {
// }
// },
{
width: '130',
label: '移动',
width: "130",
label: "移动",
render: (h, scope) => {
return (
<div>
<el-button type='text' disabled={scope.row.isTop} onClick={() => { this.moveUpward(scope.$index, scope.row) }}>上移</el-button>
<el-button type='text' disabled={scope.row.isBottom} onClick={() => { this.moveDown(scope.$index, scope.row) }}>下移</el-button >
</div >
)
}
<el-button
type="text"
disabled={scope.row.isTop}
onClick={() => {
this.moveUpward(scope.$index, scope.row);
}}
>
上移
</el-button>
<el-button
type="text"
disabled={scope.row.isBottom}
onClick={() => {
this.moveDown(scope.$index, scope.row);
}}
>
下移
</el-button>
</div>
);
},
},
{
width: '150',
label: '操作',
width: "150",
label: "操作",
render: (h, scope) => {
return (
<div>
<el-button type="text" style="margin-right:10px" onClick={() => { this.handleAddSubordinate(scope.row) }}>增加下级</el-button>
<el-button type="text" style="margin-left:0" onClick={() => { this.handleMinus(scope.$index, scope.row) }}>删除</el-button>
<el-button
type="text"
style="margin-right:10px"
onClick={() => {
this.handleAddSubordinate(scope.row);
}}
>
增加下级
</el-button>
<el-button
type="text"
style="margin-left:0"
onClick={() => {
this.handleMinus(scope.$index, scope.row);
}}
>
删除
</el-button>
</div>
)
}
}
);
},
},
],
tableData: []
}
tableData: [],
};
},
watch: {
value (val) {
this.myValue = val
value(val) {
this.myValue = val;
},
'details.dictid': {
"details.dictid": {
handler: function (newValue) {
if (!this.value) return
if (!this.value) return;
this.$startLoading();
getChildDictList(newValue).then(res => {
getChildDictList(newValue).then((res) => {
this.$endLoading();
let { result } = res
this.tableData = result ? result : []
let { result } = res;
this.tableData = result ? result : [];
this.tableData.forEach((item, index) => {
item.index = index + 1
})
})
item.index = index + 1;
});
});
},
immediate: true
immediate: true,
},
details: {
handler: function (newValue) {
if (newValue.ISENABLE == 2) {
this.column = this.columns.slice(0, 6)
this.column = this.columns.slice(0, 6);
} else {
this.column = this.columns
this.column = this.columns;
}
this.ruleForm = newValue.rowData
this.addIndexes()
this.key++
this.ruleForm = newValue.rowData;
this.addIndexes();
this.key++;
},
deep: true,
},
deep: true
}
},
methods: {
// 添加索引
addIndexes (data = this.tableData, isAdd = true) {
addIndexes(data = this.tableData, isAdd = true) {
data.forEach((item, index) => {
if (index == 0) {
item.codeShow = true
item.nameShow = false
item.normcodeShow = false
item.normnameShow = false
item.codeShow = true;
item.nameShow = false;
item.normcodeShow = false;
item.normnameShow = false;
} else {
item.codeShow = false
item.nameShow = false
item.normcodeShow = false
item.normnameShow = false
item.codeShow = false;
item.nameShow = false;
item.normcodeShow = false;
item.normnameShow = false;
}
if (isAdd) {
item.index = index + 1
item.index = index + 1;
}
if (item.children) {
this.addIndexes(item.children, false)
this.addIndexes(item.children, false);
}
})
});
},
itemShowFalse () {
itemShowFalse() {
this.tableData.forEach((item, index) => {
item.codeShow = false
item.nameShow = false
item.normcodeShow = false
item.normnameShow = false
})
item.codeShow = false;
item.nameShow = false;
item.normcodeShow = false;
item.normnameShow = false;
});
},
handleMinus (index, row) {
this.$confirm('此操作将永久删除, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
removeTreeListItem(this.tableData, row.dictid)
this.$message({
type: 'success',
message: '删除成功!'
handleMinus(index, row) {
this.$confirm("此操作将永久删除, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
}).catch(() => {
.then(() => {
removeTreeListItem(this.tableData, row.dictid);
this.$message({
type: 'info',
message: '已取消删除'
})
type: "success",
message: "删除成功!",
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
handleSubmit () {
handleSubmit() {
editDictNode({
dictid: this.details.rowData.dictid,
typeid: this.details.rowData.typeid,
children: this.tableData
}).then(res => {
children: this.tableData,
}).then((res) => {
if (res.code === 200) {
this.$message({
message: '修改成功',
type: 'success'
})
this.$emit('input', false)
message: "修改成功",
type: "success",
});
this.$emit("input", false);
}
})
});
},
closeDialog () {
this.$emit('input', false)
closeDialog() {
this.$emit("input", false);
},
// 增加下级
handleAddSubordinate (row) {
handleAddSubordinate(row) {
if (!row.children) {
row.children = []
row.children = [];
}
row.children.push(
{
DCODE: '',
DNAME: '',
ISENABLE: '1',
NORMCODE: '',
NORMNAME: '',
row.children.push({
DCODE: "",
DNAME: "",
ISENABLE: "1",
NORMCODE: "",
NORMNAME: "",
dictid: getUuid(32),
typeid: row.typeid,
}
)
});
this.keyList = [];
this.keyList.push(row.dictid)
this.keyList.push(row.dictid);
},
// 增加
handleAdd () {
handleAdd() {
this.$nextTick(() => {
let container = this.$el.querySelector('.el-table__body-wrapper');
let container = this.$el.querySelector(".el-table__body-wrapper");
container.scrollTop = container.scrollHeight;
})
this.tableData.push(
{
DCODE: '',
DNAME: '',
ISENABLE: '1',
normcode: '',
normname: '',
});
this.tableData.push({
DCODE: "",
DNAME: "",
ISENABLE: "1",
normcode: "",
normname: "",
dictid: getUuid(32),
typeid: this.ruleForm.typeid,
}
)
this.addIndexes()
this.key++
});
this.addIndexes();
this.key++;
},
// 上移下移
moveUpward (index, row) {
realMove(row.dictid, 'UP', this.tableData)
this.key++
let id = findParents(this.tableData, row.dictid)
this.keyList = id
moveUpward(index, row) {
realMove(row.dictid, "UP", this.tableData);
this.key++;
let id = findParents(this.tableData, row.dictid);
this.keyList = id;
},
moveDown (index, row) {
realMove(row.dictid, 'DOWN', this.tableData)
this.key++
let id = findParents(this.tableData, row.dictid)
this.keyList = id
}
}
}
moveDown(index, row) {
realMove(row.dictid, "DOWN", this.tableData);
this.key++;
let id = findParents(this.tableData, row.dictid);
this.keyList = id;
},
},
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "~@/styles/public.scss";
......@@ -339,11 +453,19 @@ export default {
/deep/.el-radio__label {
display: block;
}
/deep/.el-form-item__label{
color:#fff;
}
/deep/.el-form-item{
color:#fff;
margin-bottom: 10px;
}
/deep/.el-radio-group {
display: flex;
align-items: center;
justify-content: center;
}
.editDialogBox-box{
margin:14px 18px 30px 18px !important
}
</style>
......