jin_ji_hu/src/views/enterpriselibrary/enterInfo/components/tabFour/index.vue

<template>
  <div class="projectInfo-memo">
    <div class="memo-top">
      <el-row>
        <el-form :inline="true" :model="formInline" size="small" ref="queryFrom">
          <el-col :span="9">
            <div class="project-info-top">
              <div class="project-info">【备忘录】</div>
              <el-button type="primary" icon="icon iconfont icon-jc-xinjian" size="mini" @click="newMemo" v-if="!roles.includes('sightseer')">新建备忘录</el-button>
              <el-button type="primary" icon="icon iconfont icon-jc-daoru" size="mini" @click="exportMemo" :loading="exportLoading">一键导出</el-button>
            </div>
          </el-col>
          <el-col :span="15">
            <el-form-item>
              <!-- <el-date-picker
                v-model="formInline.time"
                type="datetime"
                placeholder="选择备忘时间">
              </el-date-picker> -->
              <el-date-picker
                class="ignoreElement"
                v-model="memoTime"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-input v-model.trim="formInline.name" placeholder="请输入用户名、主题/关键字， 查询项目备忘"></el-input>
            </el-form-item>
            <el-form-item class="query-item">
              <el-button size="mini" @click="resetQuery('queryFrom')">重置</el-button>
              <el-button size="mini" type="primary" @click="handleQuery('queryFrom')">查询</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </div>
    <div class="memo-bottom" v-loading="loading">
      <el-card :body-style="{ 'padding': '0px' }" v-for="(item,index) in memoList" :key="index"> <!-- 去除阴影 shadow="never -->
        <div slot="header" class="clearfix">
          <div class="clearfix-left">
            <span>{{ item.name }}</span>
            <span>{{ item.createTime }}</span>
          </div>
          <div class="clearfix-right">
            <div class="clearfix-bianji" @click="putMemo(item)">
              <i class="icon iconfont icon-jc-bianji-copy"></i>
              编辑
            </div>
            <div class="clearfix-shanchu" @click="delMemo(item)">
              <i class="icon iconfont icon-jc-shanchu-select"></i>
              删除
            </div>
          </div>
        </div>
        <div class="clearfix-body">
          <div class="memo-keyword">
            <div class="memo-keyword-title">主题/关键字</div>
            <div class="memo-keyword-content">
              {{ item.keywords }}
            </div>
          </div>
          <div class="memo-content">
            <div class="memo-content-title">
              备忘内容
            </div>
            <div class="memo-content-content">
              {{ item.content }}
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <my-dialog :title="title" @close="memoClose" @confirm="confirm" :myclass="true" ref="newMemoRef">
      <div class="memoDialog">
        <el-form :model="memoData" size="small" ref="memoFrom" label-width="120px">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="memoData.name" placeholder="请输入内容" disabled></el-input>
          </el-form-item>
          <el-form-item label="备忘时间" prop="createTime">
            <el-date-picker
              disabled
              v-model="memoData.createTime"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              placeholder="选择备忘时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="主题/关键字" prop="keywords">
            <el-input
              type="textarea"
              resize="none"
              :rows="3"
              placeholder="请输入主题/关键字"
              v-model="memoData.keywords">
            </el-input>
          </el-form-item>
          <el-form-item label="备忘内容" prop="content">
            <el-input
              type="textarea"
              resize="none"
              :rows="3"
              placeholder="请输入备忘内容"
              v-model="memoData.content">
            </el-input>
          </el-form-item>
        </el-form>
      </div>
    </my-dialog>
  </div>
</template>
<script>
import { getJMemorandumList, getJMemorandumId, postJMemorandum, putJMemorandum, delJMemorandum } from "@/api/jin_ji_hu/project/index"
import myDialog from "@/views/components/myDialog/index.vue"
export default {
  components:{
    myDialog
  },
  name:"tabFour",
  data() {
    return {
      formInline:{
        startTime:"",
        endTime:"",
        type: "1",
        name:"",
        projectId:undefined,
      },
      memoTime:[],
      title:"新增备忘录",
      memoData:{
        name: "",
        createTime: "",
        keywords: "",
        content: "",
        type: "1",
        projectId:undefined,
      },
      memoList:[],
      loading:false,
      // 导出遮罩层
      exportLoading: false,
    }
  },
  props:{
    id:{
      type:String,
      default:"",
    }
  },
  mounted(){
    this.formInline.projectId = Number(this.id);
    this.memoData.projectId = Number(this.id);
    this.getList();
  },
  methods:{
    // 重置
    resetQuery(){
      this.formInline = {
        startTime:"",
        endTime:"",
        name:"",
        type: "1",
        projectId:this.id,
      }
      this.memoTime = [];
      this.getList();
    },
    // 搜索
    handleQuery(){
      this.formInline.startTime = this.memoTime[0];
      this.formInline.endTime = this.memoTime[1];
      this.getList();
    },
    // 新建备忘录
    newMemo(){
      this.title = "新建备忘录";
      this.memoData = {
        name: "",
        createTime: "",
        keywords: "",
        content: "",
        type: "1",
        projectId:undefined,
      }
      this.$refs.newMemoRef.open();
      this.memoData.projectId = Number(this.id);
      this.memoData.name = this.$store.getters.name;
      this.memoData.createTime = this.getDate();
    },
    // 导出
    exportMemo(){
      if(this.memoList.length > 0) {
        this.$confirm("是否确认导出备忘录?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.exportLoading = true;
            this.download(
              "/jjh/jMemorandum/export",
              {
                ...this.formInline
              },
              "备忘录" + new Date().getTime() + ".xlsx"
            );
            this.exportLoading = false;
          })
          .catch(() => { });
      } else {
        this.$message({
          type: "warning",
          message: "备忘录列表为空，无法导出！",
        });
      }
    },
    // 获取备忘录列表
    getList() {
      this.loading = true;
      getJMemorandumList(this.formInline).then(res=>{
        // console.log(res,"获取到的备忘录列表");
        this.memoList = res.data;
        this.loading = false;
      })
    },
    // 关闭备忘录
    memoClose(){
      // console.log("关闭弹框");
      // this.clearKey(this.memoData)
      this.$nextTick(()=>{
        this.$refs.memoFrom.resetFields();
        this.$refs.newMemoRef.close();
      })
    },
    confirm(){
      if(this.memoData.id) {
        putJMemorandum(this.memoData).then(res=>{
          if(res.code == 200) {
            this.memoClose();
            this.getList();
            this.$message({
              type: "success",
              message: "修改成功!",
            });
          }
        })
      } else {
        postJMemorandum(this.memoData).then(res=>{
          if(res.code == 200) {
            this.memoClose();
            this.getList();
            this.$message({
              type: "success",
              message: "新增成功!",
            });
          }
        })
      }
    },
    // 编辑备忘录
    putMemo(row){
      this.title = "编辑备忘录";
      this.$refs.newMemoRef.open();
      getJMemorandumId(row.id).then(res=>{
        this.memoData = res.data;
      })
    },
    // 删除备忘录
    delMemo(row){
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
      .then(() => {
        delJMemorandum(row.id).then((res) => {
          this.getList();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        });
      })
      .catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
      });
    },
    // 获取当前年月日时分秒
    getDate(){
      const date = new Date();
      var year = date.getFullYear(); // 获取当前年份
      var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1; // 获取当前月份（注意：月份是从 0 开始计数的，所以要加 1）
      var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate(); // 获取当前日期
      var hours = date.getHours(); // 获取当前小时
      var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes(); // 获取当前分钟
      var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds(); // 获取当前秒数
      return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
    },
  },
}
</script>