admin-cms/src/layout/tPolicyInterpretation/tPolicyInterpretationForm.vue

<template>
  <div id="tPolicyInterpretationForm">
    <el-row v-if="loading">
      <el-col :span="24">
        <el-col :span="24" class="top">
          <span class="shu"></span><span class="title">{{ formTitle }}</span>
        </el-col>
        <el-col :span="24" class="form">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="标题" prop="title">
              <el-input v-model="ruleForm.title" placeholder="请输入标题"></el-input>
            </el-form-item>
            <el-form-item label="政策等级" prop="subject_classification">
              <el-select v-model="ruleForm.subject_classification" placeholder="请选择政策等级">
                <el-option v-for="(item, index) in subject_classification_list" :key="item.code" :label="item.name" :value="item.code"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="主题词" prop="subject_headings">
              <el-select v-model="ruleForm.subject_headings" placeholder="请选择主题词">
                <el-option v-for="(item, index) in subject_headings_list" :key="item.code" :label="item.name" :value="item.code"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="发文机关" prop="issuing_organ">
              <el-input v-model="ruleForm.issuing_organ" placeholder="请输入发文机关"></el-input>
            </el-form-item>
            <el-form-item label="索引号" prop="index_number">
              <el-input v-model="ruleForm.index_number" placeholder="请输入索引号"></el-input>
            </el-form-item>
            <el-form-item label="发文字号" prop="issued_number">
              <el-input v-model="ruleForm.issued_number" placeholder="请输入发文字号"></el-input>
            </el-form-item>
            <el-form-item label="图片" prop="image">
              <uploadImage
                      :limit="1"
                      :data="ruleForm.image"
                      :url="`/files/financial/custom/upload`"
                      @uploadSuccess="uploadSuccess"
                      @remove="remove"
              ></uploadImage>
            </el-form-item>
            <el-form-item label="简介" prop="brief_introduction">
              <el-input v-model="ruleForm.brief_introduction" type="textarea" placeholder="请输入简介"></el-input>
            </el-form-item>
            <el-form-item label="内容" prop="description">
              <wang-editor v-model="ruleForm.description" placeholder="请输入内容"></wang-editor>
            </el-form-item>
            <el-col :span="24" class="clickBtn">
              <el-button @click="submitForm">提交</el-button>
              <el-button @click="resetForm">取消</el-button>
            </el-col>
          </el-form>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import uploadImage from '@/layout/custom/uploadImage.vue';
  import WangEditor from '@/components/wang-editor.vue';

  export default {
    name: 'tPolicyInterpretationForm',
    props: {
      ruleForm: null,
      loading: null,
      subject_classification_list:{ type: Array, default: () => [] },
      subject_headings_list:{ type: Array, default: () => [] },
    },
    components: {
      uploadImage, //图片
      WangEditor, //富文本
    },
    data: () => ({
      formTitle: '政策解读管理',
      rules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        issuing_organ: [{ required: true, message: '请输入发文机关', trigger: 'blur' }],
        subject_classification: [{ required: true, message: '请选择政策等级', trigger: 'change' }],
        subject_headings: [{ required: true, message: '请选择主题词', trigger: 'change' }],
        description: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        image: [{ required: true, message: '请上传图片', trigger: 'blur'}],
      },
    }),
    created() {},
    computed: {},
    methods: {
      submitForm() {
        if(!this.ruleForm.image){
          this.$message.error('请上传图片');
          return false;
        }
        if(!this.ruleForm.description){
          this.$message.error('请输入内容');
          return false;
        }
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            this.$emit('submitForm', { data: this.ruleForm });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
        /*this.$emit('submitForm', { data: this.ruleForm });*/
      },
      resetForm() {
        this.$emit('resetForm');
      },
      uploadSuccess({ data }) {
        this.$set(this.ruleForm, 'image', data.uri);
      },
      remove(file) {
        this.$set(this.ruleForm, 'image', '')
      },
    },
  };
</script>

<style lang="less" scoped>
  .form {
    padding: 0 200px 0 0;
  }

  p {
    padding: 0;
    margin: 0;
  }

  .top .shu {
    float: left;
    width: 4px;
    height: 20px;
    background: rgba(233, 2, 29, 1);
  }

  .top .title {
    float: left;
    padding: 0 10px;
    font-size: 16px;
    font-family: Source Han Sans SC;
    font-weight: bold;
    color: rgba(40, 40, 40, 1);
  }

  /deep/ .el-textarea__inner {
    min-height: 100px !important;
  }

  /deep/ .select {
    width: 632px;
  }

  .selects {
    width: 473px;
    margin: 0 15px 0 0;
  }

  /deep/ .el-radio__input.is-checked + .el-radio__label {
    color: #e9021d;
  }

  /deep/ .el-radio__input.is-checked .el-radio__inner {
    border-color: #e9021d;
    background: #e9021d;
  }

  /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #e9021d;
  }

  /deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #e9021d;
    border-color: #e9021d;
  }

  /deep/ .el-checkbox-button,
  .el-checkbox-button__inner {
    margin: 0 15px 0 0;
  }

  /deep/ .el-checkbox-button__inner {
    padding: 7px 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  /deep/ .el-checkbox-button__inner:hover {
    color: #e9021d;
  }

  /deep/ .el-checkbox-button:first-child .el-checkbox-button__inner {
    border-left: 1px solid #ccc;
    border-radius: 5px;
  }

  /deep/ .el-checkbox-button:last-child .el-checkbox-button__inner {
    border-radius: 5px;
  }

  /deep/ .el-checkbox-button.is-checked .el-checkbox-button__inner {
    color: #e9021d;
    background-color: #ffffff;
    border-color: #e9021d;
  }

  /deep/ .el-checkbox-button.is-checked .el-checkbox-button__inner {
    box-shadow: none;
  }

  /deep/ .el-switch.is-checked .el-switch__core {
    border-color: #e9021d;
    background-color: #e9021d;
  }

  .clickBtn .el-button {
    width: 100px;
    height: 40px;
    padding: 0;
    color: #ffffff;
    background: #b9b9b9;
    border-radius: 4px;
    margin: 40px;
  }

  .clickBtn {
    text-align: center;
    margin: 40px 0;
    border-top: 1px solid #ccc;
  }

  .clickBtn .el-button:first-child {
    background-color: #e9021d;
  }
</style>