supply-front/src/views/supply/deliver/commerce_list.vue

<template>
  <template-page
    ref="pageRef"
    :getList="getList"
    :operation="operation()"
    :optionsEvensGroup="optionsEvensGroup"
    :exportList="exportList"
    :columnParsing="columnParsing"
    :tableAttributes="tableAttributes"
    :tableEvents="tableEvents"
  >
    <!-- 密码记录 -->
    <el-dialog
      title="密码记录"
      :visible.sync="isShowDialog"
      :show-close="false"
      width="50%"
      :close-on-click-modal="false"
    >
      <div class="table" style="margin: 10px 0 20px">
        <el-table
          v-loading="dialogTable_listLoading"
          :data="dialogTable_dataList"
          element-loading-text="Loading"
          tooltip-effect="dark"
          style="width: 100%"
          max-height="270"
        >
          <el-table-column align="center" label="序号" type="index" width="50" />
          <el-table-column align="center" prop="printPassword" label="密码" />
          <el-table-column align="center" prop="createTime" label="打印时间" />
        </el-table>
      </div>
      <div class="pagination clearfix">
        <div class="fr">
          <el-pagination
            :current-page="dialogTable_currentPage"
            :page-size="dialogTable_pageSize"
            background
            layout="prev, pager, next"
            :total="dialogTable_listTotal"
            @current-change="dialogTableCurrentChange"
          />
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="isShowDialog = false">关 闭</el-button>
      </div>
    </el-dialog>

    <Popu v-if="isShowDetail">
      <CommerceDetail v-if="isShowDetail" ref="refDetail" :list-item="queryItem" @backListFormDetail="backList" />
    </Popu>
  </template-page>
</template>

<script>
import {
  getEnginList,
  getPassword,
  getPasswordRecord,
  invoiceListProjectV2,
  invoiceListProjectV2Export
} from '@/api/supply/deliver'
import { getCategoryList, getSalesmanList } from '@/api/common'
import CommerceDetail from '@/views/supply/deliver/components/commerce_detail'

import TemplatePage from '@/components/template/template-page-1.vue'
import Popu from '@/components/template/popu.vue'

let that
export default {
  components: {
    CommerceDetail,
    TemplatePage,
    Popu
  },
  filters: {
    statusFilter(val) {
      const obj = that.statusList.find(o => o.value == val)
      return obj ? obj.label : ''
    },
    orderTypeFilter(val) {
      const obj = that.orderTypeList.find(o => o.value == val)
      return obj ? obj.label : ''
    }
  },
  data() {
    return {
      // 事件组合
      optionsEvensGroup: [],
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: false
      },
      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      recordSelected: [],

      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数
      dataList: null, // 列表数据
      listLoading: false, // 列表加载loading
      screenForm: {
        // 筛选表单数据
        orderNum: '',
        orderNo: '',
        contractNo: '',
        warehouse: '',
        jxsName: '',
        chName: '',
        model: '',
        date: [],
        jxsNum: '',
        status: '',
        salesMan: '',
        refRegionWork: '',
        createBy: ''
      },
      categoryList: [],
      salesmanList: [],
      isCollapse: true,
      isShowDialog: false, // 密码记录 - 弹窗
      dialogTable_dataList: null, // 密码记录 - 列表数据
      dialogTable_listLoading: true, // 密码记录 - 列表加载loading
      dialogTable_currentPage: 1, // 密码记录 - 当前页码
      dialogTable_pageSize: 10, // 密码记录 - 每页数量
      dialogTable_listTotal: 0, // 密码记录 - 列表总数
      statusList: [
        { label: '已保存', value: 'SAVE' },
        { label: '待审核', value: 'WAIT' },
        { label: '审核通过', value: 'OK' },
        //  // { label: '审核驳回', value: 'FAIL' },,
        { label: '已关闭', value: 'CLOSE' }
      ],
      orderTypeList: [
        { label: '发货申请单', value: 1 },
        { label: '退货申请单', value: 2 },
        { label: '直调发货单', value: 3 }
      ],
      queryItem: {}
    }
  },

  computed: {
    exParams() {
      return {
        id: this.screenForm.orderNum,
        enginOrderNo: this.screenForm.orderNo,
        refEnginRecordNo: this.screenForm.contractNo,
        customerNumber: this.screenForm.jxsNum,
        customerName: this.screenForm.jxsName,
        materialName: this.screenForm.chName,
        specification: this.screenForm.model,
        startTime: this.screenForm.date ? this.screenForm.date[0] : '',
        endTime: this.screenForm.date ? this.screenForm.date[1] : '',
        categoryName: this.screenForm.type,
        refRegionWork: this.screenForm.refRegionWork,
        serviceId: this.screenForm.salesMan,
        createBy: this.screenForm.createBy,
        orderType: 3 // 2家用工程 3商用工程
      }
    },
    isShowDetail() {
      return this.queryItem.hasOwnProperty('id')
    },
    isDealer() {
      return JSON.parse(localStorage.getItem('supply_user')).isCustomer
    }
  },

  beforeCreate() {
    that = this
  },

  created() {
    // this.getSalesmanList()
    // this.getCategoryList()
    // this.getList()
  },

  methods: {
    // 列表请求函数
    getList(...p) {
      let params = {
        ...p[0],
        orderType: 3
      }
      return invoiceListProjectV2(params)
    },
    // 列表导出函数
    exportList: invoiceListProjectV2Export,
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      return defaultData
    },
    // 监听勾选变化
    selectionChange(data) {
      this.recordSelected = data
    },
    operation() {
      return (h, { row, index, column }) => {
        return (
          <div class="operation-btns">
            <div class="operation-btns">
              <el-button
                size="mini"
                type="text"
                onClick={async () => {
                  this.toDetail(row)
                }}
              >
                详情
              </el-button>
              <el-button
                size="mini"
                type="text"
                onClick={async () => {
                  this.getPassword(row.id)
                }}
              >
                获取密码
              </el-button>
              <el-button
                size="mini"
                type="text"
                onClick={async () => {
                  this.openShareDetail(row.id)
                }}
              >
                密码记录
              </el-button>
            </div>
          </div>
        )
      }
    },

    // 获取业务员列表
    getSalesmanList() {
      getSalesmanList({
        pageNum: 1,
        pageSize: -1,
        isCustomer: 0,
        status: true
      }).then(res => {
        this.salesmanList = res.data.records
      })
    },

    // 获取存货类别列表
    getCategoryList() {
      getCategoryList({
        pageNum: 1,
        pageSize: -1
      }).then(res => {
        this.categoryList = res.data.records
      })
    },

    // 查询列表
    // getList() {
    //   this.listLoading = true

    //   const params = {
    //     pageNum: this.currentPage,
    //     pageSize: this.pageSize,
    //     id: this.screenForm.orderNum,
    //     enginOrderNo: this.screenForm.orderNo,
    //     refEnginRecordNo: this.screenForm.contractNo,
    //     customerNumber: this.screenForm.jxsNum,
    //     customerName: this.screenForm.jxsName,
    //     materialName: this.screenForm.chName,
    //     specification: this.screenForm.model,
    //     refRegionWork: this.screenForm.refRegionWork,
    //     startTime: this.screenForm.date ? this.screenForm.date[0] : '',
    //     endTime: this.screenForm.date ? this.screenForm.date[1] : '',
    //     categoryName: this.screenForm.type,
    //     serviceId: this.screenForm.salesMan,
    //     createBy: this.screenForm.createBy,

    //     orderType: 3 // 2家用工程 3商用工程
    //   }
    //   getEnginList(params).then(res => {
    //     res.data.records.forEach(item => {
    //       item.notOutNumber = item.salesStatus ? 0 : item.refundableQty
    //       item.sums1 = ['refundableQty', 'notOutNumber']
    //       item.sums2 = []
    //     })
    //     this.dataList = res.data.records
    //     this.listTotal = res.data.total
    //     this.listLoading = false
    //   })
    // },

    // 提交筛选表单
    submitScreenForm() {
      this.currentPage = 1
      this.getList()
    },

    // 重置筛选表单
    resetScreenForm() {
      this.$refs.screenForm.resetFields()
      this.currentPage = 1
      this.getList()
    },

    // 更改每页数量
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getList()
    },

    // 更改当前页
    handleCurrentChange(val) {
      this.currentPage = val
      this.getList()
    },

    // 进入详情
    toDetail(item) {
      this.queryItem = item
      this.$nextTick(() => {
        this.$refs.refDetail.initPrint()
      })
    },

    backList() {
      this.queryItem = {}
    },

    // 获取密码
    getPassword(id) {
      getPassword({ id }).then(res => {
        this.$alert(res.data, '新密码', {
          confirmButtonText: '确定',
          callback: action => {}
        })
      })
    },

    // 密码记录 - 获取列表
    getPasswordRecord(id) {
      getPasswordRecord({
        pageNum: this.dialogTable_currentPage,
        pageSize: this.dialogTable_pageSize,
        id
      }).then(res => {
        this.dialogTable_dataList = res.data.records
        this.dialogTable_listTotal = res.data.total
        this.dialogTable_listLoading = false
      })
    },

    // 密码记录 - 打开弹窗
    openShareDetail(id) {
      this.isShowDialog = true
      this.dialogTable_currentPage = 1
      this.getPasswordRecord(id)
    },

    // 密码记录 - 更改列表当前页
    dialogTableCurrentChange(val) {
      this.dialogTable_currentPage = val
      this.getPasswordRecord()
    }
  }
}
</script>

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