admin-cms/src/layout/news/newsForm.vue

<template>
  <div id="newsForm">
    <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="name">
              <el-input v-model="ruleForm.name" 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="link">
              <el-input v-model="ruleForm.link" placeholder="请输入链接"></el-input>
            </el-form-item>-->
            <el-form-item label="标题" prop="title">
              <el-input v-model="ruleForm.title" 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="source">
              <el-input v-model="ruleForm.source" placeholder="请输入来源"></el-input>
            </el-form-item>
            <el-form-item label="是否热门" prop="hot">
              <el-radio-group v-model="ruleForm.hot">
                <el-radio label="1" >是</el-radio>
                <el-radio label="0" >否</el-radio>
              </el-radio-group>
            </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: 'newsForm',
    props: {
      ruleForm: null,
      loading: null,
    },
    components: {
      uploadImage, //图片
      WangEditor, //富文本
    },
    data: () => ({
      formTitle: '新闻中心管理',
      rules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        hot: [{ required: true, message: '请选择是否热门', trigger: 'change'  }],
        description: [{ required: true, message: '请输入内容', trigger: 'blur' }],
      },
    }),
    created() {},
    computed: {},
    methods: {
      submitForm() {
        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>