data-room/data-room-ui/packages/BigScreenDesign/RightSetting/G2CustomSetting.vue

<template>
  <div class="bs-setting-wrap">
    <el-form
      ref="form"
      :model="config"
      :rules="customRules"
      label-width="120px"
      label-position="left"
      class="setting-body bs-el-form"
    >
      <SettingTitle>基础</SettingTitle>
      <div class="lc-field-body">
        <el-form-item
          label="标题"
          label-width="120px"
        >
          <el-input
            v-model="config.title"
            placeholder="请输入标题"
            clearable
          />
        </el-form-item>
      </div>
      <SettingTitle>位置</SettingTitle>
      <div class="lc-field-body">
        <PosWhSetting
          label-width="120px"
          :config="config"
        />
      </div>
      <template v-for="group in groupList">
        <div :key="group.groupName">
          <SettingTitle>   {{ group.groupName | filterGroupName }}</SettingTitle>
          <div class="lc-field-body">
            <div
              v-for="(setting, settingIndex) in group.list"
              :key="settingIndex+1"
            >
              <el-form-item
                :label="setting.type=== 'padding' ? '' : setting.label"
                :label-width="setting.type=== 'padding' ? '0px' :'120px'"
              >
                <el-input
                  v-if="setting.type === 'input'"
                  v-model="setting.value"
                  :placeholder="`请输入${setting.label}`"
                  clearable
                />
                <el-drag-select
                  v-else-if="setting.type === 'select'"
                  v-model="setting.value"
                  popper-class="bs-el-select"
                  class="bs-el-select"
                  :placeholder="`请选择${setting.label}`"
                  :multiple="setting.multiple"
                  clearable
                >
                  <el-option
                    v-for="(opt, optIndex) in setting.options"
                    :key="optIndex"
                    :label="opt.label"
                    :value="opt.value"
                  />
                </el-drag-select>
                <template v-else-if="setting.type === 'colorSelect'">
                  <color-select
                    v-model="colorScheme"
                    @update="updateColorScheme"
                  />
                  <div
                    style="
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                  "
                    class="color-picker-box"
                  >
                    <el-color-picker
                      v-for="(colorItem, colorItemIndex) in colors"
                      :key="colorItemIndex"
                      v-model="setting.value[colorItemIndex]"
                      popper-class="bs-el-color-picker"
                      show-alpha
                      class="start-color"
                    />
                    <span
                      class="el-icon-circle-plus-outline"
                      style="color: #007aff; font-size: 20px"
                      @click="addColor"
                    />
                    <span
                      v-if="colors.length"
                      class="el-icon-remove-outline"
                      style="color: #ea0b30; font-size: 20px"
                      @click="delColor()"
                    />
                  </div>
                </template>
                <el-color-picker
                  v-else-if="setting.type === 'colorPicker'"
                  v-model="setting.value"
                  popper-class="bs-el-color-picker"
                  show-alpha
                />
                <!-- 渐变色设置 -->
                <GradualSetting
                  v-else-if="setting.type === 'gradual'"
                  v-model="setting.value"
                />
                <el-input-number
                  v-else-if="setting.type === 'inputNumber'"
                  v-model="setting.value"
                  class="bs-el-input-number"
                  :step="setting.step || 1"
                  :min="setting.min || 0"
                  :max="setting.max || 100000"
                />
                <el-radio-group
                  v-else-if="setting.type === 'radio'"
                  v-model="setting.value"
                >
                  <template v-for="(opt, optIndex) in setting.options">
                    <el-radio-button
                      :key="optIndex"
                      :label="opt.value"
                    >
                      {{ opt.label }}
                    </el-radio-button>
                  </template>
                </el-radio-group>
                <el-switch
                  v-else-if="setting.type === 'switch'"
                  v-model="setting.value"
                />
                <el-switch
                  v-else-if="setting.type === 'switchNumber'"
                  v-model="setting.value"
                  :active-value="1"
                  :inactive-value="0"
                />
                <el-switch
                  v-else-if="setting.type === 'switchCustom'"
                  v-model="setting.value"
                  :active-value="setting.active"
                  :inactive-value="setting.inactive"
                />
                <el-slider
                  v-else-if="setting.type === 'slider'"
                  v-model="setting.value"
                  :min="0"
                  :max="1"
                  :step="0.01"
                />
                <PaddingSetting
                  v-else-if="setting.type === 'padding'"
                  v-model="setting.value"
                />
              </el-form-item>
            </div>
          </div>
        </div>
      </template>
      <!-- </div> -->
    </el-form>
  </div>
</template>
<script>
import ElDragSelect from 'packages/BigScreenDesign/RightSetting/ElDragSelect.vue'
import SettingTitle from 'packages/SettingTitle/index.vue'
import { chartSettingMixins } from 'packages/js/mixins/chartSettingMixins'
import ColorSelect from 'packages/ColorMultipleSelect/index.vue'
// import ColorPicker from 'packages/ColorPicker/index.vue'
import PaddingSetting from 'packages/BigScreenDesign/RightSetting/PaddingSetting/index.vue'
import GradualSetting from 'packages/BigScreenDesign/RightSetting/GradualSetting/index.vue'
import PosWhSetting from 'packages/BigScreenDesign/RightSetting/PosWhSetting.vue'
import _ from 'lodash'
export default {
  name: 'CustomComponentSetting',
  components: {
    ColorSelect,
    ElDragSelect,
    // ColorPicker,
    PaddingSetting,
    GradualSetting,
    PosWhSetting,
    SettingTitle
  },
  mixins: [chartSettingMixins],
  data () {
    return {
      groupList: []
    }
  },
  filters: {
    filterGroupName (val) {
      const settingGroup = {
        basic: '基础',
        position: '位置',
        graph: '图表',
        grid: '网格线',
        legend: '图例',
        xAxis: 'X轴',
        yAxis: 'Y轴',
        padding: '边距',
        other: '其他'

      }
      return settingGroup[val]
    }
  },
  computed: {
    config: {
      get () {
        return this.$store.state.bigScreen.activeItemConfig
      },
      set (val) {
        this.$store.commit('bigScreen/changeActiveItemConfig', val)
      }
    },
    appCode: {
      get () {
        return this.$store.state.bigScreen.pageInfo.appCode
      }
    },
    pageCode () {
      return this.$route.query.code
    }
  },
  watch: {
    groupList: {
      // 1、原数组，2、修改后的数组只包含custom，3、合并的时候xy的配置必须放在最前面
      handler (val) {
        const setList = [].concat(...val.map(item => item.list))
        const newSetList = [...this.config.setting, ...setList]
        let newArr = [] // 存新数组
        const hash = {}
        newArr = newSetList.reduce(function (acc, cru, index) {
          if (!hash[cru.field]) {
            hash[cru.field] = { index: index }
            acc.push(cru)
          } else {
            acc.splice(hash[cru.field].index, 1, cru)
          }
          return acc
        }, [])
        this.$store.commit('bigScreen/changeActiveItemConfig', { ...this.config, setting: newArr })
      },
      deep: true
    }
  },
  mounted () {
    this.init()
    const groupNameList = []
    this.config.setting.filter(
      (item) => item.tabName === 'custom'
    ).forEach(item => {
      if (item.tabName === 'custom' && item.groupName) {
        if (!groupNameList.includes(item.groupName)) {
          groupNameList.push(item.groupName)
          this.groupList.push({
            groupName: item.groupName,
            list: [item]
          })
        } else {
          this.groupList.find(group => group.groupName === item.groupName).list.push(item)
        }
      } else {
        if (this.groupList.find(group => group.groupName === 'other')) {
          this.groupList.find(group => group.groupName === 'other').list.push(item)
        } else {
          this.groupList.push({
            groupName: 'other',
            list: [item]
          })
        }
      }
    })
    for (let i = 0; i < this.groupList.length; i++) {
      if (this.groupList[i].groupName === 'other') {
        const otherObject = this.groupList.splice(i, 1)[0]
        this.groupList.push(otherObject)
        break
      }
    }
  },
  methods: {
    init () {
      this.config = this.$store.state.bigScreen.activeItemConfig
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../assets/style/settingWrap.scss';

// 筛选条件的按钮样式
.add-filter-box {
  position: relative;

  .add-filter {
    margin-left: 90px;
    margin-bottom: 10px;
  }

  .add-filter-btn {
    position: absolute;
    top: 0;
  }
}

.lc-field-body {
  padding:12px 16px;
}
.el-form-item{
  margin-bottom: 6px !important;
}
.lc-field-title {
  position: relative;
  padding-left: 12px;
  line-height: 30px;
  height: 30px;
  margin-bottom: 12px;
  &:after {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    content: '';
    width: 4px;
    height: 14px;
    background-color: var(--bs-el-color-primary);
  }
}

::v-deep .el-color-picker__trigger {
  border-color: var(--bs-el-border);
}
.color-picker-box{
  ::v-deep .el-color-picker__trigger {
    width: 27px!important;
  }
}
</style>