1.安灯设置静态页面实现部分

loulijun2021

2022-10-17 329de8a777dbc880bc495559fc3aae51963663fb

 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>