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

<template>
  <div class="page1">
    <topBar
      v-if="topList.length > 0"
      :topList="topList"
      :moren="moren"
    ></topBar>
    <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 clearable v-model="queryParams.memberCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="'会员姓名'" prop="name">
              <el-input clearable v-model="queryParams.memberName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="'结算等级'" prop="pkRegisterGrade">
              <el-select
                clearable
                :placeholder="'请选择'"
                v-model="queryParams.pkRegisterGrade"
              >
                <el-option
                  v-for="item in gradeRangList"
                  :key="item.pkId"
                  :label="item.gradeName"
                  :value="item.pkId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="'真实奖衔'" prop="pkAwards">
              <el-select
                clearable
                :placeholder="'请选择'"
                v-model="queryParams.pkAwards"
              >
                <el-option
                  v-for="item in awardsList"
                  :key="item.pkId"
                  :label="item.awardsName"
                  :value="item.pkId"
                ></el-option>
              </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
                clearable
                :placeholder="'请选择'"
                v-model="queryParams.vertexId"
              >
                <el-option
                  v-for="item in vertexList"
                  :key="item.pkId"
                  :label="item.vertexName"
                  :value="item.pkId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="'隶属团队'" prop="teamId">
              <el-select
                clearable
                :placeholder="'请选择'"
                v-model="queryParams.teamId"
              >
                <el-option
                  v-for="item in memberTeamList"
                  :key="item.pkId"
                  :label="item.teamName"
                  :value="item.pkId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <el-form-item :label="'变更次数'" prop="code">
              <el-input clearable v-model="queryParams.editNumber"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="'联系方式'" prop="code">
              <el-input clearable v-model="queryParams.phone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="'服务中心编号'" prop="centerMemberCode">
              <el-input
                clearable
                v-model="queryParams.centerMemberCode"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="'服务中心姓名'" prop="centerMemberName">
              <el-input
                clearable
                v-model="queryParams.centerMemberName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="'创建日期'" prop="code">
              <el-date-picker
                v-model="queryParams.time1"
                @change="changeTime1"
                type="datetimerange"
                range-separator="——"
                :start-placeholder="'开始日期'"
                :end-placeholder="'结束日期'"
                value-format="yyyy-MM-dd HH:mm:ss"
                :unlink-panels="true"
              >
              </el-date-picker>
            </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
                    @change="changeTime2"
                    v-model="queryParams.time2"
                    type="datetimerange"
                    range-separator="——"
                    :start-placeholder="'开始日期'"
                    :end-placeholder="'结束日期'"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :unlink-panels="true"
                  >
                  </el-date-picker>
                </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'"
            ></i>
            <div>{{ isActive ? '点击收起' : '点击展开' }}</div>
          </div>
        </el-row>
      </el-form>
    </div>
    <div class="maintop">
      <div class="mainbtn">
        <el-button
          size="small"
          @click="handleImport"
          class="thebtn1"
          v-hasButtons="['BasicBusinessImport']"
        >
          {{ '导入' }}</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>
          <el-table-column
            align="center"
            prop="memberCode"
            :label="'会员编号'"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="newMemberName"
            :label="'变更会员姓名'"
          >
            <template slot-scope="scope">
              <el-input v-model="scope.row.newMemberName"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            min-width="130px"
            align="center"
            prop="newPhone"
            :label="'变更联系方式'"
          >
            <template slot-scope="scope">
              <el-input clearable v-model="scope.row.newPhone"></el-input>
            </template>
          </el-table-column>
          
          <el-table-column
            align="center"
            prop="memberName"
            :label="'会员姓名'"
          >
          </el-table-column>
          <el-table-column align="center" prop="phone" :label="'联系方式'">
          </el-table-column>
          <el-table-column align="center" prop="pkRegisterGradeVal" :label="'结算等级'">
          </el-table-column>
          <el-table-column
            align="center"
            prop="pkAwardsVal"
            :label="'真实奖衔'"
          >
          </el-table-column>

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

          <el-table-column
            align="center"
            prop="creationTime"
            :label="'创建日期'"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="payTime"
            :label="'支付日期'"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="editNumber"
            :label="'变更次数'"
          >
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="main">
      <div
        class="main_content"
        v-for="(item, index) in handleBusinessList"
        :key="index"
      >
        <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"
              :max="1"
              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-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"
              type="number"
              style="width: 150px"
              v-model="item.businessValueList[0]"
            >
              <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
          type="primary"
          class="thebtn"
          @click="saveDate"
          v-hasButtons="['BasicBusinessConfirm']"
        >
          {{ '确认' }}</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>
          <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-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"></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>
</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>