eta_front/src/views/dataEntry_manage/components/barOptionSection.vue

<template>
  <div class="bar-option-wrapper">
    <template v-if="dateList.length">
      <!-- 排序规则 -->
      <div v-if="isBaseBarShow">
        <div>
          <label style="margin-right: 5px;">排序规则</label> 
          <el-radio-group v-model="sortObj.sort" @change="() => { sortObj.sortIndex= '';changeSort()}">
            <el-radio v-for="item in sortRules" :key="item.key" :label="item.key">{{item.name}}</el-radio>
          </el-radio-group> 
        </div>
        <el-select
          v-model="sortObj.sortIndex"
          v-if="sortObj.sort!==0"
          clearable
          placeholder="请选择日期"
          class="sort-date"
          style="width: 100%; margin-top: 20px"
          @change="changeSort"
        >
          <el-option
            v-for="(item,index) in dateList"
            :key="item.key"
            :label="item.RealDate||item.Date"
            :value="index"
          >
          </el-option>
        </el-select>
      </div>

      <el-collapse v-model="activeNames" class="target-list">
        <el-collapse-item v-for="(item,index) in dateList" :key="item.EdbInfoId">
          <template slot="title">
            <span class="text_oneLine"> {{setDynamicTitle(item)}}</span>
            <i class="el-icon-edit edit-icon" @click.stop="editDate(item,index)"></i>
            <i class="el-icon-delete del-icon" @click.stop="removeDate(index)"></i>
          </template>

          <ul class="setting-cont">
            <li v-if="isBaseBarShow">
              <el-input
                v-model="item.Name"
                style="width: 90%"
                placeholder="日期别名"
                @change="changeOptions"
              />
            </li>
            <li>
              <div style="display: flex">
                <span style="margin-right: 3px">颜色：</span>
                <el-color-picker
                  v-model="item.Color"
                  size="mini"
                  show-alpha
                  :predefine="predefineColors"
                  @change="changeOptions"
                ></el-color-picker>
              </div>
            </li>
          </ul>
        </el-collapse-item>
      </el-collapse>
    </template>

    <div
      class="add-cont"
      @click="addDateHandle"
      v-if="edblist.length"
    >
      <img
        src="~@/assets/img/set_m/add_ico.png"
        alt=""
        style="width: 16px; height: 16px; margin-right: 10px"
      />
      <span>添加日期</span>
    </div>

    <m-dialog
      title="添加日期" 
      :show.sync="dialogForm.show" 
      width="650px"
    >
      <div style="padding-left: 50px">
        <el-form 
          :model="dialogForm"
          ref="formRef" 
          label-position="left"
          hide-required-asterisk
          label-width="80px">
          <el-form-item prop="Type" label="添加方式">
            <el-select 
              v-model="dialogForm.Type"
              placeholder="请选择添加方式"
              style="width:350px;"
            >
              <el-option v-for="item in dateOptions" :key="item.key" :label="item.label" :value="item.key"/>
            </el-select>
          </el-form-item>
          <el-form-item label="天数" prop="Value" v-if="dialogForm.Type === 2">
            <el-input 
              type="number" 
              v-model="dialogForm.Value"
              placeholder="请输入数字"
              style="width:350px;"
            />
          </el-form-item>
          <el-form-item prop="Type" label="选择日期" v-if="dialogForm.Type === 3">
            <el-date-picker
              v-model="dialogForm.Date"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
              style="width: 350px"
            />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" style="margin-top: 20px;">
        <el-button
        @click="cancelDialog"
        style="width: 132px; height: 40px"
        >取消</el-button>
        <el-button
          @click="saveDate"
          type="primary"
          style="width: 132px; height: 40px"
          >保存</el-button>
      </div>
    </m-dialog>
  </div>
</template>

<script>
import {
  defaultOpts
} from '@/utils/defaultOptions';
import mDialog from '@/components/mDialog.vue'
export default {
  components: { mDialog },
  props: {
    edblist: Array,
    datedata: Array,
    chartInfo: {
      type: Object
    },
    initData: {
      default: null
    }
  },
  watch: {
    datedata(newval) {
      this.dateList = newval.map((_,index) => ({
        ...this.dateList[index],
        Color: _.Color,
        RealDate: this.dateList[index].Type === 3 ? this.dateList[index].Date : _.Date,
        Data: _.Value,
        Name: _.Name
      }))
    }
  },
  computed: {
    /* 判断路由 图库柱状图还是商品价格图 */
    isBaseBarShow() {
      const show_path = ['/addchart','/editchart']
      return show_path.includes(this.$route.path)
    }
  },
  data() {
    return {
      activeNames: '',
      predefineColors: defaultOpts.colors.slice(0, 2), //定义颜色蓝，红 默认颜色
      sortObj: {
        sort: 0,
        sortIndex: ''
      },
      dateList: [],
      sortRules: [
        { key:0,name:'默认' },
        { key:2,name:'升序' },
        { key:1,name:'降序' },
      ],

      dateMapLabel: {
        1: '最新日期',
        2: 'N天前',
        3: '固定日期'
      },
      dateOptions: [
        { key: 1,label:'最新日期' },
        { key: 2,label:'N天前' },
        { key: 3,label:'固定日期' },
      ],

      dialogForm: {
        show: false,
        Type: 1,
        Value: 0,
        Date: ''
      },
      edit_index: 0,
    }
  },
  methods: {
    /* 添加日期 */
    addDateHandle() {
      if(this.$route.path === '/addCommodityChart' && this.$parent.chartInfo.Source===5 && !this.$parent.profitInfo.list.length) return this.$message.warning('请先设置盘面利润配置')
      this.dialogForm.show = true;
    },

    cancelDialog() {
      this.edit_index = 0;
      this.dialogForm = {
        show: false,
        Type: 1,
        Value: '',
        Date: ''
      }
    },

    /* 日期编辑 */
    editDate({Type,Date,Value},index) {
      this.edit_index = index + 1;
      this.dialogForm = {
        show: true,
        Type,
        Value,
        Date
      }
    },

    /* 保存日期push日期数组  */
    saveDate() {
      const { Type,Value,Date } = this.dialogForm;
      if( Type === 2 && !Value) return this.$message.warning('天数不能为空')
      if( Type === 3 && !Date) return this.$message.warning('日期不能为空')

      if(this.edit_index !== 0) {
        //修改
        this.dateList[this.edit_index-1].Type = Type;
        this.dateList[this.edit_index-1].Value = Number(Value);
        this.dateList[this.edit_index-1].Date = Date;
      } else {
        //添加
        let date_item = {
          Type,
          Name: '',
          Value: Number(Value),
          Date,
          Color: ''
        }
        this.dateList.push(date_item)
        
        let themeOpt = this.chartInfo.ChartThemeStyle ? JSON.parse(this.chartInfo.ChartThemeStyle) : null;
        this.dateList.forEach((item,index) => {
          item.Color = item.Color || (themeOpt&&themeOpt.colorsOptions[index]||defaultOpts.colors[index]);
        })
      }
      this.cancelDialog()

      this.getBarData()
    },

    /* 改变排序 */
    changeSort() {
      if(this.sortObj.sort === 0
      || (this.sortObj.sort&&this.sortObj.sortIndex!=='')) {
        this.getBarData()
      }
    },

    /* 改变配置重绘 不需要请求接口 */
    changeOptions(e,index) {
      this.getBarData()
    },
    
    /* 根据目前配置获取柱形图数据 */
    getBarData() {
      this.$emit('getData',{
        sort: this.sortObj,
        dateList: this.dateList
      })
    },

    /* 日期标题 */
    setDynamicTitle({Type,RealDate,Date,Value}) {
      
      switch(Type) {
        case 1:
          return `${RealDate||''}(最新日期)`
        case 2:
          return this.isBaseBarShow ? `${RealDate||''}(${Value}天前)` : `${Value}天前`
        case 3:
          return `${Date}(固定日期)`
      }
    },

    /* 移除日期 */
    removeDate(index) {
      this.dateList.splice(index,1)
      this.getBarData();
    },
  },
  mounted () {
    if(this.initData) {
      const { DateList,Sort } = this.initData;
      this.dateList = this.datedata.map((_,index) => ({
        ...DateList[index],
        Color: _.Color,
        RealDate: DateList[index].Type === 3 ? DateList[index].Date : _.Date,
        Data: _.Value,
        Name:  _.Name
      }));
      this.sortObj = {
        sort: Sort.Sort,
        sortIndex: Sort.DateIndex
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .bar-option-wrapper {
    color: #606266;
    .add-cont {
      align-items: center;
      margin-top: 20px;
      display: flex;
      color: #409eff;
      font-size: 16px;
      cursor: pointer;
    }

    .target-list {
      margin-top: 20px;
    }
    .edit-icon {
      position: absolute;
      right: 35px;
      font-size: 16px;
      color: #409eff;
      cursor: pointer;
    }
  }
</style>

<style lang="scss">
  .bar-option-wrapper { 
    .sort-date .el-input__inner {
      padding: 0 15px !important;
      height: 40px !important;
    }
  }
</style>