创建视频

src/router/menu.js

@@ -29,6 +29,10 @@ export default [
         path: '/articleManagement/create',
         meta: { title: '新建文章' },
       },
+      {
+        path: '/articleManagement/videCreate',
+        meta: { title: '新建视频' },
+      },
       {
         path: '/articleManagement/carouselUploda',
         meta: { title: '轮播图管理' },

src/router/modules/articleManagement.js

@@ -19,6 +19,13 @@ export default {
       component: () =>
         import('@/views/articleManagement/articleCreate'),
     },
+    {
+      path: 'videoCreate',
+      name: 'articleManagement-videoCreate',
+      meta: { title: '新建视频' },
+      component: () =>
+        import('@/views/articleManagement/videoCreate'),
+    },
     {
       path: 'carouselUploda',
       name: 'articleManagement-carouselUploda',

src/views/articleManagement/videoCreate.vue

@@ -0,0 +1,555 @@
+<template>
+  <div class="app-container">
+    <div class="common-card basic-information-box">
+      <div class="basic-information-title">基本信息</div>
+      <div class="basic-information-form">
+        <a-form
+          :form="form"
+          :label-col="{ span: 6 }"
+          :wrapper-col="{ span: 18 }"
+          style="width: 515px"
+          @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-textarea
+              placeholder="请输入文章描述"
+              :auto-size="{ minRows: 3, maxRows: 5 }"
+              :maxLength="100"
+              v-decorator="[
+                'description',
+                {
+                  rules: [{ message: '请输入文章描述' }],
+                  initialValue: description,
+                },
+              ]"
+            />
+          </a-form-item>
+          <a-form-item label="文章分类">
+            <!-- 文章分类父类 -->
+            <a-select
+              v-decorator="[
+                'articleParentClass',
+                {
+                  rules: [
+                    {
+                      required: optionType == 'create',
+                      message: '请选择文章分类父类',
+                    },
+                  ],
+                  initialValue: articleParentClass.name,
+                },
+              ]"
+              @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: optionType == 'create',
+                      message: '请选择文章分类子类',
+                    },
+                  ],
+                  initialValue: articleChildClass.name,
+                },
+              ]"
+              :disabled="!articleChildClass || !articleChildClass.id"
+              @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: '请选择工种' }],
+                  initialValue: engineerType.name,
+                },
+              ]"
+              @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
+              :defaultValue="learnDate"
+              @change="learnDateChoose"
+              style="width:100%;"
+            />-->
+            <a-date-picker
+              placeholder="请选择日期"
+              @change="learnDateChoose"
+              v-decorator="[
+                'learnDate',
+                {
+                  initialValue: learnDate,
+                },
+              ]"
+              style="width: 100%"
+            />
+          </a-form-item>
+          <a-form-item v-show="false" :wrapper-col="{ span: 20, offset: 10 }">
+            <a-button id="articleCreateSubmit" type="primary" html-type="submit">提交</a-button>
+          </a-form-item>
+        </a-form>
+      </div>
+    </div>
+    <div class="common-card a-card-margin-top">
+      <div class="information-title">视频内容</div>
+      <div>上传视频</div>
+      <div>
+        <a-upload
+          :customRequest="uploadOssVideoFile"
+          :previewFile="previewVideoFile"
+          :default-file-list="defaultVideoFileList"
+        >
+          <a-button>
+            <a-icon type="upload" />Upload
+          </a-button>
+        </a-upload>
+      </div>
+      <div>上传封面</div>
+      <div>
+        <a-upload
+          :customRequest="uploadOssImageFile"
+          :previewFile="previewImageFile"
+          :default-file-list="defaultImageFileList"
+        >
+          <a-button>
+            <a-icon type="upload" />Upload
+          </a-button>
+        </a-upload>
+      </div>
+      <div class="submit-row">
+        <a-button type="primary" @click="handleSubmitBtnFun">提交</a-button>
+        <a-button :style="{ marginLeft: '160px' }" @click="preview">预览</a-button>
+      </div>
+    </div>
+    <!-- 预览弹出框 -->
+    <a-drawer
+      title
+      placement="left"
+      :closable="true"
+      :visible="previewVisible"
+      :bodyStyle="bodyStyle"
+      @close="closepreview"
+      width="30%"
+    >
+      <p class="p-content" v-html="content">{{ content }}</p>
+    </a-drawer>
+  </div>
+</template>
+
+<script>
+const OSS = require("ali-oss");
+import {
+  formatePathParams,
+  formateStringDate,
+  formateDateToString
+} from "@/filters";
+export default {
+  name: "videoCreate",
+  props: {},
+  components: {},
+  data() {
+    return {
+      content: "",
+      //   展示预览
+      previewVisible: false,
+      form: this.$form.createForm(this, { name: "articleCreate" }),
+      articleParentClassArr: [],
+      articleChildClassArr: [],
+      engineerTypeArray: [],
+      articleParentClass: {},
+      articleChildClass: {},
+      engineerType: "",
+      learnDate: "",
+      optionType: "",
+      description: "",
+      bodyStyle: {
+        img: "{max-width:100%;}",
+        color: "red"
+      },
+      defaultVideoFileList: [],
+      defaultImageFileList: []
+    };
+  },
+  created() {
+    this.initDataFun(); //初始化数据
+  },
+  mounted() {},
+  beforeDestroy() {},
+  watch: {},
+  computed: {},
+  methods: {
+    //初始化数据
+    async initDataFun() {
+      await this.getArticleParentClass();
+      await this.getEngineersWork();
+      let type = this.$route.query.type;
+      this.optionType = type ? type : "create";
+      // 判断是新增文章还是编辑文章
+      if ("edit" === type) {
+        console.log("---edit---");
+        await this.getArticleContent();
+      } else if ("create" === type) {
+        console.log("---create---");
+      }
+    },
+    // 查询文章分类父级
+    getArticleParentClass() {
+      this.$_http
+        .get(this.$_API.INTERFACE_GET_CATEGORIES)
+        .then(res => {
+          this.articleParentClassArr = res.data;
+          this.loading = false;
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+    },
+    // 查询文章分类子集
+    getArticleChildClass() {
+      if (!this.articleParentClass.id) {
+        return;
+      }
+      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) {
+            this.articleChildClassArr = res.data;
+            this.articleChildClass = this.articleChildClassArr[0];
+            this.form.setFieldsValue({
+              articleChildClass: this.articleChildClass.name
+            });
+          }
+          this.loading = false;
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+    },
+    // 查询工作类别
+    async getEngineersWork() {
+      await this.$_http
+        .get(this.$_API.INTERFACE_GET_ENGINEERINGWORK_LIST)
+        .then(res => {
+          this.engineerTypeArray = [{ name: "不限", id: "" }, ...res.data];
+          this.engineerType = this.engineerTypeArray[0];
+        });
+    },
+
+    // 文章分类父类变化
+    articleClassParentChange(value) {
+      this.articleParentClass = this.articleParentClassArr[value];
+      // 子类选项清空
+      this.articleChildClassArr = [];
+      this.form.setFieldsValue({
+        articleChildClass: ""
+      });
+      // 获取子类的值
+      this.getArticleChildClass();
+    },
+    // 文章分类子类变化
+    articleClassChildChange(value) {
+      this.articleChildClass = this.articleChildClassArr[value];
+    },
+    // 工种变化
+    engineerTypeChange(index) {
+      this.engineerType = this.engineerTypeArray[index];
+    },
+    // 必学日期选择
+    learnDateChoose(date, dateString) {
+      this.learnDate = dateString;
+    },
+    handleSubmitBtnFun() {
+      document.getElementById("articleCreateSubmit").click();
+    },
+    // 查询文章内容
+    getArticleContent() {
+      let pathParamsData = { materialId: this.$route.query.id };
+      this.$_http
+        .get(
+          formatePathParams(this.$_API.INTERFACE_GET_MATERIALS, pathParamsData)
+        )
+        .then(res => {
+          console.log("----" + JSON.stringify(res));
+          this.initEditArticleForm(res.data);
+          this.loading = false;
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+    },
+    initEditArticleForm(item) {
+      console.log("--------" + JSON.stringify(item));
+      //   文章标题
+      this.form.setFieldsValue({
+        name: item.name
+      });
+      //   文章描述
+      this.description = item.description ? item.description : "";
+      // 文章分类-父类：
+      this.articleParentClass = item.rootMaterialCategory;
+      this.getArticleChildClass(); // 获取子类列表的值
+      // 文章分类-子类
+      this.articleChildClass = item.materialCategory;
+      //   选中工种
+      if (item.engineerTypes.length !== 0) {
+        let engineerId = item.engineerTypes[0];
+        for (let i = 0; i < this.engineerTypeArray.length; i++) {
+          let element = this.engineerTypeArray[i];
+          if (element.id === engineerId) {
+            this.engineerTypeChange(i);
+          }
+        }
+      }
+      let learnDate = item.tags.length > 0 ? item.tags[0] : null;
+      // 必学日期
+      this.learnDate = learnDate ? formateStringDate(learnDate) : null;
+      console.log("编辑初始化时间为YYYY-MM-DD", this.learnDate, learnDate);
+      // 文章内容
+      this.content = item.contents;
+    },
+    // 提交表单
+    handleSubmit(e) {
+      e.preventDefault();
+      if ("create" === this.optionType) {
+        console.log("创建文章");
+        this.createArtical();
+      } else if ("edit" === this.optionType) {
+        console.log("更新文章");
+        this.updateArtical();
+      }
+    },
+    createArtical() {
+      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) {
+          // 新建文章
+          let that = this;
+          that.$confirm({
+            title: "新建文章",
+            content: `确认新建文章吗？`,
+            okText: "确认",
+            cancelText: "取消",
+            onOk() {
+              that.loading = true;
+              let params = {
+                categoryid: that.articleChildClass.id,
+                engineertypeid: that.engineerType.id
+              };
+              let tag = formateDateToString(that.learnDate);
+              let links = [];
+              that.defaultFileList.forEach(element => {
+                links.push(element.url);
+              });
+              let bodyParams = {
+                name: values.name,
+                description: values.description,
+                type: "ARTICLE",
+                contents: that.content,
+                tags: tag ? [tag] : [],
+                engineerTypes: [that.engineerType.id],
+                links: links
+              };
+              that.$_http
+                .post(that.$_API.INTERFACE_POST_ADMIN_MATERIALS, bodyParams, {
+                  params
+                })
+                .then(() => {
+                  that.$message.success("新建文章成功");
+                });
+            },
+            onCancel() {}
+          });
+        }
+      });
+    },
+    updateArtical() {
+      let pathParamsData = { materialId: this.$route.query.id };
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          // 更新文章
+          let that = this;
+          that.$confirm({
+            title: "更新文章",
+            content: `确认更新文章吗？`,
+            okText: "确认",
+            cancelText: "取消",
+            onOk() {
+              that.loading = true;
+              let params = {
+                categoryid: that.articleChildClass.id,
+                engineertypeid: that.engineerType.id
+              };
+              let tag = formateDateToString(that.learnDate);
+              let links = [];
+              that.defaultFileList.forEach(element => {
+                links.push(element.url);
+              });
+              let bodyParams = {
+                id: that.$route.query.id,
+                name: values.name,
+                description: values.description,
+                type: "ARTICLE",
+                contents: that.content,
+                tags: tag ? [tag] : [],
+                engineerTypes: [that.engineerType.id],
+                links: links
+              };
+              console.log(
+                "保存修改日期格式为YYYYMMDD",
+                bodyParams.tags,
+                that.learnDate
+              );
+              that.$_http
+                .put(
+                  formatePathParams(
+                    that.$_API.INTERFACE_PUT_ADMIN_MATERIALS,
+                    pathParamsData
+                  ),
+                  bodyParams,
+                  {
+                    params
+                  }
+                )
+                .then(() => {
+                  that.$message.success("更新文章成功");
+                });
+            },
+            onCancel() {}
+          });
+        }
+      });
+    },
+    uploadOssVideoFile(fileData) {
+      this.uploadOssFile(fileData);
+    },
+    uploadOssImageFile(fileData) {
+      this.uploadOssFile(fileData);
+    },
+
+    uploadOssFile(fileData, defaultFileList) {
+      let file = fileData.file;
+      let that = this;
+      let bucket = "jtxt-file-public";
+      // let filetype =
+      //   ".pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx";
+      let ossPath = "file/";
+      that.$_http.get(that.$_API.INTERFACE_GET_ASSUME_OSS_WRITER).then(res => {
+        console.log("--oss-writer--" + JSON.stringify(res));
+        const client = new OSS({
+          // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
+          region: "oss-cn-beijing",
+          // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
+          accessKeyId: res.data.accessKeyId,
+          accessKeySecret: res.data.accessKeySecret,
+          // 从STS服务获取的安全令牌（SecurityToken）。
+          stsToken: res.data.securityToken,
+          // 填写Bucket名称。
+          bucket: bucket
+        });
+        try {
+          client.put(ossPath + file.name, file).then(res => {
+            console.log(res);
+            let upFile = {
+              uid: defaultFileList.length + 1,
+              name: file.name,
+              status: "done",
+              url: res.url
+            };
+            defaultFileList.push(upFile);
+            fileData.onSuccess();
+          });
+        } catch (e) {
+          fileData.onError();
+          console.error(e);
+        }
+      });
+    },
+    //视频预览
+    previewVideoFile() {},
+    //图片预览
+    previewImageFile() {},
+    // 关闭预览
+    closepreview() {
+      this.previewVisible = false;
+    }
+  }
+};
+</script>
+
+<style lang="less">
+.p-content {
+  max-width: 100%;
+  img {
+    max-width: 100%;
+    width: auto;
+    height: auto;
+  }
+}
+</style>
+
+<style lang="less" scoped>
+@import "~@/styles/common/variable.less";
+.app-container {
+  .information-title {
+    font-size: 18px;
+    font-weight: bold;
+    color: @mainColorBlack65;
+    margin-bottom: @paddingMarginVal;
+  }
+  .submit-row {
+    width: 100%;
+    margin-top: 2 * @paddingMarginVal;
+    padding: @paddingMarginVal 0 @navTopHight;
+    display: flex;
+    justify-content: center;
+  }
+}
+</style>