|
|
@@ -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>
|
zhangbiao