通用标准页面优化

标准项目可单独新建
标准类别,标准项目重复校验
pull/2/head
wangpeng 2024-02-23 14:05:51 +08:00
parent c46a6dd3f5
commit 8ac26abb61
4 changed files with 621 additions and 70 deletions

502
src/styles/business.scss Normal file
View File

@ -0,0 +1,502 @@
.orso{
padding: 0 20px;
}
.tip_text{
font-size: 13px;
padding: 10px 0;
}
.flex-layout{
display: flex;
align-items: center;
}
.space-between{
justify-content: space-between;
}
//
.app-ture {
background-color: #fff;
padding: 20px;
}
.app-warp {
padding: 15px;
.app-structure {
background-color: #fff;
padding: 20px;
}
.app-search {
.app-search-form {
display: flex;
flex-wrap: wrap;
padding-right: 10px;
align-items: flex-start;
.form-item {
width: 33.333%;
label {
text-align: right;
vertical-align: middle;
float: left;
font-size: 14px;
color: #606266;
line-height: 32px;
padding: 0 12px 0 0;
box-sizing: border-box;
font-weight: 700;
width: 90px;
margin-bottom: 18px;
white-space: nowrap;
}
.el-input {
float: left;
width: calc(100% - 100px);
}
.el-select{
float: left;
width: calc(100% - 100px);
.el-input {
width: calc(100% - 0px);
}
}
.el-date-editor{
width: calc(100% - 100px);
}
}
.four_more{
label{
width: 130px;
}
.el-input {
float: left;
width: calc(100% - 130px);
}
.el-select{
float: left;
width: calc(100% - 130px);
.el-input {
width: calc(100% - 0px);
}
}
// .input_def{width: calc(100% - 140px)}
}
}
}
.app-tools {
display: flex;
justify-content: space-between;
padding-bottom: 14px;
align-items: center;
.app-minbtn {
padding-right: 10px;
.screening {
position: relative;
margin-right: 6px;
}
.el-button {
color: #000;
font-size: 15px;
}
}
}
.app-statistical {
padding: 8px 20px 8px 20px;
border: 1px solid #abdcff;
background-color: #f0faff;
position: relative;
border-radius: 4px;
color: #515a6e;
line-height: 16px;
margin-bottom: 15px;
span {
margin-right: 20px;
font-size: 12px;
i {
font-style: normal;
font-weight: 700;
color: rgb(45, 140, 240);
}
}
}
.app-container {
padding: 0;
.el-button{
&:hover{
text-decoration: underline;
font-weight: 700;
}
}
.status-dot{
width: 6px;
height: 6px;
display: inline-block;
border-radius: 50%;
vertical-align: middle;
position: relative;
top: -1px;
margin-right: 6px;
}
.status-green{
background-color: #52c41a;
}
.status-red{
background-color: #f51515;
}
.status-blue{
background-color: #1E9FFF;
}
.status-orange{
background-color: #e36c09;
}
}
}
.app-divider {
margin: 0 8px;
display: inline-block;
height: .9em;
width: 1px;
vertical-align: middle;
position: relative;
top: -.06em;
font-size: 14px;
line-height: 1.5;
color: #515a6e;
box-sizing: border-box;
padding: 0;
list-style: none;
background: #e8eaec;
}
.app-checkbox-group {
padding: 4px 10px;
.el-checkbox {
margin-bottom: 8px;
}
}
.appformwith {
border: 0 solid red;
}
//
.type_field_box {
display: flex;
.type_field_item {
width: 220px;
border-radius: 6px 6px 0 0;
margin-right: 20px;
&:last-child {
margin-right: 0;
}
.type_field_top {
background-color: #40a3ff;
border-radius: 5px 5px 0 0;
color: #fff;
height: 40px;
line-height: 40px;
text-align: center;
}
.type_field_content {
height: 300px;
border: 1px solid #ccc;
border-top: none;
overflow-y: auto;
position: relative;
transform: scale(1);
.type_li{
font-size: 14px;
padding: 8px 0 8px 24px;
&:hover{
background-color: #f5f7fa;
cursor: pointer;
}
}
.type_li_active{
background-color: #edf6ff;
cursor: pointer;
}
.type_field_search{
position: fixed;
top: 0;
z-index: 1;
width: 304px;
background-color: #fff;
padding: 10px 6px 0 10px;
}
.type_tree{
position: absolute;
top: 44px;
width: 100%;
padding: 0 10px 10px;
}
}
.type_pa{
padding: 10px 0;
}
}
}
.m-scroll-style {
/** 滚动条样式*/
&::-webkit-scrollbar {
width: 6px;
// background-color: rgba(232, 232, 232, 1);
border-left: 1px solid #ccc;
border-radius: 0;
}
// &:hover::-webkit-scrollbar {
// width: 6px;
// background-color: rgba(61, 86, 267, 0.2);
// border-radius: 10px;
// }
/** 滚动条里的滑块样式 */
&::-webkit-scrollbar-thumb {
background-color: rgba(232, 232, 232, 1);
border-radius: 10px;
}
/* 火狐美化滚动条 */
scrollbar-color: rgba(67, 102, 236, 1) rgba(61, 86, 267, 0.2);
/* 滑块颜色 滚动条背景颜色 */
scrollbar-width: thin;
/* IE美化滚动条 */
scrollbar-track-color: transparent;
-ms-scrollbar-track-color: transparent;
/* 滚动条宽度有三种thin、auto、none */
scrollbar-face-color: rgba(67, 102, 236, 1); /*滚动条3D表面ThreedFace的颜色*/
scrollbar-highlight-color: #fff; /*滚动条3D界面的亮边ThreedHighlight颜色*/
scrollbar-shadow-color: #eeeeee; /*滚动条3D界面的暗边ThreedShadow颜色*/
scrollbar-3dlight-color: #eeeeee; /*滚动条亮边框颜色*/
scrollbar-arrow-color:rgba(67, 102, 236, 1); /*滚动条方向箭头的颜色 */
scrollbar-track-color: #fff; /*滚动条的拖动区域(TrackBar)颜色*/
scrollbar-darkshadow-color: #fff; /*滚动条暗边框ThreedDarkShadow颜色*/
}
//
.detail-structure{
background: #fff;
.detail-container{
padding: 20px 40px 40px;
.edit_form{
width: 70%;
padding:10px 20px;
.el-select,.el-cascader{
width: 100%;
}
}
.detail_form{
// border: 1px solid red;
width: 70%;
padding:10px 20px;
clear: both;
.el-select{
width: 100%;
}
}
.course_form{
padding: 20px;
width: 70%;
}
.detail_view{
width: 70%;
padding:0 20px 20px;
}
.detail_foot{
clear: both;
border-top: 1px dashed #eaeaea;
padding-top: 40px;
text-align: center;
.el-button+.el-button{
margin-left: 20px;
}
}
}
}
//
.imgs_update{
display: flex;
align-items: center;
.up_tip_test{
padding-left: 24px;
p{
font-size: 12px;
margin: 0;
line-height: 1.8;
color: #909399;
}
.h1{
font-size: 14px;
color: #606266;
}
.a1{
color: #3a8ee6;
&:hover{
cursor: pointer;
text-decoration: underline;
}
}
}
}
.imgs_update .el-upload--picture-card{
width: 210px;
height: 132px;
i{
color: #c0ccda;
}
}
.imgs_update .el-upload-list--picture-card .el-upload-list__item{
width: 210px;
height: 132px;
}
.imgs_update .el-upload--picture-card .up_tip_icon{
position: relative;
text-align: center;
.up_tip_i{
line-height: 50px;
margin-top: 25px;
}
.up_tip_text{
line-height: 1;
color: #c0ccda;
}
}
.demo-image__preview{
position: relative;
width: 210px; height: 132px;
.demo-closed{
position: absolute;
z-index: 2;
background-color: #fff;
border-radius: 100px;
width: 20px;
height: 20px;
top: -4px;
right: -4px;
text-align: center;
cursor: pointer;
box-shadow: 2px 2px 5px #000;
i{
position: relative;
top: -5px;
}
}
}
//
.course_warp{
padding-bottom: 20px;
.course_directory2{
.course_item{
.course_row{
display: flex;
align-items: center;
padding:3px 10px;
margin-bottom: 10px;
&:hover{
background-color: #f5f7fa;
cursor: pointer;
}
div+div{
margin-left: 10px;
}
.course_icon{
color: #c0c4cc;
font-size: 12px;
width: 12px;
height: 14px;
display: block;
}
.course_play{
color: #565656;
font-size: 16px;
width: 16px;
height:15px;
display: block;
}
.course_number{
background-color: #e0f2ff;
font-size: 13px;
text-align: center;
padding: 4px 5px;
border-radius: 4px;
}
.course_input{
width: 300px;
font-size: 13px;
}
}
.course_subrow{
display: flex;
align-items: center;
padding:3px 40px;
margin-bottom: 10px;
&:hover{
background-color: #f5f7fa;
cursor: pointer;
}
div+div{
margin-left: 10px;
}
.course_icon{
color: #c0c4cc;
font-size: 12px;
width: 12px;
height: 14px;
display: block;
}
.course_play{
color: #565656;
font-size: 16px;
width: 16px;
height:15px;
display: block;
}
.course_number{
background-color: #e0f2ff;
font-size: 13px;
text-align: center;
padding: 4px 5px;
border-radius: 4px;
}
.course_input{
width: 270px;
font-size: 13px;
}
}
}
}
}
.release_style{
padding-left: 20px;
}

View File

@ -5,6 +5,7 @@
@import './sidebar.scss';
@import './btn.scss';
@import './custom.scss';
@import './business.scss';
body {
margin: 0;

View File

@ -15,10 +15,18 @@
</div>
</el-form-item>
<el-form-item label="标准项目" prop="CHECK_ITEM">
<el-select v-if="form.CHECK_CATEGORY_WAY === 'select'" v-model="form.CHECK_ITEM" placeholder="选择标准项目..." clearable style="width: 100%" class="filter-item">
<div class="uo-flex">
<el-select v-if="form.CHECK_ITEM_WAY === 'select'" v-model="form.CHECK_ITEM" placeholder="选择标准项目..." clearable style="width: 100%" class="filter-item">
<el-option v-for="item in checkItemList" :key="item.DICTIONARY_ID" :label="item.DICTIONARY_NAME" :value="item.DICTIONARY_ID" />
</el-select>
<el-input v-if="form.CHECK_CATEGORY_WAY === 'value'" id="leaPostVal" :disabled="form.CHECK_CATEGORY_WAY === 'select'" v-model="form.CHECK_ITEM" placeholder="这里输入新的标准项目..." />
<el-input v-if="form.CHECK_ITEM_WAY === 'value'" id="leaPostVal" :disabled="form.CHECK_ITEM_WAY === 'select'" v-model="form.CHECK_ITEM" placeholder="这里输入新的标准项目..." />
<el-button
:disabled="form.CHECK_CATEGORY_WAY === 'value'"
type="success"
style="margin-left: 5px;height: 32px;"
size="mini"
@click="changeEditItemWay">{{ form.CHECK_ITEM_WAY === 'select' ? '输入' : '选择' }}</el-button>
</div>
</el-form-item>
<el-form-item label="检查内容" prop="CHECK_CONTENT">
<el-input v-model="form.CHECK_CONTENT" :autosize="{ minRows: 1}" type="textarea" maxlength="500" placeholder="输入检查内容..." />
@ -91,6 +99,7 @@ export default {
COMMON_ITEM_ID: '',
COMMON_ID: this.$parent.COMMON_ID,
CHECK_CATEGORY_WAY: 'select',
CHECK_ITEM_WAY: 'select',
CHECK_CATEGORY: '',
CHECK_ITEM: '',
CHECK_CONTENT: '',
@ -139,11 +148,13 @@ export default {
this.tempData.CHECK_CATEGORY = e.form.CHECK_CATEGORY
this.tempData.CHECK_ITEM = e.form.CHECK_ITEM
this.$set(this.form, 'CHECK_CATEGORY_WAY', 'select')
this.$set(this.form, 'CHECK_ITEM_WAY', 'select')
}
console.log(this.form)
},
changeEditWay() {
this.form.CHECK_CATEGORY_WAY = this.form.CHECK_CATEGORY_WAY === 'select' ? 'value' : 'select'
this.form.CHECK_ITEM_WAY = this.form.CHECK_CATEGORY_WAY
if (this.form.CHECK_CATEGORY_WAY === 'select') {
this.form.CHECK_CATEGORY = this.tempData.CHECK_CATEGORY
this.form.CHECK_ITEM = this.tempData.CHECK_ITEM
@ -152,6 +163,14 @@ export default {
this.form.CHECK_ITEM = ''
}
},
changeEditItemWay() {
this.form.CHECK_ITEM_WAY = this.form.CHECK_ITEM_WAY === 'select' ? 'value' : 'select'
if (this.form.CHECK_ITEM_WAY === 'select') {
this.form.CHECK_ITEM = this.tempData.CHECK_ITEM
} else {
this.form.CHECK_ITEM = ''
}
},
changeCategory() {
this.form.CHECK_ITEM = ''
this.checkItemList = []
@ -162,9 +181,36 @@ export default {
})
this.$forceUpdate()
},
confirm() {
this.$refs.form.validate(valid => {
async confirm() {
this.$refs.form.validate(async valid => {
if (valid) {
if (this.form.CHECK_CATEGORY_WAY === 'value') {
const { count } = await requestFN(
'/hiddenDangerCheckStandardDictionary/validateExist',
{
DICTIONARY_NAME: this.form.CHECK_CATEGORY,
DICTIONARY_LEVEL: 1
}
)
if (count > 0) {
this.$message.warning('新标准类别名称已存在!')
return
}
}
if (this.form.CHECK_ITEM_WAY === 'value') {
const { count } = await requestFN(
'/hiddenDangerCheckStandardDictionary/validateExist',
{
DICTIONARY_NAME: this.form.CHECK_ITEM,
PARENT_ID: this.form.CHECK_CATEGORY,
DICTIONARY_LEVEL: 2
}
)
if (count > 0) {
this.$message.warning('新标准项目名称已存在!')
return
}
}
this.loading = true
requestFN(
'/hiddenDangerCheckStandardCommon/' + this.dialogType,

View File

@ -1,9 +1,9 @@
<template>
<div class="app-container">
<div class="filter-container">
<div class="filter-row mb-10">
<div class="app-warp">
<div class="app-structure">
<div class="app-search">
<el-form label-width="80px">
<el-row :gutter="20">
<el-row>
<el-col :span="6">
<el-form-item label="行业类型">
<cascader-dict
@ -13,14 +13,12 @@
/>
</el-form-item>
</el-col>
<el-col :span="7">
<el-col :span="6">
<el-form-item label="标准名称">
<el-input v-model="searchForm.CHECK_STANDARD_NAME" placeholder="搜索标准名称..." class="filter-item" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6">
<el-col v-show="!searchFromCollapse" :span="6">
<el-form-item label="导入时间">
<el-date-picker
v-model="searchForm.CREATE_TIME"
@ -32,32 +30,37 @@
value-format="yyyy-MM-dd"/>
</el-form-item>
</el-col>
<el-col :span="5">
<el-col v-show="!searchFromCollapse" :span="6">
<el-form-item label="状态">
<el-select v-model="searchForm.COMMON_STATUS" placeholder="状态" clearable style="width: 100%" class="filter-item">
<el-option v-for="item in commonStatusList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6" >
<el-form-item label-width="10px">
<el-col :span="!searchFromCollapse ? 24 : 12" >
<el-form-item style="text-align: right">
<el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="getQuery">
搜索
</el-button>
<el-button v-waves class="filter-item" type="success" icon="el-icon-refresh-left" @click="resetting">
重置
</el-button>
<el-button type="text" @click="searchFromCollapse = !searchFromCollapse">{{ searchFromCollapse ? '展开' : '合并' }} <i :class="searchFromCollapse ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"/></el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div class="filter-flot">
<el-button v-waves class="filter-item" type="primary" icon="el-icon-document-add" @click="importExcel('import')">
<div class="app-tools">
<div class="app-function">
<el-button v-show="add" type="primary" icon="el-icon-plus" size="mini" @click="handleAdd"></el-button>
<el-button v-show="false" type="danger" icon="el-icon-delete" size="mini" plain @click="batchDel"></el-button>
<el-button type="primary" icon="el-icon-document-add" size="mini" @click="importExcel('import')">
导入标准表
</el-button>
</div>
</div>
<div class="app-container">
<el-table
v-loading="listLoading"
ref="multipleTable"
@ -70,8 +73,7 @@
tooltip-effect="dark"
border
fit
highlight-current-row
>
highlight-current-row>
<el-table-column :reserve-selection="true" type="selection" width="55" align="center"/>
<el-table-column type="index" label="序号" width="50" align="center" />
<el-table-column prop="INDUSTRY_TYPE_NAMES" label="行业类型" >
@ -102,12 +104,11 @@
</el-table-column>
</el-table>
<div class="page-btn-group">
<div>
<el-button v-show="add" type="primary" icon="el-icon-plus" @click="handleAdd"></el-button>
<el-button v-show="false" type="danger" icon="el-icon-delete" plain @click="batchDel"></el-button>
</div>
<div />
<pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
</div>
</div>
</div>
<edit ref="edit" :title="title" href="edit" @beforeClose="getList"/>
<info ref="info" :title="title"/>
<update-file ref="updateFile" @logical-end="getResult"/>
@ -144,6 +145,7 @@ export default {
{ id: 1, name: '有效' },
{ id: 2, name: '停用' }
],
searchFromCollapse: true,
searchForm: {
INDUSTRY_TYPE_ARR: [],
INDUSTRY_TYPE_TREE: '',