antissoft / antissoft.dati.admin

<template>
  <div class="app-container">
    <div class="seetingsDiv" style="">
      <el-button type="primary" @click="dialogClassIVIsible=true">添加
      </el-button>
    </div>
    <el-table :data="list" id="QuestionTable" border
      style="width: 100%;border-radius: 5px;box-shadow: 0 0 10px #efefef;margin-top: 10px;" :stripe='true'>
      <el-table-column prop="date" type="index" width="80">
        <!-- <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template> -->
      </el-table-column>
      <el-table-column prop="date" label="新闻标题">
        <template slot-scope="scope">
          <span>{{ scope.row.NewsTitle }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="新闻图片" align="center">
        <template slot-scope="scope">
          <img :src="`https://app.cehuimi.com`+scope.row.NewsImage" style="height: 130px;" v-if="scope.row.NewsImage"></img>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="新闻内容" width="180" align="center">
        <template slot-scope="scope">
          <el-button @click="messageDetail(scope.row.NewsContent )">查看详情</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="添加时间" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.AddTimte.replace('T',' ') }}</span>
        </template>
      </el-table-column>

      <el-table-column fixed="right" width="100" align="center">
        <template slot-scope="scope">
          <el-dropdown @command="(e)=>{handleCommand(e,scope.row)}">
            <span class="el-dropdown-link">
              操作<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="update">编辑</el-dropdown-item>
                <el-dropdown-item command="del">删除</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background @current-change="currentchange"
      style="position:static;bottom: 3px;text-align: center;margin-top: 5px;" :page-size="this.parameter.pageSize"
      layout="total,prev, pager, next" :total="Count">
    </el-pagination>

    <el-dialog title="新闻内容" :visible.sync="dialogClassIVIsibleT" @close="closeClassDialogT" width="700"
      :close-on-click-modal="false">
      <div style="margin-top: 40px;" v-html="message">

      </div>
    </el-dialog>


    <el-dialog title="新闻维护" :visible.sync="dialogClassIVIsible" @close="closeClassDialog" width="700"
      :close-on-click-modal="false">
      <el-form ref="TestPaperClassInfo" :model="TestPaperClassInfo" label-width="90px">
        <el-form-item label="新闻标题:">
          <el-input v-model="TestPaperClassInfo.NewsTitle " placeholder="请输入新闻标题"></el-input>
        </el-form-item>
        <el-form-item label="新闻图片:">
          <!-- <el-upload class="avatar-uploader" action="/api/Upload/upload" :show-file-list="false"
            :on-success="handleAvatarSuccess">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload> -->

          <el-upload class="upload-demo" action="/api/Upload/upload" :on-preview="handlePreview" :headers="header"
            :on-remove="handleRemove" :file-list="fileList" :on-success='handleAvatarSuccess' :limit='1'
            list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="新闻内容:">
        </el-form-item>
      </el-form>

      <div style="margin-top: 40px;">
        <tinymce v-if="dialogClassIVIsible" ref="content" v-model="TestPaperClassInfo.NewsContent " :height="650" />
      </div>
      <el-button @click="CreateTestPaperClassHealder" style="margin: 10px 0 0 0 ;float:right" type="primary">确定
      </el-button>
      <div style="clear: both;"></div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    SystemNewsCreate,
    SystemNewsUpdate,
    SystemNewsDelete,
    SystemNewslist,
    SystemNewsGet
  } from '@/api/news'
  import {
    parseTime
  } from '@/utils/index.js'
  import Tinymce from '@/components/Tinymce'
  import {
    getToken
  } from '@/utils/auth'
  export default {
    components: {
      Tinymce
    },
    data() {
      return {
        imageUrl: '',
        parameter: {
          pageIndex: 1,
          pageSize: 20,
          sort: "id",
          sortOrder: 1,
          keyword: ""
        },
        header: {
          Authorization: '',
        },
        message: '',
        fileList: [],
        dialogClassIVIsibleT: false,
        Count: 0,
        list: [],
        dialogClassIVIsible: false,
        TestPaperClassInfo: {
          "id": 0,
          "NewsTitle": "",
          "NewsImage": "",
          "NewsContent": "",
          "AddTimte": "",
          "ReadNumber": 0,
          "LikeNumber": 0,
          "State": 0
          // id: 0,
          // NewsTitle :'',
          // LikeNumber:0,
          // NewsImage : '',
          // NewsContent :'',
          // ReadNumber:0,
          // Addtime: "",
          // State: 1
        },
      }
    },
    computed: {

    },
    created() {
      this.getTestPaperClassListHeadler()
      this.header.Authorization = getToken()
    },

    methods: {
      handlePreview() {

      },
      handleRemove(file, fileList) {
        this.TestPaperClassInfo.NewsImage = ''

      },
      handleAvatarSuccess(res, file) {
        // this.imageUrl = URL.createObjectURL(file.raw);
        this.TestPaperClassInfo.NewsImage = res.data.data.Uri
      },
      CreateTestPaperClassHealder() {
        if (this.TestPaperClassInfo.id == 0) {
          this.TestPaperClassInfo.AddTimte = parseTime(new Date(), "");

          SystemNewsCreate(this.TestPaperClassInfo).then(res => {
            this.$confirm(res.data.message, '消息')
            this.TestPaperClassInfo = {};
            this.getTestPaperClassListHeadler();
            this.dialogClassIVIsible = false
          })
        } else {
          SystemNewsUpdate(this.TestPaperClassInfo).then(res => {
            this.$confirm(res.data.message, '消息')
            this.getTestPaperClassListHeadler();
            this.dialogClassIVIsible = false
          });
        }
      },
      getTestPaperClassListHeadler() {
        SystemNewslist(this.parameter).then(res => {
          this.list = res.data.data
          this.Count = res.data.totalCount
        });
      },
      messageDetail(val) {
        this.message = val
        this.dialogClassIVIsibleT = true
      },
      closeClassDialogT() {
        this.message = ''
        this.dialogClassIVIsibleT = false
      },
      closeClassDialog() {
        this.TestPaperClassInfo = {
          id: 0,
          NewsTitle: '',
          NewsImage: '',
          NewsContent: '',
          LikeNumber: 0,
          AddTimte: "",
          State: 1
        };
        this.fileList = []
        this.imageUrl = ''
        this.getTestPaperClassListHeadler();
        this.TestPaperClassInfo.NewsContent = ''
        this.dialogClassIVIsible = false
        // this.$nextTick(() => {
        this.$refs.content.setContent(this.TestPaperClassInfo.NewsContent);
        // })
      },
      currentchange(page) {
        this.parameter.pageIndex = page;
        this.getTestPaperClassListHeadler();
      },
      //表格右边的操作按钮
      handleCommand(value, val) {

        let that = this;
        if (value == "update") {
          // alert("编辑操作"+val)
          this.dialogClassIVIsible = true;
          SystemNewsGet(val.id).then(res => {
            that.TestPaperClassInfo = res.data.data;
            if (that.TestPaperClassInfo.NewsImage) {
              let data = {
                url: 'https://app.cehuimi.com' + that.TestPaperClassInfo.NewsImage
              }
              this.fileList.push(data)
            }
            // that.imageUrl='https://app.cehuimi.com'+that.TestPaperClassInfo.NewsImage
            this.$nextTick(() => {
              this.$refs.content.setContent(that.TestPaperClassInfo.NewsContent);
            })
          });
        }
        if (value == "del") {
          this.$confirm('确定删除？', '消息', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            callback: (action) => {
              if (action == "confirm") {
                SystemNewsDelete({
                  ids: val.id
                }).then(res => {
                  if (res.data.code == 200) {
                    this.$confirm(res.data.message, '消息')
                    this.getTestPaperClassListHeadler();
                  }
                });
              }
            },
          })

        }

      },
    }
  }
</script>

<style scoped>
  .seetingsDiv {
    width: 100%;
    height: 60px;
    background: #efefef;
    border-radius: 5px;
    box-shadow: 0 0 5px #cdcdcd;
  }

  .seetingsDiv button {
    background-color: #304156;
    border: 0px;
    margin-left: 10px;
    box-shadow: 0 0 5px #cdcdcd;
    float: left;
    margin-top: 12px;
    margin-right: 10px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>