添加新闻详情功能

src/views/news/detail.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="cmain">
+    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+      <el-form-item label="新闻标题" prop="title">
+        <el-input
+          v-model="form.title"
+          placeholder="请输入标题"
+          disabled
+        ></el-input>
+      </el-form-item>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="新闻类型" prop="type">
+            <el-select
+              v-model="form.type"
+              placeholder="请选择"
+              style="width: 100%"
+              disabled
+            >
+              <el-option
+                v-for="item in typeList"
+                :key="item.value + 'typeList'"
+                :label="item.label"
+                :value="item.value"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="新闻来源">
+            <el-input
+              v-model="form.source"
+              placeholder="请输入来源"
+              disabled
+            ></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item label="新闻封面">
+        <el-image
+          v-if="form.picture"
+          :fit="'contain'"
+          style="
+            width: 20%;
+            margin-top: 10px;
+            border-radius: 5px;
+            margin-bottom: -15px;
+          "
+          :z-index="50000"
+          :src="this.baseUrl + form.picture"
+        ></el-image>
+        <!-- <cropper v-model="form.picture" :fixed_number="[4, 2]"></cropper> -->
+      </el-form-item>
+      <el-form-item label="新闻内容" prop="content">
+        <div v-html="form.content"></div>
+      </el-form-item>
+    </el-form>
+    <div class="mfooter">
+      <el-button @click="$layer.close(layerid)">返回</el-button>
+    </div>
+  </div>
+</template>
+  
+  <script>
+import {
+  listNEWS,
+  getNEWS,
+  delNEWS,
+  addNEWS,
+  updateNEWS,
+  upload,
+  setTop,
+  newCommit,
+  updateAndex,
+  downloadpic,
+} from "@/api/portal/news/NEWS.js";
+export default {
+  data() {
+    return {
+      typeList: [
+        { label: "要闻动态", value: 1 },
+        { label: "政策文件", value: 2 },
+        { label: "通知公告", value: 3 },
+        { label: "政策解读", value: 4 },
+        { label: "投资导航", value: 5 },
+      ],
+      form: { type: 2 },
+      rules: {
+        title: [{ required: true, message: "标题", trigger: "blur" }],
+        content: [{ required: true, message: "内容", trigger: "blur" }],
+        fileUrl: [{ required: true, message: "附件", trigger: "blur" }],
+        type: [{ required: true, message: "类型", trigger: "change" }],
+        typeName: [
+          { required: true, message: "字典类型名称", trigger: "blur" },
+        ],
+        picture: [{ required: true, message: "图片", trigger: "blur" }],
+        status: [{ required: true, message: "状态", trigger: "blur" }],
+      },
+    };
+  },
+  props: {
+    param: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    layerid: {
+      type: String,
+    },
+  },
+  mounted() {
+    if (this.param.type) {
+      this.form.type = parseInt(this.param.type);
+    }
+    if (this.param.id) {
+      getNEWS(this.param.id).then((response) => {
+        this.form = response.data;
+        this.form.type = parseInt(this.form.type);
+        this.form.content = response.data.content.replace(
+          new RegExp("/profile/upload/", "g"),
+          this.baseUrl + "/profile/upload/"
+        );
+      });
+    }
+  },
+  methods: {
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateAndex(this.form).then((response) => {
+              this.$modal.msgSuccess("修改成功");
+              this.$layer.close(this.layerid);
+              this.$parent.getList();
+            });
+          } else {
+            this.form.status = "1";
+            addNEWS(this.form).then((response) => {
+              this.$modal.msgSuccess("新增成功");
+              this.$layer.close(this.layerid);
+              this.$parent.getList();
+            });
+          }
+        }
+      });
+    },
+  },
+};
+</script>
+  

src/views/news/index.vue

@@ -66,6 +66,8 @@
           <el-button v-if="scope.row.status == 5 || scope.row.status == 3" size="mini" type="text" @click="handleDownOrUp(scope.row)" v-hasPermi="['business:NEWS:remove']">发布</el-button>
           <el-button v-if="scope.row.status == 6" size="mini" type="text" @click="hanleTop(scope.row)" v-hasPermi="['business:NEWS:remove']">取消置顶</el-button>
           <el-button v-else-if="scope.row.status == 4" size="mini" type="text" @click="hanleTop(scope.row)" v-hasPermi="['business:NEWS:remove']">置顶</el-button>
+          <el-button type="text" size="mini" @click="showDetail(scope.row)">详情</el-button>
+
         </template>
       </el-table-column>
       <template slot="empty">
@@ -79,6 +81,7 @@
 <script>
 import { listNEWS, getNEWS, delNEWS, addNEWS, updateNEWS, upload, setTop, newCommit, updateAndex, downloadpic } from '@/api/portal/news/NEWS.js';
 import edit from './edit';
+import detail from './detail.vue'
 export default {
   name: 'NEWS',
   data() {
@@ -128,6 +131,10 @@ export default {
     this.getList();
   },
   methods: {
+    showDetail(row){
+      const id = row.id || this.ids;
+      this.iframe({ obj: detail, param: { id: id }, title: '网站新闻详情', width: '1050px', height: '750px' });
+    },
     hanleTop(row) {
       row = { ...row };
       // //判断是否置顶