dataease/frontend/src/components/deViewSelect/index.vue

<template>
  <div
    class="el-view-select"
    :class="selectClass"
  >
    <el-select
      ref="select"
      v-model="innerValues"
      popper-class="view-select-option"
      style="width: 100%;"
      multiple
      clearable
      @remove-tag="_selectRemoveTag"
      @clear="_selectClearFun"
      @focus="_popoverShowFun"
    >
      <el-option
        v-for="item in selectOptions"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      />
    </el-select>

    <el-dialog
      :visible="dialogShow"
      :show-close="false"
      class="dialog-css"
      :fullscreen="true"
    >
      <div
        v-if="dialogShow && viewLoaded"
        ref="contaninerDiv"
        :style="{'height': panelHeight + 'px'}"
      >
        <Preview
          :component-data="mainCanvasComponentData"
          :canvas-style-data="canvasStyleData"
          :panel-info="panelInfo"
          :show-position="showPosition"
        />
      </div>

      <div
        slot="title"
        class="dialog-footer title-text"
      >
        <span style="font-size: 14px;">
          选择视图
        </span>
        <span style="float: right;">
          <el-button
            type="primary"
            size="mini"
            @click="sureDialog()"
          >{{ $t('commons.confirm') }}</el-button>
          <el-button
            size="mini"
            @click="cancelDialog()"
          >{{ $t('commons.cancel') }}</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Preview from '@/components/canvas/components/editor/Preview'
import { findOne } from '@/api/panel/panel'
import { viewOptions } from '@/api/chart/chart'
import { panelDataPrepare } from '@/components/canvas/utils/utils'

export default {
  name: 'DeViewSelect',
  components: { Preview },
  props: {
    value: {
      type: Array,
      default: () => []
    },
    panelId: {
      type: String,
      default: null
    }

  },
  data() {
    return {
      componentData: [],
      canvasId: 'canvas-main',
      visible: false,
      placement: 'bottom',
      transition: 'el-zoom-in-top',
      width: 500,
      selectClass: 'my-top-class',
      innerValues: [],
      panelHeight: 450,
      showPosition: 'email-task',
      viewLoaded: false,
      selectOptions: [],
      dialogShow: false,
      idsBeforeOpen: []
    }
  },
  computed: {
    mainCanvasComponentData() {
      return this.componentData.filter(item => item.canvasId === this.canvasId)
    },
    popperClass() {
      const _c = 'el-view-select-popper ' + this.popoverClass
      return this.disabled ? _c + ' disabled ' : _c
    },
    selectedViews() {
      return this.$store.getters.panelViews[this.panelId]
    }
  },
  watch: {
    value(val, old) {
      this.innerValues = val
    },
    panelId(val, old) {
      if (val !== old) {
        this.innerValues = []
        this.loadView()
      }
    }
  },
  mounted() {
    this._updateH()
  },
  beforeDestroy() {
    this._selectClearFun()
  },
  created() {
    this.loadView()
  },
  methods: {
    loadView() {
      this.innerValues = this.value
      this.viewLoaded = false
      this.panelId && findOne(this.panelId).then(response => {
        const watermarkInfo = {
          ...response.data.watermarkInfo,
          settingContent: JSON.parse(response.data.watermarkInfo.settingContent)
        }
        this.panelInfo = {
          id: response.data.id,
          name: response.data.name,
          privileges: response.data.privileges,
          sourcePanelName: response.data.sourcePanelName,
          status: response.data.status,
          createBy: response.data.createBy,
          createTime: response.data.createTime,
          updateBy: response.data.updateBy,
          updateTime: response.data.updateTime,
          watermarkOpen: response.data.watermarkOpen,
          watermarkInfo: watermarkInfo
        }
        this.$store.dispatch('panel/setPanelInfo', this.panelInfo)
        panelDataPrepare(JSON.parse(response.data.panelData), JSON.parse(response.data.panelStyle), rsp => {
          this.viewLoaded = true
          this.componentData = rsp.componentData
          this.$store.commit('setPreviewComponentData', this.componentData)
          this.canvasStyleData = rsp.componentStyle
          this.loadOptions()
        })
      })
    },

    loadOptions() {
      this.panelId && viewOptions(this.panelId).then(res => {
        this.selectOptions = res.data
        this.innerValues?.length && this.selectOptions?.length && this.innerValues.filter(viewId => !this.selectOptions.some(option => option.id === viewId)).forEach(item => {
          this._selectRemoveTag(item)
        })
        this.init()
      })
    },
    _updateH() {
      this.$nextTick(() => {
        if (this.$refs.contaninerDiv) {
          this.width = this.$refs.contaninerDiv.clientWidth
          this.panelHeight = this.width * 9 / 16
        }
      })
    },
    _popoverShowFun(val) {
      this.openDialog()
      this._updateH()
      this.$emit('onFocus')
    },

    _selectRemoveTag(viewId) {
      this.$store.getters.panelViews[this.panelId].forEach(item => {
        if (item === viewId) {
          this.$store.dispatch('task/delView', { 'panelId': this.panelId, 'viewId': item })
        }
      })
      const viewIds = JSON.parse(JSON.stringify(this.$store.getters.panelViews[this.panelId]))
      this.$emit('input', viewIds)
    },
    _selectClearFun() {
      this.$store.dispatch('task/delPanelViews', this.panelId)
      let viewIds = []
      if (this.$store.getters.panelViews?.[this.panelId]) {
        viewIds = JSON.parse(JSON.stringify(this.$store.getters.panelViews[this.panelId]))
      }
      this.$emit('input', viewIds)
    },

    init() {
      if (this.value && this.value.length) {
        const viewIds = JSON.parse(JSON.stringify(this.value))
        this.$store.dispatch('task/initPanelView', { 'panelId': this.panelId, 'viewIds': viewIds })
      }
    },
    openDialog() {
      if (this.value && this.value.length) {
        this.idsBeforeOpen = JSON.parse(JSON.stringify(this.value))
      }
      this.dialogShow = true
    },
    closeDialog() {
      this.dialogShow = false
    },
    sureDialog() {
      this.innerValues = JSON.parse(JSON.stringify(this.$store.getters.panelViews[this.panelId]))
      this.$emit('input', this.innerValues)
      this.closeDialog()
    },
    cancelDialog() {
      this.innerValues = JSON.parse(JSON.stringify(this.idsBeforeOpen))
      const viewIds = JSON.parse(JSON.stringify(this.innerValues))
      this.$store.dispatch('task/initPanelView', { 'panelId': this.panelId, 'viewIds': viewIds })
      this.closeDialog()
    }
  }

}
</script>

<style lang="scss" scoped>
.el-view-select .view-select-option {
  display: none !important;
}

.my-top-class {
  width: 100%;
}

.dialog-css ::v-deep .el-dialog__title {
  font-size: 14px;
}

.dialog-css ::v-deep .el-dialog__header {
  padding: 20px 20px 0;
}

.dialog-css ::v-deep .el-dialog__body {
  padding: 10px 20px 20px;
}
</style>