epmet-oper-pc-chengyang/epmet-oper-web/src/views/modules/code/CommitList.vue

<template>
  <div>
    <el-card shadow="never"
             class="aui-card--fill">
      <div class="mod-demo__demo}">

        <el-form :inline="true"
                 :model="tableParams"
                 @keyup.enter.native="loadData()">
          <el-form-item>
            <el-select v-model="tableParams.customerId"
                       placeholder="客户">
              <el-option v-for="item in form.data['client']"
                         :key="item.customerId"
                         :label="item.customerName"
                         :value="item.customerId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="tableParams.clientType"
                       placeholder="类型">
              <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-select v-model="tableParams.state"
                       placeholder="状态">
              <el-option v-for="item in form.data['state']"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item>
            <el-date-picker v-model="tableParams.commitDate"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="发布开始日期"
                            end-placeholder="发布结束日期"
                            :default-value="new Date()"
                            value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-form-item> -->
          <!-- <el-form-item>
            <el-date-picker v-model="tableParams.submitDate"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="审核开始日期"
                            end-placeholder="审核结束日期"
                            :default-value="new Date()"
                            value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-form-item> -->
          <el-form-item>
            <el-button @click="loadData()">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       @click="commitCode()">上传代码</el-button>
          </el-form-item>
        </el-form>

        <c-table column-type="index"
                 ref="table"
                 :url="tableUrl"
                 :params="tableParams"
                 keyword="CommitCodeList"
                 :operations="operations"
                 :tableHeight="tableHeight"
                 @submitCode="submitCode"
                 @showQRCode="showQRCode"
                 @submitRecall="submitRecall"
                 @issueCode="issueCode"
                 @submitFailReason="submitFailReason"
                 @operHistory="operHistory">
        </c-table>
        -
      </div>
    </el-card>
    <c-dialog :title="commitDia.title"
              :visible="commitDia.visible"
              :showConfirm="false"
              @cancel="commitDiaCancel">
      <commit-form ref="ref_commit_form"
                   :optionData="optionData"
                   @commitConfirm="commitConfirm"></commit-form>
    </c-dialog>

    <c-dialog :title="submitDia.title"
              :visible="submitDia.visible"
              :dialogHeight="1.1"
              @cancel="submitDiaCancel">
      <submit-form ref="ref_submit_form"></submit-form>
    </c-dialog>

    <c-dialog :showFooter="false"
              :title="operDia.title"
              :visible="operDia.visible"
              @cancel="operDiaCancel">
      <oper-history ref="ref_oper_history"></oper-history>
    </c-dialog>
  </div>
</template>

<script>
import CDialog from '@c/CDialog'
import CTable from '@c/CTable'
import SubmitForm from './SubmitForm'
import CommitForm from './CommitForm'
import OperHistory from './OperHistory'
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      loading: false,
      // 查询相关
      tableParams: {
        customerId: '', // 客户
        clientType: '', // 类型
        state: '', // 代码状态
        commitDate: '', // 发布日期
        submitDate: '' // 审核日期
      },
      // 列表相关
      //  tableUrl: '/third/code/uploadlist',
      tableUrl: 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/third/code/uploadlist',
      // 列表操作栏的操作项数组
      operations: [
        {
          lable: '提交审核', // 按钮显示名称
          size: 'mini',
          style: 'margin: 0 6px;',
          type: 'text',
          slot: '',
          plain: false,
          methodName: 'submitCode', // 回调方法名称
          isShow: function (row) {
            if (row.status === 'unaudited' || row.status === 'audit_failed' || row.status === 'withdrawn') {
              return true
            } else {
              return false
            }
          }
        },
        {
          lable: '二维码', // 按钮显示名称
          size: 'mini',
          style: 'margin: 0 6px;',
          type: 'text',
          slot: '',
          plain: false,
          methodName: 'showQRCode', // 回调方法名称
          isShow: function (row) {
            if (row.status === 'unaudited') {
              return true
            } else {
              return false
            }
          }
        },
        {
          lable: '审核撤回', // 按钮显示名称
          size: 'mini',
          style: 'margin: 0 6px;',
          type: 'text',
          slot: '',
          plain: false,
          methodName: 'submitRecall', // 回调方法名称
          isShow: function (row) {
            if (row.status === 'auditing') {
              return true
            } else {
              return false
            }
          }
        },
        {
          lable: '发布', // 按钮显示名称
          size: 'mini',
          style: 'margin: 0 6px;',
          type: 'text',
          slot: '',
          plain: false,
          methodName: 'issueCode', // 回调方法名称
          isShow: function (row) {
            if (row.status === 'audit_success' || row.status === 'release_failed') {
              return true
            } else {
              return false
            }
          }
        },
        {
          lable: '审核失败原因', // 按钮显示名称
          size: 'mini',
          style: 'margin: 0 6px;',
          type: 'text',
          slot: '',
          plain: false,
          methodName: 'submitFailReason', // 回调方法名称
          isShow: function (row) {
            if (row.status === 'audit_failed') {
              return true
            } else {
              return false
            }
          }
        },
        {
          lable: '操作历史', // 按钮显示名称
          size: 'mini',
          style: 'margin: 0 6px;',
          type: 'text',
          slot: '',
          plain: false,
          methodName: 'operHistory',
          isShow: 'show'
        }
      ],
      // 上传弹出框相关
      commitDia: {
        title: '',
        visible: false
      },
      optionData: Object,
      // 审核弹出框相关
      submitDia: {
        title: '',
        visible: false
      },
      // 操作历史弹出框相关
      operDia: {
        title: '',
        visible: false
      },
      // 查询栏下拉框数据
      form: {
        dataUrl: [], // 下拉框/单选框/复选框等获取数据的url
        data: { // 全部下拉框数据
          clientType: [
            {
              value: 'resi',
              label: '居民端'
            },
            {
              value: 'work',
              label: '工作端'
            }
          ],
          state: [
            {
              value: 'unaudited',
              label: '未审核'
            },
            {
              value: 'auditing',
              label: '审核中'
            },
            {
              value: 'audit_success',
              label: '审核成功'
            },
            {
              value: 'audit_failed',
              label: '审核被拒绝'
            },
            {
              value: 'withdrawn',
              label: '已撤回'
            },
            {
              value: 'delay',
              label: '审核延后'
            },
            {
              value: 'release_success',
              label: '发布成功'
            },
            {
              value: 'release_failed',
              label: '发布失败'
            }
          ]
        }
      }
    }
  },
  components: {
    CDialog, SubmitForm, CommitForm, OperHistory, CTable
  },
  activated () {
    this.$nextTick(() => {
      this.$refs.table.doLayout() // 解决表格错位
    })
  },
  mounted () {
    let params = this.$route.params
    // 由客户注册信息跳转来
    if (params.showCommit) {
      this.commitDia.title = '上传代码'
      this.commitDia.visible = true

      let dataForm = {
        clientType: '工作端',
        client: params.name
      }
      this.$nextTick(() => {
        this.$refs['ref_commit_form'].initData(dataForm)
      })
    }

    this.renderSelData()
    this.loadData()
  },
  computed: {
    tableHeight () {
      return this.clientHeight - 60 - 80 - 80 - 50
    },
    ...mapGetters(['clientHeight'])
  },
  methods: {
    // 加载列表数据
    loadData () {
      this.$nextTick(() => {
        this.$refs.table.loadData() // 获取表格数据
      })
    },
    // 上传代码
    commitCode (id) {
      this.form.data['customerId'] = this.form.data['client']
      this.optionData = this.form.data
      this.commitDia.title = '上传代码'
      this.commitDia.visible = true
    },
    // 提交审核
    submitCode (id) {
      this.submitDia.title = '提交审核'
      this.submitDia.visible = true
    },
    submitDiaCancel () {
      this.submitDia.title = ''
      this.submitDia.visible = false
    },
    // 审核撤回
    submitRecall (id) {

    },
    // 体验版二维码
    showQRCode (id) {

    },
    // 发布
    issueCode (id) {

    },
    // 审核失败原因
    submitFailReason (id) {

    },
    // 操作历史
    operHistory (id) {
      this.operDia.title = '操作历史'
      this.operDia.visible = true
    },
    // 提交审核确定
    commitConfirm () {
      this.commitDia.visible = false
      this.loadData()
    },
    commitDiaCancel () {
      this.commitDia.title = ''
      this.commitDia.visible = false
    },
    operDiaCancel () {
      this.operDia.title = ''
      this.operDia.visible = false
    },
    renderSelData () { // 渲染下拉框/单选框/复选框等数据
      this.form.dataUrl = []
      this.form.dataUrl.push({ // 有效客户
        key: 'client', // 对应bean.js中对应属性的key
        url: '/oper/crm/customer/getvalidcustomerlist',
        params: {}
      })
      window.app.ajax.all( // 并发请求全部的渲染数据
        this.form.dataUrl,
        data => {
          data.forEach((oneData, index) => { // 组织数据
            var key = this.form.dataUrl[index].key
            this.form.data[key] = oneData
          })

          this.form.data['client'].forEach((oneData, index) => { // 组织数据
            oneData.value = oneData.customerId
            oneData.label = oneData.customerName
          })
          this.$forceUpdate()
        }
      )
    }

  }
}
</script>