yiliangyiyun-pc/src/views/houseSelfCollect/customerManagement.vue

<!--客户管理-->
<template>
  <div>
    <BaseHeaderLayout :leftSpan="12">
      <template slot="left">
        <ws-button type="primary" @click="getCustomer()">获取客户</ws-button>
        <ws-button type="primary" @click="createCustomer(1)"
          >创建新客户</ws-button
        >
      </template>
      <template slot="right">
        <ws-select
          v-model="searchTypeText"
          placeholder=""
          @change="selecttaskType"
          :value="searchType"
        >
          <ws-option
            v-for="item in warehouseList"
            :key="item.value"
            :label="item.value"
            :value="item.value"
            style="color: #8890b1"
          />
        </ws-select>
        <div></div>
        <ws-input
          v-model="searchKeyWord"
          placeholder="可按姓名、手机号查找"
          clearable
          maxlength="500"
          type="input"
        ></ws-input>
        <ws-button class="find" type="primary" @click="find()"
          ><img
            width="16"
            height="16"
            style="
              vertical-align: text-top;
              position: relative;
              top: 0px;
              left: -8px;
            "
            src="../../../public/img/sousuo.png"
            alt=""
        /></ws-button>
      </template>
    </BaseHeaderLayout>
    <div class="seach">
      <!-- <div class="search-left">
        <ws-input v-model="searchKeyWord" placeholder="可按姓名、手机号查找" clearable maxlength="500" type="input"
          class="findValue"></ws-input>
        <ws-button class="find" type="primary" @click="find()">
          <img width="16" height="16" style="
              vertical-align: text-top;
              position: relative;
              top: 0px;
              left: -8px;
            " src="../../../public/img/sousuo.png" alt />
        </ws-button>
      </div> -->
      <div class="search-right">
        <!-- <ws-button @click="getCustomer()">获取客户</ws-button> -->
        <el-dialog
          title="客户扫码"
          :visible.sync="customerDialogVisible"
          width="30%"
        >
          <div id="qrcode"></div>
        </el-dialog>
        <!-- <ws-button @click="createCustomer()">创建新客户</ws-button> -->
        <el-dialog
          title="创建新客户"
          :visible.sync="creatNewCustomerDialogVisible"
          width="50%"
        >
          <customerManagementAdd></customerManagementAdd>
        </el-dialog>
      </div>
    </div>

    <el-table
      :data="customertList"
      style="width: 100%; margin-top: 20px"
      ref="customertList"
      border
      height="780"
    >
      <el-table-column type="index" label="序号">
        <template scope="scope">
          <span v-if="scope.$index < 9">0{{ scope.$index + 1 }}</span>
          <span v-else>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="customerName" label="客户"></el-table-column>
      <el-table-column prop="customerPhone" label="手机号"></el-table-column>
      <el-table-column prop="bankCard" label="银行卡号"></el-table-column>
      <el-table-column prop="bankDeposit" label="开户行"></el-table-column>
      <el-table-column prop="payeeName" label="收款人"></el-table-column>
      <el-table-column
        prop="authenticationStatus"
        label="状态"
      ></el-table-column>
      <el-table-column prop="address" label="操作">
        <template slot-scope="scope">
          <img
            width="16"
            height="16"
            style="vertical-align: text-top; margin: 0 6px"
            src="../../../public/img/chakan.png"
            @click="createCustomer(scope.row, 2)"
            v-hasPermission="
              `contractManagement.buyContract.buyContractInfo.view`
            "
            alt
          />
          <img
            width="17"
            height="16"
            style="vertical-align: text-top; margin: 0 6px"
            src="../../../public/img/bianji.png"
            @click="createCustomer(scope.row, 3)"
            v-hasPermission="
              `contractManagement.buyContract.buyContractInfo.edit`
            "
            alt
          />
          <img
            width="16"
            height="17"
            style="
              vertical-align: text-top;
              position: relative;
              top: -1px;
              margin: 0 6px;
            "
            src="../../../public/img/shanchu.png"
            v-hasPermission="
              `contractManagement.buyContract.buyContractInfo.delete`
            "
            @click="handleDelete(scope.row)"
            alt
          />
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="deptCircularPage.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="deptBudgetTotal"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import {
  getCustomerManage,
  getCustomerDelete,
  selectWarehouseSelf,
} from '@/model/houseSelfCollect/index'
import QRCode from 'qrcodejs2'
import customerManagementAdd from './customerManagementAdd.vue'
export default {
  components: {
    customerManagementAdd,
  },
  watch: {},
  data() {
    return {
      searchKeyWord: '',
      customerDialogVisible: false,
      creatNewCustomerDialogVisible: false,
      customertList: [],
      currentPage: 1,
      pageSize: 10,
      deptBudgetTotal: 0,
      deptCircularPage: {},
      warehouseList: [], //选择仓库数组
      searchTypeText: '', //仓库
      searchType: '',
    }
  },
  activated() {
    this.getList()
  },
  methods: {
    find() {
      this.getList()
    },
    //获取客户
    getCustomer() {
      this.customerDialogVisible = true
      this.$nextTick(function () {
        document.getElementById('qrcode').innerHTML = ''
        let qrcode = new QRCode('qrcode', {
          width: 150,
          height: 150,
          text: 'https://www.baidu.com',
          colorDark: '#109dff',
          colorLight: '#d9d9d9',
        })
      })
    },
    //选择仓库改变事件
    selecttaskType() {},
    //创建客户
    createCustomer(row, num) {
      let type = num
      this.$router.push({
        name: 'customerManagementAdd',
        query: { types: type, id: row.id },
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      console.log(`当前页: ${val}`)
      this.getList()
    },

    handleEdit(row) {
      this.$router.push({
        name: 'customerManagementEdit',
        query: {
          id: row.id,
        },
      })
    },
    handleDelete(row) {
      this.$confirm('确定删除该客户？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          getCustomerDelete({
            compId: sessionStorage.getItem('ws-pf_compId'),
            id: row.id,
          })
            .toPromise()
            .then((response) => {
              this.$message.success('删除成功')
              this.getList()
            })
        })
        .catch(() => {
          return false
        })
    },
    getList() {
      selectWarehouseSelf({
        compId: sessionStorage.getItem('ws-pf_compId'),
        personCharge: sessionStorage.getItem('ws-pf_staffName'),
      })
        .toPromise()
        .then((response) => {
          this.warehouseList = []
          for (let i = 0; i < response.length; i++) {
            this.warehouseList.push({
              value: response[i].warehouseName,
            })
          }
        })

      getCustomerManage({
        compId: sessionStorage.getItem('ws-pf_compId'),
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        searchKeyWord: this.searchKeyWord,
        searchTypeText:this.searchTypeText
      })
        .toPromise()
        .then((response) => {
          this.customertList = response.records
          this.deptBudgetTotal = response.total
        })
    },
  },
}
</script>
<style lang="scss" scoped>
.seach {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .find {
    width: 32px;
  }

  .search-left {
    display: flex;
  }
}
.ws-info-table {
  border: none;
}
.ws-info-table .el-form-item {
  width: 50%;
  border: none;
}
/deep/.ws-info-table .el-form-item .el-form-item__label {
  width: 30%;
  text-align: center;
  background: #ffffff;
  color: #8890b1;
}
/deep/.ws-info-table .el-form-item .el-form-item__content {
  border: none;
}
/deep/.el-table .el-table__header .cell,
.el-table .el-table__body .cell {
  text-align: center;
}
/deep/.el-table--enable-row-transition .el-table__body td {
  text-align: center;
}
</style>