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

<template>
  <div>
    <c-dialog :title="'上传代码'"
              :visible="diaVisible"
              @ok="commitCode"
              @cancel="diaCancel">
      <el-card shadow="never"
               class="aui-card--fill">
        <c-form ref="ref_form_temp"
                keyword="CommitCodeForm"
                :itemWidth="'300px'"
                :method="tempForm.method"
                :option-data="optionData"></c-form>

        <div class="mod-demo__demo}">

          <c-table column-type="radio"
                   :pageVisible="true"
                   ref="table"
                   :url="tableUrl"
                   :params="tableParams"
                   keyword="Temp"
                   :operations="operations"
                   @selectRadioRow="selectRadioRow">
          </c-table>

        </div>
      </el-card>
    </c-dialog>
  </div>
</template>

<script>
/* eslint-disable */
import CTable from '@c/CTableNoPage'
import CDialog from '@c/CDialog'
import CForm from '@c/CForm'
import { mapGetters } from 'vuex'
import { Loading } from 'element-ui' // 引入Loading服务

let loading // 加载动画
export default {
  data () {
    return {
      params: {},//父组件传来的
      tempForm: {
        commitUrl: 'https://epmet-cloud.elinkservice.cn/api/third/code/upload',
        // commitUrl: '/third/code/upload',
        method: 'A',
        dataUrl: [], // 下拉框/单选框/复选框等获取数据的url
        data: {
          clientType: [
            {
              value: 'resi',
              label: '居民端'
            },
            {
              value: 'work',
              label: '工作端'
            }
          ]
        }
      },
      optionData: {},

      // 模板列表
      selTempId: '',
      tableUrl: 'https://epmet-cloud.elinkservice.cn/api/third/code/templatelist',
      tableParams: {
        type: Object, // table的查询参数
        default () {
          return {}
        }
      },
      // 列表操作栏的操作项数组
      operations: [
      ],
      // 弹出框相关
      diaVisible: false

    }
  },
  components: {
    CTable, CForm, CDialog
  },
  mounted () {
  },
  computed: {
    tableHeight () {
      return this.clientHeight - 60 - 80 - 80 - 50 - 400
    },
    ...mapGetters(['clientHeight'])
  },
  props: {
    // optionData: {
    //   type: Object,
    //   default () {
    //     return {}
    //   }
    // }
  },
  methods: {
    // eslint-disable-next-line
    initData (params, optionData) {
      this.diaVisible = true
      this.optionData = optionData
      this.params = params

      this.$nextTick(() => {
        this.$refs['ref_form_temp'].assign(params)
        this.loadTableData()
      })
    },
    // 获取列表数据
    loadTableData () {
      this.$nextTick(() => {
        this.$refs.table.loadData() // 获取表格数据
      })
    },

    selectRadioRow (row) {
      this.selTempId = row.id
      let dataForm = {
        customerId: this.params.customerId,
        clientType: this.params.clientType,
        userVersion: row.userVersion,
        userDesc: row.userDesc,
      }

      this.$refs['ref_form_temp'].assign(dataForm)

    },
    resetData () {
      this.selTempId = ''
      this.$refs['ref_form_temp'].resetForm()
    },
    commitCode () {
      this.$refs['ref_form_temp'].validate((valid) => {
        if (valid) {
          if (this.selTempId === '') {
            this.$message.warning('请选择模板')
            return
          }
          this.startLoading()
          // 表单对象
          let _data = this.$refs['ref_form_temp'].model
          _data.templateId = this.selTempId
          window.app.ajax.post(this.tempForm.commitUrl, _data,
            (data, rspMsg) => {
              this.endLoading()
              this.$message.success('上传成功')
              this.diaCancel()
              this.$emit('refresh')
            },
            (rspMsg, data) => {
              this.endLoading()
              this.$message.error(rspMsg)
            })
        }
      })
    },
    diaCancel () {
      this.resetData()
      this.diaVisible = false
    },
    // 开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: '正在加载……', // 加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' // 背景颜色
      })
    },
    // 结束加载动画
    endLoading () {
      // clearTimeout(timer);
      if (loading) {
        loading.close()
      }
    }
  }
}
</script>