From 329de8a777dbc880bc495559fc3aae51963663fb Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期一, 17 十月 2022 17:11:47 +0800
Subject: [PATCH] 1.安灯设置静态页面实现部分
---
src/views/jcsz/adsz.vue | 326 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 323 insertions(+), 3 deletions(-)
diff --git a/src/views/jcsz/adsz.vue b/src/views/jcsz/adsz.vue
index 17a92d8..319f824 100644
--- a/src/views/jcsz/adsz.vue
+++ b/src/views/jcsz/adsz.vue
@@ -1,11 +1,331 @@
-<template />
+<template>
+ <div>
+ <div class="body" :style="{height:mainHeight+'px'}">
+ <div class="body_left">
+ <div style="margin:10px 0">
+ <i class="el-icon-s-comment" style="color:#42b983;" /> 杞﹂棿淇℃伅锛�
+ </div>
+ <el-input
+ v-model="filterText"
+ placeholder="杈撳叆鍏抽敭瀛楄繘琛岃繃婊�"
+ style="margin-bottom: 20px"
+ />
+ <el-tree
+ ref="tree"
+ class="filter-tree"
+ :data="shopTree"
+ :props="defaultProps"
+ highlight-current
+ default-expand-all
+ :style="{height: contentHeight+'px',overflowY:'auto'}"
+ :filter-node-method="filterNode"
+ />
+ </div>
+ <div class="body_right">
+ <el-tabs type="border-card">
+ <el-tab-pane label="鐢ㄦ埛绠＄悊">
+ <div :style="{height: (contentHeight+51)+'px'}">
+ <div class="pane_top">
+ <div style="display: flex;align-items: center">
+ <div class="bar" />
+ <div>鍝嶅簲浜哄憳</div>
+ <el-button
+ icon="el-icon-circle-plus-outline"
+ style="height: 30px;line-height: 30px;color: #42b983;font-size: 22px;padding: 10px"
+ />
+ </div>
+ <div>
+ <el-checkbox v-model="allowClose">鍏佽鍏抽棴</el-checkbox>
+ </div>
+ </div>
+ <el-empty v-if="tags.length===0" :image-size="200" description="鏆傛棤鏁版嵁" />
+ <div v-else class="pane_content" :style="{maxHeight:contentHeight+'px',overflowY: 'scroll'}">
+ <el-tag
+ v-for="tag in tags"
+ :key="tag.name"
+ closable
+ type="success"
+ style="margin-right: 10px;margin-bottom: 10px"
+ @close="val=>tagClose(val,tag)"
+ >
+ {{ tag.name }}
+ </el-tag>
+
+ </div>
+ </div>
+ </el-tab-pane>
+ <el-tab-pane label="閰嶇疆绠＄悊">
+ <div :style="{height: (contentHeight+51)+'px'}">
+ 閰嶇疆绠＄悊
+ </div>
+ </el-tab-pane>
+ <el-tab-pane label="瑙掕壊绠＄悊">
+ <div :style="{height: (contentHeight+51)+'px'}">
+ 瑙掕壊绠＄悊
+ </div>
+ </el-tab-pane>
+ <el-tab-pane label="瀹氭椂浠诲姟琛ュ伩">
+ <div :style="{height: (contentHeight+51)+'px'}">
+ 瀹氭椂浠诲姟琛ュ伩
+ </div>
+ </el-tab-pane>
+ </el-tabs>
+ <el-button
+ style="position: absolute;top: 15px;right:10px;z-index: 1000"
+ icon="el-icon-setting"
+ @click="setting"
+ >鑷畾涔夊懠鍙被鍨�
+ </el-button>
+ </div>
+ </div>
+
+ </div>
+</template>
<script>
+
+import { ShopSearch } from '@/api/dzkb'
+import { AnDengTypeSearch } from '@/api/jcsz'
+
export default {
- name: 'Adsz'
+ name: 'Zzjg',
+
+ data() {
+ return {
+ mainHeight: 0,
+ contentHeight: 0,
+ filterText: '',
+ shopTree: [], // 鏍戝舰杞﹂棿
+ defaultProps: {
+ children: 'children',
+ label: 'org_name'
+ },
+ allowClose: true, // 鍏佽鍏抽棴
+ tags: [
+ { name: '鏍囩涓�' },
+ { name: '鏍囩浜�' },
+ { name: '鏍囩涓�' },
+ { name: '鏍囩鍥�' }
+ ]
+
+ }
+ },
+ watch: {
+ filterText(val) {
+ this.$refs.tree.filter(val)
+ }
+ },
+ created() {
+ this.handleRequest()
+ },
+ mounted() {
+ window.addEventListener('resize', this.getHeight)
+ this.getHeight()
+ },
+ methods: {
+ handleRequest() {
+ this.getShopSearch().then(res => {
+ if (res.code === '200') {
+ this.getAnDengTypeSearch()
+ }
+ })
+ },
+ async getShopSearch() {
+ const { data: res } = await ShopSearch()
+ this.shopTree = res
+ },
+ async getAnDengTypeSearch() {
+ // const { data: res } = await AnDengTypeSearch()
+ },
+
+ // 杩囨护鑺傜偣
+ filterNode(value, data) {
+ if (!value) return true
+ return data.label.indexOf(value) !== -1
+ },
+ // 鑷畾涔夊懠鍙被鍨�
+ setting() {
+
+ },
+ // tag鍏抽棴浜嬩欢
+ tagClose(val, tag) {
+ console.log(val, tag)
+ },
+
+ // 鑾峰彇椤甸潰楂樺害
+ getHeight() {
+ this.$nextTick(() => {
+ this.mainHeight = window.innerHeight - 85
+ this.contentHeight = this.mainHeight - 142
+ })
+ }
+
+ }
}
</script>
-<style scoped>
+<!--鏈〉闈㈠崟鐙牱寮�-->
+<style lang="scss" scoped>
+$main_color: #42b983;
+.body {
+ display: flex;
+ flex-direction: row;
+}
+.body_left {
+ width: 360px;
+ background-color: #fff;
+ margin: 10px 0;
+ padding: 10px;
+ flex-direction: column;
+}
+
+.body_right {
+ width: 100%;
+ background-color: #fff;
+ margin: 10px 0 10px 10px;
+}
+
+.pane_top{
+ background-color: #fafafa;
+ height: 50px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0 10px;
+ margin-bottom: 20px;
+ .bar{
+ width: 4px;
+ height: 20px;
+ border-radius: 2px;
+ background-color: $main_color;
+ margin-right: 10px;
+ }
+}
+.pane_content{
+ background-color: #fafafa;
+ padding: 10px;
+ min-height: 400px;
+}
+
+::v-deep .is-current>.el-tree-node__content{
+ background-color: $main_color;
+ font-weight: bolder;
+}
+</style>
+
+<!--鍏叡椤甸潰鏍峰紡-->
+<style lang="scss" scoped>
+$main_color: #42b983;
+
+::v-deep .el-button--text {
+ font-size: 14px;
+ cursor: pointer;
+}
+
+.el-icon-share, .el-icon-delete, .el-icon-edit-outline {
+ color: $main_color;
+ cursor: pointer;
+}
+
+.el-icon-edit-outline {
+ margin-right: 15px;
+}
+
+::v-deep .el-button--primary, .el-button--default, .el-button--info {
+ height: 34px;
+ display: flex;
+ align-items: center;
+ padding: 0 15px;
+}
+
+::v-deep .el-button--default {
+ background-color: #f8f8fa;
+ border: none;
+}
+
+::v-deep .el-input__inner {
+ height: 34px;
+ line-height: 34px;
+
+}
+
+::v-deep .el-dialog__body {
+ padding: 20px 100px !important;
+}
+
+::v-deep .dialogVisibleRoles .el-dialog__body {
+ padding: 20px 20px !important;
+}
+
+::v-deep .importPickerClass .el-dialog__body {
+ padding: 20px 20px !important;
+}
+
+::v-deep .el-dialog__footer {
+ display: flex;
+ justify-content: flex-end;
+}
+
+::v-deep .el-table .caret-wrapper {
+ transform: scale(0.8);
+}
+
+::v-deep .cell {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+::v-deep .el-table::before {
+ height: 0;
+}
+
+::v-deep .el-table__body-wrapper {
+ background-color: #f8f8fa;
+}
+
+::v-deep .el-table__body .el-table__row.hover-row td {
+ background-color: #eaecef;
+}
+
+::v-deep .el-form--inline .el-form-item__label {
+ color: #a7a7a7;
+}
+
+.body ::v-deep .el-divider {
+ border: 1px solid #eee;
+ width: 99%;
+ margin: 10px auto;
+}
+
+.body ::v-deep .el-form-item {
+ margin-bottom: 0;
+}
+
+.userDialogVisible ::v-deep .el-form-item {
+ margin-bottom: 0;
+}
+
+::v-deep .el-select__caret {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.tableFixed {
+ ::v-deep .el-table__fixed-right {
+ height: 100% !important;
+ }
+
+ ::v-deep .el-table__fixed {
+ height: 100% !important;
+ }
+}
+</style>
+
+<style>
+.el-table .custom-row {
+ background: #f8f8fa;
+}
</style>
--
Gitblit v1.9.3