JingTieXueTang.Web/src/views/articleManagement/articleCreate.vue

<template>
  <div class="app-container">
    <div class="common-card a-card-margin-top">
      <TinymceEditor v-model="content"></TinymceEditor>
    </div>
    <div>
      <a-form
        :form="form"
        :label-col="{ span: 10 }"
        :wrapper-col="{ span: 5 }"
        @submit="handleSubmit"
      >
        <a-form-item label="文章标题">
          <a-input
            placeholder="请输入文章标题"
            :maxLength="100"
            v-decorator="[
              'name',
              {
                rules: [{ required: true, message: '请输入文章标题' }],
              },
            ]"
          />
        </a-form-item>
        <a-form-item label="文章描述">
          <a-input
            placeholder="请输入文章描述"
            :maxLength="100"
            v-decorator="[
              'description',
              {
                rules: [{ required: true, message: '请输入文章描述' }],
              },
            ]"
          />
        </a-form-item>
        <a-form-item label="文章分类">
          <!-- 文章分类父类 -->
          <a-select
            v-decorator="[
              'articleParentClass',
              {
                rules: [{ required: true, message: '请选择文章分类父类' }],
              },
            ]"
            @change="articleClassParentChange"
          >
            <a-select-option
              v-for="(item, index) in articleParentClassArr"
              :key="index"
              >{{ articleParentClassArr[index].name }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item label="文章子类">
          <!-- 文章分类子类 -->
          <a-select
            v-decorator="[
              'articleChildClass',
              {
                rules: [{ required: true, message: '请选择文章分类子类' }],
              },
            ]"
            @change="articleClassChildChange"
          >
            <a-select-option
              v-for="(item, index) in articleChildClassArr"
              :key="index"
              >{{ articleChildClassArr[index].name }}</a-select-option
            >
          </a-select>
        </a-form-item>

        <a-form-item label="工种类别">
          <a-select
            v-decorator="[
              'engineerType',
              {
                rules: [{ required: true, message: '请选择工种' }],
              },
            ]"
            @change="engineerTypeChange"
          >
            <a-select-option
              v-for="(item, index) in engineerTypeArray"
              :key="index"
              >{{ engineerTypeArray[index].name }}</a-select-option
            >
          </a-select>
        </a-form-item>

        <a-form-item label="必学日期:">
          <a-date-picker @change="learnDateChoose" />
        </a-form-item>

        <a-form-item :wrapper-col="{ span: 20, offset: 10 }">
          <a-button type="primary" html-type="submit">提交</a-button>
          <a-button :style="{ marginLeft: '160px' }" @click="preview"
            >预览</a-button
          >
        </a-form-item>
      </a-form>
    </div>
    <!-- 预览弹出框 -->
    <a-drawer
      title
      placement="left"
      :closable="true"
      :visible="previewVisible"
      @close="closepreview"
      width="30%"
    >
      <p v-html="content">{{ content }}</p>
    </a-drawer>
  </div>
</template>

<script>
import { formatePathParams } from "@/filters";
export default {
  name: "articleCreate",
  props: {},
  components: {
    // components: (reslove) => {
    // require(['', reslove]);
    // }
  },
  data() {
    return {
      content: "输入内容",
      //   展示预览
      previewVisible: false,
      form: this.$form.createForm(this, { name: "articleCreate" }),
      articleParentClassArr: [],
      articleChildClassArr: [],
      engineerTypeArray: [],
      articleParentClass: {},
      articleChildClass: {},
      engineerType: "",
      learnDate: ""
    };
  },
  created() {
    this.initDataFun(); //初始化数据
  },
  mounted() {},
  beforeDestroy() {},
  watch: {},
  computed: {},
  methods: {
    //初始化数据
    initDataFun() {
      this.getArticleParentClass();
      this.getEngineersWork();
    },
    // 查询文章分类父级
    getArticleParentClass() {
      this.$_http
        .get(this.$_API.INTERFACE_GET_CATEGORIES)
        .then(res => {
          console.log("--parent--" + JSON.stringify(res));
          this.articleParentClassArr = res.data;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 查询文章分类子集
    getArticleChildClass() {
      let pathParamsData = { categoryId: this.articleParentClass.id };
      this.$_http
        .get(
          formatePathParams(
            this.$_API.INTERFACE_GET_CATEGORIES_CATEGROYID,
            pathParamsData
          )
        )
        .then(res => {
          if (res && res.data.length !== 0) {
            res.data.shift();
            this.articleChildClassArr = res.data;
          }
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 查询工作类别
    getEngineersWork() {
      this.$_http
        .get(this.$_API.INTERFACE_GET_ENGINEERINGWORK_LIST)
        .then(res => {
          this.engineerTypeArray = res.data;
        });
    },

    // 文章分类父类变化
    articleClassParentChange(value) {
      this.articleParentClass = this.articleParentClassArr[value];
      // 子类选项清空
      this.articleChildClassArr = [];
      this.form.setFieldsValue({
        articleChildClass: ""
      });
      // 获取子类的值
      this.getArticleChildClass();
    },
    // 文章分类子类变化
    articleClassChildChange(value) {
      this.articleChildClass = this.articleChildClassArr[value];
    },
    // 工种变化
    engineerTypeChange(value) {
      this.engineerType = this.engineerTypeArray[value];
    },
    // 必学日期选择
    learnDateChoose(date, dateString) {
      this.learnDate = dateString;
    },
    // 提交表单
    handleSubmit(e) {
      e.preventDefault();

      this.form.setFieldsValue({
        articleParentClass: this.articleParentClass.name
      });
      this.form.setFieldsValue({
        articleChildClass: this.articleChildClass.name
      });
      this.form.setFieldsValue({
        engineerType: this.engineerType.name
      });

      this.form.validateFields((err, values) => {
        if (!err) {
          // 新建文章
          console.log("--submit--" + JSON.stringify(values));
          let that = this;
          that.$confirm({
            title: "新建文章",
            content: `确认新建文章吗？`,
            okText: "确认",
            cancelText: "取消",
            onOk() {
              that.loading = true;
              let params = {
                name: values.name,
                description: values.description,
                type: "ARTICLE",
                contents: that.content,
                tages: [that.learnDate],
                engineerTypes: [that.engineerType],
                links: []
              };
              that.$_http
                .post(that.$_API.INTERFACE_POST_ADMIN_MATERIALS, params)
                .then(res => {
                  that.$message.success("新建文章成功");
                  console.log("---上传文章----" + JSON.stringify(res));
                });
            },
            onCancel() {}
          });
        }
      });
    },
    // 预览
    preview() {
      this.previewVisible = true;
    },
    // 关闭预览
    closepreview() {
      this.previewVisible = false;
    }
  }
};
</script>

<style lang="less"></style>

<style lang="less" scoped>
.app-container {
  overflow: auto;
}
</style>