kouan-screen/src/components/cus/CusContent.vue

<template>
  <div class="cus-content" :class="{'cus-content-full': full !== false}">
    <div name="cus-table-resize-dom" class="cc-top-slot" v-if="$slots.top">
      <slot name="top"/>
    </div>
    <div name="cus-table-resize-dom" class="cc-field-out" id="field-out" v-if="$slots.fieldOut">
      <div class="field-out-slot cus-content-form">
        <slot name="fieldOut"/>
      </div>
    </div>
    <div name="cus-table-resize-dom" class="cc-center-slot" v-if="$slots.center">
      <slot name="center"/>
    </div>
    <div name="cus-table-resize-dom" class="cc-bottom">
      <div id="operation" class="operation" v-if="$slots.buttons || noFilter === false">
        <div class="table-title">
          <slot name="tableTitle"/>
        </div>
        <div class="buttons">
          <slot name="buttons"/>
        </div>
        <div class="filters" v-if="noFilter === false">
          <div class="tools __hover" @click="showFieldColumn = true">
            <SvgIcon name="cus-content_tools" size="18" color="#666666"/>
          </div>
<!--          <el-dropdown :teleported="false">-->
<!--            <div class="tools __hover">-->
<!--              <SvgIcon name="cus-content_tools" size="18" color="#666666"/>-->
<!--            </div>-->
<!--            <template #dropdown>-->
<!--              <el-dropdown-menu>-->
<!--                <el-dropdown-item @click="showFieldIn = true" v-if="$slots.fieldIn" style="width: 170px;">-->
<!--                  <div class="tools-item">-->
<!--                    <svg-icon name="cus-content_field-in" size="18"/>高级筛选-->
<!--                  </div>-->
<!--                </el-dropdown-item>-->
<!--                <el-dropdown-item @click="showFieldColumn = true">-->
<!--                  <div class="tools-item">-->
<!--                    <svg-icon name="cus-content_field-column" size="18"/>字段筛选-->
<!--                  </div>-->
<!--                </el-dropdown-item>-->
<!--                <el-dropdown-item>-->
<!--                  <div class="tools-item" @click="showContentFixed = true">-->
<!--                    <svg-icon name="cus-content_field-fixed" size="18"/>冻结窗格-->
<!--                  </div>-->
<!--                </el-dropdown-item>-->
<!--              </el-dropdown-menu>-->
<!--            </template>-->
<!--          </el-dropdown>-->
        </div>
        <div class="filters-right" :style="`margin-left : ${(noFilter === false || $slots.buttons) ? 10 : 0}px`">
          <slot name="filtersRight"/>
        </div>
      </div>
      <div id="table" class="table">
        <slot name="table"/>
      </div>
    </div>
    <el-dialog
        v-model="showFieldIn"
        width="566px"
        align-center
        modal-class="field-dialog"
        :close-on-click-modal="false"
        :show-close="false"
    >
      <template #header>
        <span>高级筛选设置</span>
        <SvgIcon class="__hover" name="close_2" size="16" @click="showFieldIn = false"/>
      </template>
      <div class="field-in-slot">
        <slot name="fieldIn"/>
      </div>
      <template #footer>
        <div class="buttons">
          <div class="cancel __hover" @click="showFieldIn = false">取消</div>
          <div class="submit __hover" @click="$emit('handleSearch'), showFieldIn = false">确定</div>
        </div>
      </template>
    </el-dialog>
    <el-dialog
        v-model="showFieldColumn"
        width="790px"
        align-center
        modal-class="field-dialog"
        :close-on-click-modal="false"
        :show-close="false"
    >
      <template #header>
        <span>字段筛选设置</span>
        <SvgIcon class="__hover" name="close_2" size="16" @click="showFieldColumn = false"/>
      </template>
      <div class="field-column">
        <div class="fc-block fc-all">
          <div class="fcb-title">全部字段</div>
          <div class="fcb-content">
            <div class="fcbc-filter">
              <el-input v-model="columnAllInputFilter" placeholder="请输入关键词..." clearable>
                <template #suffix>
                  <SvgIcon name="search"/>
                </template>
              </el-input>
            </div>
            <div class="fcbc-list">
              <template v-for="(item, index) in tableHeadTempDeep.filter(v => v.allLabel.includes(columnAllInputFilter))" :key="item.allLabel">
                <div class="table-head-item __hover" @click="item.show = !item.show">
                  <div class="check" :class="{active: item.show}"/>
                  <CusEllipsis class="label" :value="item.allLabel"/>
                </div>
              </template>
            </div>
            <div class="fcbc-bottom">
              <div>共 {{ tableHeadTempDeep.length }} 条</div>
              <div class="__hover" @click="handleCheckAllChange">
                <div class="check" :class="{active: columnIsAllCpt}"/>全选
              </div>
            </div>
          </div>
        </div>
        <div class="fc-block fc-select">
          <div class="fcb-title">已选字段</div>
          <div class="fcb-content">
            <div class="fcbc-filter">
              <el-input v-model="columnSelectInputFilter" placeholder="请输入关键词..." clearable>
                <template #suffix>
                  <SvgIcon name="search"/>
                </template>
              </el-input>
            </div>
            <div class="fcbc-list">
              <template v-for="(item, index) in tableHeadTempDeep.filter(v => v.show && v.allLabel.includes(columnSelectInputFilter))" :key="item.allLabel">
                <div class="table-head-select-item">
                  <SvgIcon name="cus-content_field-column-select" size="12" color="#e4e4e4"/>
                  <CusEllipsis class="label" :value="item.allLabel"/>
                  <SvgIcon class="__hover" name="close_2" size="12" color="#e4e4e4" @click="item.show = false"/>
                </div>
              </template>
            </div>
            <div class="fcbc-bottom">
              <div>已选 {{ tableHeadTempDeep.filter(v => v.show).length }} 条</div>
              <div v-if="tableHeadTempDeep.filter(v => v.show).length > 0" @click="tableHeadTempDeep.forEach(v => v.show = false)" class="clear __hover">清空</div>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="buttons">
          <div class="cancel __hover" @click="showFieldColumn = false">取消</div>
          <div class="submit __hover" @click="$emit('update:tableHead', tableHeadTemp), showFieldColumn = false">确定</div>
        </div>
      </template>
    </el-dialog>
    <el-dialog
        v-model="showContentFixed"
        width="790px"
        align-center
        modal-class="field-dialog"
        :close-on-click-modal="false"
        :show-close="false"
    >
      <template #header>
        <span>表格冻结</span>
        <SvgIcon class="__hover" name="close_2" size="16" @click="showContentFixed = false"/>
      </template>
      <div class="content-fixed">
        <div class="cf-item">
          <el-checkbox v-model="tempContentFixed.full">内容</el-checkbox>
        </div>
        <div class="cf-item">
          <el-checkbox v-model="tempContentFixed.leftFixed">表格左侧</el-checkbox>
        </div>
        <div class="cf-item">
          <el-checkbox v-model="tempContentFixed.rightFixed">表格右侧</el-checkbox>
        </div>
      </div>
      <template #footer>
        <div class="buttons">
          <div class="cancel __hover" @click="showContentFixed = false">取消</div>
          <div class="submit __hover" @click="handleContentFixed">确定</div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
  import {
    defineComponent,
    computed,
    onMounted,
    ref,
    reactive,
    watch,
    getCurrentInstance,
    ComponentInternalInstance,
    toRefs
  } from 'vue'

  export default defineComponent({
    name: 'CusContent',
    components: {},
    props: {
      tableHead: {
        default: () => []
      },
      text: {},
      showText: {
        default: false
      },
      searchTip: {
        default: '请输入查询关键词'
      },
      full: {
        default: false
      },
      noFilter: {
        default: false
      }
    },
    setup(props, { emit }) {
      const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
      const state = reactive({
        textTemp: '',
        showFieldIn: false,
        showFieldColumn: false,
        showContentFixed: false,
        columnAllInputFilter: '',
        columnSelectInputFilter: '',
        tableHeadTemp: [],
        contentFixed: {
          full: props.full,
          leftFixed: true,
          rightFixed: true
        },
        tempContentFixed: {
          full: props.full,
          leftFixed: true,
          rightFixed: true
        }
      });
      watch(() => props.text, (nV: any) => {
        state.textTemp = nV
      })
      watch(() => state.showFieldColumn, (n) => {
        if (n) {
          state.tableHeadTemp = JSON.parse(JSON.stringify(props.tableHead))
        }
      })
      watch(() => state.showContentFixed, (n) => {
        if (n) {
          state.tempContentFixed = JSON.parse(JSON.stringify(state.contentFixed))
        }
      })
      const tableHeadTempDeep = computed(() => {
        const list: any = []
        const deep = (arr: any[], pLabel: string = '') => {
          arr.forEach(v => {
            v.allLabel = pLabel ? `${pLabel}-${v.label}` : v.label
            if (!v.tempFixed && v.fixed) {
              v.tempFixed = JSON.parse(JSON.stringify(v.fixed))
            }
            if (v.children && v.children.length > 0) {
              deep(v.children, v.allLabel)
            } else {
              list.push(v)
            }
          })
        }
        deep(state.tableHeadTemp)
        return list
      })

      const columnIsAllCpt = computed(() => {
        return tableHeadTempDeep.value.every(v => v.show)
      })

      const handleCheckAllChange = () => {
        if (columnIsAllCpt.value) {
          tableHeadTempDeep.value.forEach(v => {
            v.show = false
          })
        } else {
          tableHeadTempDeep.value.forEach(v => {
            v.show = true
          })
        }
      }
      const handleContentFixed = () => {
        state.contentFixed = JSON.parse(JSON.stringify(state.tempContentFixed))
        tableHeadTempDeep.value.forEach((v: any) => {
          if (v.tempFixed === 'left') {
            v.fixed = state.contentFixed.leftFixed ? 'left' : false
          } else if (v.tempFixed === 'right') {
            v.fixed = state.contentFixed.rightFixed ? 'right' : false
          }
        })
        emit('update:full', state.contentFixed.full)
        emit('update:tableHead', state.tableHeadTemp)
        state.showContentFixed = false
      }
      onMounted(() => {
        state.tableHeadTemp = JSON.parse(JSON.stringify(props.tableHead))
        state.tempContentFixed = JSON.parse(JSON.stringify(state.contentFixed))
      })
      return {
        ...toRefs(state),
        tableHeadTempDeep,
        handleCheckAllChange,
        columnIsAllCpt,
        handleContentFixed
      }
    },
  })
</script>

<style scoped lang="scss">
  .cus-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #F5FBFF;
    box-sizing: border-box;
    .cc-top-slot {
      background-color: #FFFFFF;
    }
    .cc-field-out {
      border-radius: 8px 8px 0 0;
      background-color: #FFFFFF;
      height: auto;
      padding: 14px 24px 0 0;
      .field-out-slot {
        flex: 1;
        :deep(.el-form-item) {
          margin-bottom: 12px;
        }
      }
    }
    .cc-center-slot {
      margin-bottom: 10px;
      background-color: #FFFFFF;
    }
    .cc-bottom {
      border-radius: 0 0 8px 8px;
      background-color: #FFFFFF;
      flex: 1;
      z-index: 1;
      display: flex;
      flex-direction: column;
      padding: 12px 16px;
      .operation {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
        .table-title {
          margin-right: auto;
          display: flex;
          align-items: center;
        }
        .buttons {
          margin-left: auto;
          display: flex;
          :deep(>*) {
            margin-right: 10px;
          }
        }
        .filters {
          height: 36px;
          display: flex;
          align-items: center;
          :deep(.el-dropdown) {
            .tools {
              width: 36px;
              height: 36px;
              box-sizing: border-box;
              border-radius: 4px;
              border: 1px solid #E4E4E4;
              display: flex;
              align-items: center;
              justify-content: center;
            }
            .el-dropdown-menu {
              padding: 8px 4px;
            }
            .el-dropdown-menu__item {
              padding: 0;
              .tools-item {
                padding: 0 8px;
                display: flex;
                align-items: center;
                width: 170px;
                height: 40px;
                box-sizing: border-box;
                .svg-icon {
                  margin-right: 8px;
                }
              }
            }
          }
        }
      }
      .table {
        flex: 1;
        z-index: 1;
        display: flex;
      }
    }
    :deep(.field-dialog) {
      .el-overlay-dialog {
        overflow: hidden;
        .el-dialog {
          border-radius: 8px;
          .el-dialog__header {
            padding: 30px 28px 38px 28px;
            margin: 0;
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #333333;
            display: flex;
            justify-content: space-between;
          }
          .el-dialog__body {
            padding: 0 28px;
          }
          .el-dialog__footer {
            padding: 22px 28px 20px 28px;
            .buttons {
              width: 100%;
              display: flex;
              justify-content: flex-end;
              >div {
                display: flex;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;
              }
              .cancel {
                margin-right: 10px;
                width: 72px;
                height: 36px;
                background: #F8F8F8;
                border: 1px solid #E4E4E4;
                border-radius: 4px;
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #999999;
              }
              .submit {
                width: 72px;
                height: 36px;
                background: #0062E9;
                border-radius: 4px;
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #FFFFFF;
              }
            }
          }
        }
      }
    }
    .field-column {
      display: flex;
      justify-content: space-between;
      .fc-block {
        .fcb-title {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #666666;
          margin-bottom: 18px;
        }
        .fcb-content {
          height: 488px;
          border: 1px solid #E4E4E4;
          border-radius: 4px;
          display: flex;
          flex-direction: column;
          .fcbc-filter {
            padding: 10px 12px 0 12px;
          }
          .check {
            width: 18px;
            height: 18px;
            box-sizing: border-box;
            border: 1px solid #d3d3d3;
            border-radius: 2px;
            margin: 0 10px;
            cursor: pointer;
            font-size: 16px;
            &.active {
              background-color: #6587ff;
              border-color: #6587ff;
              display: grid;
              place-items: center;
              &:after {
                content: '✔';
                color: #ffffff;
                font-size: 14px;
              }
            }
            &:hover {
              opacity: 0.8;
            }
          }
          .fcbc-bottom {
            margin-top: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 40px;
            min-height: 40px;
            background: #FFFFFF;
            border-top: 1px solid #E4E4E4;
            border-radius: 0px 0px 4px 4px;
            padding: 0 10px 0 12px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #666666;
            box-sizing: border-box;
          }
        }
        &.fc-all {
          width: 480px;
          .fcbc-list {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            padding: 20px 12px;
            row-gap: 22px;
            column-gap: 30px;
            overflow-y: auto;
            .table-head-item {
              height: 18px;
              display: flex;
              align-items: center;
              line-height: 1;
              .label {
                width: 164px;
              }
            }
          }
          .fcbc-bottom {
            >div:nth-child(2) {
              display: flex;
              align-items: center;
              .check:after {
                transform: translateY(-2px);
              }
            }
          }
        }
        &.fc-select {
          width: 244px;
          .fcbc-list {
            overflow-y: auto;
            display: grid;
            row-gap: 26px;
            padding: 20px 12px;
            grid-template-columns: repeat(1, 1fr);
            .table-head-select-item {
              display: flex;
              align-items: center;
              .svg-icon:first-child {
                margin-right: 10px;
              }
              .label {
                width: 164px;
              }
              .svg-icon:last-child {
                margin-left: auto;
              }
            }
          }
          .fcbc-bottom {
            .clear {
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #0062E9;
            }
          }
        }
      }
    }
    &.cus-content-full {
      overflow-y: auto;
      position: absolute;
    }
  }
</style>