Yezhan/src/views/pointManage/pointsPlusOrMinus.vue

<template>
    <div class="app-container calendar-list-container">
  
      <!-- 查询和其他操作 -->
      <div class="filter-container">
        <el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入姓名"
                v-model="listQuery.userName"></el-input>
        <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">查找</el-button>
        <el-button class="filter-item" type="primary" @click="handleCreate" icon="el-icon-edit">添加</el-button>
      </div>
  
      <!-- 查询结果 -->
      <el-table size="small" :data="list" v-loading="listLoading" element-loading-text="正在查询中。。。" border fit
        highlight-current-row>
        <el-table-column type="index" label="序号" header-align="center" align="center">
        </el-table-column>
  
        <el-table-column align="center" min-width="80px" label="姓名" prop="userName">
            </el-table-column>
            <el-table-column align="center" min-width="150px" label="部门" prop="deptName">
            </el-table-column>
            <el-table-column align="center" min-width="80px" label="积分">
                <template slot-scope="scope">
                    <span style="color: #67C23A;font-weight: 600;font-size: 14px;" v-if="scope.row.pm == 0">
                        + {{ scope.row.integral }}
                    </span>
                    <span style="color: #F56C6C;font-weight: 600;font-size: 14px;" v-else>
                        - {{ scope.row.integral }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column align="center" min-width="200px" label="备注" prop="comment">
            </el-table-column>
            <el-table-column align="center" min-width="80px" label="创建时间" prop="createTime">
                </el-table-column>
        </el-table>
  
      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
  
      <!-- 添加或修改对话框 -->
      <el-dialog :close-on-click-modal="false" :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="45%">
        <el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="100px"
          style='width:700px; margin-left:50px;'>
  
          <el-form-item label="员工" prop="loginId">
            <el-select v-model="dataForm.loginId" filterable placeholder="请选择" style="width: 350px">
                        <el-option :key="item.loginId" v-for="item in loginIdList" :label="item.userName" :value="item.loginId">
                        </el-option>
                    </el-select>
          </el-form-item>
          <el-form-item label="积分" prop="integral">
                  <el-input-number
                  style="width: 350px"
                    :precision="0"
                    :step="1"
                    v-model="dataForm.integral"
                  ></el-input-number>
                </el-form-item>
                <el-form-item  label="备注">
              <el-input type="textarea" :rows="2" style="width: 350px" v-model="dataForm.msg"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary"  @click="createData">确定</el-button>
        </div>
      </el-dialog>
  
    </div>
  </template>
    
  <style>
  .demo-table-expand {
    font-size: 0;
  }
  
  .demo-table-expand label {
    width: 200px;
    color: #99a9bf;
  }
  
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
  }
  </style>
    
  <script>
  import { getPointDetailList, addSub } from "@/api/pointManage";
  import { allUserList } from "@/api/public";
  import waves from "@/directive/waves"; // 水波纹指令
  import Tinymce from '@/components/Tinymce'
  
  export default {
    components: { Tinymce },
    directives: { waves },
    data() {
      return {
        loginIdList:[],
        list: [],
        total: 0,
        listLoading: false,
        listQuery: {
          page: 1,
          limit: 10,
          integralType:100,
          userName: '',
        },
        dataForm: {
          integral: undefined,
          loginId: '',
          msg:'',
        },
        dialogFormVisible: false,
        dialogStatus: '',
        textMap: {
          update: "编辑",
          create: "创建",
        },
        rules: {
          integral: [{ required: true, message: "积分不能为空", trigger: "blur" }],
          loginId: [{ required: true, message: "请选积分加减人员", trigger: "blur" }],
        },
      }
    },
    created() {
        this.getAllUserList(); 
      this.getList();
    },
    methods: {
        getAllUserList() {
            allUserList().then(response => {
                this.loginIdList = response.data.data;
            }).catch(() => {});
        },
      resetForm() {
        this.dataForm = {
            integral: undefined,
          loginId: '',
          msg:'',
        };
      },
      handleCreate() {
  
        this.resetForm();
        this.dialogFormVisible = true;
        this.dialogStatus = "create";
        this.$nextTick(() => {
          this.$refs["dataForm"].clearValidate();
        });
      },
      createData() {
        this.$refs["dataForm"].validate((valid) => {
          if (valid) {
            console.log(this.dataForm);
            addSub(this.dataForm)
              .then((response) => {
                this.dialogFormVisible = false;
                this.$notify({
                  title: "成功",
                  message: "创建成功",
                  type: "success",
                  duration: 2000,
                });
                this.getList();
              })
              .catch(() => { });
          }
        });
      },
  
      getList() {
        this.listLoading = true
        getPointDetailList(this.listQuery).then(response => {
          this.list = response.data.data.items
          this.total = response.data.data.total
          this.listLoading = false
        }).catch(() => {
  
        })
      },
  
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      },
  
      handleSizeChange(val) {
        this.listQuery.limit = val
        this.getList()
      },
  
      handleCurrentChange(val) {
        this.listQuery.page = val
        this.getList()
      },
    }
  }
  </script>
  <style>
  .ad-avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  
  .ad-avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  
  .ad-avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  
  .ad-avatar {
    display: block;
  }
  </style>