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" label="ID" width="80" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="标题" width="280">
        <template slot-scope="scope">
          <span>{{ scope.row.BannerTitle }}</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.Image" style="height: 130px;"></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.BannerContent )">查看详情</el-button>
        </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="400"
      :close-on-click-modal="false">
      <el-form ref="TestPaperClassInfo" :model="TestPaperClassInfo" label-width="70px">
        <el-form-item label="标题:">
          <el-input v-model="TestPaperClassInfo.BannerTitle"  placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="图片">
          <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-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-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.BannerContent " :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 {
    SystemBannerCreate,
    SystemBannerUpdate,
    SystemBannerDelete,
    SystemBannerlist,
    SystemBannerGet
  } from '@/api/banner'
  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: 1200,
          sort: "id",
          sortOrder: 1,
          keyword: ""
        },
        fileList:[],
        Count: 0,
        list: [],
        message:'',
        header: {
          Authorization: '',
        },
        dialogClassIVIsibleT:false,
        dialogClassIVIsible: false,
        TestPaperClassInfo: {
          id: 0,
          BannerTitle:'',
          Image: '',
          Addtime: "",
          BannerContent:'',
          State: 1
        },
      }
    },
    computed: {

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

    methods: {
      handlePreview(){

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

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

          SystemBannerCreate(this.TestPaperClassInfo).then(res => {
            this.$confirm(res.data.message, '消息')
            this.TestPaperClassInfo = {};
            this.getTestPaperClassListHeadler();
            this.dialogClassIVIsible=false
          })
        } else {
          SystemBannerUpdate(this.TestPaperClassInfo).then(res => {
            this.$confirm(res.data.message, '消息')
            this.getTestPaperClassListHeadler();
            this.dialogClassIVIsible=false
          });
        }
      },
      getTestPaperClassListHeadler() {
        SystemBannerlist(this.parameter).then(res => {
          this.list = res.data.data
        });
      },
      messageDetail(val){
        this.message=val
        this.dialogClassIVIsibleT=true
      },
      closeClassDialogT(){
        this.message=''
        this.dialogClassIVIsibleT=false
      },
      closeClassDialog() {
        this.TestPaperClassInfo = {
         id: 0,
         BannerTitle:'',
         Image: '',
         Addtime: "",
         BannerContent:'',
         State: 1
        };
        this.imageUrl=''
        this.fileList=[]
        // this.$nextTick(() => {
          this.$refs.content.setContent(this.TestPaperClassInfo.BannerContent);
        // })
        this.dialogClassIVIsible=false
        this.getTestPaperClassListHeadler();

      },
      currentchange(page) {
        this.parameter.pageIndex = page;
        this.getTestPaperClassListHeadler();
      },
      //表格右边的操作按钮
      handleCommand(value, val) {

        let that = this;
        if (value == "update") {
          // alert("编辑操作"+val)
          this.dialogClassIVIsible = true;
          SystemBannerGet(val.id).then(res => {
            that.TestPaperClassInfo = res.data.data;
            if(that.TestPaperClassInfo.Image){
              let data={
                url:'https://app.cehuimi.com'+that.TestPaperClassInfo.Image
              }
              this.fileList.push(data)
            }
             // that.imageUrl='https://app.cehuimi.com'+that.TestPaperClassInfo.Image
             this.$nextTick(() => {
               this.$refs.content.setContent(that.TestPaperClassInfo.BannerContent );
             })
          });
        }
        if (value == "del") {
          this.$confirm('确定删除？', '消息', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            callback: (action) => {
              if (action == "confirm") {
                SystemBannerDelete({
                  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>