文章编写和导航

ebts-ui/src/views/sist/article/index.vue

@@ -11,24 +11,44 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="1: 2: 3: 根据导航" prop="type">
-        <el-select v-model="queryParams.type" placeholder="请选择" clearable size="small">
-          <el-option label="请选择字典生成" value="" />
+      <el-form-item label="文章类型" prop="type">
+        <el-select v-model="queryParams.type" placeholder="请选择文章类型" clearable size="small">
+          <el-option
+            v-for="dict in typeOptions"
+            :key="dict.dictValue"
+            :label="dict.dictLabel"
+            :value="dict.dictValue"
+          />
         </el-select>
       </el-form-item>
       <el-form-item label="是否置顶" prop="isTop">
         <el-select v-model="queryParams.isTop" placeholder="请选择是否置顶" clearable size="small">
-          <el-option label="请选择字典生成" value="" />
+          <el-option
+            v-for="dict in isTopOptions"
+            :key="dict.dictValue"
+            :label="dict.dictLabel"
+            :value="dict.dictValue"
+          />
         </el-select>
       </el-form-item>
       <el-form-item label="是否显示" prop="isView">
         <el-select v-model="queryParams.isView" placeholder="请选择是否显示" clearable size="small">
-          <el-option label="请选择字典生成" value="" />
+          <el-option
+            v-for="dict in isViewOptions"
+            :key="dict.dictValue"
+            :label="dict.dictLabel"
+            :value="dict.dictValue"
+          />
         </el-select>
       </el-form-item>
       <el-form-item label="状态" prop="status">
         <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">
-          <el-option label="请选择字典生成" value="" />
+          <el-option
+            v-for="dict in statusOptions"
+            :key="dict.dictValue"
+            :label="dict.dictLabel"
+            :value="dict.dictValue"
+          />
         </el-select>
       </el-form-item>
       <el-form-item>
@@ -39,14 +59,15 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['sist:article:add']"
-        >新增</el-button>
+          <el-button
+            type="primary"
+            plain
+            icon="el-icon-plus"
+            size="mini"
+            v-hasPermi="['sist:article:add']"
+            @click="handleAdd"
+          >新增
+          </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -57,7 +78,8 @@
           :disabled="single"
           @click="handleUpdate"
           v-hasPermi="['sist:article:edit']"
-        >修改</el-button>
+        >修改
+        </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -68,7 +90,8 @@
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['sist:article:remove']"
-        >删除</el-button>
+        >删除
+        </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -78,51 +101,52 @@
           size="mini"
           @click="handleExport"
           v-hasPermi="['sist:article:export']"
-        >导出</el-button>
+        >导出
+        </el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="articleList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column type="selection" width="55" align="center"/>
       <el-table-column label="序号" type="index" align="center">
         <template slot-scope="scope">
-                        <span>{{ ((queryParams.pageInfo.pageNum - 1) * queryParams.pageInfo.pageSize + scope.$index + 1)}}</span>
+          <span>{{ ((queryParams.pageInfo.pageNum - 1) * queryParams.pageInfo.pageSize + scope.$index + 1) }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="站点类型" align="center" prop="sitetype" :formatter="sitetypeFormat" />
-<!--      <el-table-column label="站点类型" align="center" prop="sitetype"  />-->
-      <el-table-column label="1: 2: 3: 根据导航" align="center" prop="type" />
-      <el-table-column label="文章标题" align="center" prop="title" />
-      <el-table-column label="发布时间" align="center" prop="publishTime" width="180">
+      <el-table-column label="文章标题" align="center" prop="title"/>
+      <el-table-column label="站点类型" align="center" prop="sitetype" :formatter="sitetypeFormat"/>
+      <el-table-column label="文章类型" align="center" prop="type" :formatter="typeFormat"/>
+      <el-table-column label="发布人姓名" align="center" prop="publishUserName"/>
+      <el-table-column label="是否置顶" align="center" prop="isTop" :formatter="isTopFormat"/>
+      <el-table-column label="是否显示" align="center" prop="isView" :formatter="isViewFormat"/>
+      <el-table-column label="查看次数" align="center" prop="viewCount"/>
+      <el-table-column label="缩略图" align="center" prop="imgurl"/>
+      <el-table-column label="是否英文" align="center" prop="isEnglish" :formatter="isEnglishFormat"/>
+      <el-table-column label="状态" align="center" prop="status" :formatter="statusFormat"/>
+      <el-table-column label="发布时间 " align="center" prop="publishTime" width="180">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.publishTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="发布人id" align="center" prop="publishUserId" />
-      <el-table-column label="发布人姓名" align="center" prop="publishUserName" />
-      <el-table-column label="是否置顶" align="center" prop="isTop" />
-      <el-table-column label="是否显示" align="center" prop="isView" />
-      <el-table-column label="查看次数" align="center" prop="viewCount" />
-      <el-table-column label="缩略图" align="center" prop="imgurl" />
-      <el-table-column label="是否英文" align="center" prop="isEnglish" />
-      <el-table-column label="状态" align="center" prop="status" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['sist:article:edit']"
-          >修改</el-button>
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-edit"
+              v-hasPermi="['sist:article:edit']"
+              @click="handleUpdate(scope.row)"
+            >修改
+            </el-button>
           <el-button
             size="mini"
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['sist:article:remove']"
-          >删除</el-button>
+          >删除
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -134,80 +158,11 @@
       :limit.sync="queryParams.pageInfo.pageSize"
       @pagination="getList"
     />
-
-    <!-- 添加或修改系统文章对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="站点类型 1： sist    2: lab 3: 双边都发" prop="sitetype">
-          <el-select v-model="form.sitetype" placeholder="请选择站点类型">
-            <el-option
-              v-for="dict in sitetypeOptions"
-              :key="dict.dictValue"
-              :label="dict.dictLabel"
-              :value="parseInt(dict.dictValue)"
-            ></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="1: 2: 3: 根据导航" prop="type">
-          <el-select v-model="form.type" placeholder="请选择1: 2: 3: 根据导航">
-            <el-option label="请选择字典生成" value="" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="文章内容">
-          <editor v-model="form.content" :min-height="192"/>
-        </el-form-item>
-        <el-form-item label="文章标题" prop="title">
-          <el-input v-model="form.title" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
-        <el-form-item label="发布时间" prop="publishTime">
-          <el-date-picker clearable size="small"
-            v-model="form.publishTime"
-            type="date"
-            value-format="yyyy-MM-dd"
-            placeholder="选择发布时间 ,发布人自定义，后端SQL过滤">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="发布人id" prop="publishUserId">
-          <el-input v-model="form.publishUserId" placeholder="请输入发布人id" />
-        </el-form-item>
-        <el-form-item label="发布人姓名" prop="publishUserName">
-          <el-input v-model="form.publishUserName" placeholder="请输入发布人姓名" />
-        </el-form-item>
-        <el-form-item label="是否置顶" prop="isTop">
-          <el-select v-model="form.isTop" placeholder="请选择是否置顶">
-            <el-option label="请选择字典生成" value="" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="是否显示" prop="isView">
-          <el-select v-model="form.isView" placeholder="请选择是否显示">
-            <el-option label="请选择字典生成" value="" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="查看次数" prop="viewCount">
-          <el-input v-model="form.viewCount" placeholder="请输入查看次数" />
-        </el-form-item>
-        <el-form-item label="缩略图地址，根据类型判断是否显示" prop="imgurl">
-          <el-input v-model="form.imgurl" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
-        <el-form-item label="是否英文" prop="isEnglish">
-          <el-input v-model="form.isEnglish" placeholder="请输入是否英文" />
-        </el-form-item>
-        <el-form-item label="状态： 1：编辑中 2：待审核 ，3: 审核完成">
-          <el-radio-group v-model="form.status">
-            <el-radio label="1">请选择字典生成</el-radio>
-          </el-radio-group>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
   </div>
 </template>
 
 <script>
-import { listArticle, getArticle, delArticle, addArticle, updateArticle, exportArticle } from "@/api/sist/article";
+import {listArticle, delArticle, exportArticle} from "@/api/sist/article";
 import Editor from '@/components/Editor';
 
 export default {
@@ -237,14 +192,24 @@ export default {
       open: false,
       // 站点类型 1： sist    2: lab 3: 双边都发字典
       sitetypeOptions: [],
+      // 1: 2: 3: 根据导航字典
+      typeOptions: [],
+      // 是否置顶字典
+      isTopOptions: [],
+      // 是否显示字典
+      isViewOptions: [],
+      // 是否英文字典
+      isEnglishOptions: [],
+      // 状态： 1：编辑中 2：待审核 ，3: 审核完成字典
+      statusOptions: [],
 
       // 查询参数
       queryParams: {
-          pageInfo:{
-              pageNum: 1,
-              pageSize: 10,
-          },
-        params:{},
+        pageInfo: {
+          pageNum: 1,
+          pageSize: 10,
+        },
+        params: {},
         sitetype: null,
         type: null,
         title: null,
@@ -253,10 +218,35 @@ export default {
         status: null
 
       },
-      // 表单参数
-      form: {},
       // 表单校验
       rules: {
+        sitetype: [
+          {required: true, message: "站点类型 1： sist    2: lab 3: 双边都发不能为空}", trigger: "change"},
+        ],
+        type: [
+          {required: true, message: "1: 2: 3: 根据导航不能为空}", trigger: "change"},
+        ],
+        content: [
+          {required: true, message: "文章内容不能为空}", trigger: "blur"},
+        ],
+        title: [
+          {required: true, message: "文章标题不能为空}", trigger: "blur"},
+        ],
+        publishTime: [
+          {required: true, message: "发布时间", trigger: "blur"},
+        ],
+        publishUserName: [
+          {required: true, message: "发布人姓名不能为空}", trigger: "blur"},
+        ],
+        isTop: [
+          {required: true, message: "是否置顶不能为空}", trigger: "change"},
+        ],
+        isView: [
+          {required: true, message: "是否显示不能为空}", trigger: "change"},
+        ],
+        isEnglish: [
+          {required: true, message: "是否英文不能为空}", trigger: "blur"},
+        ],
       }
     };
   },
@@ -265,45 +255,61 @@ export default {
     this.getDicts("article_site_type").then(response => {
       this.sitetypeOptions = response.data;
     });
+    this.getDicts("type").then(response => {
+      this.typeOptions = response.data;
+    });
+    this.getDicts("is_top").then(response => {
+      this.isTopOptions = response.data;
+    });
+    this.getDicts("is_view").then(response => {
+      this.isViewOptions = response.data;
+    });
+    this.getDicts("is_english").then(response => {
+      this.isEnglishOptions = response.data;
+    });
+    this.getDicts("article_status").then(response => {
+      this.statusOptions = response.data;
+    });
   },
   methods: {
     /** 查询系统文章列表 */
     getList() {
-        this.loading = true;
-        listArticle(this.queryParams).then(response => {
-            this.articleList = response.rows;
-            this.total = response.total;
-            this.loading = false;
+      this.loading = true;
+      listArticle(this.queryParams).then(response => {
+        this.articleList = response.rows;
+        this.total = response.total;
+        this.loading = false;
       });
     },
     // 站点类型 1： sist    2: lab 3: 双边都发字典翻译
     sitetypeFormat(row, column) {
       return this.selectDictLabel(this.sitetypeOptions, row.sitetype);
     },
+    // 1: 2: 3: 根据导航字典翻译
+    typeFormat(row, column) {
+      return this.selectDictLabel(this.typeOptions, row.type);
+    },
+    // 是否置顶字典翻译
+    isTopFormat(row, column) {
+      return this.selectDictLabel(this.isTopOptions, row.isTop);
+    },
+    // 是否显示字典翻译
+    isViewFormat(row, column) {
+      return this.selectDictLabel(this.isViewOptions, row.isView);
+    },
+    // 是否英文字典翻译
+    isEnglishFormat(row, column) {
+      return this.selectDictLabel(this.isEnglishOptions, row.isEnglish);
+    },
+    // 状态： 1：编辑中 2：待审核 ，3: 审核完成字典翻译
+    statusFormat(row, column) {
+      return this.selectDictLabel(this.statusOptions, row.status);
+    },
     // 取消按钮
     cancel() {
       this.open = false;
       this.reset();
     },
-    // 表单重置
-    reset() {
-      this.form = {
-        id: null,
-        sitetype: null,
-        type: null,
-        content: null,
-        title: null,
-        publishUserId: null,
-        publishUserName: null,
-        isTop: null,
-        isView: null,
-        viewCount: null,
-        imgurl: null,
-        isEnglish: null,
-        status: 0
-      };
-      this.resetForm("form");
-    },
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNum = 1;
@@ -317,71 +323,43 @@ export default {
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.id)
-      this.single = selection.length!==1
+      this.single = selection.length !== 1
       this.multiple = !selection.length
     },
     /** 新增按钮操作 */
     handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加系统文章";
+      this.$router.push("/article/add");
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
-      this.reset();
-      const id = row.id || this.ids
-      getArticle(id).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改系统文章";
-      });
-    },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.id != null) {
-            updateArticle(this.form).then(response => {
-              this.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addArticle(this.form).then(response => {
-              this.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
+      this.$router.push("/article/edit/" + row.id);
     },
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids;
       this.$confirm('是否确认删除系统文章编号为"' + ids + '"的数据项?', "警告", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        }).then(function() {
-          return delArticle(ids);
-        }).then(() => {
-          this.getList();
-          this.msgSuccess("删除成功");
-        })
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(function () {
+        return delArticle(ids);
+      }).then(() => {
+        this.getList();
+        this.msgSuccess("删除成功");
+      })
     },
     /** 导出按钮操作 */
     handleExport() {
       const queryParams = this.queryParams;
       this.$confirm('是否确认导出所有系统文章数据项?', "警告", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        }).then(function() {
-          return exportArticle(queryParams);
-        }).then(response => {
-          this.download(response.msg);
-        })
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(function () {
+        return exportArticle(queryParams);
+      }).then(response => {
+        this.download(response.msg);
+      })
     }
   }
 };