ncs_board_ssr/components/mixinnew.js

import dragtool from './templates/DragTool'
import { unix2Date, unix2DateWithTimeZone } from '@/utils/Foundation'
export default {
  props: {
    /** 模块设计数据 */
    data: {
      type: Object,
      default: () => ({})
    },
    /** 是否为编辑模式 */
    isEdit: {
      type: Boolean,
      default: false
    },
    /** 模块绑定数据  **/
    bindData: {
      type: Object,
      default: () => ({})
    },
    /** 床位数据数组索引 */
    childDataIndex: {
      type: Number,
      default: 0
    },
    // /** 科室统计信息*/
    // statisticData: {
    //   type: Object,
    //   default: () => ({})
    // },
    // /** 自定义看板项目*/
    // boardCustomerItems: {
    //   type: Array,
    //   default: ([])
    // },
    /** 动画驱动**/
    show: {
      type: Boolean,
      default: true
    }
  },
  components: {
    dragtool
  },

  computed: {
    moduleComputedStyle() {
      let backgroundColorNurse = ''
      let borderColorNurse = ''
      let boxShadow = ''
      if (this.data.moduleConfig.styleConfig.borderColorWithNurse && this.data.moduleConfig.styleConfig.borderColorWithNurse !== '') {
        const nurseId = this.data.moduleConfig.styleConfig.borderColorWithNurse.replace('nurse_color_', '')
        if(this.bindData.items[this.childDataIndex]['list']) {
          const nurseOption = this.bindData.items[this.childDataIndex]['list'].filter(p => p.nurse_config === parseInt(nurseId))[0]
          if (nurseOption) {
            borderColorNurse = '#' + nurseOption.nurse_color_rbg
          }
        }
      }
      if (this.data.moduleConfig.styleConfig.backgroundColorWithNurse && this.data.moduleConfig.styleConfig.backgroundColorWithNurse !== '') {
        const nurseId = this.data.moduleConfig.styleConfig.backgroundColorWithNurse.replace('nurse_color_', '')
        if(this.bindData.items[this.childDataIndex]['list']){
        const nurseOption = this.bindData.items[this.childDataIndex]['list'].filter(p => p.nurse_config === parseInt(nurseId))[0]
        if (nurseOption) {
          backgroundColorNurse = '#' + nurseOption.nurse_color_rbg
        }
        }
      }

      if (this.data.moduleConfig.styleConfig.backgroundColorToday && this.data.moduleConfig.styleConfig.backgroundColorToday !== '') { // 设置日期等于当天的颜色
        if (this.displayText === unix2DateWithTimeZone(new Date().getTime(), this.data.moduleConfig.dataConfig.textFormat)) {
          backgroundColorNurse = this.data.moduleConfig.styleConfig.backgroundColorToday
        }
      }
      if (this.data.moduleConfig.styleConfig.boxShadowShow) {
        boxShadow = '1px 1px 3px 1px #eee'
        if (this.data.moduleConfig.styleConfig.boxShadowColor && this.data.moduleConfig.styleConfig.boxShadowColor !== '') {
          boxShadow = '1px 1px 3px 1px ' + this.data.moduleConfig.styleConfig.boxShadowColor
        }
      }

      return { ...this.data.moduleConfig.moduleStyle,
        borderColor: (borderColorNurse === '' ? this.data.moduleConfig.moduleStyle.borderColor : borderColorNurse),
        backgroundColor: (backgroundColorNurse === '' ? this.data.moduleConfig.moduleStyle.backgroundColor : backgroundColorNurse),
        boxShadow: boxShadow }
    },
    titleComputedStyle() { // 显示单元标题样式计算
      let titleColor = ''
      if (this.data.moduleConfig.styleConfig.titleColorWithNurse && this.data.moduleConfig.styleConfig.titleColorWithNurse !== '') {
        const nurseId = this.data.moduleConfig.styleConfig.titleColorWithNurse.replace('nurse_color_', '')
        if(this.bindData.items[this.childDataIndex]['list']) {
          const nurseOption = this.bindData.items[this.childDataIndex]['list'].filter(p => p.nurse_config === parseInt(nurseId))[0]
          if (nurseOption) {
            titleColor = '#' + nurseOption.nurse_color_rbg
          }
        }
      }
      return { ...this.data.moduleConfig.titleStyle,
        color: (titleColor === '' ? this.data.moduleConfig.titleStyle.color : titleColor) }
    },
    textComputedStyle() { // 显示单元
      let textcolor = ''
      if (this.data.moduleConfig.styleConfig.textColorWithNurse && this.data.moduleConfig.styleConfig.textColorWithNurse !== '') {
        const nurseId = this.data.moduleConfig.styleConfig.textColorWithNurse.replace('nurse_color_', '')
        if(this.bindData.items[this.childDataIndex]['list']) {
          const nurseOption = this.bindData.items[this.childDataIndex]['list'].filter(p => p.nurse_config === parseInt(nurseId))[0]
          if (nurseOption) {
            textcolor = '#' + nurseOption.nurse_color_rbg
          }
        }
      }
      if (this.data.moduleConfig.styleConfig.textColorToday && this.data.moduleConfig.styleConfig.textColorToday !== '') { // 设置日期等于当天的颜色
        if (this.displayText === unix2DateWithTimeZone(new Date().getTime(), this.data.moduleConfig.dataConfig.textFormat)) {
          textcolor = this.data.moduleConfig.styleConfig.textColorToday
        }
      }
      return {
        ...this.data.moduleConfig.textStyle,
        color: (textcolor === '' ? this.data.moduleConfig.textStyle.color : textcolor)
      }
    },
    containerComputedStyle() {
      if (this.data.moduleConfig.styleConfig.moduleFixed && !this.isEdit) {
        return {
          position: 'fixed',
          width: '100%',
          bottom: 0,
          left: 0
        }
      }
    }

  },

  data() {
    return {
      systemDate: new Date()
    }
  },
  mounted() {
    // let _this=this

    this.currentTime()
  },
  methods: {

    currentTime() {
      this.systemDate = new Date()
      setTimeout(this.currentTime, 1000)
    },

    /** 获取颜色相关信息 */
    colors(columnIndex = 0) {
      const _colors = this.data.columnList[columnIndex].titleColors
      return {
        title: `background-color: ${_colors[0]}; background-image: linear-gradient(90deg, ${_colors.join(',')});`,
        color: (colorIndex = 0) => `color: ${_colors[colorIndex]}`
      }
    },
    // /** 获取区块链接 */
    // blockHref(block) {
    //     const { opt_type, opt_value } = block.block_opt
    //     switch (opt_type) {
    //         // 链接地址
    //         case 'URL': return opt_value
    //         // 商品
    //         case 'GOODS': return `/goods/${opt_value}`
    //         // 关键字
    //         case 'KEYWORD': return `/goods?keyword=${encodeURIComponent(opt_value)}`
    //         // 店铺
    //         case 'SHOP': return `/shop/${opt_value}`
    //         // 分类
    //         case 'CATEGORY': return `/goods?category=${opt_value}`
    //         default: return '/'
    //     }
    // },
    /** 构建空的block */
    emptyBlock(num = 3, type) {
      return [...new Array(num)].map(() => ({
        block_type: type,
        block_value: '',
        block_opt: {
          opt_type: 'NONE',
          opt_value: ''
        }
      }))
    },
    /** 编辑区块 */
    handleEditBlock(columnIndex, blockIndex) {
      // console.log(JSON.stringify(this.data))
      this.$emit('edit-block', JSON.parse(JSON.stringify(this.data)), columnIndex, blockIndex)
    },
    /** 编辑标题 */
    handleEditTitle(columnIndex) {
      this.$emit('edit-title', JSON.parse(JSON.stringify(this.data)), columnIndex)
    },
    /** 编辑标签 */
    handleEditTags(columnIndex) {
      this.$emit('edit-tags', JSON.parse(JSON.stringify(this.data)), columnIndex)
    },

    deleteModule(unique) {
      // console.log('model delete', unique)
      this.$emit('remove', unique)
    },
    copyModule(unique) {
      this.$emit('copy', unique)
    },
    activeModule(unique) {
      this.$emit('active', unique)
    }

  }
}