web-base-admin/src/views/information/policyMoney/policyMoneyDetails.vue

<template>

  <el-dialog
    :title="'政策币业务'"
    :visible.sync="isPolicy"
    width="80%"
    :before-close="handleClose"
    center
  >
    <div class="">
      <div class="">
        <el-form
          ref="form"
          :model="select"
          label-width="auto"
        >
          <el-row :gutter="20">
            <el-col :span="4">
              <el-form-item
                :label="'操作类型'"
                prop="status"
              >
                <el-select
                  v-model="selects1"
                  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 v-if="selects1 == 2" :span="4">
              <div class="searchbox" style="margin: 0px 0 20px 0">
                <el-button
                  type="warning"
                  style="background:  #FF6723"
                  @click="handleImport"
                > {{ '导入' }}</el-button>
                <el-button
                  style="background: #009B58"
                  type="success"
                  @click="importTemplate"
                > {{ '下载模板' }}</el-button>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col v-if="selects1 == 1" :span="4">
              <el-form-item
                label="业务范围"
              >
                <el-select
                  v-model="businessScope"
                  clearable
                >
                  <el-option
                    v-for="item in getScopeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
        <div class="kuang">
          <div style="padding: 0 0 10px 20px">
            <el-form
              ref="form"
              :model="select"
              label-width="auto"
            >
              <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"
                  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-form>
          </div>
          <div class="plList">
            <div class="pl_i widht-s" style="font-weight: 600;margin-left: 18px">{{ '批量处理' }}</div>
            <div class="pl_i" />
            <div class="width-s" />
            <div class="pl_i lefts">
              <el-select
                v-model="plSet.enableStatus"
                style="width: 150px"
                placeholder="政策币启用"
                clearable
                @change="getMenuItem"
              >
                <el-option
                  v-for="item in getStatusList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
            <div class="width-s" style="width: 100px" />
            <div class="pl_i left-s rights">
              <el-input v-model="plSet.deductMoney" style="width: 150px" placeholder="政策币扣除比例" clearable />
            </div>
            <div class="width-s" style="width:100px" />
            <div class="pl_i left-s">
              <el-select
                v-model="plSet.transfer"
                style="width: 150px"
                placeholder="政策币转账"
                clearable
                @change="getMenuItem"
              >
                <el-option
                  v-for="item in agreeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
            <div class="pl_ii" style="margin-left: 60px">
              <el-button
                type="primary"
                @click="plSetObj"
              >{{ '批量操作' }}</el-button>
              <el-button @click="reset1"> {{ '重置' }}</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"
              prop="memberCode"
              :label="'会员编号'"
              width="240"
            />
            <el-table-column
              align="center"
              prop="memberName"
              :label="'会员姓名'"
              width="240"
            />
            <el-table-column
              align="center"
              width="240"
              prop="enableStatus"
              label="政策币启用"
            >
              <template slot-scope="scope">
                <el-select v-model="scope.row.enableStatus" style="width: 150px" clearable>
                  <el-option
                    v-for="item in getStatusList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              width="240"
              prop="deductMoney"
              label="政策币扣除比例"
            >
              <template slot-scope="scope">
                <div style="width: 150px;position: relative;margin: 0 auto">
                  <el-input v-model="scope.row.deductMoney" style="width: 150px;position: relative" clearable />
                  <div class="unit">%</div>
                </div>

              </template>
            </el-table-column>
            <el-table-column
              align="center"
              width="240"
              prop="transfer"
              label="政策币转账"
            >
              <template slot-scope="scope">
                <el-select v-model="scope.row.transfer" style="width: 150px" clearable>
                  <el-option
                    v-for="item in agreeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              width="140"
              prop="pkAccountKeyVal"
              :label="'扣款币种'"
            />
            <el-table-column
              align="center"
              width="140"
              prop="cost"
              :label="'单笔扣款金额'+'(¥)'"
            />
            <el-table-column
              align="center"
              width="150"
              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>
        </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" />
          <div class="el-upload__text">
            {{ '将文件拖到此处，或' }}
            <em>{{ '点击上传' }}</em>
          </div>
          <!--        <div-->
          <!--          slot="tip"-->
          <!--          class="el-upload__tip"-->
          <!--        >-->
          <!--          <el-link-->
          <!--            type="info"-->
          <!--            style="font-size: 12px"-->
          <!--            @click="importTemplate"-->
          <!--          > {{ '下载模板' }}</el-link>-->
          <!--        </div>-->
          <div
            slot="tip"
            class="el-upload__tip"
            style="color: red"
          >
            {{ '提示：仅允许导入“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>
      <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 align="center" prop="errorMsg" :label="'报错信息'" />
          </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>

    </div>
  </el-dialog>
</template>

<script>
import * as api from '@/api/specialBusiness'
import { getToken } from '@/utils/auth'
import { getPubEnumsProcessTyepe, upPolicyCurrency } from '@/api/business.js'
import { getEYesNoList, getEnableStatus } from '@/api/configManage'
import { policyImportData, policyList, policySelted } from '@/api/specialBusiness'
import { Message } from 'element-ui'
import { noticePopup } from '@/api/notice'

export default {
  props: {
    isPolicy: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      errorData: [],
      errorShow: false,
      select: {
      },
      queryParams: {
        pageNum: 1,
        pageSize: 50
      },
      total: 0,
      awardsList: [],
      tableData: [],
      batchList: [],
      plSet: {
        enableStatus: '',
        deductMoney: '',
        transfer: ''
      },
      businessScope: 1,
      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'
        }
      ],
      selects1: 1,
      processTypeList: [],
      getStatusList: [],
      agreeList: [], // 是否允许
      getScopeList: [],
      upload: {
        // 是否显示弹出层（物流导入）
        open: false,
        // 弹出层标题（物流导入）
        title: '',
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的物流数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: 'Bearer ' + getToken() },
        // 上传的地址
        url:
          process.env.VUE_APP_BASE_API +
          '/member/manage/awards-control/importData'
      }
    }
  },
  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()
    this.getEYesNoList()
    this.getEnable_status()
    this.getBusinessScope()
  },
  methods: {
    handleClose() {
      this.$emit('handleClose')
    },
    getEnable_status() {
      getEnableStatus().then((res) => {
        this.getStatusList = res.data
      })
    },
    getBusinessScope() {
      api.businessScope().then((res) => {
        this.getScopeList = res.data
      })
    },
    getEYesNoList() {
      noticePopup().then((res) => {
        this.agreeList = res.data
      })
    },
    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, 'enableStatus', this.plSet['enableStatus'])
          this.$set(item, 'deductMoney', this.plSet['deductMoney'])
          this.$set(item, 'transfer', this.plSet['transfer'])
        })
      }
    },
    getPubEnumsProcessTyepe() {
      getPubEnumsProcessTyepe().then((res) => {
        this.processTypeList = res.data
      })
    },
    getData() {
      api.policySelted(this.select).then((res) => {
        res.data.forEach((item) => {
          item.enableStatus = ''
          item.deductMoney = ''
          item.transfer = ''
          item.businessScope = this.businessScope
        })
        this.tableData = res.data
        // this.total = res.total
      })
    },
    saveDate(index) {
      if (index == 0) {
        // this.$router.go(-1)
        this.handleClose()
      }
      if (index != 0) {
        if (this.tableData.length == 0) {
          Message({
            message: '内容不能为空',
            type: 'warning'
          })
          return
        }
        const list = {
          processType: index,
          plculist: [],
          businessScope: this.businessScope
        }
        this.tableData.forEach((item) => {
          list.plculist.push(item)
        })
        upPolicyCurrency(list).then((res) => {
          if (res.code == 200) {
            if (index == 1 || index == 3) {
              // this.getData()
              this.isPolicy = false

              setTimeout(() => {
                this.$emit('getMemberList')
              }, 100)
            }
            Message({
              message: res.msg,
              type: 'success'
            })
            if (index == 2 || index == 4) {
              this.tableData.forEach((item) => {
                item.enableStatusVal = item.enableStatus == 0 ? '已启用' : '已禁用'
                item.transferVal = item.transfer == 1 ? '允许' : '禁止'
              })
              this.$router.push({
                name: 'PolicyQc',
                query: {
                  data: JSON.stringify(this.tableData),
                  businessType: 125,
                  index: index,
                  businessScope: this.businessScope
                }
              })
            }
          } else if (res.code == 504 && res.data) {
            this.errorShow = true
            this.errorData = res.data
          }
        })
      }
    },
    reset() {
      this.select.memberCode = ''
      this.select.memberName = ''
      this.tableData = []
    },
    reset1() {
      this.plSet.ratio = ''
      this.plSet.transfer = ''
      this.plSet.policy = ''
    },
    getMenuItem() {},
    getSelect() {
      api.awardsList().then((res) => {
        this.awardsList = res.rows
      })
      api.batchType().then((res) => {
        this.batchList = res.data
      })
    },
    importTemplate() {
      this.download(
        '/member/manage/update-policy-currency/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.policyImportData(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>

.width-s{
  width: 160px;
}
.widht-s{
  width: 210px!important;
}
.unit{
  position: absolute;
  right: 10px;
  top: 5px;
  color: #999;
}
.lefts{
}
.rights{
}
::v-deep .el-input__suffix{
  //top: 5px;
}
.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>