yos_web/src/SDrpManagement/salerOrder/index.vue

<template>
  <div>
    <basicLayout
      ref="basicLayout"
      tableName="orderTable"
      idName="sa_orderid"
      :apiId="{ query: 20221111145202, del: 20221108152102 }"
      :options="options"
      :isExport="false"
      :oldFormPath="{ add: 'SDrpManagement/salerOrder/modules' }"
      :detailPath="{
        path: '/saler_orderDetails',
      }"
      @listCreate="list"
    >
      <template #custom>
        <div class="mt-10">
          <p class="search__label">{{ $t("订单状态") }}:</p>
          <el-select
            v-model="status"
            multiple
            clearable
            style="margin-right: 10px"
            size="small"
            :placeholder="$t(`请选择订单状态`)"
            @change="
              $refs.basicLayout.param.content.pageNumber = 1;
              $refs.basicLayout.param.content.where.status2 = status;
              $refs.basicLayout.listData();
            "
          >
            <el-option :value="$t(`新建`)" :label="$t(`新建`)"></el-option>
            <el-option :value="$t(`预提交`)" :label="$t(`预提交`)"></el-option>
            <el-option :value="$t(`提交`)" :label="$t(`提交`)"></el-option>
            <el-option :value="$t(`审核`)" :label="$t(`审核`)"></el-option>
            <el-option
              :value="$t(`交期待确认`)"
              :label="$t(`交期待确认`)"
            ></el-option>
            <el-option
              :value="$t(`交期确认`)"
              :label="$t(`交期确认`)"
            ></el-option>
            <el-option :value="$t(`关闭`)" :label="$t(`关闭`)"></el-option>
          </el-select>
        </div>
        <div class="mt-10">
          <p class="search__label">{{ $t("订单类型") }}:</p>
          <el-select
            v-model="type"
            clearable
            style="margin-right: 10px"
            size="small"
            :placeholder="$t(`请选择订单类型`)"
            @change="
              $refs.basicLayout.param.content.pageNumber = 1;
              $refs.basicLayout.param.content.where.type = type;
              $refs.basicLayout.listData();
            "
          >
            <el-option
              :value="$t(`标准订单`)"
              :label="$t(`标准订单`)"
            ></el-option>
            <el-option
              :value="$t(`项目订单`)"
              :label="$t(`项目订单`)"
            ></el-option>
            <!--            <el-option :value="$t(`促销订单`)" :label="$t(`促销订单`)"></el-option>-->
            <el-option
              :value="$t(`工具订单`)"
              :label="$t(`工具订单`)"
            ></el-option>
          </el-select>
        </div>
        <div class="mt-10">
          <p class="search__label">{{ $t("核销状态") }}:</p>
          <el-select
            v-model="writeoffstatus"
            clearable
            style="margin-right: 10px"
            size="small"
            :placeholder="$t(`请选择核销状态`)"
            @change="
              $refs.basicLayout.param.content.pageNumber = 1;
              $refs.basicLayout.param.content.where.writeoffstatus =
                writeoffstatus;
              $refs.basicLayout.listData();
            "
          >
            <el-option :label="$t(`已核销`)" value="已核销"></el-option>
            <el-option
              :label="$t(`部分核销`)"
              :value="$t(`部分核销`)"
            ></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="invoicestatus"
            clearable
            style="margin-right: 10px"
            size="small"
            :placeholder="$t(`请选择状态`)"
            @change="
              $refs.basicLayout.param.content.pageNumber = 1;
              $refs.basicLayout.param.content.where.invoicestatus =
                invoicestatus;
              $refs.basicLayout.listData();
            "
          >
            <el-option :label="$t(`已开票`)" value="已开票"></el-option>
            <el-option
              :label="$t(`部分开票`)"
              :value="$t(`部分开票`)"
            ></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>
      </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 == 'amount'">
          {{ tool.formatAmount(scope.data.column.data.amount, 2) }}
        </div>
        <!-- <div v-else-if="scope.data.column.columnname == 'tradefield'">
          {{ scope.data.column.data.tradefield }}
        </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 == 'address'">
          {{
            `${scope.data.column.data.province}-${scope.data.column.data.city}-${scope.data.column.data.county}-${scope.data.column.data.address}`
          }}
        </div>
        <div v-else>
          {{ $t(scope.data.column.data[[scope.data.column.columnname]]) }}
        </div>
      </template>
      <template v-slot:tbOpreation="scope"> </template>
    </basicLayout>
  </div>
</template>

<script>
/**
 * @basicLayout 提供this.$ref['basicLayout'].listData()方法查询列表信息
 * @param {string} formPath 新建,编辑组件所在文件夹名称,以后所有列表新增修改文件统一放入Form文件夹下面,并创建与开发应用相同的名称的子文件夹
 * @param {string} tableName 开发端配置的表格名称
 * @param {String} idName 数据主id名称
 * @param {object} apiId:{query:查询的接口id,del:删除的接口id}
 * @param {Array} options:{label:描述,value:值}
 */
export default {
  data() {
    return {
      options: [],
      status: "",
      type: "",
      writeoffstatus: "",
      invoicestatus: "",
      dateSelect: [],
    };
  },
  methods: {
    list (param) {
      if (!param){
        this.$refs.basicLayout.listData()
      }
    },
    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();
    },
  },
};
</script>
<style>
</style>