admin-manage/src/views/merchantManage/index.vue

<template>
  <div class="shopManage app-container">
    <div class="search">
      <div>
        <el-input
          v-model="query.shopName"
          size="small"
          placeholder="请输入门店名称"
          class="item-width-200 "
        ></el-input>
         <el-select
          v-model="platformType"
          multiple
          size="small"
          clearable
          class="item-width-200 ml10"
          placeholder="请选择所属平台"
        >
          <el-option
            v-for="item in masterShopOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button
        class="ml10"
        type="primary"
        size="small"
        icon="el-icon-search"
        @click="handleSearch"
      >
        搜索
      </el-button>
      </div>
      <el-button class="add-btn" type="primary" size="small" @click="handleAdd"
        >添加</el-button
      >
    </div>

    <el-table
      :data="tableData"
      tooltip-effect="dark"
      border
      v-loading="loading"
      style="width: 100%"
    >
      <el-table-column
        align="center"
        label="主体名称"
        prop="accountName"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="accountChildType"
        align="center"
        label="所属平台"
        fit
      >
      <template slot-scope="scope">
        {{filterMasterName(scope.row.platformType )}}
      </template>
      </el-table-column>

      <el-table-column
        prop="accountChildType"
        align="center"
        label="类型"
        show-overflow-tooltip
      >
      <template slot-scope="scope">
        {{scope.row.accountChildType | filterType(that)}}
      </template>
      </el-table-column>
      <el-table-column
        prop="phoneNum"
        align="center"
        label="手机号"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="contactName"
        align="center"
        label="联系人"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="shopNum"
        label="门店数量"
        show-overflow-tooltip
      >
      </el-table-column>

      <el-table-column prop="address" align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleEdit(scope.row)"
            >编辑</el-button
          >
           <el-button type="text" size="small" @click="handle(scope.row.accountId,scope.row.accountChildType)"
            >账户</el-button
          >
           <el-button type="text" size="small" @click="handleDel(scope.row.accountId)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="page-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :current-page="query.currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog title="银联商户管理" width="70%" :visible.sync="dialogTableVisible">
    <el-table v-loading="loading1" :data="accountData">
      <el-table-column align="center" property="shop_name" label="营业名称" ></el-table-column>
      <el-table-column align="center" property="shop_lic" label="营业执照号码"></el-table-column>
      <el-table-column align="center" property="mer_no" label="银联子商户账号"></el-table-column>
      <el-table-column align="center" property="remark" label="绑定主商户">
        <template slot-scope="scope">
          {{scope.row.remark | filterShopName}}
        </template>
      </el-table-column>
      <el-table-column align="center" property="apply_status_msg" label="状态"></el-table-column>
      <el-table-column align="center" property="address" label="操作">
         <template slot-scope="scope">
           <el-button type="text" size="small" @click="handleAccountDetail(scope.row,scope.row.accesser_user_id)"
            >查看</el-button
          >
          <el-button type="text" size="small" @click="handleAccountEdit(scope.row,scope.row.accesser_user_id)"
            >编辑</el-button
          >
          <el-button type="text" size="small" @click="handleAccountDel(scope.row.accesser_user_id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
     <div slot="footer" class="dialog-footer">
    <el-button @click="handleBind">从已有银联账号选择</el-button>
    <el-button @click="dialogTableVisible = false">关闭</el-button>
    <el-button type="primary" @click="handleAccountAdd">添加</el-button>
  </div>
  </el-dialog>

   <el-dialog title="从已有银联账号选择" width="500px" append-to-body :visible.sync="bindDialog">
      <el-form
      :model="setQuery"
      ref="setQuery"
      :rules="rules"
      label-width="130px"
    >
     <el-form-item label="营业名称：" prop="accesseId">
        <el-select
          v-model="setQuery.accesseId"
          class="item-width-300"
          filterable
          placeholder="请选择营业名称"
        >
          <el-option
            @click.native="choose(item.mer_no)"
            v-for="item in accountList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="银联商户号：">
        <el-input
          v-model="mer_no"
          size="small"
          class="item-width-300"
          disabled
        ></el-input>
      </el-form-item>
      </el-form>
     <div slot="footer" class="dialog-footer">
    <el-button @click="bindDialog = false">取消</el-button>
    <el-button type="primary" :loading='btnLoading' @click="submit">确定</el-button>
  </div>
  </el-dialog>

  </div>
</template>
  
  <script>
  import {debounce} from '@/utils/index';
  import { getList,getShopType,delAccount,allFinish,bindComplex } from '@/api/user'
  import { complexList,deleteComplex} from '@/api/payment';
  
export default {
  name: "shopManage",
  data() {
    return {
      that:this,
      tableData: [],
      accountData:[],
      options: [],
      loading: false,
      loading1: false,
      btnLoading: false,
      dialogTableVisible:false,
      bindDialog:false,
      accountId:'',//当前弹框的主体id
      platformType:'',//平台类型
      query: {
        platformType:null,
        shopName: "",
        currentPage: 1,
        pageSize: 10,
      },
      total: 0,
      mer_no:'',//银联账号
      accountList:[],
      setQuery:{
        epId:'',
        accesseId:''
      },
      rules: {
        accesseId: [{ required: true, message: "请选择营业名称", trigger: "chenge" }],
      }
    };
  },
  watch: {
    platformType(val) {
        if(val.length){
          this.query.platformType = val.join(',')
        }else{
          this.query.platformType = null
        }
      }
  },
  filters: {
    filterType: function(val,that) {
      let msg 
      that.options.map(item=>{
        if(item.value == val){
          msg = item.label
        }
      })
      return msg
    },
    
    filterShopName(val){
      if(val){
        let list = val.split(",")
        let arr = []
         list.map(item=>{
          if(item == '89852017372911Y中数'){
            arr.push('慧研学惠生活')
          }else if(item == '89852017372912Y贵大'){
            arr.push('印象贵大')
          }else if(!arr.length){
            arr.push('无')
          }
         })
         arr = arr.join()
        return arr
      }else{
          return '无'
      }
    },
    
  },
  methods: {
    
    choose(val){
      this.mer_no = val
    },
    handleBind(){
      this.bindDialog = true
      this.allFinish()
      this.setQuery.accesseId = ''
    },
    handleSearch(){
      this.query.currentPage = 1
      this.getList();

    },
    handleAccountAdd(){
      this.$router.push({path:"/operationManage/shopManage/shopType",query:{id:this.accountId,mode:'add'}});

    },
    handleAccountDetail(row,accesseId){
      let type
      if(row.reg_mer_type == '02'){
        type = 1
      }else if(row.reg_mer_type == '01'){
        type = 2
      }else if(row.reg_mer_type == '00'){
        type = 3
      }else if(row.reg_mer_type == '03'){
        type = 4
      }
      this.$router.push({path:"/operationManage/shopManage/shopAdd"+type,query:{id:this.accountId,accesseId,mode:'detail'}});

    },
    handleAccountEdit(row,accesseId){
       let type
      if(row.reg_mer_type == '02'){
        type = 1
      }else if(row.reg_mer_type == '01'){
        type = 2
      }else if(row.reg_mer_type == '00'){
        type = 3
      }else if(row.reg_mer_type == '03'){
        type = 4
      }
      this.$router.push({path:"/operationManage/shopManage/shopAdd"+type,query:{id:this.accountId,accesseId,mode:'edit'}});

    },
    handleAccountDel(accesseId){
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteComplex(this.accountId,accesseId)
        })
    },
    handleAdd() {
      this.$router.push("/merchantManage/addUser");
    },
    handleDel(accountId){
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
         delAccount({accountId}).then(res=>{
              if(res.state == 'Success'){
                  this.$notify({
                    title: '成功',
                    message: '操作成功',
                    type: 'success'
                  });
                  this.query.currentPage = 1
                  this.getList()
              }
          })
        })
    },
    handle(id,type) {
      this.accountId = id
      this.setQuery.epId = id
       this.dialogTableVisible = true
        this.complexList(id)
      // if(type == 302){//入驻商户
      //   this.dialogTableVisible = true
      //   this.complexList(id)
      // }else{

      // }
    },
    handleEdit(row) {
      sessionStorage.setItem('shopUser',JSON.stringify(row))
      this.$router.push({
        path:"/merchantManage/addUser",
        query:{
          id:row.accountId,
          title:'编辑商户'
        }
      });
    },
    handleSizeChange(val) {
      this.query.currentPage = 1;
      this.query.pageSize = val;
    this.getList()
    },
    handleCurrentChange(val) {
      this.query.currentPage = val;
    this.getList()
    },
    getList(){
      this.loading = true;
      getList(this.query).then(res=>{
        this.loading = false;
          if(res.state == 'Success'){
            this.tableData = res.content.records
            this.total = res.content.total
          }
      })
    },
    getShopType() {
      getShopType().then((res) => {
        if (res.state == "Success") {
          for (const key in res.content) {
            if (Object.hasOwnProperty.call(res.content, key)) {
              this.options.push({
                value: key,
                label: res.content[key],
              });
            }
          }
        }
      });
    },
    complexList(epId){
      this.loading1 = true
      complexList({
        "accesseId": "",
        "epId": epId
      }).then(res=>{
        this.loading1 = false
        if (res.state == "Success") {
            this.accountData = res.content
        }
      })
    },
    deleteComplex(epId,accesseId){
      deleteComplex({
        accesseId,
        epId
      }).then(res=>{
        if (res.state == "Success") {
            this.$notify({
                title: '成功',
                message: '操作成功',
                type: 'success'
              });
              this.complexList(epId)
        }
      })
    },
    // 获取所有的已认证银联号
    allFinish() {
      allFinish().then((res) => {
        if (res.state == "Success") {
          res.content.map(item=>{
            this.accountList.push({
              label:item.shop_name||item.accesser_user_id,
              value:item.accesser_user_id,
              mer_no:item.mer_no,
            })
          })
        }
      });
    },
    submit(){
      this.$refs.setQuery.validate((v) => {
          if (v) {
            this.btnLoading = true
            bindComplex(this.setQuery).then(res=>{
             this.btnLoading = false
                if (res.state == "Success") {
                  this.bindDialog = false
                  this.complexList(this.accountId)
                  this.$notify({
                    title: '成功',
                    message: '操作成功',
                    type: 'success'
                  });
                }

            })
          }
      })
    }
  },
  created() {
    this.getList()
    this.getShopType()
  },
};
</script>
  
<style lang="scss" scoped>
.shopManage {
  .search {
    justify-content: space-between;
    .add-btn {
      // margin-right: 20px;
    }
  }
}
</style>