learning-system-portal/src/views/case/ManageList.vue

<template>
  <div class="u-page">
    <Remark>
      1.案例是同步过来的，所以这里没有加编辑，添加等处理标识
      <br />
      2.推荐记录是一个列表，一个案例可能推荐多个不同的受众，每次推荐都是有一记录，推荐时间，受众
    </Remark>
    <div style="padding-bottom: 10px;">
      <div style="display: flex;justify-content:flex-start;">
        <!-- <div style="padding: 0px 5px;"><el-cascader placeholder="资源归属" clearable v-model="params.type" :options="typeList"></el-cascader></div> -->
        <div style="padding: 0px 5px;">
          <el-select v-model="queryObj.isTop" style="width: 110px;" clearable placeholder="置顶">
            <el-option label="已置顶" :value="true"></el-option>
            <el-option label="未置顶" :value="false"></el-option>
          </el-select>
        </div>
        <div style="padding: 0px 5px;"><el-input placeholder="关键词搜索" v-model="queryObj.keyWord" clearable></el-input></div>
        <div style="padding: 0px 5px;">
          <el-button @click="getData" icon="el-icon-search" type="primary" >搜索</el-button>
          <el-button @click="showRecords()" icon="el-icon-tickets" type="info" >推荐记录</el-button>
          <el-button icon="el-icon-refresh-right" type="primary"  @click="reset">重置</el-button>
        </div>
      </div>
    </div>
    <el-table style="100%" :data="caseList" border stripe>
      <el-table-column label="标题" prop="title" show-overflow-tooltip>
        <template slot-scope="scope">
          <span class="previewStyle" @click="viewTopic(scope.row)">{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column label="摘要" show-overflow-tooltip prop="content">
      </el-table-column>
      <el-table-column label="作者" width="80px" prop="sysCreateBy"></el-table-column>
      <el-table-column label="导入时间" prop="sysCreateTime"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button-group>
            <el-button type="text" @click="shareItem(scope.row)"  icon="el-icon-share" style="margin:0 5px">推荐</el-button>
            <el-button style="margin:0 5px"  v-if="scope.row.isTop==0" type="text" @click="setTop(scope.row)"  :icon="scope.row.isTop==1 ? 'el-icon-bottom' : 'el-icon-top'">置顶</el-button>
             <el-button style="margin:0 5px" v-else  type="text" @click="setTop(scope.row)"  :icon="scope.row.isTop==1 ? 'el-icon-bottom' : 'el-icon-top'">取消置顶</el-button>
            <el-button type="text" @click="delItem(scope.row)"  icon="el-icon-delete">删除</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: center;margin-top: 50px;">
      <el-pagination
      background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryObj.pagelIndex"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="queryObj.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
      ></el-pagination>
    </div>
    <div style="height: 100px;"></div>

    <el-dialog title="推荐案例" :visible.sync="shareShow" :close-on-click-modal="false" width="500px" custom-class="g-dialog">
      <div style="padding-right: 30px;">
          <el-form  label-width="100px"  @submit.native.prevent >
            <el-form-item label="推荐案例">{{shareItemData.title}}</el-form-item>
            <el-form-item label="姓名或工号">
              <el-input v-model="shareInfo.name" maxlength="10" placeholder="您要分享的人的姓名搜索" @keyup.enter.native="keyupEnter">
                <el-button @click="findUser" slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-checkbox-group v-model="shareUsers">
                 <el-checkbox v-for="(u,uidx) in shareInfo.list" :key="uidx" :label="u.aid">{{u.name+'('+u.orgInfo+')'}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <!-- <div style="padding: 0 20px 20px 20px;">

            </div> -->
            <el-form-item label="推荐说明"><el-input type="textarea" :rows="3" v-model="shareItemData.recommentThat" placeholder="备注说明"></el-input></el-form-item>
          </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="shareShow = false">取 消</el-button>
        <el-button @click="submitWork" type="primary">提交推荐任务</el-button>
      </span>
    </el-dialog>
    <el-dialog title="推荐记录" :visible.sync="recommend.dlgShow" :close-on-click-modal="false" width="900px" custom-class="g-dialog">
      <div>
        <el-table stripe style="width: 100%" :data="recommend.records">
          <el-table-column prop="caseName" label="案例名称"></el-table-column>
          <el-table-column prop="sysCreateTime" label="推送时间"></el-table-column>
          <el-table-column prop="toType" label="类型">
            <template slot-scope="scope">
              <span v-if="scope.row.type == 1">个人</span>
              <span v-if="scope.row.type == 2">受众群体</span>
            </template>
          </el-table-column>
          <el-table-column prop="acceptName" label="接收"></el-table-column>
          <el-table-column prop="recommendThat" label="说明"></el-table-column>
          <el-table-column prop="toType" label="状态" width="100px">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 1" style="color: #008000;">执行中</span>
              <span v-if="scope.row.status == 2" style="color: red;">已通过</span>
              <span v-if="scope.row.status == 9" style="color: red;">未通过</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer"><el-button @click="recommend.dlgShow = false">关闭</el-button></span>
    </el-dialog>
  </div>
</template>

<script>
import apiCase from '@/api/modules/cases.js';
import apiUser from '@/api/system/user.js'
export default {
  name: 'articleItems',
  data() {
    return {
      queryObj: {
        pagelIndex:1,
        pageSize:10,
      }, //查询对象
      caseList: [], //案例列表
      count:0,
      recommend: {
        dlgShow: false,
        records: [
        ]
      },
      shareInfo:{
        name:'',
        load:false,
        list:[]
      },
      shareShow: false,
      shareUsers:[],
      shareItemData:{},

      timeout: null,
      params: { name: '', type: '' },
      typeList: [],
      findList: [
        {
          code: '001',
          name: '李玉冰',
          position: '技术部'
        },
        {
          code: '002',
          name: '程萌',
          position: '策划部'
        }
      ]
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    reset() {
      this.queryObj.isTop = '';
      this.queryObj.keyWord = '';
      this.getData()
    },
    //获取案例列表数据
    getData() {
      apiCase
        .isTopList(this.queryObj)
        .then(res => {
          if (res.status == 200) {
            this.count=res.result.count
            this.caseList = res.result.list;
          } else {
            this.$message({
              type: 'error',
              message: '查询数据失败'
            });
          }
        })
        .catch(err => {
          this.$message({
            type: 'error',
            message: '查询数据失败'
          });
        });
    },
    handleSizeChange(val) {
      this.queryObj.pageSize=val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.queryObj.pagelIndex=val;
      this.getData();
    },
    //暂时因为没数据，先做添加
    showRecords() {
      this.recommend.dlgShow = true;
      apiCase.query().then(res=>{
        if(res.status==200){
          this.recommend.records=res.result
        }
      }).catch(err=>{
        this.$message({
          type:'error',
          message:'获取数据失败'
        })
      })
    },
    setTop(item) {
      let msg,isTop;
      if (item.isTop==1) {
        msg = '已取消置顶';
        isTop=0
      } else {
        msg = '置顶成功';
        isTop=1
      }
      apiCase.updateTop(item.id,isTop).then(res=>{
        if(res.status==200){
          this.$message.success(msg);
          this.getData()
        }else{
          this.$message.error("操作失败")
        }
      })
    },
    delItem(item) {
      this.$confirm('您确定要删除所选文章吗？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          apiCase.del(item.id).then(res=>{
            if(res.status==200){
              this.$message.success("删除成功");
              this.getData()
            }
          })
        })
        .catch(() => {
          this.$message({ type: 'info', message: '已取消删除', offset: 50 });
        });
    },
    //添加推荐
    shareItem(item) {
      this.shareItemData={...item}
      this.shareShow = true;
    },
    submitWork(){
      if(this.shareUsers.length==0){
        this.$message.error('请选择分享人');
        return;
      }
      let {title,recommentThat,id}=this.shareItemData
      let {aid:acceptAid}=this.shareInfo.list[0]
      let queryData={
        title,recommentThat,acceptAid,id
      }
      //暂时只针对个人分享，所以暂时只传一条，没有传数组
      apiCase.savaRecommend(queryData).then(res=>{
        if(res.status==200){
          this.$message.success("分享成功")
		  this.shareShow = false;
        }else{
          this.$message.error("分享失败")
        }
      }).catch(err=>{
        this.$message.error("分享失败")
      })
      // let {id,title,acceptAid,recommentThat}=item
      // apiCase.savaRecommend()
    },
    keyupEnter(){
       this.findUser();
       return false;
    },
    findUser(){
       this.shareInfo.load=false;
       this.shareInfo.list=[];
       this.shareUsers=[];
       var name=this.shareInfo.name;
       var regPos = /^\d+(\.\d+)?$/; //非负浮点数
       if(regPos.test(name)){
            //console.log("数字");
            apiUser.getByLoginName(name).then(rs=>{
              if(rs.status==200){
                //因为根据工号查询，只会是一个人，所有会有null情况，而json会返回空字符串
                if(rs.result!=''){
                  this.shareInfo.list.push(rs.result);
                }
                this.shareInfo.load=true;
              }else{
                this.$message.error('查询用户失败');
              }
            })
        }else{
            // console.log("非数字");
            apiUser.findByName(name).then(rs=>{
              if(rs.status==200){
                this.shareInfo.list=rs.result;
                this.shareInfo.load=true;
              }else{
                this.$message.error('查询用户失败');
              }
            })
        }
    },

    setEssence(item, idx) {
      //没有了
      let msg = '已设置精华';
      if (item.isEssence) {
        item.isEssence = false;
        msg = '已取消精华';
      } else {
        item.isEssence = true;
      }
      this.$message({ message: msg, type: 'success', offset: 50 });
    },
    handleSelect(item) {
      console.log(item);
    },
    querySearchAsync(queryString, cb) {
      let result = queryString ? this.findList.filter(this.createStateFilter(queryString)) : this.findList;
      result = result.map(item => {
        item.value = `工号:${item.code} 部门:${item.position} 姓名:${item.name}`;
        return item;
      });
      cb(result);
      // clearTimeout(this.timeout);
      //     this.timeout = setTimeout(() => {
      //       cb(result);
      //     }, 3000 * Math.random());
    },
    createStateFilter(queryString) {
      return state => {
        return (
          state.name.toLowerCase().indexOf(queryString.toLowerCase()) != -1 ||
          state.code.toLowerCase().indexOf(queryString.toLowerCase()) != -1 ||
          state.position.toLowerCase().indexOf(queryString.toLowerCase()) != -1
        );
      };
    },
    viewTopic(data) {
      window.open(this.webBaseUrl+'/case/detail?id='+data.id, '_blank');
    }
  }
};
</script>

<style lang="scss" scoped>
.article-status1 {
  padding: 3px;
  border: 1px dotted #1ea0fa;
  color: #1ea0fa;
}
.article-status2 {
  padding: 3px;
  border: 1px dotted #00aa00;
  color: #00aa00;
}
.article-status3 {
  padding: 3px;
  border: 1px dotted #ff0000;
  color: #ff0000;
}
.article-list {
  margin: 5px 0;
  border: 1px solid #dddddd;
  padding: 10px;
}

.article-info {
  .article-info-title {
    font-size: 16px;
    font-weight: 400;
    height: 40px;
    line-height: 40px;
    .article-info-date {
      width: 150px;
      height: 40px;
      line-height: 40px;
      float: right;
      font-weight: 200;
      color: #999999;
      i {
        margin-right: 5px;
      }
    }
  }
  .article-info-summary {
    height: 65px;
    color: #999999;
  }
  .article-info-tools {
    height: 30px;
    .article-info-tools-auth {
      float: left;
      font-size: 13px;
      color: #999999;
      img {
        margin-right: 10px;
        width: 30px;
        border: 1px solid #eee;
        border-radius: 50%;
        vertical-align: middle;
      }
    }
    .article-info-tools-btns {
      float: right;
      .article-info-tools-btn {
        margin: 0 0 0 15px;
      }
    }
  }
}
.case-row-btn {
  line-height: 25px;

  button {
    height: 20px;
    padding: 3px 20px;
  }
}
.el-form{
  .el-form-item{
    margin-bottom: 10px;
  }
}
</style>