liu_li
/
yxk-storeroom-system
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

著录界面

master
xuhuajiao 3 years ago
parent
73f3d2a603
commit
8757b3dad7
5 changed files with 480 additions and 39 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 20
      src/assets/iconfonts/iconfont.css
  2. BIN
      src/assets/images/des_title.png
  3. 24
      src/assets/styles/index.scss
  4. 180
      src/views/category/descriptionPreview/form.json
  5. 295
      src/views/category/descriptionPreview/index.vue

20
src/assets/iconfonts/iconfont.css
View File

@ -1,8 +1,8 @@
@font-face { @font-face {
font-family: "iconfont"; /* Project id 3409379 */
src: url('iconfont.woff2?t=1653383362524') format('woff2'),
url('iconfont.woff?t=1653383362524') format('woff'),
url('iconfont.ttf?t=1653383362524') format('truetype');
font-family: 'iconfont'; /* Project id 3409379 */
src: url('//at.alicdn.com/t/font_3409379_goi7jp83r8m.woff2?t=1653633971812') format('woff2'),
url('//at.alicdn.com/t/font_3409379_goi7jp83r8m.woff?t=1653633971812') format('woff'),
url('//at.alicdn.com/t/font_3409379_goi7jp83r8m.ttf?t=1653633971812') format('truetype');
} }
.iconfont { .iconfont {
@ -14,6 +14,18 @@
line-height: 32px; line-height: 32px;
} }
.icon-weibiaoti-2:before {
content: "\e619";
}
.icon-paixu-fanbai:before {
content: "\e618";
}
.icon-rili:before {
content: "\e617";
}
.icon-yonghuyouxiang-fanbai:before { .icon-yonghuyouxiang-fanbai:before {
content: "\e616"; content: "\e616";
} }

BIN
src/assets/images/des_title.png
View File

Side by Side

After

Width: 185  |  Height: 56  |  Size: 2.7 KiB

24
src/assets/styles/index.scss
View File

@ -228,4 +228,28 @@ ul{
width: 73px !important; width: 73px !important;
} }
} }
.des-preview-left{
width: 510px;
flex: auto !important;
.des-form{
width: 100% !important;
.el-input__inner{
width: 100% !important;
}
.input-num .el-input__inner{
width: 30px !important;
}
.input-num {
.el-form-item__content .el-input{
width: 100% !important;
margin-right: 6px;
}
.el-input__inner{
padding: 0;
text-align: center;
}
}
}
}
} }

180
src/views/category/descriptionPreview/form.json
View File

@ -0,0 +1,180 @@
[{
"id": "1",
"fieldName": "qzm",
"fieldCnName": "全宗名",
"isInputClass": "select",
"isDisplayWidth": 200,
"isFullRow": 0,
"isRequired": 0
},
{
"id": "2",
"fieldName": "bmmc",
"fieldCnName": "部门名称",
"isInputClass": "select",
"isDisplayWidth": 200,
"isFullRow": 0,
"isRequired": 1
},
{
"id": "3",
"fieldName": "ddnd",
"fieldCnName": "归档年度",
"isInputClass": "popover",
"isDisplayWidth": 200,
"isFullRow": 0,
"isRequired": 1
},
{
"id": "4",
"fieldName": "wh",
"fieldCnName": "文号",
"isInputClass": "text",
"isDisplayWidth": 200,
"isFullRow": 0,
"isRequired": 1
},
{
"id": "5",
"fieldName": "jg",
"fieldCnName": "机构(问题)",
"isInputClass": "select",
"isDisplayWidth": 200,
"isFullRow": 0,
"isRequired": 0
},
{
"id": "6",
"fieldName": "jh",
"fieldCnName": "件号",
"isInputClass": "number",
"isDisplayWidth": 200,
"isFullRow": 0,
"isRequired": 0
},
{
"id": "7",
"fieldName": "date1",
"fieldCnName": "成交日期",
"isInputClass": "date",
"isDisplayWidth": 200,
"isFullRow": 0,
"isRequired": 0
},
{
"id": "8",
"fieldName": "dh",
"fieldCnName": "档号",
"isInputClass": "text",
"isDisplayWidth": 200,
"isFullRow": 1,
"isRequired": 0
},
{
"id": "9",
"fieldName": "th",
"fieldCnName": "题号",
"isInputClass": "textarea",
"isDisplayWidth": 516,
"isFullRow": 1,
"isRequired": 0
},
{
"id": "10",
"fieldName": "bgqx",
"fieldCnName": "保管期限",
"isInputClass": "select",
"isDisplayWidth": 200,
"isFullRow": 0,
"isRequired": 0
},
{
"id": "11",
"fieldName": "zrz",
"fieldCnName": "责任者",
"isInputClass": "text",
"isDisplayWidth": 200,
"isFullRow": 0,
"isRequired": 0
},
{
"id": "12",
"fieldName": "ys",
"fieldCnName": "页数",
"isInputClass": "number",
"isDisplayWidth": 200,
"isFullRow": 0,
"isRequired": 0
},
{
"id": "13",
"fieldName": "fs",
"fieldCnName": "份数",
"isInputClass": "number",
"isDisplayWidth": 200,
"isFullRow": 0,
"isRequired": 0
},
{
"id": "14",
"fieldName": "mj",
"fieldCnName": "密级",
"isInputClass": "select",
"isDisplayWidth": 200,
"isFullRow": 0,
"isRequired": 0
},
{
"id": "15",
"fieldName": "gdbz",
"fieldCnName": "归档标识",
"isInputClass": "select",
"isDisplayWidth": 200,
"isFullRow": 0,
"isRequired": 0
},
{
"id": "16",
"fieldName": "ljr",
"fieldCnName": "立卷人",
"isInputClass": "text",
"isDisplayWidth": 200,
"isFullRow": 0,
"isRequired": 0
},
{
"id": "17",
"fieldName": "date2",
"fieldCnName": "立卷时间",
"isInputClass": "date",
"isDisplayWidth": 200,
"isFullRow": 0,
"isRequired": 0
},
{
"id": "18",
"fieldName": "jcr",
"fieldCnName": "检查人",
"isInputClass": "text",
"isDisplayWidth": 200,
"isFullRow": 0,
"isRequired": 0
},
{
"id": "18",
"fieldName": "date3",
"fieldCnName": "检查时间",
"isInputClass": "date",
"isDisplayWidth": 200,
"isFullRow": 0,
"isRequired": 0
},
{
"id": "19",
"fieldName": "bz",
"fieldCnName": "备注",
"isInputClass": "text",
"isDisplayWidth": 516,
"isFullRow": 1,
"isRequired": 0
}]

295
src/views/category/descriptionPreview/index.vue
View File

@ -1,7 +1,9 @@
<template> <template>
<div class="category-main"> <div class="category-main">
<div class="des-preview-left"> <div class="des-preview-left">
<h4 class="des-title">字段调整 显示字段</h4>
<div class="des-title">
<p>字段调整 显示字段</p>
</div>
<ul class="des-fields"> <ul class="des-fields">
<li v-for="(item,index) in showFields" :key="index"> <li v-for="(item,index) in showFields" :key="index">
<el-tooltip class="item" effect="dark" :content="item.fieldCnName" :enterable="false" placement="top"> <el-tooltip class="item" effect="dark" :content="item.fieldCnName" :enterable="false" placement="top">
@ -9,7 +11,9 @@
</el-tooltip> </el-tooltip>
</li> </li>
</ul> </ul>
<h4 class="des-title">隐藏字段</h4>
<div class="des-title">
<p>隐藏字段 <i class="el-icon-arrow-down" /></p>
</div>
<ul class="des-fields"> <ul class="des-fields">
<li v-for="(item,index) in showFields" v-show="index>13" :key="index"> <li v-for="(item,index) in showFields" v-show="index>13" :key="index">
<el-tooltip class="item" effect="dark" :content="item.fieldCnName" :enterable="false" placement="top"> <el-tooltip class="item" effect="dark" :content="item.fieldCnName" :enterable="false" placement="top">
@ -18,40 +22,116 @@
</li> </li>
</ul> </ul>
<div class="des-set-btn"> <div class="des-set-btn">
<el-button type="primary">修改</el-button>
<el-button type="primary">排序</el-button>
<el-button type="primary" icon="el-icon-edit">修改</el-button>
<el-button class="des-set-sort" type="primary" icon="iconfont icon-paixu-fanbai">排序</el-button>
</div> </div>
<div class="des-form"> <div class="des-form">
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
<el-form-item label="字段类型" prop="fieldCnName">
<el-input v-model="form.fieldCnName" />
</el-form-item>
<el-form-item label="字段长度" prop="fieldName">
<el-input v-model="form.fieldName" />
</el-form-item>
<el-form-item label="著录形式" prop="isDataType">
<el-select v-model="form.isDataType" placeholder="请选择">
<!-- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> -->
<el-option label="区域二" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="对应字典" prop="isColumnLength">
<el-input-number v-model="form.isColumnLength" controls-position="right" />
</el-form-item>
<el-form-item label="显示长度" prop="isDefaultValue">
<el-input v-model="form.isDefaultValue" />
</el-form-item>
</el-form>
<el-row :gutter="10">
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="75px">
<el-col :span="15">
<el-form-item label="字段类型" prop="fieldCnName">
<el-select v-model="form.isDataType" placeholder="" disabled>
<!-- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> -->
<el-option label="区域二" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="字段长度" prop="fieldName">
<el-input v-model="form.fieldName" placeholder="" disabled />
</el-form-item>
<el-form-item label="著录形式" prop="isDataType">
<el-select v-model="form.isDataType" placeholder="" disabled>
<!-- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> -->
<el-option label="区域二" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="对应字典" prop="isColumnLength">
<el-select v-model="form.isDataType" placeholder="" disabled>
<!-- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> -->
<el-option label="区域二" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="显示长度" prop="isDefaultValue">
<el-input v-model="form.isDefaultValue" disabled />
</el-form-item>
<el-form-item label="默认值" prop="isDefaultValue">
<el-input v-model="form.isDefaultValue" disabled />
</el-form-item>
<el-form-item class="checkbox-item">
<span>自动补零</span>
<el-checkbox v-model="form.type" label="" name="type" disabled />
</el-form-item>
</el-col>
<el-col :span="9">
<el-form-item class="checkbox-item">
<span>显示一整行</span>
<el-checkbox v-model="form.type" label="" name="type" disabled />
</el-form-item>
<el-form-item class="checkbox-item">
<span>输入字段</span>
<el-checkbox v-model="form.type" label="" name="type" disabled />
</el-form-item>
<el-form-item class="checkbox-item">
<span>必填字段</span>
<el-checkbox v-model="form.type" label="" name="type" disabled />
</el-form-item>
<el-form-item class="checkbox-item">
<span>自动生成</span>
<el-checkbox v-model="form.type" label="" name="type" disabled />
</el-form-item>
<el-form-item class="checkbox-item">
<span>自动加一</span>
<el-checkbox v-model="form.type" label="" name="type" disabled />
</el-form-item>
<el-form-item class="checkbox-item">
<span>值不重复</span>
<el-checkbox v-model="form.type" label="" name="type" disabled />
</el-form-item>
<el-form-item class="input-num" label="位数" prop="num">
<el-input v-model="form.num" disabled />
<span>位</span>
</el-form-item>
</el-col>
</el-form>
</el-row>
</div> </div>
</div> </div>
<div class="des-preview-right"> <div class="des-preview-right">
<h4 class="des-title">界面预览效果</h4>
<div class="des-title">
<p>界面预览效果</p>
</div>
<div class="preview-content des-form">
<el-row :gutter="4">
<el-form label-width="100px">
<el-col v-for="(item,index) in formPreviewData" :key="index" :span="item.isFullRow ? 24 : 12">
<el-form-item :label="item.fieldCnName" prop="fieldCnName">
<!-- select -->
<el-select v-if="item.isInputClass === 'select'" v-model="item.fieldName" placeholder="" :style="{ width: item.isDisplayWidth+'px'}">
<el-option label="区域二" value="beijing" />
</el-select>
<!-- text -->
<el-input v-if="item.isInputClass === 'text'" v-model="item.fieldName" :style="{ width: item.isDisplayWidth+'px'}" />
<!-- number -->
<el-input v-if="item.isInputClass === 'number'" v-model="item.fieldName" type="number" :style="{ width: item.isDisplayWidth+'px'}" />
<!-- date -->
<el-date-picker v-if="item.isInputClass === 'date'" v-model="item.fieldName" type="date" align="right" format="yyyy 年 MM 月 dd 日" placeholder="" :style="{ width: item.isDisplayWidth+'px'}" />
<!-- popover -->
<el-input v-if="item.isInputClass === 'popover'" v-model="item.fieldName" class="input-popover" :style="{ width: item.isDisplayWidth+'px'}">
<i slot="suffix" class="el-input__icon iconfont icon-weibiaoti-2" />
</el-input>
<!-- textarea -->
<el-input v-if="item.isInputClass === 'textarea'" v-model="item.fieldName" type="textarea" rows="3" :style="{ width: item.isDisplayWidth+'px'}" />
</el-form-item>
</el-col>
</el-form>
</el-row>
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import data from './data.json' import data from './data.json'
import formData from './form.json'
export default { export default {
name: 'DescriptionPreview', name: 'DescriptionPreview',
components: {}, components: {},
@ -59,35 +139,72 @@ export default {
return { return {
showFields: [], showFields: [],
form: {}, form: {},
rules: {}
rules: {},
formPreviewData: [],
value1: ''
} }
}, },
mounted() { mounted() {
this.showFields = data this.showFields = data
this.formPreviewData = formData
}, },
methods: { methods: {
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.category-main{ .category-main{
display: flex; display: flex;
justify-content: space-between;
justify-content: flex-start;
padding: 20px; padding: 20px;
.des-preview-left{
width: 500px;
.des-preview-left,
.des-preview-right{
height: calc(100vh - 274px); height: calc(100vh - 274px);
overflow:hidden;
padding-right: 10px;
// overflow:hidden;
overflow-y: auto; overflow-y: auto;
}
.des-preview-left{
// width: 510px;
flex: 1;
} }
.des-title{ .des-title{
position: relative;
height: 28px;
margin-bottom: 10px; margin-bottom: 10px;
padding-left: 46px;
font-size: 14px; font-size: 14px;
font-weight: bold;
color: #fff; color: #fff;
height: 28px;
line-height: 28px;
cursor: pointer;
p{
position: absolute;
left: 46px;
top: 0;
line-height: 28px;
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(255, 255, 255, 1)), to(rgba(46, 143, 237, 1)));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
z-index: 2;
i{
font-size: 16px;
margin-left: 6px;
background-image: none;
-webkit-text-fill-color: #fff;
}
}
&::before{
content:"";
position: absolute;
left: 0;
top: 0;
width: 93px;
height: 28px;
background: url(~@/assets/images/des_title.png) no-repeat;
background-size: contain;
z-index: 1;
}
} }
.des-fields{ .des-fields{
display: flex; display: flex;
@ -117,16 +234,124 @@ export default {
} }
} }
} }
.des-set-btn{
text-align: right;
.el-button{
background-color: #3A99FD;
}
.des-set-sort{
::v-deep .iconfont{
line-height: 0 !important;
}
::v-deep span{
margin-left: 5px;
}
}
}
.des-form{ .des-form{
width: 496px; width: 496px;
padding: 20px 0;
padding: 20px 38px 20px 20px;
margin-top: 30px; margin-top: 30px;
border-radius: 4px; border-radius: 4px;
background-color: #02255F; background-color: #02255F;
::v-deep .el-form-item__label{
font-weight: normal;
line-height: 36px;
color: #3A99FD;
}
::v-deep .el-input__inner{
width: 200px;
height: 36px;
line-height: 36px;
color: #3A99FD;
background: #021941;
border: none;
&::placeholder{
color: #3A99FD !important;
}
&::-webkit-input-placeholder{
color: #3A99FD !important;
}
}
::v-deep .el-input__icon{
color: #3A99FD;
}
.checkbox-item{
height: 36px;
line-height: 36px;
text-align: right;
::v-deep .el-form-item__content{
margin-left: 0 !important;
}
::v-deep .el-checkbox__input.is-disabled .el-checkbox__inner{
background-color: transparent;
border-color: #339CFF;
&::after{
border-color: #3A99FD;
}
}
span{
margin-right: 10px;
color: #3A99FD;
}
}
.input-num{
display: flex;
justify-content: flex-end;
::v-deep .el-input__inner{
width: 50px;
}
::v-deep .el-form-item__content{
display: flex;
justify-content: flex-start;
margin-left: 0 !important;
.el-input{
width: 60px;
}
}
span{
color: #3A99FD;
line-height: 36px;
}
}
} }
.des-preview-right{ .des-preview-right{
width: 658px;
margin-left: 20px;
.preview-content{
width: 630px;
min-height: calc(100vh - 312px);
padding: 20px 15px 20px 0;
margin-top: 0;
border-radius: 4px;
background-color: #02255F;
::v-deep .el-input__inner{
width: 100%;
}
::v-deep .el-textarea__inner{
width: 100%;
color: #3A99FD;
background: #021941;
border: none;
&::placeholder{
color: #3A99FD !important;
}
&::-webkit-input-placeholder{
color: #3A99FD !important;
}
}
::v-deep .el-input__prefix{
text-align: right;
right: 5px !important;
}
.input-popover {
::v-deep .el-input__suffix{
right: 10px;
}
}
}
} }
} }
</style> </style>
Write Preview
Loading…
Cancel
Save