web-zk-admin/src/views/information/specialBusiness/awardDetails.vue

<!--
 * @Descripttion:
 * @version:
 * @Author: kBank
 * @Date: 2023-04-10 18:03:09
-->
<!--
 * @Descripttion:
 * @version:
 * @Author: kBank
 * @Date: 2023-02-23 15:59:57
-->
<template>
  <el-dialog :title="'真实奖衔控制'"
             :visible.sync="isAward"
             width="80%"
             :before-close="handleClose"
             center>
    <div class="">
      <div class="">
        <el-dialog :title="'会员信息错误'"
                   :close-on-click-modal="false"
                   :visible.sync="errorShow"
                   width="600px"
                   append-to-body>
          <div>
            <el-table :data="errorData"
                      height="400px"
                      style="width: 100%"
                      :header-cell-style="{ background: '#EEEEEE' }"
                      :row-class-name="tableRowClassName">
              <el-table-column align="center"
                               prop="memberCode"
                               :label="'会员编号'">
              </el-table-column>
              <el-table-column align="center"
                               prop="errorMsg"
                               :label="'报错信息'">
              </el-table-column>
            </el-table>
          </div>
          <div class="footer"
               style="text-align: center">
            <div style="margin: 0 auto">
              <el-button class="thebtn"
                         @click="errorShow = false"> {{ '取消' }}</el-button>
              <el-button type="primary"
                         class="thebtn"
                         @click="errorShow = false"> {{ '确认' }}</el-button>
            </div>
          </div>
        </el-dialog>
        <el-form ref="form"
                 v-if="select.addAwards == 0"
                 :model="select"
                 label-width="auto">
          <el-row :gutter="20">
            <el-col :span="4">
              <el-form-item :label="'操作类型'"
                            prop="status">
                <el-select v-model="select.batchType"
                           clearable>
                  <el-option v-for="item in batchList"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="4">
              <el-form-item :label="'会员编号'">
                <el-input v-model="select.memberCode"
                          clearable />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'会员姓名'"
                            prop="teamCode">
                <el-input v-model="select.memberName"
                          clearable />
              </el-form-item>
            </el-col>
            <el-col :span="4"
                    style="margin-left: 30px">
              <div class="searchbox">
                <el-button class="searchbtn"
                           @click="getData"> {{ '搜索' }}</el-button>
                <el-button @click="reset"> {{ '重置' }}</el-button>
              </div>
            </el-col>

          </el-row>
          <el-row :gutter="20">
            <el-col :span="4">
              <div class="searchbox">
                <el-button type="warning"
                           v-hasButtons="['AwardControlImport']"
                           style="background:  #FF6723"
                           @click="handleImport"> {{ '导入' }}</el-button>
                <el-button @click="importTemplate"
                           style="background: #009B58"
                           type="success"> {{ '下载模板' }}</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
        <div :class="select.addAwards==0?'kuang':''">
          <div class="plList"
               v-if="select.addAwards == 0">
            <div class="pl_i">{{ '批量处理' }}</div>
            <div class="pl_i"></div>
            <div class="pl_i"
                 v-for="item in menuList"
                 :key="item.id">
              <el-select v-model="plSet[item.key]"
                         @change="getMenuItem"
                         clearable>
                <el-option v-for="ctem in awardsList"
                           :key="ctem.pkId"
                           :label="ctem.awardsName"
                           :value="ctem.pkId" />
              </el-select>
            </div>
            <div class="pl_ii">
              <el-button @click="plSetObj"
                         type="primary">{{'批量操作'}}</el-button>
            </div>
          </div>
          <el-table :data="tableData"
                    style="width: 100%"
                    :header-cell-style="{ background: '#EEEEEE' }"
                    :row-class-name="tableRowClassName">
            <el-table-column align="center"
                             width="140"
                             prop="memberCode"
                             :label="'会员编号'" />
            <el-table-column align="center"
                             width="140"
                             prop="memberName"
                             :label="'会员姓名'" />
            <el-table-column align="center"
                             width="140"
                             prop="realAwardsKeyVal"
                             :label="'真实奖衔'">
              <template slot-scope="scope">
                <el-select v-model="scope.row.realAwards"
                           :disabled="select.addAwards == 2"
                           clearable>
                  <el-option v-for="item in awardsList"
                             :key="item.pkId"
                             :label="item.awardsName"
                             :value="item.pkId" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column align="center"
                             width="140"
                             prop="mentoringAwardKeyVal"
                             :label="'辅导奖衔'">
              <template slot-scope="scope">
                <el-select v-model="scope.row.mentoringAward"
                           :disabled="select.addAwards == 2"
                           clearable>
                  <el-option v-for="item in awardsList"
                             :key="item.pkId"
                             :label="item.awardsName"
                             :value="item.pkId" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column align="center"
                             width="140"
                             prop="dividendAwardKeyVal"
                             :label="'分红奖衔'">
              <template slot-scope="scope">
                <el-select v-model="scope.row.dividendAward"
                           :disabled="select.addAwards == 2"
                           clearable>
                  <el-option v-for="item in awardsList"
                             :key="item.pkId"
                             :label="item.awardsName"
                             :value="item.pkId" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column align="center"
                             width="140"
                             prop="extremeAwardsKeyVal"
                             :label="'当月奖衔'">
              <template slot-scope="scope">
                <el-select v-model="scope.row.extremeAwards"
                           :disabled="select.addAwards == 2"
                           clearable>
                  <el-option v-for="item in awardsList"
                             :key="item.pkId"
                             :label="item.awardsName"
                             :value="item.pkId" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column align="center"
                             width="140"
                             prop="replyExamAwardKeyVal"
                             :label="'复购考核奖衔'">
              <template slot-scope="scope">
                <el-select v-model="scope.row.replyExamAward"
                           :disabled="select.addAwards == 2"
                           clearable>
                  <el-option v-for="item in awardsList"
                             :key="item.pkId"
                             :label="item.awardsName"
                             :value="item.pkId" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column align="center"
                             width="140"
                             prop="divvyExamAwardsKeyVal"
                             :label="'分红考核奖衔'">
              <template slot-scope="scope">
                <el-select v-model="scope.row.divvyExamAwards"
                           :disabled="select.addAwards == 2"
                           clearable>
                  <el-option v-for="item in awardsList"
                             :key="item.pkId"
                             :label="item.awardsName"
                             :value="item.pkId" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column align="center"
                             width="215"
                             prop=""
                             :label="'操作'"
                             fixed="right">
              <template slot-scope="scope">
                <el-button type="text"
                           size="small"
                           class="button-s"
                           style="color: #C8161D"
                           @click="delRole(scope.row)">
                  {{'删除'}}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination v-show="total > 0"
                      :total="total"
                      :page.sync="queryParams.pageNum"
                      :limit.sync="queryParams.pageSize"
                      @pagination="getData" />
        </div>

      </div>
      <div class="footer">
        <div style="margin: 0 auto">
          <!-- <el-button v-for="(item, index) in processTypeList"
                   :key="index"
                   :class="`thebtn${item.value}`"
                   @click="saveDate(item.value)">{{ item.label }}</el-button> -->
          <el-button class="thebtn0"
                     @click="handleClose"> {{ '取消' }}</el-button>
          <el-button v-hasButtons="['AwardControlExemptSign']"
                     class="thebtn1"
                     @click="saveDate(1)">{{'免签'}}</el-button>
          <el-button v-hasButtons="['AwardControlExemptPay']"
                     class="thebtn2"
                     @click="saveDate(2)">{{'免付'}}</el-button>
          <el-button v-hasButtons="['AwardControlExemptAll']"
                     class="thebtn3"
                     @click="saveDate(3)">{{'全免'}}</el-button>
          <el-button v-hasButtons="['AwardControlConfirm']"
                     class="thebtn4"
                     @click="saveDate(4)"> {{ '确认' }}</el-button>
        </div>
      </div>
      <el-dialog :title="upload.title"
                 :close-on-click-modal="false"
                 :visible.sync="upload.open"
                 width="30%"
                 append-to-body>
        <el-upload ref="upload"
                   :limit="1"
                   accept=".xlsx, .xls"
                   :headers="upload.headers"
                   action=""
                   :http-request="httpRequest"
                   :disabled="upload.isUploading"
                   :on-progress="handleFileUploadProgress"
                   :on-success="handleFileSuccess"
                   :on-exceed="handleExceed"
                   :auto-upload="false"
                   drag>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
             {{'将文件拖到此处，或'}}
            <em>{{'点击上传'}}</em>
          </div>
<!--          <div class="el-upload__tip"-->
<!--               slot="tip">-->
<!--            <el-link type="info"-->
<!--                     style="font-size: 12px"-->
<!--                     @click="importTemplate"> {{ '下载模板' }}</el-link>-->
<!--          </div>-->
          <div class="el-upload__tip"
               style="color: red"
               slot="tip">
            {{'提示：仅允许导入“xls”或“xlsx”格式文件！'}}
          </div>
        </el-upload>
        <div slot="footer"
             class="dialog-footer">
          <el-button type="primary"
                     @click="submitFileForm">{{'确认'}}</el-button>
          <el-button @click="upload.open = false">{{'取消'}}</el-button>
        </div>
      </el-dialog>
    </div>
  </el-dialog>
</template>

<script>
import * as api from '@/api/specialBusiness'
import { getToken } from '@/utils/auth'
import { getPubEnumsProcessTyepe } from '@/api/business.js'

export default {
  data() {
    return {

      errorData: [],
      errorShow: false,
      select: {
        addAwards: null,
        batchType: 1,
      },
      queryParams: {
        pageNum: 1,
        pageSize: 50,
      },
      total: 0,
      awardsList: [],
      tableData: [],
      batchList: [],
      plSet: {
        realAwards: '',
        mentoringAward: '',
        dividendAward: '',
        extremeAwards: '',
        replyExamAward: '',
        divvyExamAwards: '',
      },
      menuList: [
        {
          id: 0,
          text: '真实奖衔',
          checked: false,
          key: 'realAwards',
        },
        {
          id: 1,
          text: '辅导奖衔',
          checked: false,
          key: 'mentoringAward',
        },
        {
          id: 2,
          text: '当月奖衔',
          checked: false,
          key: 'dividendAward',
        },
        {
          id: 3,
          text: '当月奖衔',
          checked: false,
          key: 'extremeAwards',
        },
        {
          id: 4,
          text: '复购考核奖衔',
          checked: false,
          key: 'replyExamAward',
        },
        {
          id: 5,
          text: '分红考核奖衔',
          checked: false,
          key: 'divvyExamAwards',
        },
      ],
      processTypeList: [],
      upload: {
        // 是否显示弹出层（物流导入）
        open: false,
        // 弹出层标题（物流导入）
        title: '',
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的物流数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: 'Bearer ' + getToken() },
        // 上传的地址
        url:
          process.env.VUE_APP_BASE_API +
          '/member/manage/awards-control/importData',
      },
    }
  },
  props: {
    isAward: {
      type: Boolean,
      default: false,
    },
    signType:{
      type: String || Number,
      default: '128',
    }
  },
  mounted() {
    // this.select.addAwards = this.$route.query.addAwards
    // if (this.select.addAwards == 1 || this.select.addAwards == 2) {
    //   this.tableData = JSON.parse(this.$route.query.tableData)
    // }
    // this.getSelect()
    // this.getPubEnumsProcessTyepe()
  },
  methods: {
    getAllData(addAwards, tableData) {
      this.select.addAwards = addAwards
      if (this.select.addAwards == 1 || this.select.addAwards == 2) {
        this.tableData = JSON.parse(tableData)
      }
      this.getSelect()
      this.getPubEnumsProcessTyepe()
    },
    handleClose() {
      this.$emit('handleClose')
    },
    delRole(obj) {
      // pkMember
      this.tableData.forEach((item, index) => {
        if ((item.pkMember = obj.pkMember)) {
          this.tableData.splice(index, 1)
        }
      })
    },
    plSetObj() {
      for (var i in this.plSet) {
        this.tableData.forEach((item) => {
          this.$set(item, 'realAwards', this.plSet['realAwards'])
          this.$set(item, 'mentoringAward', this.plSet['mentoringAward'])
          this.$set(item, 'dividendAward', this.plSet['dividendAward'])
          this.$set(item, 'extremeAwards', this.plSet['extremeAwards'])
          this.$set(item, 'replyExamAward', this.plSet['replyExamAward'])
          this.$set(item, 'divvyExamAwards', this.plSet['divvyExamAwards'])
        })
      }
    },
    getPubEnumsProcessTyepe() {
      getPubEnumsProcessTyepe().then((res) => {
        this.processTypeList = res.data
      })
    },
    getData() {
      api.memberlist(this.select).then((res) => {
        this.tableData = res.rows
        this.total = res.total
      })
    },
    saveDate(index) {
      if (index == 4||index == 2) {
        let obj = {
          addAwards: this.select.addAwards,
          updateParentParamList: this.tableData,
          processType: index,
          approvalBusiness:this.signType
        }
        api.affirm(obj).then((res) => {
          if (res.code == 200) {
            this.$router.push({
              path: 'awardZxqc',
              query: {
                data: JSON.stringify(res.data.updateParentParamList),
                addAwards: res.data.addAwards,
                businessType: this.signType,
                processType: index,
              },
            })
          } else if (res.code == 504 && res.data) {
            this.errorShow = true
            this.errorData = res.data
          }
        })
      }else{
        let obj = {
          addAwards: this.select.addAwards,
          updateParentParamList: this.tableData,
          processType: index,
          approvalBusiness:this.signType
        }
        api.affirm(obj).then((res) => {
          if (res.code == 200) {
          this.$message({
            message: res.msg,
            type: 'success',
          })
          this.handleClose()
          } else if (res.code == 504 && res.data) {
            this.errorShow = true
            this.errorData = res.data
          }
        })
      }
    },
    reset() {
      this.select.memberCode = ''
      this.select.memberName = ''
    },
    getMenuItem() {},
    getSelect() {
      api.awardsList().then((res) => {
        this.awardsList = res.rows
      })
      api.batchType().then((res) => {
        this.batchList = res.data
      })
    },
    importTemplate() {
      this.download(
        '/member/manage/awards-control/download',
        {},
        `${'模板'}-${new Date().getTime()}.xlsx`
      )
    },
    httpRequest(param) {
      const formData = new FormData()
      formData.append('file', param.file)
      const data = {} // 上传要携带的参数
      formData.append('addAwards', this.select.addAwards)
      // 请求方法
      api.importData(formData).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data
        }
        this.upload.open = false
        this.upload.isUploading = false
        this.$refs.upload.clearFiles()
        this.$alert(res.msg, '导入结果', {
          dangerouslyUseHTMLString: true,
        })
      })
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = '导入'
      this.upload.open = true
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      // var fileName = response.fileName
      // if (fileName != undefined && fileName != '') {
      // }
      // if (response.code == 200) {
      //   this.tableData = res.data
      //   this.total = res.total
      // }
      // this.upload.open = false
      // this.upload.isUploading = false
      // this.$refs.upload.clearFiles()
      // this.$alert(response.msg, '导入结果', { dangerouslyUseHTMLString: true })
      // this.getList();
    },
    // 上传文件数量超出后的动作
    handleExceed() {
      this.upload.isUploading = false
      this.msgInfo('仅可上传一个文件哦')
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit()
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return 'warning-row'
      } else if (rowIndex % 2 == 0) {
        return 'success-row'
      }
      return ''
    },
  },
}
</script>

<style lang="scss" scoped>
.page {
  padding: 20px;
  background: #f9f9f9;
  font-size: 14px;
  .main {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
    padding: 10px;
  }
  ::v-deep .el-select {
    width: 100%;
  }
}
.footer {
  height: 68px;
  // background: #ffffff;
  // box-shadow: 0px -3px 20px 0px rgba(204, 204, 204, 0.5);
  // margin: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  .thebtn0 {
    width: 120px;
    height: 38px;
  }
  .thebtn1 {
    width: 120px;
    height: 38px;
    background: rgba(0, 155, 88, 1);
    color: #ffffff;
    border: none;
  }
  .thebtn2 {
    width: 120px;
    height: 38px;
    background: rgba(243, 169, 0, 1);
    border: none;
    color: #ffffff;
  }
  .thebtn3 {
    width: 120px;
    height: 38px;
    border: none;
    color: #ffffff;
    background: rgba(228, 27, 27, 1);
  }
  .thebtn4 {
    width: 120px;
    height: 38px;
    border: none;
    color: #ffffff;
    background: rgba(72, 178, 253, 1);
  }
  .thebtn {
    width: 120px;
    height: 38px;
    border: none;
    color: #ffffff;
    background: rgba(204, 204, 204, 1);
  }
}
.searchbtn {
  background: #c8161d;
  color: #fff;
}
.kuang {
  border-radius: 8px 8px 8px 8px;
  border: 1px solid #cccccc;
  padding: 10px 0;
  margin-top: 10px;
}
.plList {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  .pl_i {
    width: 140px;
    text-align: center;
    padding: 0 10px;
  }
  .pl_ii {
    width: 215px;
    display: flex;
    justify-content: center;
    .cz {
      margin-left: 10px;
    }
  }
}
::v-deep .el-table thead {
  color: #000000;
}
</style>