admin-cms/src/layout/technical/messageDetail.vue

<template>
  <div id="messageDetail">
    <el-row v-if="loading">
      <el-col :span="24">
        <el-col :span="24" class="topBtn">
          <el-button type="primary" size="mini" @click="returnBtn()">返回</el-button>
        </el-col>
      </el-col>
      <el-col>
        <el-col :span="24" class="messgae">
          <el-form ref="form" :rules="rules" :model="form" label-width="80px">
            <el-form-item label="信息标题" prop="title">
              <el-input v-model="form.title" placeholder="请输入信息标题"></el-input>
            </el-form-item>
            <el-form-item label="来源">
              <el-input v-model="form.orgin" placeholder="请输入信息来源"></el-input>
            </el-form-item>
            <el-form-item label="所属栏目" placeholder="请选择所属栏目">
              <el-select v-model="form.column_id" filterable @change="selectChild">
                <el-option v-for="(item, index) in columnList" :key="index" :value="item.id" :label="item.name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="标题简介">
              <el-input type="textarea" v-model="form.titlejj" placeholder="请输入标题简介"></el-input>
            </el-form-item>
            <el-form-item label="信息图片" prop="picture">
              <upload :limit="1" :data="form.picture" type="picture" :url="'/files/imgpath/upload'" @upload="uploadSuccess"></upload>
            </el-form-item>
            <el-form-item label="视频" prop="filepath">
              <upload :limit="1" :data="form.filepath" type="filepath" listType="" :url="'/files/imgpath/upload'" @upload="uploadSuccess"></upload>
            </el-form-item>
            <el-form-item label="信息内容">
              <wang-editor v-model="form.content" placeholder="请输入信息内容"></wang-editor>
            </el-form-item>
            <el-form-item label="发布时间">
              <el-col :span="11">
                <el-date-picker type="date" placeholder="发布时间" value-format="yyyy-MM-dd" v-model="form.publish_time" style="width: 100%;"></el-date-picker>
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit()">提交</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import WangEditor from '@/components/wang-editor.vue';
import upload from '@/components/upload.vue';
export default {
  name: 'messageDetail',
  props: {
    form: null,
    columnList: null,
    loading: null,
  },
  components: {
    WangEditor,
    upload,
  },
  data: () => ({
    rules: {
      title: [
        { required: true, message: '请输入信息标题', trigger: 'blur' },
        { min: 3, max: 5, message: '长度在 0 到 50 个字符', trigger: 'blur' },
      ],
    },
  }),
  created() {},
  computed: {},
  methods: {
    returnBtn() {
      this.$router.push({ path: '/technical/index' });
    },
    onSubmit() {
      this.$emit('submitDate', { data: this.form, id: this.form.id });
    },
    selectChild(column_id) {
      let res = this.columnList.filter(fil => fil.id === column_id);
      if (res.length > 0) {
        this.$set(this.form, `column_name`, res[0].name);
      }
      this.$forceUpdate();
    },
    uploadSuccess({ type, data }) {
      this.$set(this.form, `${type}`, data.uri);
    },
  },
};
</script>

<style lang="less" scoped>
.topBtn {
  text-align: right;
  padding: 15px 5px;
}
</style>