irc_web/src/views/dictionary/template/agreement/TemplateForm.vue

<template>
  <el-form ref="sysAgreementFrom" v-loading="loading" :model="form" label-width="140px" size="small" :rules="rules"
    class="upload-temporary-file">
    <div class="base-dialog-body">
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('dictionary:agreement:table:UserAgreementTypeEnum')" prop="UserAgreementTypeEnum"
            style="width: 48%">
            <el-select v-model="form.UserAgreementTypeEnum" style="width: 100%" size="small" filterable>
              <el-option v-for="item of $d.UserAgreementType" :key="item.id" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('dictionary:agreement:table:FileName')" prop="FileName" style="width: 48%">
            <el-input v-model="form.FileName" clearable style="width: 100%" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('dictionary:agreement:table:FileVersion')" prop="FileVersion" style="width: 48%">
            <el-input v-model="form.FileVersion" clearable style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('dictionary:agreement:table:UpdateDate')" prop="UpdateDate" style="width: 48%">
            <el-date-picker v-model="form.UpdateDate" type="date"
              :placeholder="$t('trials:seletctedReviews:table:selectionTime')" value-format="yyyy-MM-dd"
              format="yyyy-MM-dd" clearable style="width: 100%;">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('dictionary:agreement:table:EffectiveDate')" prop="EffectiveDate" style="width: 48%">
            <el-date-picker v-model="form.EffectiveDate" type="date"
              :placeholder="$t('trials:seletctedReviews:table:selectionTime')" value-format="yyyy-MM-dd"
              format="yyyy-MM-dd" clearable style="width: 100%;">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item :label="$t('dictionary:agreement:table:FileContent')" prop="FileContent">
        <div class="html_temp">
          <prism-editor class="my-editor" v-model="form.FileContent" :highlight="highlighter" :line-numbers="true"
            style="width: 50%;max-height: 350px;"></prism-editor>
          <div v-html="form.FileContent" style="width: 45%;" class="content"></div>
        </div>
      </el-form-item>
      <el-form-item :label="$t('dictionary:agreement:table:FileContentEn')" prop="FileEnContent">
        <div class="html_temp">
          <prism-editor class="my-editor" v-model="form.FileEnContent" :highlight="highlighter" :line-numbers="true"
            style="width: 50%;max-height: 350px;"></prism-editor>
          <div v-html="form.FileEnContent" style="width: 45%;" class="content"></div>
        </div>
      </el-form-item>

    </div>
    <div class="base-dialog-footer" style="text-align: right; margin-top: 10px">
      <el-form-item style="text-align: right">
        <el-button size="small" type="primary" :loading="saveBtnLoading" @click="handleSave">{{ $t('common:button:save')
        }}</el-button>
      </el-form-item>
    </div>
  </el-form>
</template>
<script>
import {
  addOrUpdateUserAgreement,
} from '@/api/dictionary'

import { PrismEditor } from 'vue-prism-editor';
import 'vue-prism-editor/dist/prismeditor.min.css';
import { highlight, languages } from 'prismjs/components/prism-core';
import 'prismjs/components/prism-clike';
import 'prismjs/components/prism-javascript';
import 'prismjs/themes/prism.css';
export default {
  name: 'TemplateForm',
  props: {
    data: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  components: { PrismEditor },
  data() {
    return {
      form: {
        Id: '',
        UserAgreementTypeEnum: '',
        FileName: '',
        FileVersion: null,
        FileContent: '\n\n\n\n',
        FileEnContent: `\n\n\n\n`,
        UpdateDate: '',
        EffectiveDate: '',
        IsCurrentVersion: false
      },
      rules: {
        UserAgreementTypeEnum: [
          { required: true, message: this.$t('common:ruleMessage:select'), trigger: ['blur'] },
        ],
        FileName: [
          { required: true, message: this.$t('common:ruleMessage:specify'), trigger: ['blur'] },
        ],
        FileVersion: [
          { required: true, message: this.$t('common:ruleMessage:specify'), trigger: ['blur'] },
        ],
        FileContent: [
          { required: true, message: this.$t('common:ruleMessage:specify'), trigger: ['blur'] },
        ],
        FileEnContent: [
          { required: true, message: this.$t('common:ruleMessage:specify'), trigger: ['blur'] },
        ],
        UpdateDate: [
          { required: true, message: this.$t('common:ruleMessage:select'), trigger: ['blur'] },
        ],
        EffectiveDate: [
          { required: true, message: this.$t('common:ruleMessage:select'), trigger: ['blur'] },
        ],
      },
      saveBtnLoading: false,
      loading: false,
      dictionaryList: {},
    }
  },
  mounted() {
    this.initForm()
  },
  methods: {
    highlighter(code) {
      return highlight(code, languages.js);
    },
    async initForm() {
      if (Object.keys(this.data).length > 0) {
        for (const k in this.form) {
          if (this.data.hasOwnProperty(k)) {
            this.form[k] = this.data[k]
          }
        }
      }
    },
    handleSave() {
      this.$refs.sysAgreementFrom.validate((valid) => {
        if (!valid) return
        this.saveBtnLoading = true
        addOrUpdateUserAgreement(this.form)
          .then((res) => {
            this.saveBtnLoading = false
            this.$emit('closeDialog')
            this.$emit('getList')
            this.$message.success(this.$t('common:message:savedSuccessfully'))
          })
          .catch(() => {
            this.saveBtnLoading = false
          })
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.html_temp {
  display: flex;
  justify-content: space-between;
  width: 100%;

  .my-editor {
    border: 1px solid #333;
  }

}

.base-dialog-body {
  max-height: calc(100% - 60px);
}

.upload-temporary-file {
  overflow-y: auto;
  height: 100%;
}

.content {
  max-height: 350px;
  overflow-y: auto;
}
</style>