pointsMall-admin/src/views/commendManage/operateCiteList.vue

<template>
  <div class="app-container calendar-list-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-select v-model="listQuery.type" clearable placeholder="表彰类型" class="filter-item" style="width: 200px">
        <el-option :key="item.dictValue" v-for="item in typeList" :label="item.dictLabel" :value="item.dictValue">
        </el-option>
      </el-select>
      <!-- <el-select v-model="listQuery.category" clearable placeholder="表彰类别" class="filter-item" style="width: 200px">
        <el-option :key="item.dictValue" v-for="item in categoryList" :label="item.dictLabel" :value="item.dictValue">
        </el-option>
      </el-select> -->
      <el-input clearable class="filter-item" style="width: 200px;" placeholder="客户名称"
        v-model="listQuery.customerName"></el-input>
      <el-input clearable class="filter-item" style="width: 200px;" placeholder="表彰名称"
        v-model="listQuery.title"></el-input>
      <el-input clearable class="filter-item" style="width: 200px;" placeholder="上传人"
        v-model="listQuery.userName"></el-input>
      <!-- <el-select v-model="listQuery.status" clearable placeholder="审批状态" style="top: -4px; width: 200px">
        <el-option :key="item.dictValue" v-for="item in statusTypeList" :label="item.dictLabel" :value="item.dictValue">
        </el-option>
      </el-select> -->
      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">查找</el-button>
      <!-- <el-button class="filter-item" type="primary" v-waves icon="el-icon-download" @click="handleDownLoad">导出</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="200px" label="附件">
        <template slot-scope="props">
          <div v-for="(item, index) in props.row.files" :key="index">
            <a style="color: #1e80ff;" target="_blank" :href="item.url">{{ item.oldName }}</a>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="typeName" min-width="100" label="表彰类型">
      </el-table-column>
      <!-- <el-table-column align="center" prop="categoryName" min-width="100" label="表彰类别">
      </el-table-column> -->
      <el-table-column align="center" min-width="100" label="表彰人员">
        <template slot-scope="props">
          <el-popover trigger="hover">
            <el-table :data="props.row.groupUsers" border size="mini">
              <el-table-column min-width="200" align="center" prop="deptName" label="部门"></el-table-column>
              <el-table-column min-width="100" align="center" prop="userName" label="姓名"></el-table-column>
              <el-table-column min-width="100" align="center" prop="employeNo" label="员工号"></el-table-column>
            </el-table>
            <span style="color: #1e80ff;cursor: pointer;" slot="reference">
              {{ props.row.userName }}
            </span>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column align="center" min-width="150" label="客户名称">
        <template slot-scope="props">
          <el-popover width="200" trigger="hover" :content="props.row.customerName">
            <div slot="reference" class="text-overflow">{{ props.row.customerName }}</div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column align="center" min-width="150" label="表彰名称">
        <template slot-scope="props">
          <el-popover width="200" trigger="hover" :content="props.row.title">
            <div slot="reference" class="text-overflow">{{ props.row.title }}</div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column min-width="100" align="center" label="表彰描述">
        <template slot-scope="props">
          <el-popover width="400" trigger="hover" :content="props.row.content">
            <div slot="reference" class="text-overflow">{{ props.row.content }}</div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column align="center" min-width="250px" label="部门" prop="deptName">
      </el-table-column>
      <el-table-column align="center" min-width="80px" label="上传人" prop="userName">
      </el-table-column>
      <el-table-column align="center" min-width="80px" label="获得积分" prop="integral">
      </el-table-column>
      <el-table-column align="center" min-width="120px" label="审核状态">
        <template slot-scope="props">
                <el-popover trigger="hover">
                  <el-table :data="props.row.logs" border size="mini">
                    <el-table-column min-width="120" align="center" prop="auditor" label="处理人"></el-table-column>
                    <el-table-column min-width="160" align="center" prop="comment" label="处理结果"></el-table-column>
                    <el-table-column min-width="180" align="center" prop="createTime" label="处理时间"></el-table-column>
                  </el-table>
                  <span style="color: #1e80ff;cursor: pointer;" slot="reference">{{ props.row.statusName }}</span>
                </el-popover>
              </template>
      </el-table-column>
      <el-table-column align="center" min-width="100px" label="日期" prop="createTime">
      </el-table-column>
      <el-table-column align="center" label="操作" width="80px" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="success" size="small"
            @click="handleClick(scope.row.id)">处理</el-button>
          </template>
      </el-table-column>
    </el-table>
    <el-dialog :close-on-click-modal="false" title="表彰审批" :visible.sync="dialogFormVisible" width="40%">
            <el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="80px">
              
                <el-form-item label="表彰类别" prop="category">
                  <el-select v-model="dataForm.category" clearable placeholder="表彰类别" class="filter-item" style="width: 100%">
                    <el-option :key="item.dictValue" v-for="item in categoryList" :label="item.dictLabel" :value="item.dictValue">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="审批内容" prop="content">
                  <el-input type="textarea" :rows="2" placeholder="请输入审批内容" v-model="dataForm.content"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="complete(true)">同意</el-button>
                <el-button type="danger" @click="complete(false)">驳回</el-button>
            </div>
        </el-dialog>
    <!-- 分页 -->
    <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>
  </div>
</template>
    
<style>
.text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.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 {
  complete,
  customerPage,
} from "@/api/commendManage.js";
import { dataTypeList } from "@/api/public";
import waves from "@/directive/waves"; // 水波纹指令
import Tinymce from "@/components/Tinymce";

export default {
  components: { Tinymce },
  directives: { waves },
  data() {
    return {
      id:'',
      dataForm: {
        category: '',
        content: ''
      },
      rules: {
        category: [{ required: true, message: "请选择表彰类别", trigger: "blur" }],
      },
      dialogFormVisible: false,
      dialogVisible: false,
      categoryList: [],
      typeList: [],
      statusTypeList: [],
      list: [],
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        limit: 10,
        type: '',
        category: '',
        customerName: '',
        title: '',
        userName: '',
        status: "10",
      },
    };
  },
  created() {
    this.getTypeList();
    this.getCategoryList();
    this.getStatusTypeList();
    this.getList();
  },
  methods: {
    checked(val){
            if(val.flag == false){
                if(!val.content){
                    this.$alert("请输入审批内容", "提示", {
                        confirmButtonText: "确定",
                    });
                    return false;
                }
            }
            if(val.flag == true){
                if(!val.category){
                    this.$alert("请选择表彰类别", "提示", {
                        confirmButtonText: "确定",
                    });
                    return false;
                }
            }
            return true;
        },
    complete(flag) {
            const parms = {
                id:this.id,
                category:this.dataForm.category,
                content: this.dataForm.content,
                flag:flag,
            }
            const isChecked = this.checked(parms);
            if(isChecked){
                complete(parms).then((response) => {
                    this.$notify({
                        title: "成功",
                        message: "操作成功",
                        type: "success",
                        duration: 2000,
                    });
                    this.dialogFormVisible = false;
                    this.getList();
                })
                .catch(() => { });
            }
            
        },
      handleClick(id) {
        this.dialogFormVisible = true;
        this.id = id;
        this.$nextTick(() => {
            this.dataForm.category = '';
            this.dataForm.content = '';
            this.$refs["dataForm"].clearValidate();
        });
      },
    getCategoryList() {
      dataTypeList({ dictType: 'customer_treward_category' }).then(response => {
        this.categoryList = response.data.data;
      }).catch(() => { });
    },
    getTypeList() {
      dataTypeList({ dictType: 'customer_treward_type' }).then(response => {
        this.typeList = response.data.data;
      }).catch(() => { });
    },
    getStatusTypeList() {
      dataTypeList({ dictType: 'customer_treward_status' }).then(response => {
        this.statusTypeList = response.data.data;
      }).catch(() => { });
    },
    handleDownLoad() {
      window.location.href = process.env.BASE_API + '/mall-integral-obtain/export/certificate?name=' + this.listQuery.name + '&title=' + this.listQuery.title + '&userName=' + this.listQuery.userName + '&status=' + this.listQuery.status;
    },
    getList() {
      this.listLoading = true;
      customerPage(this.listQuery)
        .then((response) => {
          this.list = response.data.data.items;
          this.total = response.data.data.total;
          this.listLoading = false;
        })
        .catch(() => {
          this.list = [];
          this.total = 0;
          this.listLoading = false;
        });
    },

    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>