epmet-oper-pc-chengyang/epmet-oper-web/src/views/modules/customer/customize/CustomerList.vue

<template>
  <el-card shadow="never"
           class="aui-card--fill">
    <div v-show="showType==='list'"
         class="mod-/oper/customize__homecomponent}">
      <el-form :inline="true">
        <el-form-item>
          <el-input v-model="ruleForm.name"
                    placeholder="请输入客户名称"
                    :clearable="true"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="submitForm(ruleForm)">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="customerList"
                border
                style="width: 100%;">
        <el-table-column label="客户名称"
                         header-align="center"
                         align="center"
                         prop="customerName"></el-table-column>
        <el-table-column label="logo"
                         header-align="center"
                         align="center"
                         prop="logo">
          <template slot-scope="scope">
            <el-image style="width: 50px; height: 50px"
                      :src="scope.row.logo"
                      @click="addSrcList(scope.row.logo)"
                      :preview-src-list="srcList"></el-image>
          </template>
        </el-table-column>
        <el-table-column :label="$t('handle')"
                         fixed="right"
                         header-align="center"
                         align="center"
                         width="350">
          <template slot-scope="scope">
            <el-button type="text"
                       size="small"
                       @click="showMiniHome(scope.row.customerId,scope.row.customerName,0)">居民端首页</el-button>
            <el-button type="text"
                       size="small"
                       @click="showMiniHome(scope.row.customerId,scope.row.customerName,1)">工作端首页</el-button>
            <el-button type="text"
                       size="small"
                       @click="showConfigItem(scope.row.customerId,scope.row.customerName)">功能配置</el-button>
            <el-button type="text"
                       size="small"
                       @click="showLimitConfig(scope.row.customerId,scope.row.customerName)">角色权限</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page="pageNo"
                     :page-sizes="[10, 20, 50, 100]"
                     :page-size="pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total"
                     @size-change="pageSizeChangeHandle"
                     @current-change="pageCurrentChangeHandle">
      </el-pagination>
    </div>
    <div v-show="showType==='miniHome'">

      <mini-home ref="ref_mini_home"
                 @cancleBack='cancleBack'></mini-home>
    </div>
    <div v-show="showType==='config'">

      <config-item ref="ref_config_item"
                   @cancleBack='cancleBack'></config-item>
    </div>
  </el-card>
</template>

<script>
import ConfigItem from './ConfigItem'
import MiniHome from './MiniHome'
export default {
  data () {
    return {
      diaName: '功能配置',
      noImg: '暂无图片',
      customerList: [],
      input: '',

      customerId: '',
      pageNo: 1,
      pageSize: 10,
      ruleForm: { name: '' },

      total: 0,
      srcList: [],

      showType: 'list'// 显示的组件类型
    }
  },
  components: {
    ConfigItem, MiniHome
  },
  created () {
    this.queryCustomerList()
  },
  methods: {
    queryCustomerList () {
      let params = {
        customerName: '',
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
      this.$http.post('/oper/crm/customer/pagequery', params).then(({ data: res }) => {
        if (res.code === 0) {
          this.customerList = res.data.list
          this.total = res.data.total
        }
      })
    },
    submitForm (formName) {
      let params = {
        customerName: formName.name,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
      this.$http.post('/oper/crm/customer/pagequery', params).then(({ data: res }) => {
        if (res.code === 0) {
          this.customerList = res.data.list
        }
      })
    },
    showMiniHome (customerId, customerName, type) {
      this.showType = 'miniHome'
      this.$refs['ref_mini_home'].startSetWxIndex(customerId, customerName, type)
    },

    // 功能配置
    showConfigItem (customerId, customerName) {
      this.showType = 'config'
      this.$refs['ref_config_item'].initData(customerId, customerName)
    },

    // 显示权限配置
    showLimitConfig (customerId, customerName) {
      this.$message.warning('当前功能还未开发')
    },

    pageCurrentChangeHandle (val) {
      this.pageNo = val
      this.queryCustomerList()
    },
    pageSizeChangeHandle (val) {
      this.pageSize = val
      this.queryCustomerList()
    },

    addSrcList (url) {
      this.srcList = []
      this.srcList.push(url)
    },
    // 组件取消返回
    cancleBack () {
      this.showType = 'list'
    }
  }
}
</script>