epmet-oper-pc-chengyang/epmet-oper-web/src/views/modules/customer/miniProAgent/MiniProList.vue

<!-- 代小程序管理 -->
<template>
  <div>
    <el-card shadow="never"
             class="aui-card--fill">
      <div v-show="!showVersion"
           class="mod-demo__demo}">

        <el-form :inline="true"
                 :model="tableParams">
          <el-form-item>
            <el-select v-model="tableParams.customerId"
                       placeholder="客户"
                       clearable>
              <el-option v-for="item in form.data['customerId']"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="tableParams.clientType"
                       placeholder="类型"
                       clearable>
              <el-option v-for="item in form.data['clientType']"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button @click="loadTableData()">查询</el-button>
          </el-form-item>
          <!-- <el-form-item>
            <el-button type="primary"
                       @click="commitCodeDiaShow('')">上传代码</el-button>
          </el-form-item> -->
        </el-form>

        <c-table column-type="index"
                 ref="table"
                 :url="tableUrl"
                 :params="tableParams"
                 keyword="MiniProList"
                 :operations="operations"
                 :tableHeight="tableHeight"
                 @versionManage="versionManage"
                 @setweappsupportversion="setweappsupportversion"
                 @basicinfo="basicinfo"
                 @getcategory="getcategory">
        </c-table>

      </div>

      <version-item v-show="showVersion"
                    ref="ref_version_item"
                    @okVersion="okVersion"
                    @cancelVersion="cancelVersion"></version-item>

      <low-version ref="ref_version_form"></low-version>

      <basic-info ref="ref_basic_info"></basic-info>

      <category ref="ref_catefoty"></category>
    </el-card>
  </div>
</template>

<script>
import CDialog from '@c/CDialog'
import CTable from '@c/CTable'
import VersionItem from './version/VersionItem'
import LowVersion from './LowVersion'
import BasicInfo from './BasicInfo'
import Category from './Category'

import { mapGetters } from 'vuex'
import { Loading } from 'element-ui' // 引入Loading服务

let loading// 加载动画

export default {
  data () {
    return {
      // 查询相关
      tableParams: {
        customerId: '', // 客户
        clientType: '', // 类型
        source: this.env
      },
      // 列表相关
      tableUrl: 'https://epmet-cloud.elinkservice.cn/api/third/pacustomer/miniprolist',
      // tableUrl: '/third/pacustomer/miniprolist',
      // 列表操作栏的操作项数组
      operations: [
        {
          lable: '版本管理', // 按钮显示名称
          size: 'mini',
          style: 'margin: 0 6px;',
          type: 'text',
          slot: '',
          plain: false,
          methodName: 'versionManage', // 回调方法名称
          isShow: (row) => {
            return true
          }
        },
        {
          lable: '基本信息', // 按钮显示名称
          size: 'mini',
          style: 'margin: 0 6px;',
          type: 'text',
          slot: '',
          plain: false,
          methodName: 'basicinfo', // 回调方法名称
          isShow: (row) => {
            return true
          }
        },
        {
          lable: '基础库版本', // 按钮显示名称
          size: 'mini',
          style: 'margin: 0 6px;',
          type: 'text',
          slot: '',
          plain: false,
          methodName: 'setweappsupportversion', // 回调方法名称
          isShow: (row) => {
            return true
          }
        }
        // {
        //   lable: '类目', // 按钮显示名称
        //   size: 'mini',
        //   style: 'margin: 0 6px;',
        //   type: 'text',
        //   slot: '',
        //   plain: false,
        //   methodName: 'getcategory', // 回调方法名称
        //   isShow: (row) => {
        //     return true
        //   }
        // }
      ],

      // 版本管理相关
      showVersion: false,

      src: '',
      // 查询栏下拉框数据
      form: {
        dataUrl: [], // 下拉框/单选框/复选框等获取数据的url
        data: { // 全部下拉框数据
          clientType: [
            {
              value: 'resi',
              label: '居民端'
            },
            {
              value: 'work',
              label: '工作端'
            }
          ]
        }
      }
    }
  },
  components: {
    CDialog, CTable, VersionItem, LowVersion, BasicInfo, Category
  },
  activated () {
    let params = this.$route.params

    // 由客户注册信息跳转来
    if (params.showCommit) {
      this.form.data.customerId = params.customerList
      this.commitCodeDiaShow(params.customerId)
    }
    this.$nextTick(() => {
      this.$refs.table.doLayout() // 解决表格错位
    })
  },
  mounted () {
    this.renderSelData()
    this.loadTableData()
  },
  computed: {
    tableHeight () {
      return this.clientHeight - 80 - 80 - 85
    },
    ...mapGetters(['clientHeight', 'env'])
  },
  methods: {
    // 刷新
    refresh () {
      this.loadTableData()
    },
    // 加载列表数据
    loadTableData () {
      this.tableParams.source = this.env
      this.$nextTick(() => {
        this.$refs.table.loadData() // 获取表格数据
      })
    },

    // 显示模板管理
    okTemp () {
      this.showTemo = false
      this.refresh()
    },
    // 显示模板管理取消返回
    cancelTemp () {
      this.showTemo = false
    },

    // 显示版本管理
    versionManage (row) {
      this.showVersion = true
      this.$refs['ref_version_item'].initData(row.customerId, row.clientType, row.customerName, this.form.data)
    },

    // 显示版本确定
    okVersion () {
      // this.showVersion = false
      // this.refresh()
    },
    // 显示版本取消返回
    cancelVersion () {
      this.showVersion = false
    },
    // 设置最低基础版本库
    setweappsupportversion (row) {
      this.$refs['ref_version_form'].initData(row.customerId, row.clientType)
    },

    // 查看信息
    basicinfo (row) {
      this.$refs['ref_basic_info'].initData(row.customerId, row.clientType)
    },

    // 查看类目
    getcategory (row) {
      this.$refs['ref_catefoty'].initData(row.customerId, row.clientType)
    },

    async renderSelData () { // 渲染下拉框/单选框/复选框等数据
      const customerUrl = ' https://epmet-cloud.elinkservice.cn/api/third/pacustomer/registerbyauth'
      const param = {
        //  workAuth: 1,
        // resiAuth: 1,
        source: this.env,
        initState: 1
      }
      // this.startLoading()
      await window.app.ajax.post(customerUrl, param,
        (data, rspMsg) => {
          // this.endLoading()
          if (data) {
            let customerList = []

            data.forEach(element => {
              let oneObj = {
                value: element.customerId,
                label: element.customerName
              }
              customerList.push(oneObj)
            })

            this.form.data.customerId = customerList
            this.$forceUpdate()
          }
        },
        (rspMsg, data) => {
          // this.endLoading()
          this.$message.error(rspMsg)
        })
    },
    // 开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: '正在加载……', // 加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' // 背景颜色
      })
    },
    // 结束加载动画
    endLoading () {
      // clearTimeout(timer);
      if (loading) {
        loading.close()
      }
    }
  },
  props: {
    optionData: {
      type: Object,
      default () {
        return {}
      }
    }
  }
}
</script>
<style>
.el-upload__tip {
  color: rgb(155, 155, 155);
}
</style>