Browse Source

门类字段管理

master
xuhuajiao 2 years ago
parent
commit
b399218714
  1. 105
      src/assets/styles/mixin.scss
  2. 87
      src/assets/styles/yxk-admin.scss
  3. 49
      src/views/components/field/index.vue
  4. 21
      src/views/system/field/commonFields/index.vue
  5. 21
      src/views/system/field/electronicFields/index.vue
  6. 57
      src/views/system/field/index.vue
  7. 21
      src/views/system/field/systemFields/index.vue

105
src/assets/styles/mixin.scss

@ -564,3 +564,108 @@
min-height: calc(100vh - 282px);
}
}
@mixin row_tab_style{
[data-theme="dark"] & {
margin-top: 61px;
border: 1px solid #113d72;
.head-container{
margin: 20px;
}
.el-table__header{
border-top: 1px solid #113D72;
}
.tab-nav{
height: 41px;
line-height: 41px;
margin: -41px 0 30px -1px;
font-weight: bold;
color: #359AFC;
border-bottom: 1px solid #113D72;
li{
position: relative;
padding: 0 24px;
margin: -1px 30px 0 0;
letter-spacing: 2px;
border-top: 1px solid #113D72;
background-color: #021941;
cursor: pointer;
&::before,
&::after{
content: "";
position: absolute;
top: 0;
width: 33px;
height: 41px;
}
&::before{
left: -15px;
background: url(~@/assets/images/tab_left.png) no-repeat;
background-size: contain;
}
&::after{
right: -32px;
background: url(~@/assets/images/tab_right.png) no-repeat;
background-size: contain;
}
&:first-child{
border-left: 1px solid #113d72;;
&::before{
width: 17px;
height: 17px;
left: -1px;
top: -1px;
border-left: 1px solid $mainColor;
border-top: 1px solid $mainColor;
}
}
&.active-tab-nav{
color: #fff;
&::before{
background: url(~@/assets/images/tab_left_active.png) no-repeat;
background-size: contain;
}
&::after{
background: url(~@/assets/images/tab_right_active.png) no-repeat;
background-size: contain;
}
i{
display: block;
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 1px;
border-bottom: 1px solid #021941;
}
}
}
.tab-right-img{
display: block;
width: 93px;
margin: 4px 0 0 -14px;
background: url(~@/assets/images/tab_img.png) no-repeat;
background-size: contain;
}
}
}
[data-theme="light"] & {
margin-top: 0;
.head-container{
margin: 20px 20px 20px 0;
}
.tab-nav{
color: #545B65;
padding: 0 0 0 20px;
border-bottom: 1px solid #EDEFF3;
li{
margin-right: 60px;
&.active-tab-nav{
padding-bottom: 13px;
color: #0348F3;
border-bottom: 3px solid #0348F3;
}
}
}
}
}

87
src/assets/styles/yxk-admin.scss

@ -50,6 +50,20 @@
}
}
.tab-container{
@include bg_color;
@include box_padding;
.tab-content{
position: relative;
@include row_tab_style;
.tab-nav{
margin-bottom: 0;
}
}
}
.head-container {
// padding: 20px;
@ -848,90 +862,17 @@
// tab样式布局
.tab-content{
margin-top: 40px;
border-top: none;
background-color: #021941;
&::before{
display: none;
}
.tab-nav{
display: flex;
justify-content: flex-start;
height: 41px;
line-height: 41px;
margin: -41px 0 30px -1px;
font-size: 16px;
font-weight: bold;
color: #359AFC;
border-bottom: 1px solid #113D72;
li{
position: relative;
padding: 0 24px;
margin: -1px 30px 0 0;
letter-spacing: 2px;
border-top: 1px solid #113D72;
background-color: #021941;
cursor: pointer;
&::before,
&::after{
content: "";
position: absolute;
top: 0;
width: 33px;
height: 41px;
}
&::before{
left: -15px;
background: url(~@/assets/images/tab_left.png) no-repeat;
background-size: contain;
}
&::after{
right: -32px;
background: url(~@/assets/images/tab_right.png) no-repeat;
background-size: contain;
}
&:first-child{
border-left: 1px solid #113d72;;
&::before{
width: 17px;
height: 17px;
left: -1px;
top: -1px;
border-left: 1px solid $mainColor;
border-top: 1px solid $mainColor;
}
}
&.active-tab-nav{
color: #fff;
&::before{
background: url(~@/assets/images/tab_left_active.png) no-repeat;
background-size: contain;
}
&::after{
background: url(~@/assets/images/tab_right_active.png) no-repeat;
background-size: contain;
}
i{
display: block;
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 1px;
border-bottom: 1px solid #021941;
}
}
}
.tab-right-img{
display: block;
width: 93px;
margin: 4px 0 0 -14px;
background: url(~@/assets/images/tab_img.png) no-repeat;
background-size: contain;
}
}
.el-table__header{
border-top: 1px solid #113D72;
}
}

49
src/views/components/field/index.vue

@ -1,34 +1,29 @@
<template>
<div class="app-container">
<div>
<!--工具栏-->
<div class="head-container" style="padding:0 0 20px 0">
<div class="head-container">
<crudOperation :permission="permission" />
</div>
<div class="container-wrap" style="min-height: calc(100vh - 241px);">
<span class="right-top-line" />
<span class="left-bottom-line" />
<!--表格渲染-->
<el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" height="calc(100vh - 263px)" @selection-change="selectionChangeHandler" @row-click="clickRowHandler">
<el-table-column type="selection" width="55" />
<el-table-column type="index" label="序号" width="55" />
<el-table-column prop="fieldCnName" label="中文名称" />
<el-table-column prop="fieldName" label="字段标识" />
<el-table-column label="数据类型">
<template slot-scope="scope">
<span v-if="scope.row.isDataType === 1">字符</span>
<span v-if="scope.row.isDataType === 2">数字</span>
</template>
</el-table-column>
<el-table-column prop="isColumnLength" label="字段长度" />
<el-table-column label="默认值">
<template slot-scope="scope">
<span v-if="scope.row.isDefaultValue === ''">-</span>
<span v-else>{{ scope.row.isDefaultValue }}</span>
</template>
</el-table-column>
</el-table>
</div>
<!--表格渲染-->
<el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" height="calc(100vh - 273px)" @selection-change="selectionChangeHandler" @row-click="clickRowHandler">
<el-table-column type="selection" width="55" />
<el-table-column type="index" label="序号" width="55" />
<el-table-column prop="fieldCnName" label="中文名称" />
<el-table-column prop="fieldName" label="字段标识" />
<el-table-column label="数据类型">
<template slot-scope="scope">
<span v-if="scope.row.isDataType === 1">字符</span>
<span v-if="scope.row.isDataType === 2">数字</span>
</template>
</el-table-column>
<el-table-column prop="isColumnLength" label="字段长度" />
<el-table-column label="默认值">
<template slot-scope="scope">
<span v-if="scope.row.isDefaultValue === ''">-</span>
<span v-else>{{ scope.row.isDefaultValue }}</span>
</template>
</el-table-column>
</el-table>
<!--表单渲染-->
<eForm ref="eform" />
<el-dialog title="关键提示" :visible.sync="verifyDialogVisible" :before-close="handleClose">

21
src/views/system/field/commonFields/index.vue

@ -0,0 +1,21 @@
<template>
<field title="常用字段" :is-type="2" permission-str="commonFields" />
</template>
<script>
import Field from '@/views/components/field'
export default {
name: 'CommonFields',
components: { Field }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep thead .el-table-column--selection .cell {
display: none;
}
::v-deep div.el-dialog__footer {
text-align: center;
}
</style>

21
src/views/system/field/electronicFields/index.vue

@ -0,0 +1,21 @@
<template>
<field title="电子文件字段" :is-type="3" permission-str="electronicFields" />
</template>
<script>
import Field from '@/views/components/field'
export default {
name: 'ElectronicFields',
components: { Field }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep thead .el-table-column--selection .cell {
display: none;
}
::v-deep div.el-dialog__footer {
text-align: center;
}
</style>

57
src/views/system/field/index.vue

@ -0,0 +1,57 @@
<template>
<div class="app-container tab-container">
<div class="tab-content">
<span class="right-top-line" />
<span class="left-bottom-line" />
<span class="right-bottom-line" />
<ul class="tab-nav">
<li :class="{ 'active-tab-nav': activeIndex == 0 }" @click="changeActiveTab(0)">常用字段<i /></li>
<li :class="{ 'active-tab-nav': activeIndex == 1 }" @click="changeActiveTab(1)">系统字段<i /></li>
<li :class="{ 'active-tab-nav': activeIndex == 2 }" @click="changeActiveTab(2)">电子文件字段<i /></li>
<!-- 最右侧装饰img -->
<span class="tab-right-img" />
</ul>
<component :is="comName" />
</div>
</div>
</template>
<script>
import commonFields from './commonFields/index.vue'
import electronicFields from './electronicFields/index.vue'
import systemFields from './systemFields/index.vue'
export default {
name: 'FiledManage',
components: {
commonFields,
electronicFields,
systemFields
},
data() {
return {
activeIndex: 0
}
},
computed: {
comName: function() {
if (this.activeIndex === 0) {
return 'commonFields'
} else if (this.activeIndex === 1) {
return 'electronicFields'
} else if (this.activeIndex === 2) {
return 'systemFields'
}
return 'commonFields'
}
},
methods: {
changeActiveTab(data) {
this.activeIndex = data
}
}
}
</script>
<style lang="scss" scoped>
</style>

21
src/views/system/field/systemFields/index.vue

@ -0,0 +1,21 @@
<template>
<field title="系统字段" :is-type="1" permission-str="systemFields" />
</template>
<script>
import Field from '@/views/components/field'
export default {
name: 'SystemFields',
components: { Field }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep thead .el-table-column--selection .cell {
display: none;
}
::v-deep div.el-dialog__footer {
text-align: center;
}
</style>
Loading…
Cancel
Save