pointsMall/src/views/HomeView/EarnPoints.vue

<template>
  <div class="right-wrap">
    <div class="myTabs" style="background: #fff;min-height: 500px;">
      <el-tabs style="padding: 0 20px 40px 20px;" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="证书列表" name="first">
          <el-button size="small" type="primary" @click="dialogVisible = true">上传证书</el-button>
          <el-table size="small" :data="dataList" border style="margin-top: 20px;width: 960px">
            <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
            <el-table-column align="center" min-width="200" 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 min-width="100" align="center" prop="typeName" label="证书大类"></el-table-column>
            <el-table-column align="center" prop="categoryName" min-width="100" label="证书类型"></el-table-column>
            <el-table-column align="center" prop="title" min-width="100" label="证书名称"></el-table-column>
            <el-table-column align="center" prop="integral" min-width="100" label="积分"></el-table-column>
            <el-table-column min-width="60" align="center" prop="statusName" label="状态"></el-table-column>
            <el-table-column min-width="150" align="center" prop="createTime" label="上传时间"></el-table-column>
            <el-table-column min-width="80" align="center" label="备注">
              <template slot-scope="props">
                <el-popover width="200" trigger="hover" :content="props.row.content">
                  <div slot="reference" class="text-overflow">{{ props.row.content }}</div>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div class="myPage">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="10"
              layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
          </div>
        </el-tab-pane>
        <!-- <el-tab-pane label="表彰列表" name="third">
          <el-button size="small" type="primary" @click="dialogVisibleCite = true">上传表彰</el-button>
          <el-table size="small" :data="dataListCite" border style="margin-top: 20px;width: 960px">
            <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
            <el-table-column align="center" min-width="200" 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="80" 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="100" 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="100" 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 min-width="100" align="center" 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 min-width="120" align="center" prop="createTime" label="上传时间"></el-table-column>
          </el-table>
          <div class="myPage">
            <el-pagination @size-change="handleSizeChangeCite" @current-change="handleCurrentChangeCite"
              :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="10"
              layout="total, sizes, prev, pager, next, jumper" :total="totalCite">
            </el-pagination>
          </div>
        </el-tab-pane> -->
        <el-tab-pane label="积分获取规则" name="second">
          <el-empty v-if="!integralRules" :image-size="200"></el-empty>
          <div v-else v-html="integralRules"></div>
        </el-tab-pane>

      </el-tabs>
    </div>
    <el-dialog title="上传证书" :visible.sync="dialogVisible" width="40%">
      <el-form :rules="rules" ref="dataForm" :model="dataForm" label-width="100px">
        <el-form-item label="证书类别:" prop="type">
          <el-cascader clearable size="small" style="width: 95%;" v-model="dataForm.type" :options="typeList"
            :props="{ value: 'id', label: 'typeName', children: 'children' }" @change="handleChange"></el-cascader>
        </el-form-item>
        <el-form-item label="证书名称:" prop="title">
          <el-input clearable style="width: 95%;" size="small" v-model="dataForm.title"></el-input>
        </el-form-item>

        <el-form-item label="证书附件:" prop="fileIds">
          <el-upload :action="fileUrl" :file-list="dataForm.files" :on-success="handleAvatarSuccess"
            :before-upload="beforeUploadFile" :on-remove="handleRemove">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="上传表彰" :visible.sync="dialogVisibleCite" width="40%">
      <el-form :rules="rulesCite" ref="dataFormCite" :model="dataFormCite" label-width="100px">
        <el-form-item label="表彰类型:" prop="type">
          <el-select clearable size="small" style="width: 95%;" v-model="dataFormCite.type" placeholder="请选择表彰类型">
            <el-option v-for="item in typeListCite" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="dataFormCite.type == '1'" label="集体人员:" prop="groupIds">
          <el-select size="small" v-model="dataFormCite.groupIds" multiple filterable placeholder="请选择"
            style="width: 95%;">
            <el-option :key="item.loginId" v-for="item in recipientsList"
              :label="item.deptName + '_' + item.userName + '_' + item.employeNo" :value="item.loginId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户名称:" prop="customerName">
          <el-input clearable style="width: 95%;" size="small" v-model="dataFormCite.customerName"></el-input>
        </el-form-item>
        <el-form-item label="表彰名称:" prop="title">
          <el-input clearable style="width: 95%;" size="small" v-model="dataFormCite.title"></el-input>
        </el-form-item>
        <el-form-item label="表彰描述:" prop="content">
          <el-input type="textarea" :rows="5" maxlength="500" show-word-limit style="width: 95%;" size="small"
            v-model="dataFormCite.content"></el-input>
        </el-form-item>
        <el-form-item label="表彰附件:" prop="fileIds">
          <el-upload :action="fileUrl" :file-list="dataFormCite.files" :on-success="handleAvatarSuccessCite"
            :before-upload="beforeUploadFileCite" :on-remove="handleRemoveCite">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="submitFormCite">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script scoped>
import { certificatePage, certificateUpload, notice, certificatType, dictList, allUserList, citeList, uploadCite } from "@/api/allApi";
import { handleTree } from '@/utils/index'
export default {
  data() {
    return {
      integralRules: '',
      typeList: [],
      activeName: 'first',
      fileUrl: this.baseUrl,
      dataList: [],
      dialogVisible: false,
      rules: {
        type: [{ required: true, message: "请选择证书类别", trigger: "blur" }],
        title: [{ required: true, message: "请填写证书名称", trigger: "blur" }],
        fileIds: [{ required: true, message: "请上传附件", trigger: "blur" }],
      },
      total: 0,
      listQuery: {
        page: 1,
        limit: 10,
      },
      dataForm: {
        type: [],
        title: '',
        fileIds: '',
        files: [],
      },
      typeListCite: [],
      recipientsList: [],
      dataListCite: [],
      dialogVisibleCite: false,
      rulesCite: {
        type: [{ required: true, message: "请选择表彰类型", trigger: "blur" }],
        groupIds: [{ required: true, message: "请选择集体人员", trigger: "blur" }],
        customerName: [{ required: true, message: "请填写客户名称", trigger: "blur" }],
        title: [{ required: true, message: "请填写表彰名称", trigger: "blur" }],
        fileIds: [{ required: true, message: "请上传附件", trigger: "blur" }],
        content: [{ required: true, message: '请填写表彰描述', trigger: 'blur' }],
      },
      totalCite: 0,
      listQueryCite: {
        page: 1,
        limit: 10,
      },
      dataFormCite: {
        type: '',
        groupIds: [],
        customerName: '',
        title: '',
        fileIds: '',
        files: [],
        content: ''
      }
    };
  },
  created() {
    this.getTypeListCite();
    this.getAllUserList();
    this.getDataListCite();
    this.getTypeList();
    this.getDataList();
    this.getIntegralNotice();
  },
  methods: {
    getTypeList() {
      certificatType().then(response => {
        this.typeList = handleTree(response.data.data);
        console.log(this.typeList);
      })
    },
    handleClick(tab, event) {
      console.log(tab.name, event);
    },
    getIntegralNotice() {
      notice({ noticeType: 'certificatNotice' }).then(response => {
        this.integralRules = response.data.data.content;
      })
    },
    handleChange(value) {
      console.log(value);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      let fileIds = [];
      for (let i in fileList) {
        let id = fileList[i].response.data.id;
        fileIds.push(id);
      }
      this.dataForm.fileIds = fileIds.join(",");
    },
    beforeUploadFile(file) {
      console.log(file);
      const size = file.size / 1024 / 1024;
      console.log(size);
      if (size > 10) {
        this.$message.error("文件大小不能超过10MB！");
        return false;
      }
    },
    handleAvatarSuccess(res, file, fileList) {
      console.log(file, fileList);
      console.log("------", "==========");
      console.log("res = ", res);

      let fileIds = [];
      for (let i in fileList) {
        let response = fileList[i].response;
        if (response.errno && response.errno != "0") {
          this.$message.error("该文件上传失败,已被移除,请重新上传!");
          // 上传失败移除该 file 对象
          fileList.splice(i, 1);
        } else {
          let id = fileList[i].response.data.id;
          fileIds.push(id);
        }
      }
      this.dataForm.fileIds = fileIds.join(",");
    },
    resetForm() {
      this.$refs['dataForm'].resetFields();
    },
    submitForm() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          certificateUpload(this.dataForm)
            .then((response) => {
              this.dialogVisible = false;
              this.$notify({
                title: "成功",
                message: "证书上传成功",
                type: "success",
                duration: 2000,
              });
                this.dataForm.type = [];
                this.dataForm.fileIds = '';
                this.dataForm.files = [];
                this.listQuery.page = 1;
                this.getDataList();
            })
            .catch(() => { });
        } else {
          return false;
        }
      });
    },
    getDataList() {
      certificatePage(this.listQuery).then(response => {
        this.dataList = response.data.data.items;
        this.total = response.data.data.total;
      })
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getDataList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getDataList()
    },

    getTypeListCite() {
      dictList({ dictType: 'customer_treward_type' }).then(response => {
        this.typeListCite = response.data.data;
      })
    },
    getAllUserList() {
      allUserList().then(response => {
        this.recipientsList = response.data.data;
      }).catch(() => { });
    },
    handleClick(tab, event) {
      console.log(tab.name, event);
    },
    handleRemoveCite(file, fileList) {
      console.log(file, fileList);
      let fileIds = [];
      for (let i in fileList) {
        let id = fileList[i].response.data.id;
        fileIds.push(id);
      }
      this.dataFormCite.fileIds = fileIds.join(",");
    },
    beforeUploadFileCite(file) {
      console.log(file);
      const size = file.size / 1024 / 1024;
      console.log(size);
      if (size > 10) {
        this.$message.error("文件大小不能超过10MB！");
        return false;
      }
    },
    handleAvatarSuccessCite(res, file, fileList) {
      console.log(file, fileList);
      console.log("------", "==========");
      console.log("res = ", res);

      let fileIds = [];
      for (let i in fileList) {
        let response = fileList[i].response;
        if (response.errno && response.errno != "0") {
          this.$message.error("该文件上传失败,已被移除,请重新上传!");
          // 上传失败移除该 file 对象
          fileList.splice(i, 1);
        } else {
          let id = fileList[i].response.data.id;
          fileIds.push(id);
        }
      }
      this.dataFormCite.fileIds = fileIds.join(",");
    },
    submitFormCite() {
      this.$refs['dataFormCite'].validate((valid) => {
        if (valid) {
          uploadCite(this.dataFormCite)
            .then((response) => {
              this.dialogVisibleCite = false;
              this.$notify({
                title: "成功",
                message: "表彰上传成功",
                type: "success",
                duration: 2000,
              });
                this.dataFormCite.type = [];
                this.dataFormCite.fileIds = '';
                this.dataFormCite.files = [];
                this.listQueryCite.page = 1;
                this.getDataListCite();
            })
            .catch(() => { });
        } else {
          return false;
        }
      });
    },
    getDataListCite() {
      citeList(this.listQueryCite).then(response => {
        this.dataListCite = response.data.data.items;
        this.totalCite = response.data.data.total;
      })
    },
    handleSizeChangeCite(val) {
      this.listQueryCite.limit = val
      this.getDataListCite()
    },
    handleCurrentChangeCite(val) {
      this.listQueryCite.page = val
      this.getDataListCite()
    },

  },
};
</script>
<style scoped>
.text-overflow {
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.right-wrap {
  width: 100%;
}

.myPage {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gainList_container {
  min-height: 560px;
}

.gainList_container .gains_wrapper {
  position: relative;
  box-sizing: border-box;
  padding-top: 20px;
  padding-left: 20px;
}

.gainList_container .gains_wrapper .list {
  display: flex;
  flex-wrap: wrap;
  margin: -20px 0 0 -20px;
}

.item.isVirtual {
  background: #f7f8fa;
  border: 1px solid #e5e6eb;
}

.item {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  width: calc(50% - 30px);
  min-width: 410px;
  height: 116px;
  padding-right: 6px;
  background: #fff;
  border: 1px solid #e5e6eb;
  box-sizing: border-box;
  border-radius: 4px;
  margin-right: 20px;
  margin-top: 20px;
}

.item .img-wapper {
  width: 114px;
  height: 114px;
  margin-right: 16px;
  background: #f7f8fa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item .img-wapper .item-icon {
  max-width: 72px;
  max-height: 72px;
}

.item .main {
  flex: auto;
}

.item .date,
.item .goods_name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.item .goods_name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  font-size: 16px;
  line-height: 24px;
  color: #252933;
  padding-bottom: 4px;
}

.item p {
  margin: 0;
}

.item .date {
  white-space: nowrap;
  font-size: 14px;
  line-height: 22px;
  color: #8a919f;
}

.item .buttons {
  margin-top: 8px;
  margin-left: -8px;
  display: flex;
  align-items: center;
}

.item .button-item.actived {
  background: #f2f3f5;
  color: #8a919f;
}

.item .button-item {
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 13px;
  padding: 0 8px;
  height: 26px;
  margin-left: 8px;
  font-weight: 500;
  background: #f2f3f5;
  border-radius: 50px;
  color: #8a919f;
  white-space: nowrap;
  border: none;
}

.item .arrow {
  width: 12px;
  height: 12px;
  margin-left: 2px;
  transform: rotate(-90deg);
}

svg:not(:root) {
  overflow: hidden;
}

.item .button-item svg path {
  fill: currentColor;
}

.status {
  margin-right: 30px;
  font-size: 13px;
}

.status.bottom {
  margin-top: 55px;
}

.status .use-btn {
  color: #1e80ff;
}

.timeline-container {
  margin: 0 auto;
}

.timeline-entry-list {
  margin-right: 17.5rem;
  border-radius: 2px;
  width: 720px;
  position: relative;
}

.entry-list-container {
  background-color: #fff;
  border-radius: 4px;
  min-height: 500px;
}

.entry-list-container .tab-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 16px;
  border-bottom: 1px solid #e5e6eb;
  overflow: hidden;
}

.tab-header .tab-title {
  white-space: nowrap;
  font-size: 18px;
  font-weight: 600;
}

.content-body {
  padding: 10px 20px 16px;
}

.serie {
  margin: 0 0 40px;
}

.serie .serie-title {
  height: 32px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: 20px;
}

.serie .serie-title .title {
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  color: #1d2129;
  margin: 0 16px;
}

.serie .serie-title .series-left,
.serie .serie-title .series-right {
  width: 16px;
  height: 2px;
}

img {
  border-style: none;
}

.serie .badge-icon-list {
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(auto-fill, 150px);
  grid-gap: 10px 20px;
  flex-wrap: wrap;
}

.serie .badge-icon-list .badge-icon-item {
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  width: 150px;
  font-style: normal;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.serie .badge-icon-list .badge-icon-item .badge-item-icon {
  width: 65px;
  height: 65px;
}

.serie .badge-icon-list .badge-icon-item .badge-item-icon .not-obtain {
  filter: grayscale(100%);
}

.serie .badge-icon-list .badge-icon-item .badge-item-icon img {
  width: 100%;
  height: 100%;
}

.serie .badge-icon-list .badge-icon-item .badge-desc {
  /* margin-top: -10px; */
  text-align: center;
  color: #1d2129;
  font-size: 16px;
  line-height: 28px;
}

.serie .badge-icon-list .badge-icon-item .obtain-date {
  font-size: 14px;
  text-align: center;
  color: #86909c;
  height: 24px;
  line-height: 24px;
}
</style>