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

<template>
  <el-dialog
    :visible.sync="isShow"
		:close-on-click-modal="false"
    :append-to-body="true"
		@close="cancelHandle"
		custom-class="marker-edit-dialog"
		center
		width="650px"
		v-dialogDrag
    top="8vh"
    :title="`${$t('Table.edit_btn')}${$t('Edb.Detail.source')}`"
  >
    <div style="padding-left: 20%">
      <el-form
        :model="chartSourceForm"
        label-width="110px"
        label-position="left"
      >
        <el-form-item :label="$t('Edb.Detail.source')">
          <el-input
            v-model="chartSourceForm.text"
            :placeholder="$t('Chart.InputHolderAll.input_content')"
          />
        </el-form-item>
        <el-form-item :label="$t('Chart.Detail.color')" style="margin-bottom:8px;">
          <el-color-picker
            v-model="chartSourceForm.color"
            show-alpha
            style="width:90px"
          />
        </el-form-item>
        <el-form-item :label="$t('Chart.Detail.text_size')">
          <el-input
            v-model="chartSourceForm.fontSize"
            style="width: 90px"
            type="number"
            :min="1"
          />
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" style="margin-top: 20px;">
      <el-button @click="saveSource" type="primary"><!-- 保存 -->{{$t('Dialog.confirm_save_btn')}}</el-button>
      <el-button @click="cancelHandle"><!-- 取消 -->{{$t('Dialog.cancel_btn')}}</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: {
    isShow: {
      type: Boolean
    },
    chartInfo: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    isShow(nval) {
      if(!nval) return
      
      if(this.chartInfo.SourcesFrom) { //回显
        let { text,color,fontSize } = JSON.parse(this.chartInfo.SourcesFrom);
        this.chartSourceForm = {
          text,
          color,
          fontSize
        }
      }else {
        this.chartSourceForm = {
          text: '',
          color: JSON.parse(this.chartInfo.ChartThemeStyle).markerOptions.style.color,
          fontSize: JSON.parse(this.chartInfo.ChartThemeStyle).markerOptions.style.fontSize
        }
      }
    }
  },
  data() {
    return {
      chartSourceForm: {
        text: '',
        color: '',
        fontSize: ''
      }
    }
  },
  methods:{
    saveSource() {
      if(!this.chartSourceForm.text) return this.$message.warning('数据来源不能为空')

      this.$emit('update',this.chartSourceForm)
      this.cancelHandle()
    },
    
    cancelHandle() {
      this.$emit('update:isShow',false)
    }
  },
}
</script>
<style scoped lang='scss'>

</style>