wt_admin_web/src/view/customer/wxulist.vue

<template>
<div id="wxulist">
    <!-- 查询条件 -->
    <Row>
        <Col span="24">
        <Card class="margin-bottom-10">
            <Form inline>
                <FormItem class="margin-bottom-0">
                    <Select v-model="searchConf.status" clearable placeholder='请选择状态' style="width:120px">
                        <Option :value="1">启用</Option>
                        <Option :value="0">禁用</Option>
                    </Select>
                </FormItem>
                <FormItem class="margin-bottom-0">
                    <Select v-model="searchConf.type" clearable placeholder="请选择类别" style="width:120px">
                        <Option :value="1">AppId</Option>
                        <Option :value="2">应用名称</Option>
                    </Select>
                </FormItem>
                <FormItem class="margin-bottom-0">
                    <Input v-model="searchConf.keywords" placeholder=""></Input>
                </FormItem>
                <FormItem class="margin-bottom-0">
                    <Button type="primary" @click="search">{{ $t('find_button') }}/{{ $t('refresh_button') }}</Button>
                </FormItem>
            </Form>
        </Card>
        </Col>
    </Row>

    <Row>
        <Col span="24">
        <Card>
            <!-- 用户列表 -->
            <div>
                <Table :loading="listLoading" :columns="columnsList" :data="tableData" border disabled-hover></Table>
            </div>
            <div class="margin-top-15" style="text-align: center">
                <Page :total="tableShow.listCount" :current="tableShow.currentPage" :page-size="tableShow.pageSize" @on-change="changePage" @on-page-size-change="changeSize" show-elevator show-sizer show-total></Page>
            </div>
        </Card>
        </Col>
    </Row>

</div>
</template>

<style lang="less" scoped>
.api-box {
    max-height: 300px;
    overflow: auto;
}

.api-group {
    margin-top: 10px;
    border: 1px solid #dddee1;
    border-radius: 5px;
    padding: 10px;
}
</style>

<script>
import { getList } from '@/api/wechat'
//
export default {
  name: 'interface_list',
  data () {
    return {
      appGroup: [],
      columnsList: [{
        title: '序号',
        type: 'index',
        width: 65,
        align: 'center'
      },
      {
        title: 'openid',
        align: 'openid',
        key: 'openid',
        minWidth: 330
      },
      {
        title: '头像',
        align: 'center',
        key: 'headimgurl',
        width: 100,
        render: (h, params) => {
          return h('img', {
            attrs: {
              src: params.row.headimgurl,
              style: 'width:72px;height:72px;'
            }
          })
        }
      },
      {
        title: '上次登录时间',
        align: 'center',
        key: 'last_login_time',
        width: 210
      },
      {
        title: '创建时间',
        align: 'center',
        key: 'create_time',
        width: 310
      },
      {
        title: '手机号码',
        align: 'center',
        key: 'phone',
        width: 260
      },
      {
        title: '状态',
        align: 'center',
        key: 'status',
        width: 200,
        render: (h, params) => {
          let _st = params.row.status === 0 ? '禁用' : '正常'
          return h('p', [
            _st
          ])
        }
      }
      ],
      tableData: [],
      groupInfo: {},
      groupList: {},
      tableShow: {
        currentPage: 1,
        pageSize: 10,
        listCount: 0
      },
      searchConf: {
        type: '',
        keywords: '',
        status: ''
      },
      modalSetting: {
        show: false,
        loading: false,
        index: 0
      },
      formItem: {
        app_name: '',
        app_id: '',
        app_secret: '',
        app_info: '',
        app_api: {},
        app_group: 'default',
        id: 0
      },
      ruleValidate: {
        app_name: [{
          required: true,
          message: '应用名称不能为空',
          trigger: 'blur'
        }]
      },
      checkAllStatus: {},
      checkAllIndeterminate: {},
      buttonShow: {
        edit: true,
        del: true,
        changeStatus: true
      },
      listLoading: false
    }
  },
  created () {
    let vm = this
    vm.getList()
    vm.hasRule('App/edit').then(res => {
      vm.buttonShow.edit = res
    })
    vm.hasRule('App/del').then(res => {
      vm.buttonShow.del = res
    })
    vm.hasRule('App/changeStatus').then(res => {
      vm.buttonShow.changeStatus = res
    })
  },
  methods: {
    alertAdd () {
      let vm = this
      getAll().then(response => {
        vm.appGroup = response.data.data.list
      })
      getAppInfo().then(response => {
        let res = response.data
        vm.formItem.app_id = res.data.app_id
        vm.formItem.app_secret = res.data.app_secret
        vm.groupInfo = res.data.groupInfo
        vm.groupList = res.data.apiList
        for (let index in vm.groupInfo) {
          vm.$set(vm.checkAllStatus, index, false)
          vm.$set(vm.checkAllIndeterminate, index, false)
          vm.$set(vm.formItem.app_api, index, [])
        }
      })
      vm.modalSetting.show = true
    },
    submit () {
      let vm = this
      vm.$refs['myForm'].validate((valid) => {
        if (valid) {
          vm.modalSetting.loading = true
          if (vm.formItem.id === 0) {
            add(vm.formItem).then(response => {
              vm.$Message.success(response.data.msg)
              vm.getList()
              vm.cancel()
            }).catch(() => {
              vm.modalSetting.loading = false
            })
          } else {
            edit(vm.formItem).then(response => {
              vm.$Message.success(response.data.msg)
              vm.getList()
              vm.cancel()
            }).catch(() => {
              vm.modalSetting.loading = false
            })
          }
        }
      })
    },
    cancel () {
      this.formItem.id = 0
      this.$refs['myForm'].resetFields()
      this.modalSetting.show = false
      this.modalSetting.loading = false
      this.modalSetting.index = 0
    },
    changePage (page) {
      this.tableShow.currentPage = page
      this.getList()
    },
    changeSize (size) {
      this.tableShow.pageSize = size
      this.getList()
    },
    handleCheckAll (groupId) {
      if (this.checkAllStatus[groupId]) {
        this.checkAllStatus[groupId] = false
      } else {
        this.checkAllStatus[groupId] = !this.checkAllStatus[groupId]
      }
      this.checkAllIndeterminate[groupId] = false

      if (this.checkAllStatus[groupId]) {
        let vm = this
        this.groupList[groupId].forEach(item => {
          vm.formItem.app_api[groupId].push(item.hash)
        })
      } else {
        this.formItem.app_api[groupId] = []
      }
    },
    checkAllGroupChange (groupId) {
      if (this.formItem.app_api[groupId].length === this.groupList[groupId].length) {
        this.checkAllIndeterminate[groupId] = false
        this.checkAllStatus[groupId] = true
      } else if (this.formItem.app_api[groupId].length > 0) {
        this.checkAllIndeterminate[groupId] = true
        this.checkAllStatus[groupId] = false
      } else {
        this.checkAllIndeterminate[groupId] = false
        this.checkAllStatus[groupId] = false
      }
    },
    search () {
      this.tableShow.currentPage = 1
      this.getList()
    },
    refreshAppSecret () {
      let vm = this
      refreshAppSecretApi().then(response => {
        vm.formItem.app_secret = response.data.data.app_secret
      })
    },
    getList () {
      let vm = this
      vm.listLoading = true
      getList({
        page: vm.tableShow.currentPage,
        size: vm.tableShow.pageSize,
        type: vm.searchConf.type,
        keywords: vm.searchConf.keywords,
        status: vm.searchConf.status
      }).then(response => {
        vm.tableData = response.data.data.list
        vm.tableShow.listCount = response.data.data.count
        vm.listLoading = false
      })
    },
    doCancel (data) {
      if (!data) {
        this.formItem.id = 0
        this.$refs['myForm'].resetFields()
        this.modalSetting.loading = false
        this.modalSetting.index = 0
      }
    }
  }
}
</script>