web-base-admin/src/views/information/business/index.vue

<template>
  <div class="page1">
    <topBar
      v-if="topList.length > 0"
      :top-list="topList"
      :moren="moren"
    />
    <div class="thetopbox">
      <el-form ref="form" :model="queryParams" label-width="100px">
        <el-row>
          <el-col :span="4">
            <el-form-item :label="'会员编号'" prop="memberCode">
              <el-input v-model="queryParams.memberCode" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="'会员姓名'" prop="name">
              <el-input v-model="queryParams.memberName" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="'结算等级'" prop="pkRegisterGrade">
              <el-select
                v-model="queryParams.pkRegisterGrade"
                clearable
                :placeholder="'请选择'"
              >
                <el-option
                  v-for="item in gradeRangList"
                  :key="item.pkId"
                  :label="item.gradeName"
                  :value="item.pkId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="'真实奖衔'" prop="pkAwards">
              <el-select
                v-model="queryParams.pkAwards"
                clearable
                :placeholder="'请选择'"
              >
                <el-option
                  v-for="item in awardsList"
                  :key="item.pkId"
                  :label="item.awardsName"
                  :value="item.pkId"
                />
              </el-select>
              <!-- <el-input clearable v-model="queryParams.pkAwards"></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="'隶属体系'" prop="vertexId">
              <el-select
                v-model="queryParams.vertexId"
                clearable
                :placeholder="'请选择'"
              >
                <el-option
                  v-for="item in vertexList"
                  :key="item.pkId"
                  :label="item.vertexName"
                  :value="item.pkId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="'隶属团队'" prop="teamId">
              <el-select
                v-model="queryParams.teamId"
                clearable
                :placeholder="'请选择'"
              >
                <el-option
                  v-for="item in memberTeamList"
                  :key="item.pkId"
                  :label="item.teamName"
                  :value="item.pkId"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <el-form-item :label="'变更次数'" prop="code">
              <el-input v-model="queryParams.editNumber" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="'联系方式'" prop="code">
              <el-input v-model="queryParams.phone" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="'服务中心编号'" prop="centerMemberCode">
              <el-input
                v-model="queryParams.centerMemberCode"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="'服务中心姓名'" prop="centerMemberName">
              <el-input
                v-model="queryParams.centerMemberName"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="'创建日期'" prop="code">
              <el-date-picker
                v-model="queryParams.time1"
                type="datetimerange"
                range-separator="——"
                :start-placeholder="'开始日期'"
                :end-placeholder="'结束日期'"
                value-format="yyyy-MM-dd HH:mm:ss"
                :unlink-panels="true"
                @change="changeTime1"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-collapse-transition>
          <div v-show="isActive">
            <el-row>
              <el-col :span="8">
                <el-form-item :label="'支付日期'" prop="code">
                  <el-date-picker
                    v-model="queryParams.time2"
                    type="datetimerange"
                    range-separator="——"
                    :start-placeholder="'开始日期'"
                    :end-placeholder="'结束日期'"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :unlink-panels="true"
                    @change="changeTime2"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-collapse-transition>
        <el-row style="margin-left: 20px">
          <el-col :span="4">
            <div class="searchbox">
              <el-button class="searchbtn" @click="getBusinessList">
                {{ '搜索' }}</el-button>
              <el-button @click="reChongzhi"> {{ '重置' }}</el-button>
            </div>
          </el-col>
          <div class="openClose" @click="changeActive">
            <i
              :class="isActive ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
            />
            <div>{{ isActive ? '点击收起' : '点击展开' }}</div>
          </div>
        </el-row>
      </el-form>
    </div>
    <div class="maintop">
      <div class="mainbtn">
        <el-button
          v-hasButtons="['BasicBusinessImport']"
          size="small"
          class="thebtn1"
          @click="handleImport"
        >
          {{ '导入' }}</el-button>
        <el-button size="small" class="thebtn2" @click="importTemplate">
          {{ '下载模板' }}</el-button>
      </div>
    </div>
    <div class="main">
      <div class="maintable">
        <el-table
          :data="tableData"
          height="400px"
          style="width: 100%"
          :header-cell-style="{ background: '#EEEEEE' }"
          :row-class-name="tableRowClassName"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column
            align="center"
            prop="memberCode"
            label="会员编号"
            min-width="110px"
          />
          <el-table-column
            align="center"
            prop="newMemberName"
            label="变更会员姓名"
            width="110px"
          >
            <template slot-scope="scope">
              <el-input v-model="scope.row.newMemberName" />
            </template>
          </el-table-column>
          <el-table-column
            min-width="160px"
            align="center"
            prop="newPhone"
            label="变更联系方式"
          >
            <template slot-scope="scope">
              <el-input v-model="scope.row.newPhone" clearable />
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            prop="memberName"
            label="会员姓名"
          />
          <el-table-column align="center" prop="phone" label="联系方式" min-width="130px" />
          <el-table-column align="center" prop="pkRegisterGradeVal" label="结算等级" min-width="100px" />
          <el-table-column
            align="center"
            prop="pkAwardsVal"
            label="真实奖衔"
          />

          <el-table-column
            align="center"
            prop="vertexName"
            label="隶属体系"
          />
          <el-table-column
            align="center"
            prop="teamName"
            label="隶属团队"
          />
          <el-table-column
            align="center"
            prop="centerMemberCode"
            label="服务中心编号"
            min-width="140"
          />
          <el-table-column
            align="center"
            prop="centerMemberName"
            label="服务中心姓名"
            min-width="140"
          />

          <el-table-column
            align="center"
            prop="creationTime"
            label="创建日期"
            min-width="160"
          />
          <el-table-column
            align="center"
            prop="payTime"
            label="支付日期"
            min-width="160"
          />
          <el-table-column
            align="center"
            prop="editNumber"
            label="变更次数"
            min-width="80"
          />
        </el-table>
      </div>
    </div>
    <div class="main">
      <div
        v-for="(item, index) in handleBusinessList"
        :key="index"
        class="main_content"
      >
        <el-form ref="form" :model="form" label-width="130px">
          <!-- <el-checkbox-group v-model="item.wowList">
            <el-checkbox> -->
          <el-form-item :label="item.editTypeName">
            <!-- 单选 -->

            <el-checkbox-group
              v-if="item.buttonType == 1"
              v-model="item.businessValueList"
              :max="1"
            >
              <el-checkbox
                v-for="aitem in item.enumEntityList"
                :key="aitem.value"
                :label="aitem.value"
              >{{ aitem.label }}</el-checkbox>
            </el-checkbox-group>

            <!-- 多选 -->
            <el-checkbox-group
              v-if="item.buttonType == 2"
              v-model="item.businessValueList"
            >
              <el-checkbox
                v-for="aitem in item.enumEntityList"
                :key="aitem.value"
                :label="aitem.value"
              >{{ aitem.label }}</el-checkbox>
            </el-checkbox-group>

            <!-- 输入框 -->

            <el-input
              v-if="item.buttonType == 3"
              v-model="item.businessValueList[0]"
              type="number"
              style="width: 150px"
            >
              <i slot="suffix">%</i>
            </el-input>
          </el-form-item>
          <!-- </el-checkbox>
          </el-checkbox-group> -->
        </el-form>
      </div>
    </div>
    <div class="footer">
      <div style="margin: 0 auto">
        <el-button class="thebtn"> {{ '取消' }}</el-button>
        <el-button
          v-hasButtons="['BasicBusinessConfirm']"
          type="primary"
          class="thebtn"
          @click="saveDate"
        >
          {{ '确认' }}</el-button>
      </div>
    </div>
    <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>

    <el-dialog
      :title="upload.title"
      :close-on-click-modal="false"
      :visible.sync="upload.open"
      width="600px"
      append-to-body
    >
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url"
        :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>
  </div>
</template>

<script>
import topBar from '@/components/topBar/checked'
import { getToken } from '@/utils/auth'
import { getRouters } from '@/api/settle'
import {
  getHandleBusinessEnum,
  getBusinessList,
  businessCheck
} from '@/api/business'
import { getAwardsListChiose, getgradeRanglist } from '@/api/level'
import { getvertexValue, getmemberTeamList } from '@/api/financialCase'
export default {
  name: 'Jcyw',
  components: {
    topBar
  },
  data() {
    return {
      moren: 'jcyw',
      topList: [
        {
          name: '基础业务',
          path: 'jcyw',
          url: 'BasicBusiness'
        },
        {
          name: '订单业务',
          path: 'ddyw',
          url: 'OrderBusiness'
        }
        // {
        //   name: "确认业务",
        //   path: "shyw",
        // },
        // {
        //   name: "在线签呈",
        //   path: "zxqc",
        // },
      ],
      multipleSelection: [],
      wowList: [],
      queryParams: {
        memberCode: '',
        memberName: '',
        pkAwards: '',
        vertexId: '',
        teamId: '',
        editNumber: '',
        phone: '',
        centerMemberCode: '',
        centerMemberName: '',
        startDate: '',
        endDate: '',
        startDatePay: '',
        endDatePay: '',
        time1: [],
        time2: []
      },
      tableData: [],
      // 折叠搜索框
      isActive: false,
      form: {},
      handleBusinessList: [],
      errorShow: false,
      errorData: [],
      awardsList: [],
      gradeRangList: [],
      memberTeamList: [],
      vertexList: [],
      upload: {
        // 是否显示弹出层（物流导入）
        open: false,
        // 弹出层标题（物流导入）
        title: '',
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的物流数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: 'Bearer ' + getToken() },
        // 上传的地址
        url:
          process.env.VUE_APP_BASE_API +
          '/member/manage/handle-business/importData'
      }
    }
  },
  created() {
    this.getBusinessList()
    this.getHandleBusinessEnum()
    this.getUserRoute()
  },
  methods: {
    // 路由权限
    getUserRoute() {
      getRouters().then((res) => {
        res.data.forEach((item) => {
          this.topList.forEach((items) => {
            if (item.routeName == items.url) {
              this.$set(items, 'changed', true)
            }
          })
        })
      })
    },
    checkRadio(value) {},
    // 下载模板
    importTemplate() {
      this.download(
        '/member/manage/handle-business/download-template',
        {},
        `${'基础业务办理'}-${new Date().getTime()}.xlsx`
      )
    },

    /** 导入按钮操作 */
    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 = response.data
        this.upload.open = false
        this.upload.isUploading = false
        this.$refs.upload.clearFiles()
        this.$alert(response.msg, '导入结果', {
          dangerouslyUseHTMLString: true
        })
      } else if (response.code == 504) {
        this.upload.open = false
        this.upload.isUploading = false
        this.$refs.upload.clearFiles()

        var errorMsg = response.data.map(item => item.memberCode).join(',')
        this.$alert(errorMsg + response.msg, '导入结果', {
          dangerouslyUseHTMLString: true
        })
      } else {
        this.upload.open = false
        this.upload.isUploading = false
        this.$refs.upload.clearFiles()
        this.$alert(response.msg, '导入结果', {
          dangerouslyUseHTMLString: true
        })
      }
    },
    // 上传文件数量超出后的动作
    handleExceed() {
      this.upload.isUploading = false
      this.msgInfo('仅可上传一个文件哦')
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit()
    },
    // 点击下一步
    saveDate() {
      // console.log("🌈", this.handleBusinessList);
      if (this.multipleSelection.length > 0) {
        businessCheck({
          businessMemberList: this.multipleSelection,
          handleBusinessList: this.handleBusinessList
        }).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.$router.push({
              path: '/information/business/shyw',
              query: {
                data: JSON.stringify(res.data),
                handleBusinessList: JSON.stringify(this.handleBusinessList)
              }
            })
          } else if (res.code == 504 && res.data) {
            this.errorShow = true
            this.errorData = res.data
          }
        })
      } else {
        this.$message({
          message: '至少选择一条数据',
          type: 'warning'
        })
      }
    },
    changeTime1(val) {
      this.queryParams.startDate = val[0]
      this.queryParams.endDate = val[1]
    },
    changeTime2(val) {
      this.queryParams.startDatePay = val[0]
      this.queryParams.endDatePay = val[1]
    },
    getBusinessList() {
      getBusinessList(this.queryParams).then((res) => {
        this.tableData = res.rows
      })
    },

    getHandleBusinessEnum() {
      // 获取基础业务枚举
      getHandleBusinessEnum().then((res) => {
        res.data.forEach((ele) => {
          ele.businessValueList = []
          ele.wowList = []
        })
        this.handleBusinessList = res.data
      })
      getgradeRanglist().then((res) => {
        this.gradeRangList = res.data
      })
      getAwardsListChiose().then((res) => {
        this.awardsList = res.rows
      })
      getmemberTeamList().then((res) => {
        this.memberTeamList = res.rows
      })
      getvertexValue().then((res) => {
        this.vertexList = res.data
      })
    },
    // 展开折叠
    changeActive() {
      this.isActive = !this.isActive
    },
    // 重置
    reChongzhi() {
      this.queryParams = {
        memberCode: '',
        memberName: '',
        time1: [],
        time2: []
      }
      this.getBusinessList()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },

    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return 'warning-row'
      } else if (rowIndex % 2 == 0) {
        return 'success-row'
      }
      return ''
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
::v-deep .el-input__inner {
  height: 32px;
  line-height: 32px;
}
::v-deep .el-date-editor .el-range__close-icon {
  margin-top: -10px;
}
::v-deep .el-date-editor .el-range-separator {
  margin-top: -10px;
}
::v-deep .el-date-editor .el-range__icon {
  margin-top: -10px;
}
::v-deep .el-button {
  padding: 8px 20px;
}
::v-deep .el-form-item {
  margin-bottom: 10px;
}
::v-deep .el-table .warning-row {
  background: #f9f9f9;
}

::v-deep .el-table .success-row {
  background: #ffffff;
}
::v-deep .el-table thead {
  color: #000000;
}
.openClose {
  margin-top: 10px;
  margin-right: 10px;
  color: #666666;
  text-align: center;
}
.page1 {
  padding: 10px 20px;
  background: #f9f9f9;
  font-size: 14px;
  .thetopbox {
    background: #ffffff;
    border-radius: 8px;
    padding: 20px 0;
    .searchbox {
      display: flex;
      align-items: center;
      .searchtitle {
        margin-right: 10px;
      }
      .searchbtn {
        background: #c8161d;
        color: #ffffff;
      }
    }
  }
  .footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 0;
    .thebtn {
      width: 120px;
      height: 38px;
    }
  }
  .maintop {
    display: flex;
    padding-top: 10px;
    justify-content: space-between;
    align-items: center;
    .mainbtn {
      .thebtn1 {
        color: #ffffff;

        background: #ec6c00;
      }
      .thebtn2 {
        color: #ffffff;

        background: #009b58;
      }
      .thebtn3 {
        color: #ffffff;

        background: #e41b1b;
      }
      .thebtn4 {
        color: #ffffff;
        background: #53b11e;
      }
    }
  }
  .main {
    margin-top: 10px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
    .main_title {
      display: flex;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      .bluekuai {
        width: 5px;
        height: 19px;
        background: #4391fd;
        margin-right: 20px;
      }
      .title_word {
        font-size: 14px;
        font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
        font-weight: bold;
        color: #333333;
      }
    }
    .main_content {
      padding: 0px 25px;
      display: flex;
      align-items: center;
      margin: 10px 0;
      border: 1px solid #eeeeee;
      .el-form-item {
        margin-bottom: 0px !important;
      }
    }
  }
}
</style>