X-web/src/views/modules/order/order.vue

<!-- 订单 -->
<template>
  <div class="order">
    <template v-if="!addOrUpdateVisible && !detailVisible && !arrivedVisible && !confirmVisible && !noticeChangeAttachVisible">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="queryData()">
        <el-form-item label="客户名称">
          <cus-component v-model="dataForm.customerId" :cus-id="dataForm.customerId"></cus-component>
        </el-form-item>
        <el-form-item label="合同号">
          <el-input v-model="dataForm.contractNumber" placeholder="合同号" clearable></el-input>
        </el-form-item>
        <el-form-item label="订单状态" prop="orderState">
          <el-select
            v-model="dataForm.orderState"
            remote
            placeholder="请选择">
            <el-option
              v-for="item in optionsOrderState"
              :key="item.code"
              :label="item.value"
              :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建日期">
          <el-date-picker
            v-model="dataForm.createTime"
            value-format="yyyy-MM-dd"
            type="date">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="queryData()">查询</el-button>
          <el-button v-if="isAuth('order:ctl:save')" @click="addOrUpdateHandle(0, false)" type="primary">创建订单</el-button>
          <el-button v-if="isAuth('order:ctl:noteChangeConfig')" type="primary" @click="setNoticeChangeHandel()">订单业务变更通知设置</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="dataList"
        border
        v-loading="dataListLoading"
        @selection-change="selectionChangeHandle"
        style="width: 100%;">
        <el-table-column
          label="序号"
          type="index"
          width="50"
          align="center">
        </el-table-column>
        <el-table-column
          prop="orderCode"
          header-align="center"
          align="center"
          min-width="180"
          :show-tooltip-when-overflow="true"
          label="订单编码">
        </el-table-column>
        <el-table-column
          prop="customerName"
          header-align="center"
          align="center"
          min-width="180"
          :show-overflow-tooltip="true"
          label="客户名称">
        </el-table-column>
        <el-table-column
          prop="contractNumber"
          header-align="center"
          align="center"
          min-width="120"
          :show-tooltip-when-overflow="true"
          label="合同号">
        </el-table-column>
        <el-table-column
          prop="createTime"
          header-align="center"
          align="center"
          min-width="160"
          label="下单时间">
        </el-table-column>
        <el-table-column
          prop="deliveryDate"
          header-align="center"
          align="center"
          min-width="160"
          label="合同交期">
        </el-table-column>
        <el-table-column
          prop="batchNumber"
          header-align="center"
          align="center"
          width="140"
          :show-tooltip-when-overflow="true"
          label="批次号">
        </el-table-column>
        <el-table-column
          prop="-"
          header-align="center"
          align="center"
          min-width="120"
          :formatter="formatState"
          label="审批状态">
        </el-table-column>
        <el-table-column
          prop="-"
          header-align="center"
          align="center"
          min-width="120"
          :formatter="formatOrderState"
          label="订单状态">
        </el-table-column>
        <el-table-column
          prop="approver"
          header-align="center"
          align="center"
          :min-width="140"
          :show-overflow-tooltip="true"
          label="当前审批人">
        </el-table-column>
        <el-table-column
          prop="completeDate"
          header-align="center"
          align="center"
          min-width="160"
          label="订单完成时间">
        </el-table-column>
        <el-table-column
          prop="notes"
          header-align="center"
          align="center"
          min-width="180"
          :show-overflow-tooltip="true"
          label="备注">
        </el-table-column>
        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          width="120"
          label="操作">
          <template slot-scope="scope">
            <el-button v-if="isAuth('order:ctl:info')" type="text" size="small" @click="detailHandle(scope.row.orderId)">查看</el-button>
            <el-button v-if="isAuth('order:ctl:editor') && Number(scope.row.state) === 1" type="text" size="small" @click="addOrUpdateHandle(scope.row.orderId,false)">编辑</el-button>
            <el-button v-if="isAuth('order:ctl:determine') && Number(scope.row.state) === 3 && Number(scope.row.orderState) === 6" type="text" size="small" @click="techConfirm(scope.row)">技术确定</el-button>
<!--            <el-button v-if="isAuth('order:ctl:deliver') && Number(scope.row.orderState) === 3" type="text" size="small" @click="deliverHandle(scope.row.orderId)">发货</el-button>-->
<!--            <el-button v-if="isAuth('order:ctl:arrived') && Number(scope.row.orderState) === 4 " type="text" size="small" @click="arrivedHandle(scope.row)">送达</el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </template>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" @onChose="onChose"></add-or-update>
    <detail v-if="detailVisible" ref="detail" @onChose="onChose"/>
    <dispatch-arrived v-if="arrivedVisible" ref="arrived" @refreshDataList="getDataList" @onChose="onChose"></dispatch-arrived>
    <notice-change-setting v-if="noticeChangeAttachVisible" ref="noticeChangeSetting" @onChose="onChose"/>
  </div>
</template>

<script>
  import AddOrUpdate from './order-add-or-update'
  import Detail from './order-detail'
  import { getOrderList, deliverOrder } from '@/api/sale'
  import CusComponent from '../common/cus-component'
  import DispatchArrived from './dispatch-arrived'
  import NoticeChangeSetting from './order-notice-change-setting'
  export default {
    name: 'order',
    components: {
      DispatchArrived,
      CusComponent,
      AddOrUpdate,
      Detail,
      NoticeChangeSetting
    },
    created () {
      this.optionsState = this.$store.state.common.approveStates
      this.queryData()
    },
    data () {
      return {
        addOrUpdateVisible: false,
        detailVisible: false,
        arrivedVisible: false,
        confirmVisible: false,
        noticeChangeAttachVisible: false,
        dataForm: {},
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        optionsState: [ ],
        optionsOrderState: [
          {
            code: '1', value: '未开始'
          },
          {
            code: '2', value: '进行中'
          },
          {
            code: '3', value: '已完成'
          },
          {
            code: '4', value: '已发货'
          },
          {
            code: '5', value: '已送达'
          },
          {
            code: '6', value: '技术待确定'
          }
        ],
        optionsCustomer: []
      }
    },
    methods: {
      onChose () {
        this.addOrUpdateVisible = false
        this.detailVisible = false
        this.arrivedVisible = false
        this.confirmVisible = false
        this.noticeChangeAttachVisible = false
      },
      // 查询
      queryData () {
        this.pageIndex = 1
        this.getDataList()
      },
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        let params = {
          'current': this.pageIndex,
          'size': this.pageSize,
          'createTime': this.dataForm.createTime ? this.dataForm.createTime : null,
          'contractNumber': this.dataForm.contractNumber ? this.dataForm.contractNumber : null,
          'customerId': this.dataForm.customerId ? this.dataForm.customerId : null,
          'orderState': this.dataForm.orderState ? this.dataForm.orderState : null
        }
        getOrderList(params).then(({data}) => {
          if (data && data.code === '200') {
            this.dataList = data.data.records
            this.totalPage = Number(data.data.total)
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      // 新增 / 修改
      addOrUpdateHandle (id, disable) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id, disable)
        })
      },
      // 转换属性“审批状态”
      formatState (row) {
        if (!row.state) return ''
        const item1 = this.optionsState.find((item) => item.code === row.state.toString())
        return item1 ? item1.value : ''
      },
      // 转换属性“订单状态”
      formatOrderState (row) {
        if (!row.orderState) return ''
        const item1 = this.optionsOrderState.find((item) => item.code === row.orderState.toString())
        return item1 ? item1.value : ''
      },
      // 详情
      detailHandle (id) {
        this.detailVisible = true
        this.$nextTick(() => {
          this.$refs.detail.init(id)
        })
      },
      // 发货
      deliverHandle (orderId) {
        if (!orderId) return
        this.$confirm(`确定发货?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deliverOrder({orderId: orderId}).then(({data}) => {
            if (data && data.code === '200') {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }).catch(() => {})
      },
      // 送达
      arrivedHandle (row) {
        this.arrivedVisible = true
        this.$nextTick(() => {
          this.$refs.arrived.init(row.orderId, row.orderCode)
        })
      },
      // 技术确定
      techConfirm (row) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(row.orderId, false, 2)
        })
      },
      // 变更通知人设置
      setNoticeChangeHandel () {
        this.noticeChangeAttachVisible = true
        this.$nextTick(() => {
          this.$refs.noticeChangeSetting.init()
        })
      }
    }
  }
</script>

<style scoped>

</style>