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-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-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">查找</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="160px" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="success" size="small" @click="handleClickView(scope.row, 'complete')">处理</el-button>
        </template>
      </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 :title="textMap[dialogStatus]" :visible.sync="dialogVisible" :close-on-click-modal="false" width="70%">
      <el-form status-icon label-position="center" label-width="100px" style="width:100%;">
        <div style="display: flex;">

          <el-form-item label="表彰类型">
            <el-input disabled v-model="detailData.typeName"></el-input>
          </el-form-item>
          <el-form-item label="表彰名称">
            <el-input disabled v-model="detailData.title"></el-input>
          </el-form-item>
          <el-form-item label="客户名称">
            <el-input disabled v-model="detailData.customerName"></el-input>
          </el-form-item>
        </div>

        <div style="display: flex;">
          <el-form-item label="上传人">
            <el-input disabled v-model="detailData.userName"></el-input>
          </el-form-item>
          <el-form-item label="部门">
            <el-input disabled v-model="detailData.deptName"></el-input>
          </el-form-item>
          <el-form-item label="日期">
            <el-input disabled v-model="detailData.createTime"></el-input>
          </el-form-item>
        </div>
        <div style="display: flex;">
          <el-form-item label="积分">
            <el-input disabled v-model="detailData.integral"></el-input>
          </el-form-item>
          <el-form-item label="附件">
            <div v-for="(item, index) in detailData.files" :key="index">
              <a style="color: #1e80ff;" target="_blank" :href="item.url">{{ item.oldName }}</a>
            </div>
          </el-form-item>

        </div>
        <h3></h3>
        <el-form-item label="表彰描述">
          <el-input disabled type="textarea" :rows="5" v-model="detailData.content" style="width: 100%"></el-input>
        </el-form-item>
      </el-form>
      <h4>表彰人员</h4>
      <el-table :data="detailData.groupUsers" border style="width: 100%">
        <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>
      <h4>审批状态</h4>
      <el-table :data="detailData.logs" border style="width: 100%">
        <el-table-column align="center" prop="auditor" label="处理人" width="180">
        </el-table-column>

        <el-table-column align="center" prop="comment" label="处理结果">
        </el-table-column>
        <el-table-column align="center" prop="createTime" label="处理时间" width="180">
        </el-table-column>
      </el-table>
      <el-form style="margin-top: 20px;" ref="dataForm" :model="dataForm" status-icon label-position="left"
        label-width="80px">
        <el-form-item label="审批内容" prop="content">
          <el-input type="textarea" :rows="4" 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>
</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: {
        content: ''
      },
      dialogVisible: false,
      categoryList: [],
      typeList: [],
      statusTypeList: [],
      list: [],
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        limit: 10,
        type: '',
        customerName: '',
        title: '',
        userName: '',
        status: "10",
      },
      dialogVisible: false,
      dialogStatus: '',
      textMap: {
        complete: "审批",
        view: "详情",
      },
      detailData: {},
    };
  },
  created() {
    this.getTypeList();
    this.getCategoryList();
    this.getStatusTypeList();
    this.getList();
  },
  methods: {
    handleClickView(row, tag) {
      console.log(row);
      this.dialogStatus = tag;
      this.detailData = row;
      this.dialogVisible = true;
      this.id = row.id;
      this.$nextTick(() => {
        this.dataForm.content = '';
        this.$refs["dataForm"].clearValidate();
      });
    },
    checked(val) {
      if (val.flag == false) {
        if (!val.content) {
          this.$alert("请输入审批内容", "提示", {
            confirmButtonText: "确定",
          });
          return false;
        }
      }
      return true;
    },
    complete(flag) {
      const parms = {
        id: this.id,
        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.dialogVisible = false;
          this.getList();
        })
          .catch(() => { });
      }

    },
    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>