supply-front/src/views/commercialEngineering/frock/frockList.vue

<template>
  <template-page
    ref="pageRef"
    :get-list="getList"
    :export-list="exportList"
    :pofx="true"
    :operation="operation()"
    :column-parsing="columnParsing"
    :operation-column-width="160"
    :options-evens-group="optionsEvensGroup"
    :table-attributes="tableAttributes"
    :table-events="tableEvents"
    :replace-or-not-map="false"
    :ellipsis="false"
  >
    <Popu v-if="visible">
      <el-page-header slot="head" :content="content" @back="handleClose" />
      <FrockForm
        v-if="['add', 'edit','apply'].includes(module)"
        :detail-id="detailId"
        :module="module"
        @updateList="handleClose"
      />
      <Detail v-if="['detail'].includes(module)" :detail-id="detailId" :module="module" @updateList="handleClose" />
      <Examine v-if="['examine'].includes(module)" :detail-id="detailId" :module="module" @updateList="handleClose" />
    </Popu>
    <Operate v-if="operateVisible" :operate-visible="operateVisible" :operate-type="operateType" :operate-title="operateTitle" :detail-id="detailId" :record-selected="recordSelected" @close="handleClose" />
  </template-page>
</template>

<script>
import TemplatePage from '@/components/template/template-page-1.vue'
import import_mixin from '@/components/template/import_mixin.js'
import add_callback_mixin from '@/components/template/add_callback_mixin.js'
import Popu from '@/components/template/popu.vue'
import FrockForm from './frockForm.vue'
import Detail from './detail.vue'
import Examine from './examine.vue'
import Operate from '../components/operate.vue'
import { getLoginFrockList, exportLoginFrock } from '@/api/frock'
import { mapGetters } from 'vuex'
export default {
  components: { TemplatePage, Popu, FrockForm, Detail, Examine, Operate },
  mixins: [import_mixin, add_callback_mixin],
  data() {
    return {
      visible: false,

      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: true
      }, // 关闭新增弹窗

      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      recordSelected: [],
      content: '新增',
      detailId: '',
      module: 'add',
      operateVisible: false,
      operateType: null,
      operateTitle: null
    }
  },
  computed: {
    ...mapGetters(['isTradeExaminer']),
    optionsEvensGroup() {
      return [
        [
          [
            {
              name: '添加记录',
              click: this.addOn(() => {
                this.visible = true
              })
            }
          ]
        ],
        ...(() => {
          console.log(this.isTradeExaminer, 9999)
          return this.isTradeExaminer
            ? [
              [
                [
                  {
                    name: '更新',
                    click: () => {
                      if (this.recordSelected.length === 0) {
                        this.$message.error('请选择需要更新的数据')
                        return
                      }

                      for (let index = 0; index < this.recordSelected.length; index++) {
                        if (!(this.recordSelected[index].orderStatus == '登录成功' && this.recordSelected[index].status == '跟进中')) {
                          this.$message.error('请选择审核通过并且跟进中的数据')
                          return
                        }
                      }
                      this.operateType = 'update'
                      this.operateTitle = '更新'
                      this.operateVisible = true
                    }
                  }
                ]
              ],
              [
                [
                  {
                    name: '替换业务员',
                    click: () => {
                      if (this.recordSelected.length === 0) {
                        this.$message.error('请选择需要替换业务员的数据')
                        return
                      }
                      for (let index = 0; index < this.recordSelected.length; index++) {
                        if (this.recordSelected[index].orderStatus !== '登录成功') {
                          this.$message.error('请选择审核通过的数据')
                          return
                        }
                      }
                      this.operateType = 'replace'
                      this.operateTitle = '替换业务员'
                      this.operateVisible = true
                    }
                  }
                ]
              ],
              [
                [
                  {
                    name: '删除',
                    click: () => {
                      if (this.recordSelected.length === 0) {
                        this.$message.error('请选择需要删除的数据')
                        return
                      }
                      for (let index = 0; index < this.recordSelected.length; index++) {
                        if (this.recordSelected[index].orderStatus !== '登录成功') {
                          this.$message.error('请选择审核通过的数据')
                          return
                        }
                      }
                      this.operateType = 'delete'
                      this.operateTitle = '删除'
                      this.operateVisible = true
                    }
                  }
                ]
              ]
            ]
            : []
        })()
      ]
    }
  },
  created() {
    this.getCurrentRoute()
  },
  methods: {
    // 列表请求函数
    getList(...p) {
      this.recordSelected = []
      return getLoginFrockList(...p)
    },
    // 列表导出函数
    exportList: exportLoginFrock,
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      if (item.colName === 'project_no') {
        defaultData.render = (h, { row, index, column }) => {
          return (<el-link type='primary' underline={false} onClick={() => {
            const page = this.$router.resolve({
              path: '/commercialEngineering/frockList',
              query: {
                detailId: row.id,
                module: 'detail'
              }
            })
            window.open(page.href, '_blank')
          }}>{row.projectNo}</el-link>)
        }
      }
      return defaultData
    },
    // 监听勾选变化
    selectionChange(data) {
      this.recordSelected = data
      console.log(data)
    },
    operation() {
      return (h, { row, index, column }) => {
        return (
          <div class='operation-btns'>
            {this.isTradeExaminer && (row.orderStatus === 'WAIT' || row.orderStatus === 'OK' || row.orderStatus === 'FAIL') ? (
              <el-button
                size='mini'
                type='text'
                onClick={() => {
                  this.content = '审核'
                  this.module = 'examine'
                  this.detailId = row.id
                  this.visible = true
                }}
              >
                审核
              </el-button>
            ) : null}
            {/* {
              <el-button
                size='mini'
                type='text'
                onClick={() => {
                  this.content = '详情'
                  this.module = 'detail'
                  this.detailId = row.id
                  this.visible = true
                }}
              >
              详情
              </el-button>
            } */}

            {(row.orderStatus === 'SAVE' || row.orderStatus === 'RETURN')
              ? <el-button
                size='mini'
                type='text'
                onClick={() => {
                  this.content = '编辑'
                  this.module = 'edit'
                  this.detailId = row.id
                  this.visible = true
                }}
              >
              编辑
              </el-button> : null
            }
            {row.orderStatus === 'OK' && row.status === 'ING'
              ? <el-button size='mini' type='text' onClick={() => {
                this.operateType = 'update'
                this.operateTitle = '更新'
                this.recordSelected = [row]
                this.operateVisible = true
              }}>
              更新
              </el-button> : null
            }
            {!this.isTradeExaminer && ((row.orderStatus === 'OK') && row.status === 'ING' && !row.isApplyUpdate) ? (
              <el-button
                size='mini'
                type='text'
                onClick={() => {
                  this.detailId = row.id
                  this.operateType = 'apply'
                  this.operateTitle = '申请修改'
                  this.operateVisible = true
                }}
              >
                申请修改
              </el-button>
            ) : null}
            {this.isTradeExaminer && ((row.orderStatus === 'OK' || row.orderStatus === 'FAIL') && row.isApplyUpdate) ? (
              <el-button
                size='mini'
                type='text'
                onClick={() => {
                  this.detailId = row.id
                  this.operateType = 'examine'
                  this.operateTitle = '审核修改'
                  this.operateVisible = true
                }}
              >
                审核修改
              </el-button>
            ) : null}
          </div>
        )
      }
    },
    handleClose() {
      this.getCurrentRoute('OK')
      this.addOff(() => {
        this.content = '新增'
        this.module = 'add'
        this.detailId = ''
        this.operateVisible = false
        this.operateTitle = null
        this.operateType = null
        this.visible = false
        this.$refs.pageRef.refreshList()
      })()
    },
    getCurrentRoute(back) {
      const { detailId, module } = this.$route.query
      if (back === 'OK' && module === 'detail') {
        this.$router.replace('/commercialEngineering/frockList')
        return
      }
      if (detailId && module === 'detail') {
        this.content = '详情'
        this.detailId = detailId
        this.module = module
        this.visible = true
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>