yos_web/src/HDrpManagement/orderManage/index.vue

<template>
  <div>
    <basicLayout
      ref="basicLayout"
      tableName="orderTable"
      idName="sa_orderid"
      :apiId="{query:20230105143002,del:20221108152102}"
      :oldFormPath="{add:'HDrpManagement/orderManage/modules'}"
      :options="options"
      :isExport="false"
      :detailPath="{
        path:'/orderdetail'
      }"
      @listData="list">
      <template #titleRight>
        <div>
          <el-button v-if="tool.checkAuth($route.name,'refreshStock')" style="margin-left:0px" size="small" type="primary" @click="refreshStock">{{$t(`刷新库存`)}}</el-button>
        </div>
      </template>
      <template #custom>
        <div class="mt-10">
          <p class="search__label">{{$t(`状态`)}}:</p>
          <el-select v-model="where.status2" clearable style="margin-right:10px" size="small" :placeholder="$t(`请选择状态`)" @change="change" multiple>
            <el-option :label="$t(`新建`)" value="新建"></el-option>
            <el-option :label="$t(`提交`)" value="提交"></el-option>
            <el-option :label="$t(`交期待确认`)" value="交期待确认"></el-option>
            <el-option :label="$t(`交期确认`)" value="交期确认"></el-option>
            <el-option :label="$t(`审核`)" value="审核"></el-option>
            <el-option :label="$t(`关闭`)" value="关闭"></el-option>
          </el-select>
        </div>
        <div class="mt-10">
          <p class="search__label">{{$t(`订单类型`)}}:</p>
          <el-select v-model="where.type" clearable style="margin-right:10px" size="small" :placeholder="$t(`请选择订单类型`)" @change="change">
            <el-option :label="$t(`标准订单`)" value="标准订单"></el-option>
            <el-option :label="$t(`特殊订单`)" value="特殊订单"></el-option>
            <el-option :label="$t(`项目订单`)" value="项目订单"></el-option>
            <el-option :label="$t(`促销订单`)" value="促销订单"></el-option>
            <el-option :label="$t(`工具订单`)" value="工具订单"></el-option>
          </el-select>
        </div>
        <div class="mt-10">
          <p class="search__label">{{$t('领域')}}:</p>
          <el-select v-model="where.tradefield" clearable style="margin-right:10px" size="small" :placeholder="$t(`请选择状态`)" @change="change">
            <el-option
              v-for="(item,index) in tradefieldList"
              :key="index"
              :label="$t(item.value)"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="mt-10">
          <p class="search__label">{{$t(`核销状态`)}}:</p>
          <el-select v-model="where.writeoffstatus" clearable style="margin-right:10px" size="small" :placeholder="$t(`请选择核销状态`)" @change="change">
            <el-option :label="$t(`已核销`)" value="已核销"></el-option>
            <el-option :label="$t(`部分核销`)" value="部分核销"></el-option>
            <el-option :label="$t(`未核销`)" value="未核销"></el-option>
          </el-select>
        </div>
        <div class="mt-10">
          <p class="search__label">{{$t(`开票状态`)}}:</p>
          <el-select v-model="where.invoicestatus" clearable style="margin-right:10px" size="small" :placeholder="$t(`请选择状态`)" @change="change">
            <el-option :label="$t(`已开票`)" value="已开票"></el-option>
            <el-option :label="$t(`部分开票`)" value="部分开票"></el-option>
            <el-option :label="$t(`未开票`)" value="未开票"></el-option>
          </el-select>
        </div>
        <div class="mt-10">
          <p class="search__label">{{$t(`是否退货`)}}:</p>
          <el-select v-model="where.isreturn" clearable style="margin-right:10px" size="small" :placeholder="$t(`请选择退货状态`)" @change="change">
            <el-option :label="$t(`是`)" value="1"></el-option>
            <el-option :label="$t(`否`)" value="0"></el-option>
          </el-select>
        </div>
        <div class="mt-10">
          <p class="search__label">{{$t(`是否变更`)}}:</p>
          <el-select v-model="where.ischange" clearable style="margin-right:10px" size="small" :placeholder="$t(`请选择变更状态`)" @change="change">
            <el-option :label="$t(`未变更`)" value="0"></el-option>
            <el-option :label="$t(`已变更`)" value="1"></el-option>
          </el-select>
        </div>
        <div class="mt-10" v-if="siteid == 'TZ' || siteid == 'NB'">
          <p class="search__label">{{$t(`逾期情况`)}}:</p>
          <el-select v-model="where.isoverdue" clearable style="margin-right:10px" size="small" :placeholder="$t(`请选择逾期情况`)" @change="change">
            <el-option :label="$t(`逾期未通过`)" value="0"></el-option>
            <el-option :label="$t(`逾期已通过`)" value="1"></el-option>
          </el-select>
        </div>
        <div class="mt-10" v-if="siteid == 'HY'">
          <p class="search__label">{{$t(`备货状态`)}}:</p>
          <el-select v-model="where.goodsstatus" clearable style="margin-right:10px" size="small" :placeholder="$t(`请选择备货状态`)" @change="change">
            <el-option :label="$t(`已完成`)" value="已完成"></el-option>
            <el-option :label="$t(`部分完成`)" value="部分完成"></el-option>
            <el-option :label="$t(`未完成`)" value="未完成"></el-option>
          </el-select>
        </div>
        <div class="mt-10">
          <label class="search__label" >{{$t(`审核日期`)}}:</label>
          <el-date-picker
              style="margin-right: 24px !important;"
              size="small"
              @change="selectChange"
              value-format="yyyy-MM-dd"
              v-model="dateSelect"
              type="daterange"
              :range-separator="$t(`至`)"
              :start-placeholder="$t(`开始日期`)"
              :end-placeholder="$t(`结束日期`)"
              clearable>
          </el-date-picker>
        </div>
        <div class="mt-10">
          <p class="search__label">{{$t(`业务员`)}}:</p>
          <el-input  style="width:200px;" :placeholder="$t(`根据业务员搜索`)" :suffix-icon="where.saler_name?where.saler_name.length > 0?'':'':'el-icon-search'" v-model="where.saler_name" @keyup.native.enter="change" @clear="change" size="small" class="input-with-select inline-16 layout_search__panel" clearable>
          </el-input>
        </div>
      </template>
      <template v-slot:tbList="scope">
        <div v-if="scope.data.column.columnname == 'status'">
          <span :style="tool.getStatusColor(scope.data.column.data[[scope.data.column.columnname]])" >{{$t(scope.data.column.data[[scope.data.column.columnname]])}}</span>
        </div>
        <div v-else-if="scope.data.column.columnname == 'writeoffstatus'"  :style="tool.getStatusColor(scope.data.column.data[[scope.data.column.columnname]])">
          {{$t(scope.data.column.data[[scope.data.column.columnname]])}}
        </div>
        <div v-else-if="scope.data.column.columnname == 'invoicestatus'"  :style="tool.getStatusColor(scope.data.column.data[[scope.data.column.columnname]])">
          {{$t(scope.data.column.data[[scope.data.column.columnname]])}}
        </div>
        <div v-else-if="scope.data.column.columnname == 'ischange'" :style="{color:scope.data.column.data.ischange == 1?tool.getStatusColor('是',true):tool.getStatusColor('否',true)}">
          {{ scope.data.column.data.ischange == 1 ? $t('是') : $t('否') }}
        </div>
        <div v-else-if="scope.data.column.columnname == 'isreturn'" :style="{color:scope.data.column.data.isreturn == 1?tool.getStatusColor('是',true):tool.getStatusColor('否',true)}">
          {{ scope.data.column.data.isreturn == 1 ? $t('是') : $t('否') }}
        </div>
        <div v-else-if="scope.data.column.columnname == 'amount'">
          {{ tool.formatAmount(scope.data.column.data.amount,2) }}
        </div>
        <div v-else-if="scope.data.column.columnname == 'defaultamount'">
          {{ tool.formatAmount(scope.data.column.data.defaultamount,2) }}
        </div>
        <div v-else-if="scope.data.column.columnname == 'goodsstatus'" >
          <span v-if="scope.data.column.data[[scope.data.column.columnname]] == '已完成'" style="color: #67C23A">{{$t(scope.data.column.data[[scope.data.column.columnname]])}}</span>
          <span v-else-if="scope.data.column.data[[scope.data.column.columnname]] == '未完成'" style="color: #F56C6C">{{$t(scope.data.column.data[[scope.data.column.columnname]])}}</span>
          <span v-else-if="scope.data.column.data[[scope.data.column.columnname]] == '部分完成'"  style="color: #e6a23c">{{$t(scope.data.column.data[[scope.data.column.columnname]])}}</span>
          <span v-else  style="color: #606266">{{$t(scope.data.column.data[[scope.data.column.columnname]])}}</span>
        </div>
        <div v-else>
          {{scope.data.column.data[[scope.data.column.columnname]]?$t(scope.data.column.data[[scope.data.column.columnname]]):'--'}}
        </div>
      </template>
      <template v-slot:tbOpreation="scope">
      </template>
    </basicLayout>
  </div>
</template>

<script>
import { Loading } from 'element-ui';

export default {
  data () {
    return {
      options:[],
      tradefieldList:'',
      siteid:JSON.parse(sessionStorage.getItem('active_account')).siteid,
      where: {
        "condition":"",
        "status2" : '',
        "type" : '',
        "tradefield": '',
        "writeoffstatus":"",//未核销,已核销,部分核销"invoicestatus":"未开票"，//未开票,已开票,部分开票"isreturn":"，//是否退回:0,1"ischange":.".//是否变更:0,1
        "invoicestatus":'',
        "isreturn": '',
        "ischange": '',
        "saler_name":'',
        "isoverdue":'',
        "siteid":'',
        "goodsstatus":''
      },
      dateSelect:[]

    }
  },
  methods:{
    list (data) {
      console.log(data,'返回的数据data内容');
      if (!data) {
        this.$refs.basicLayout.listData()
      }
    },
    change () {
      this.$refs.basicLayout.param.content.pageNumber = 1
      this.$refs.basicLayout.param.content.where = this.where
      this.$refs.basicLayout.listData()
    },
    /* 领域 */
    async getTradefield () {
      const res = await this.$store.dispatch('optiontypeselect','tradefield')
      this.tradefieldList = res.data
      console.log(this.tradefieldList,'领域');
    },
    async refreshStock () {
      Loading.service({ fullscreen: true ,text:'刷新中...'});
      const res = await this.$api.requested({
        "id": "20230222203703",
        "version":1,
        "content": {
        }
      })
      Loading.service().close()
      this.$message({
        message:this.$t('刷新成功'),
        type:"success"
      })
    },
    selectChange(){
      if (this.dateSelect !== '' && this.dateSelect !== null){
        this.$refs.basicLayout.param.content.pageNumber = 1
        this.$refs.basicLayout.param.content.where.begindate = this.dateSelect[0]
        this.$refs.basicLayout.param.content.where.enddate = this.dateSelect[1]
      }else {
        this.$refs.basicLayout.param.content.where.begindate = ''
        this.$refs.basicLayout.param.content.where.enddate = ''
      }
      this.$refs.basicLayout.listData()
    }
  },
  created () {
    this.getTradefield()
  }
}

</script>
<style scoped>
.box > div {
  margin-bottom:10px;
  display: inline-block;
}
</style>