supply-front/src/views/supply/retail/retail_list.vue

<template>
  <template-page
    ref="pageRef"
    :getList="getList"
    :exportList="exportList"
    :operation="operation()"
    :optionsEvensGroup="optionsEvensGroup"
    :columnParsing="columnParsing"
    :operationColumnWidth="200"
  >
    <EditDateDialog :isShow.sync="isShowEditDateDialog" :dateForm.sync="dateForm" @submit="submitDateForm" />
    <Popu v-if="isShowDetail || isShowForm || isShowExamine || isShowReturn">
      <RetailDetail :listItem="queryItem" v-if="isShowDetail" @backListFormDetail="backList" />
      <RetailForm :listItem="queryItem" v-if="isShowForm" @backListFormDetail="backList" />
      <RetailExamine :listItem="queryItem" v-if="isShowExamine" @backListFormDetail="backList" />
      <RetailReturn :listItem="queryItem" v-if="isShowReturn" @backListFormDetail="backList" />
    </Popu>
  </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 {
  getList,
  closeData,
  submitData,
  editData,
  abandonData,
  deleteData,
  withdrawData,
  getRetaillListV2,
  exportRetaillListV2
} from '@/api/supply/retail'
import { getSalesmanList, getTypeList } from '@/api/common'
import RetailDetail from '@/views/supply/retail/components/retail_detail'
import RetailForm from '@/views/supply/retail/components/retail_form'
import RetailExamine from '@/views/supply/retail/components/retail_examine'
import RetailReturn from '@/views/supply/retail/components/retail_return'
import EditDateDialog from '@/components/Common/edit-date-dialog'
import { getNoRebateWalletList } from '@/api/policy_list'
export default {
  components: { TemplatePage, Popu, RetailDetail, RetailForm, RetailExamine, RetailReturn, EditDateDialog },
  mixins: [import_mixin, add_callback_mixin],
  data() {
    return {
      visible: false,
      // 事件组合
      optionsEvensGroup: [
        [
          [
            {
              name: '新增',
              click: this.addOn(() => {
                this.toForm()
              }),
              isRole: this.$checkBtnRole('add', this.$route.meta.roles)
            }
          ]
        ]
      ],
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: true
      }, // 关闭新增弹窗

      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      recordSelected: [],
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数
      dataList: null, // 列表数据
      listLoading: false, // 列表加载loading
      screenForm: {
        // 筛选表单数据
        orderNum: '',
        goodsName: '',
        model: '',
        jxsName: '',
        date: [],
        isDirectTransfer: '',
        zbMan: '',
        shMan: '',
        salesMan: '',
        status: '',
        k3ServiceId: '',
        serviceId: '',
        saleTypeId: '',
        customerWalletId: ''
      },
      statusList: [
        { label: '已保存', value: 'SAVE' },
        { label: '待审核', value: 'WAIT' },
        { label: '审核通过', value: 'OK' }
        // { label: "已关闭", value: "CLOSE" },
      ],
      salesmanList: [],
      NoRebateWalletList: [],
      typeList: [],
      queryItem: {},
      isShowDetail: false,
      isShowForm: false,
      isShowExamine: false,
      isShowReturn: false,
      isCollapse: true,
      editId: null,
      isShowEditDateDialog: false,
      dateForm: {
        date: ''
      }
    }
  },
  methods: {
    // 列表请求函数
    getList(...p) {
      this.recordSelected = []
      return getRetaillListV2(...p)
    },
    // 列表导出函数
    exportList: exportRetaillListV2,
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      if (item.colName === 'the_time') {
        defaultData.render = (h, { row, index, column }) => {
          return (
            <div class="dateClass">
              <span>{row.theTime}</span>
              {this.$checkBtnRole('date', this.$route.meta.roles) ? (
                <el-button
                  type="text"
                  icon="el-icon-edit"
                  style="padding: 0; margin-left: 6px"
                  onClick={() => this.editDate(row)}
                />
              ) : (
                ''
              )}
            </div>
          )
        }
      }

      return defaultData
    },
    // 监听勾选变化
    selectionChange(data) {
      this.recordSelected = data
    },
    operation() {
      return (h, { row, index, column }) => {
        const statusData = row.selectMapData.examineStatus
        return (
          <div class="operation-btns">
            {this.$checkBtnRole('apply', this.$route.meta.roles) && row.examineStatus === statusData['SAVE'] ? (
              <el-popconfirm title="确定申请吗？" onOnConfirm={() => this.handleSubmit(row.id)}>
                <el-button slot="reference" type="text">
                  申请
                </el-button>
              </el-popconfirm>
            ) : null}

            {this.$checkBtnRole('apply', this.$route.meta.roles) && row.examineStatus === statusData['WAIT'] ? (
              <el-popconfirm title="确定撤回吗？" onOnConfirm={() => this.handleWithdraw(row.id)}>
                <el-button slot="reference" type="text">
                  撤回
                </el-button>
              </el-popconfirm>
            ) : null}
            {this.$checkBtnRole('examine', this.$route.meta.roles) && row.examineStatus === statusData['OK'] ? (
              <el-popconfirm title="确定弃审吗？" onOnConfirm={() => this.handleAbandon(row.id)}>
                <el-button slot="reference" type="text">
                  弃审
                </el-button>
              </el-popconfirm>
            ) : null}
            {this.$checkBtnRole('examine', this.$route.meta.roles) &&
            !row.closeTime &&
            (row.examineStatus === statusData['SAVE'] || row.examineStatus === statusData['WAIT']) ? (
              <el-popconfirm title="确定关闭吗？" onOnConfirm={() => this.handleClose(row.id)}>
                <el-button slot="reference" type="text">
                  关闭
                </el-button>
              </el-popconfirm>
            ) : null}
            {this.$checkBtnRole('del', this.$route.meta.roles) && row.examineStatus === statusData['SAVE'] ? (
              <el-popconfirm title="确定删除吗？" onOnConfirm={() => this.handleDelete(row.id)}>
                <el-button slot="reference" type="text" style="color: #f56c6c">
                  删除
                </el-button>
              </el-popconfirm>
            ) : null}
            {this.$checkBtnRole('examine', this.$route.meta.roles) && row.examineStatus === statusData['WAIT'] ? (
              <el-button type="text" onClick={() => this.toExamine(row)}>
                审批
              </el-button>
            ) : null}
            {this.$checkBtnRole('edit', this.$route.meta.roles) && row.examineStatus === statusData['SAVE'] ? (
              <el-button type="text" onClick={() => this.toForm(row)}>
                编辑
              </el-button>
            ) : null}
            {this.$checkBtnRole('examine', this.$route.meta.roles) && row.examineStatus === statusData['OK'] ? (
              <el-button type="text" onClick={() => this.toReturn(row)}>
                退订
              </el-button>
            ) : null}
            <el-button type="text" onClick={() => this.toDetail(row)}>
              {' '}
              详情{' '}
            </el-button>
          </div>
        )
      }
    },

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

    // 提交筛选表单
    submitScreenForm() {
      this.currentPage = 1
      this.$refs.pageRef.refreshList()
    },

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

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

    // 更改当前页
    handleCurrentChange(val) {
      this.currentPage = val
      this.$refs.pageRef.refreshList()
    },

    // 进入表单
    toForm(item) {
      this.queryItem = item
      this.isShowForm = true
    },

    // 进入详情
    toDetail(item) {
      this.queryItem = item
      this.isShowDetail = true
    },

    // 进入审批
    toExamine(item) {
      this.queryItem = item
      this.isShowExamine = true
    },

    // 进入退订
    toReturn(item) {
      if (item.refundableQty < 1) {
        return this.$errorMsg('可退数量为0')
      }
      this.queryItem = item
      this.isShowReturn = true
    },

    backList() {
      this.queryItem = {}
      this.addOff(() => {
        this.isShowDetail = false
        this.isShowForm = false
        this.isShowExamine = false
        this.isShowReturn = false
      })()
      this.$refs.pageRef.refreshList()
    },

    // 关闭
    handleClose(id) {
      closeData({ id }).then(res => {
        this.$successMsg()
        this.$refs.pageRef.refreshList()
      })
    },

    // 删除
    handleDelete(id) {
      deleteData({ id }).then(res => {
        this.$successMsg()
        this.$refs.pageRef.refreshList()
      })
    },

    // 弃审
    handleAbandon(id) {
      abandonData({ id }).then(res => {
        this.$successMsg()
        this.$refs.pageRef.refreshList()
      })
    },

    // 申请
    handleSubmit(id) {
      submitData({ id }).then(res => {
        this.$successMsg()
        this.$refs.pageRef.refreshList()
      })
    },

    // 撤回
    handleWithdraw(id) {
      withdrawData({ id }).then(res => {
        this.$successMsg()
        this.$refs.pageRef.refreshList()
      })
    },

    // 打开 修改订单日期
    editDate(item) {
      this.editId = item.id
      this.dateForm.date = item.theTime.slice(0, 10)
      this.isShowEditDateDialog = true
    },

    // 提交 修改订单日期
    submitDateForm() {
      editData({
        id: this.editId,
        theTime: this.dateForm.date + ' 00:00:00'
      }).then(res => {
        this.isShowEditDateDialog = false
        this.$refs.pageRef.refreshList()

        this.$successMsg('修改成功')
      })
    }
  }
}
</script>

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