supply-front/src/views/commercialEngineering/crossDistrict/crossDistrictkList.vue

<template>
  <template-page
    ref="pageRef"
    :get-list="getList"
    :export-list="exportList"
    :operation="operation()"
    :pofx="true"
    :column-parsing="columnParsing"
    :operation-column-width="160"
    :options-evens-group="optionsEvensGroup"
    :table-attributes="tableAttributes"
    :table-events="tableEvents"
    :replaceOrNotMap ="false"
    :ellipsis="false"

  >
    <Popu v-if="visible">
      <el-page-header slot="head" :content="content" @back="handleClose" />
      <CrossDistrictForm
        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 CrossDistrictForm from './crossDistrictForm.vue'
import Detail from './detail.vue'
import Examine from './examine.vue'
import Operate from '../components/operate.vue'
import { mapGetters } from 'vuex'

import { getLoginCrossDistrictList, exportLoginCrossDistrict } from '@/api/crossDistrict'
export default {
  components: { TemplatePage, Popu, CrossDistrictForm, 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', // ['add', 'edit', 'detail', 'examine']
      operateVisible: false,
      operateType: null,
      operateTitle: null
    }
  },
  computed: {
    ...mapGetters(['isTradeExaminer']),
    optionsEvensGroup() {
      return [
        [
          [
            {
              name: '添加记录',
              click: this.addOn(() => {
                this.visible = true
              })
            }
          ]
        ],
        ...(() => {
          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 == 'OK' && this.recordSelected[index].status == 'ING')) {
                          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 !== 'OK') {
                          this.$message.error('请选择审核通过的数据')
                          return
                        }
                      }
                      this.operateType = 'replace'
                      this.operateTitle = '替换业务员'
                      this.operateVisible = true
                    }
                  }
                ]
              ]
            ]
            : []
        })(),
              [
                [
                  {
                    name: '删除',
                    click: () => {
                      if (this.recordSelected.length === 0) {
                        this.$message.error('请选择需要删除的数据')
                        return
                      }
                      if(!this.isTradeExaminer){
                        for (let index = 0; index < this.recordSelected.length; index++) {
                        if (this.recordSelected[index].orderStatus !== 'SAVE') {
                          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 getLoginCrossDistrictList(...p)
    },
    // 列表导出函数
    exportList: exportLoginCrossDistrict,
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      if (item.colName === 'project_no') {
        defaultData.render = (h, { row, index, column }) => {
          return ( <div style="padding:0 6px;cursor: pointer;" class={{ 'text-view': true, 'text-view-copy': column.isCopy }}>
              <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>
              {column.isCopy ? (
                <i
                  class={['el-icon-document-copy', column.columnCopyClass]}
                  data-clipboard-text={row[column.columnAttributes.prop]}
                ></i>
              ) : null}
            </div>)
        }
      }
      return defaultData
    },
    // 监听勾选变化
    selectionChange(data) {
      this.recordSelected = data
    },
    operation() {
      return (h, { row, index, column }) => {
        return (
          <div class='operation-btns'>
               {!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 !== 'SAVE' ? (
              <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> */}
            {(this.isTradeExaminer &&
              (row.orderStatus === 'SAVE' || row.orderStatus === 'RETURN' || row.status === 'ING')) ||
            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.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.operateVisible = false
        this.operateTitle = null
        this.operateType = null
        this.detailId = ''
        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>