|
@@ -0,0 +1,153 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <el-drawer :title="titleMap[mode]" :append-to-body="true" v-model="visible" :size="1000" destroy-on-close :close-on-click-modal="false" @closed="$emit('closed')" :with-header="false">
|
|
|
|
|
+ <el-container class="flex-column" v-loading="loading">
|
|
|
|
|
+ <div class="drawer-detail-main">
|
|
|
|
|
+ <div class="drawer-detail-header">
|
|
|
|
|
+ <div class="drawer-detail-header-body">
|
|
|
|
|
+ <div class="drawer-detail-header-left">{{ titleMap[mode] }}</div>
|
|
|
|
|
+ <div class="drawer-detail-header-left">
|
|
|
|
|
+ <el-button type="default" icon="el-icon-close" @click="visible=false"></el-button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <el-main>
|
|
|
|
|
+ <el-form ref="dialogForm" :model="formData" :rules="rules" label-width="100px" label-position="top">
|
|
|
|
|
+ <el-form-item label="文档标题" prop="title">
|
|
|
|
|
+ <el-input v-model="formData.title" clearable placeholder="文档标题"></el-input>
|
|
|
|
|
+ <div class="el-form-item-msg"></div>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item label="副标题" prop="sub_title">
|
|
|
|
|
+ <el-input v-model="formData.sub_title" clearable placeholder="副标题"></el-input>
|
|
|
|
|
+ <div class="el-form-item-msg"></div>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item label="栏目分类" prop="category_path">
|
|
|
|
|
+ <el-cascader v-model="formData.category_path" :options="categoryData" :props="deptsProps" clearable style="width: 50%;" />
|
|
|
|
|
+ <div class="el-form-item-msg"></div>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item label="封面图片" prop="cover">
|
|
|
|
|
+ <sc-upload v-model="formData.cover"></sc-upload>
|
|
|
|
|
+ <div class="el-form-item-msg"></div>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item label="文档属性" prop="attribute">
|
|
|
|
|
+ <el-checkbox-group v-model="formData.attribute">
|
|
|
|
|
+ <el-checkbox border :value="item.key" :label="item.key" v-for="(item,indx) in channelData" :key="indx">{{ item.name }}</el-checkbox>
|
|
|
|
|
+ </el-checkbox-group>
|
|
|
|
|
+ <div class="el-form-item-msg"></div>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-row :gutter="10">
|
|
|
|
|
+ <el-col :span="8">
|
|
|
|
|
+ <el-form-item label="浏览数" prop="view">
|
|
|
|
|
+ <el-input v-model="formData.view" clearable placeholder="浏览数">
|
|
|
|
|
+ <template #append>次</template>
|
|
|
|
|
+ </el-input>
|
|
|
|
|
+ <div class="el-form-item-msg"></div>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ </el-col>
|
|
|
|
|
+ <el-col :span="8">
|
|
|
|
|
+ <el-form-item label="作者" prop="author">
|
|
|
|
|
+ <el-input v-model="formData.author" clearable placeholder="作者"></el-input>
|
|
|
|
|
+ <div class="el-form-item-msg"></div>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ </el-col>
|
|
|
|
|
+ <el-col :span="8">
|
|
|
|
|
+ <el-form-item label="来源" prop="source">
|
|
|
|
|
+ <el-input v-model="formData.source" clearable placeholder="来源"></el-input>
|
|
|
|
|
+ <div class="el-form-item-msg"></div>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ </el-col>
|
|
|
|
|
+ </el-row>
|
|
|
|
|
+ <el-form-item label="内容" prop="content" class="label-item">
|
|
|
|
|
+ <sc-editor v-model="formData.content" placeholder="请输入" :height="600" style="width: 100%;"></sc-editor>
|
|
|
|
|
+ <div class="el-form-item-msg"></div>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+
|
|
|
|
|
+ </el-form>
|
|
|
|
|
+ </el-main>
|
|
|
|
|
+ <el-footer style="text-align: right;">
|
|
|
|
|
+ <el-button @click="visible=false" >取 消</el-button>
|
|
|
|
|
+ <el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
|
|
|
|
|
+ </el-footer>
|
|
|
|
|
+ </el-container>
|
|
|
|
|
+ </el-drawer>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script>
|
|
|
|
|
+import { defineAsyncComponent } from 'vue';
|
|
|
|
|
+const scEditor = defineAsyncComponent(() => import('@/components/scEditor'));
|
|
|
|
|
+export default {
|
|
|
|
|
+ components: {
|
|
|
|
|
+ scEditor
|
|
|
|
|
+ },
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ categoryData:[],
|
|
|
|
|
+ deptsProps:{
|
|
|
|
|
+ value: "id",
|
|
|
|
|
+ label: "name"
|
|
|
|
|
+ },
|
|
|
|
|
+ channelData:[{key:1,name:"头条"},{key:2,name:"推荐"},{key:3,name:"加推"},{key:4,name:"标粗"},{key:5,name:"有图"}],
|
|
|
|
|
+ loading: false,
|
|
|
|
|
+ mode:"add",
|
|
|
|
|
+ visible: false,
|
|
|
|
|
+ isSaveing: false,
|
|
|
|
|
+ titleMap:{
|
|
|
|
|
+ add:"新增文章",
|
|
|
|
|
+ edit:"编辑文章"
|
|
|
|
|
+ },
|
|
|
|
|
+ rules:{
|
|
|
|
|
+ title: [
|
|
|
|
|
+ {required: true, message: '请输入'}
|
|
|
|
|
+ ],
|
|
|
|
|
+ category_path: [
|
|
|
|
|
+ {required: true, message: '请选择'}
|
|
|
|
|
+ ],
|
|
|
|
|
+ content: [
|
|
|
|
|
+ {required: true, message: '请输入'}
|
|
|
|
|
+ ],
|
|
|
|
|
+ },
|
|
|
|
|
+ formData:{}
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ open(mode = 'add'){
|
|
|
|
|
+ this.mode = mode;
|
|
|
|
|
+ this.visible = true;
|
|
|
|
|
+ this.getCategory()
|
|
|
|
|
+ if (mode == 'add') {
|
|
|
|
|
+ this.formData = {
|
|
|
|
|
+ view:0,
|
|
|
|
|
+ author:"小编",
|
|
|
|
|
+ source:"网络"
|
|
|
|
|
+ };
|
|
|
|
|
+ }
|
|
|
|
|
+ return this
|
|
|
|
|
+ },
|
|
|
|
|
+ //表单注入数据
|
|
|
|
|
+ setData(data){
|
|
|
|
|
+ this.formData = JSON.parse(JSON.stringify(data));
|
|
|
|
|
+ },
|
|
|
|
|
+ async getCategory(){
|
|
|
|
|
+ var resp = await this.$API.category.list.get({"type":2});
|
|
|
|
|
+ if (resp.code == 0) {
|
|
|
|
|
+ return this.$message.error(resp.msg)
|
|
|
|
|
+ }
|
|
|
|
|
+ this.categoryData = resp.data;
|
|
|
|
|
+ },
|
|
|
|
|
+ async submit(){
|
|
|
|
|
+ var validate = await this.$refs.dialogForm.validate().catch(()=>{});
|
|
|
|
|
+ if(!validate){ return false }
|
|
|
|
|
+ this.isSaveing = true;
|
|
|
|
|
+ var resp = await this.$API.article.save.post(this.formData);
|
|
|
|
|
+ this.isSaveing = false;
|
|
|
|
|
+ if (resp.code == 0) {
|
|
|
|
|
+ return this.$message.error(resp.msg);
|
|
|
|
|
+ }
|
|
|
|
|
+ this.$message.success(resp.msg);
|
|
|
|
|
+ this.visible = false;
|
|
|
|
|
+ this.formData = {};
|
|
|
|
|
+ this.$emit("success");
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+</script>
|