From 8ac26abb6186b2ccf4bc5ed8fd46dbfa20a9c099 Mon Sep 17 00:00:00 2001 From: wangpeng Date: Fri, 23 Feb 2024 14:05:51 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E9=80=9A=E7=94=A8=E6=A0=87=E5=87=86?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E4=BC=98=E5=8C=96=20=E6=A0=87=E5=87=86?= =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E5=8F=AF=E5=8D=95=E7=8B=AC=E6=96=B0=E5=BB=BA?= =?UTF-8?q?=20=E6=A0=87=E5=87=86=E7=B1=BB=E5=88=AB=EF=BC=8C=E6=A0=87?= =?UTF-8?q?=E5=87=86=E9=A1=B9=E7=9B=AE=E9=87=8D=E5=A4=8D=E6=A0=A1=E9=AA=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/business.scss | 502 ++++++++++++++++++ src/styles/index.scss | 1 + .../common/components/itemEdit.vue | 58 +- .../common/components/list.vue | 130 ++--- 4 files changed, 621 insertions(+), 70 deletions(-) create mode 100644 src/styles/business.scss diff --git a/src/styles/business.scss b/src/styles/business.scss new file mode 100644 index 0000000..8aaccfa --- /dev/null +++ b/src/styles/business.scss @@ -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; +} diff --git a/src/styles/index.scss b/src/styles/index.scss index fa42f47..90dc022 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -5,6 +5,7 @@ @import './sidebar.scss'; @import './btn.scss'; @import './custom.scss'; +@import './business.scss'; body { margin: 0; diff --git a/src/views/hiddenDangerCheckStandardLibrary/common/components/itemEdit.vue b/src/views/hiddenDangerCheckStandardLibrary/common/components/itemEdit.vue index a0e23b0..a1ae335 100644 --- a/src/views/hiddenDangerCheckStandardLibrary/common/components/itemEdit.vue +++ b/src/views/hiddenDangerCheckStandardLibrary/common/components/itemEdit.vue @@ -15,10 +15,18 @@ - - - - +
+ + + + + {{ form.CHECK_ITEM_WAY === 'select' ? '输入' : '选择' }} +
@@ -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, diff --git a/src/views/hiddenDangerCheckStandardLibrary/common/components/list.vue b/src/views/hiddenDangerCheckStandardLibrary/common/components/list.vue index 435984b..f1af32a 100644 --- a/src/views/hiddenDangerCheckStandardLibrary/common/components/list.vue +++ b/src/views/hiddenDangerCheckStandardLibrary/common/components/list.vue @@ -1,9 +1,9 @@