sen-yu-new-web/src/views/order/orderList.vue

c<template>
  <!-- 【单证】 订单数据 -->
  <a-spin :spinning="spinIsShow" >
  <div id="orderList">
    <a-card :bordered="false">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :md="6" :sm="8">
                <a-form-item label="账套">
                  <j-search-select-tag
                  placeholder="请选择账套"
                  v-model="queryParam.account"
                  dict="view_account,account,account">
                </j-search-select-tag>
                </a-form-item>
              </a-col>
            <a-col :md="6" :sm="8">
              <a-form-item label="订单号">
                <a-input placeholder="请输入订单号" v-model="queryParam.orderNumber"></a-input>
              </a-form-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-item label="订单日期">
                <a-range-picker
                  style="width: 100%"
                  :mode="dataRangeMode"
                  :placeholder="['开始日期', '结束日期']"
                  :value="dateRange"
                  format = "YYYY-MM-DD"
                  @change="dateRangeSelectChange"
                />
              </a-form-item>
            </a-col>

            
            <template v-if="toggleSearchStatus">
              <a-col :md="6" :sm="8">
                <a-form-item label="客户简称">
                  <j-search-select-tag
                    placeholder="请选择客户简称"
                    v-model="queryParam.customerAbbreviation"
                    dict="view_customer,customername,customername">
                  </j-search-select-tag>
                </a-form-item>
              </a-col>


              <a-col :md="6" :sm="8">
                <a-form-item label="发货状态">
                  <a-select placeholder="请选择发货状态" v-model="queryParam.dilivery">
                    <a-select-option value="">请选择</a-select-option>
                    <a-select-option value="0">未发货</a-select-option>
                    <a-select-option value="1">已发货</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="成品/面辅料">
                  <a-select placeholder="请选择" v-model="queryParam.isProduct">
                    <a-select-option value="">请选择</a-select-option>
                    <a-select-option value="0">成品</a-select-option>
                    <a-select-option value="1">面辅料</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="部门">
                   <a-input placeholder="请输入部门" v-model="queryParam.salesDepartment"></a-input>
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="业务员">
                   <a-input placeholder="请输入业务员" v-model="queryParam.salesman"></a-input>
                </a-form-item>
              </a-col>
            </template>

            <a-col :md="6" :sm="8">
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
                <a @click="handleToggleSearch" style="margin-left: 8px">
                  {{ toggleSearchStatus ? '收起' : '展开' }}
                  <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
                </a>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>

    <!-- 操作按钮区域 -->
    <a-card :bordered="false" style="marginTop:10px;">
      <div class="table-operator">
        <a-row :gutter="24">
          <a-col :md="6" :sm="8">
              <a-input placeholder="请输入" v-model="dingDan"></a-input>
          </a-col>
            <a-button type="primary" @click="synchronizationOne" icon="reload" style="margin-right:3%">单条同步</a-button>  
            <a-button type="primary" @click="synchronization" icon="reload">全量同步</a-button>
          
       </a-row>
        
        

      </div>

      <!-- 主表信息  rowKey="id"  :pagination="ipagination" -->
      <div>
        <a-table
          bordered
          :row-key="record => record.id"
          :columns="orderLIstColumns"
          :data-source="orderListData"
          :loading="loading"
          :pagination="pagination"
          :scroll="{ x: 1500 }"
          @change="handleTableChange"
        >
          <!-- 订单号 链接-->
          <span slot="orderNumber" slot-scope="text">
            <a>{{ text }}</a>
          </span>
        </a-table>
      </div>
    </a-card>

    <!-- 订单数据明细 抽屉 -->
    <orderDetail-drawer ref="orderDetailDrawer" :fatherList="getOrderList" @ok="modalFormOk"></orderDetail-drawer>
  </div>
  </a-spin>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JEllipsis from '@/components/jeecg/JEllipsis'
import moment from 'moment'
import OrderDetailDrawer from '@views/order/orderDetailDrawer.vue'
import { orderList, syncy,oneSyncy } from '@api/document/order'
export default {
  name: 'OrderList', // 【单证】 订单数据
  mixins: [JeecgListMixin],
  components: { JEllipsis, moment, OrderDetailDrawer },

  data() {
    // let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} />
    // sorter: true, table表头排序
    return {
      // 表头
      orderLIstColumns: [

        {
          title: '账套',
          width: 80,
          dataIndex: 'account',
          fixed: 'left',
          className: 'replacecolor',
          align: 'center',
          ellipsis: true
        },
        {
          title: '订单号',
          width: 260,
          dataIndex: 'orderNumber',
          fixed: 'left',
          className: 'replacecolor',
          align: 'left',
          customCell: this.showDrawer,
          scopedSlots: { customRender: 'orderNumber' },
          ellipsis: true
        },

        {
          title: '订单日期',
          width: 120,
          dataIndex: 'orderDate',
          fixed: 'left',
          customRender: text => {
            return moment(text).format('YYYY-MM-DD')
          },
          className: 'replacecolor',
        },
        { title: '业务类型', width: 100, dataIndex: 'businessTypeValue', className: 'replacecolor' ,ellipsis: true},
        { title: '客户订单号', width: 120, dataIndex: 'customerOrderNumber', className: 'replacecolor',ellipsis: true },
        {
          title: '销售类型',
          width: 100,
          dataIndex: 'salesTypeText',
          className: 'replacecolor'
        },
        { title: '客户简称', width: 220, dataIndex: 'customerAbbreviation', align: 'left', className: 'replacecolor',ellipsis: true },
        { title: '客户名称', width: 220, dataIndex: 'customerName', align: 'left', className: 'replacecolor', ellipsis: true, },
        { title: '供应商', width: 120, dataIndex: 'supplier', className: 'replacecolor' ,ellipsis: true},
        { title: '汇率', width: 90, dataIndex: 'exchangeRate', className: 'replacecolor' ,ellipsis: true},
        { title: '整单合计', width: 120, dataIndex: 'wholeOrderTotal', className: 'replacecolor' ,ellipsis: true},
        { title: '销售部门', width: 100, dataIndex: 'salesDepartment', className: 'replacecolor' ,ellipsis: true},
        { title: '业务员', width: 140, dataIndex: 'salesman', className: 'replacecolor' ,ellipsis: true},
        { title: '币种', width: 90, dataIndex: 'currencyText', className: 'replacecolor',ellipsis: true },
        { title: '品牌方', width: 220, dataIndex: 'brandSide', align: 'left', className: 'replacecolor',ellipsis: true },
        { title: '第三方', width: 220, dataIndex: 'thirdParty', align: 'left', className: 'replacecolor',ellipsis: true },
        { title: '定金比例(%)', width: 120, dataIndex: 'depositRatio', className: 'replacecolor',ellipsis: true },
        { title: '定金', width: 100, dataIndex: 'deposit', className: 'replacecolor',ellipsis: true },
        { title: '协同路线', width: 160, dataIndex: 'collaborativeRoute', className: 'replacecolor',ellipsis: true },
        { title: '付款条件', width: 180, dataIndex: 'termOfPayment', className: 'replacecolor' ,ellipsis: true},
        { title: '最终客户', width: 120, dataIndex: 'endCustomer', className: 'replacecolor', ellipsis: true, },
        {
          title: '订单备注',
          width: 220,
          dataIndex: 'orderRemarks',
          // customRender: t => ellipsis(t),
          className: 'replacecolor',
          scopedSlots: { customRender: 'orderRemarks' },
          ellipsis: true
        },
        {
          title: '价格备注',
          width: 120,
          dataIndex: 'priceRemarks',
          // customRender: t => ellipsis(t),
          className: 'replacecolor',
          scopedSlots: { customRender: 'priceRemarks' },
          ellipsis: true
        },

        {
          title: '订单变更说明',
          width: 220,
          dataIndex: 'orderChangeDescription',
          fixed: 'right',
          // customRender: t => ellipsis(t),
          className: 'replacecolor',
          scopedSlots: { customRender: 'orderChangeDescription' },
          ellipsis: true
        }
      ],
      orderListData: [], // 主表信息
      loading: false, // 表格加载

      queryParam: {
        orderNumber: '',
        orderDate: '',
        customerAbbreviation: '',
        account: '',
        dilivery: '',
        isProduct: '', // 客户需求新增
        salesDepartment: '',//部门
        salesman:'',//业务员
        pageNo: '' // 初始页
      },
      dingDan:'',//单条同步订单号

      pagination: {
        // total: '',
        // current: 0,
        // pageSize: 0
      },
      dateRange:[],
      dataRangeMode:['date','date'],
      spinDelayMS:500, // 加载框延迟时间
      spinIsShow:false,  // 加载框是否显示
    }
  },

  created() {
    this.getOrderList()
  },
  methods: {
    // 分页查询
    getOrderList() {
      var that = this;
      // that.spinIsShow = true;
      this.loading = true
      this.$nextTick(() => {
        orderList(this.queryParam).then(res => {
          // that.spinIsShow = false;
          this.loading = false
          if (res.success) {
            that.orderListData = res.result.records;
            that.pagination = {
              total: res.result.total,
              current: res.result.current,
              pageSize: res.result.size
            }
          }else{
              that.$message.error(res.message);
          }
          
        })
      })
    },
    // 同步
    synchronization() {
      this.$nextTick(() => {
        var id = "1570672855704420354"
        this.loading = true
        syncy({id}).then(res => {
          if (res.success) {
            this.getOrderList();
            this.$message.success('同步成功')
          }else{
            this.$message.error(res.message)
          }
        })
      })
    },
    //单条同步
    synchronizationOne(){
      this.$nextTick(() => {
        var parameter = this.dingDan
        this.loading = true
        oneSyncy({parameter}).then(res => {
          if (res.success) {
            this.loading =false
            this.queryParam.orderNumber = this.dingDan
            this.getOrderList();
            this.$message.success(res.message)
          }else{
            this.$message.error(res.message)
          }
        })
      })
    },

    // 【订单号】 抽屉
    showDrawer(record) {
      return {
        on: {
          click: event => {
            this.$refs.orderDetailDrawer.visible = true
            this.$refs.orderDetailDrawer.record = record // 接口参数
            this.$refs.orderDetailDrawer.getOrderChild()
            this.$refs.orderDetailDrawer.orderDetail = record // 详情页主表赋值
          }
        }
      }
    },
    // 查询按钮
    searchQuery() {
      this.queryParam.pageNo = ''
      this.toggleSearchStatus = false
      this.getOrderList()
      // console.log('发货状态', this.queryParam.dilivery)
    },

    searchReset() {
      this.queryParam = {}
      this.getOrderList()
    },

    // 查询条件 订单日期转换成字符串并赋值
    onDateChange(value, dateString) {
      this.queryParam.orderDate = dateString
    },

    handleTableChange(pagination, filters, sorter) {
      this.queryParam.pageNo = pagination.current
      this.getOrderList()
    },

    // 时间发生变化的回调，发生在用户选择时间时
    dateRangeSelectChange(value) {
      this.dateRange = value;
      if (value.length == 0){
        this.queryParam.dateStar = "";
        this.queryParam.dateEnd = "";
      }else{
        this.queryParam.dateStar = value[0].format('YYYY-MM-DD');
        this.queryParam.dateEnd  = value[1].format('YYYY-MM-DD');
      }
    },
  },
  computed: {},
  mounted() {}
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';
@import '~@assets/less/overwriter.less';
/deep/ .ant-table-thead > tr > th {
  text-align: center;
  // font-weight: 700;
}

/deep/ .ant-table-tbody {
  text-align: center;
}

// /deep/ th.replacecolor {
//   background-color: #ccc;
// }
</style>