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

<template>
  <div>
    <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"
                  ref="ref_customertable"
                  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 v-if="scope.row.logo"
                        style="width: 50px; height: 50px"
                        :src="scope.row.logo"
                        @click="addSrcList(scope.row.logo)"
                        :preview-src-list="srcList"></el-image>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('handle')"
                           fixed="right"
                           header-align="center"
                           align="center"
                           width="500">
            <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="showFootbar(scope.row.customerId,scope.row.customerName)">FootBar配置</el-button>
              <el-button type="text"
                         size="small"
                         @click="showLimitConfig(scope.row.customerId,scope.row.customerName)">角色权限</el-button>
              <el-button type="text"
                         size="small"
                         @click="showMost(scope.row.customerId,scope.row.customerName)">高级配置</el-button>
              <el-button type="text"
                         size="small"
                         @click="showCategory(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>
      <div v-show="showType==='footbar'">
        <footbar-list ref="ref_footbarlist"
                      :showFrom="'customize'"
                      :tableKeywork="'FootBarCustomize'"
                      @cancleBack="cancleBack"></footbar-list>
      </div>
      <div v-if="showType==='mostedit'">
        <most-list ref="ref_mostlist"
                   @cancleBack="cancleBack"></most-list>
      </div>
      <div v-if="showType==='category'">
        <category-list ref="ref_category"
                       @cancleBack="cancleBack"></category-list>
      </div>

      <el-dialog :visible.sync="funcVisible"
                 title="功能列表"
                 :close-on-click-modal="false"
                 :close-on-press-escape="false"
                 width="90%"
                 top="30px">
        <role-list v-if="funcVisible"
                   :customer-id="customerId"
                   :customer-name="customerName" />
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import ConfigItem from './ConfigItem'
import FootbarList from '../../productConfig/footbar/FootbarList'
import MiniHome from './MiniHome'
import MostList from './MostList'
import RoleList from './roleList'
import categoryList from './CategoryList'
export default {
  data () {
    return {
      funcVisible: false,
      diaName: '功能配置',
      noImg: '暂无图片',
      customerList: [],
      input: '',

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

      total: 0,
      srcList: [],

      showType: 'list' // 显示的组件类型
    }
  },
  components: {
    ConfigItem,
    MiniHome,
    RoleList,
    FootbarList,
    MostList,
    categoryList
  },
  activated () {
    if (this.showType === 'footbar') {
      this.$nextTick(() => {
        this.$refs['ref_footbarlist'].doLayout() // 解决表格错位
      })
    } else if (this.showType === 'list') {
      this.$nextTick(() => {
        this.$refs['ref_customertable'].doLayout() // 解决表格错位
      })

    }

  },
  mounted () {
    // const userType = localStorage.getItem('userType')
    // if (userType === 'work') {
    //   this.showMiniHome(localStorage.getItem('customerId'), localStorage.getItem('customerName'), 0)
    // } else {
    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)
    },
    // footbar配置
    showFootbar (customerId, customerName) {
      this.showType = 'footbar'
      this.$refs['ref_footbarlist'].initData(customerId, customerName)
    },
    // most配置
    showMost (customerId, customerName) {
      this.showType = 'mostedit'
      console.log('ref_mostlist', this.$refs['ref_mostlist'])
      this.$nextTick(() => {
        this.$refs['ref_mostlist'].initData(customerId, customerName)
      })
    },
    // 显示分类配置
    showCategory (customerId, customerName) {
      this.showType = 'category'
      console.log('ref_category', this.$refs['ref_category'])
      this.$nextTick(() => {
        this.$refs['ref_category'].initData(customerId, customerName)
      })
    },
    // 显示权限配置
    showLimitConfig (customerId, customerName) {
      this.customerId = customerId
      this.customerName = customerName
      this.funcVisible = !this.funcVisible
      // 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>