yos_web/src/SDrpManagement/agentOrder/modules/productlist.vue

<template>
  <el-row :gutter="10">
    <el-col :span="setcol">
      <div class="flex-align-center normal-margin">
        <slot name="operation"></slot>
        <!--      <el-button v-if="data.status === '新建'" class="inline-16" :disabled="data.type === '特殊订单'" size="small" type="primary"  @click="drawer = true">{{setcol === 24?'添 加':'取 消'}}</el-button>-->
        <addProduct
          class="inline-16"
          v-if="
            type !== 'confirmdate' &&
            data.status === '新建' &&
            data.type !== '特殊订单'
          "
          :drawer="drawer"
          :data="data"
          ref="addProduct"
          :params="paramsAdd"
          :tablecolsAdd="tablecolsAdd"
          :title="$t(`添 加`)"
          :tradefield="data.tradefield"
          :querySa_brandid="data.sa_brandid"
          @addSuccess="addProducts"
          @addProduct="addProduct"
          @uploadData="uploadData"
          @closeDrawer="
            listData();
            $emit('onSuccess');
          "
        ></addProduct>
        <!--      <excel class="inline-16" :tablecols="columnTitle" :param="param" :total="total" :excelTitle="excelTitle"></excel>-->
        <uploadAllData
          v-if="
            type !== 'confirmdate' &&
            data.status === '新建' &&
            data.type !== '特殊订单'
          "
          :total="total"
          @onSuccess="
            listData();
            $emit('onSuccess');
          "
          @handlePullApi="handlePullApi"
          @handleDelApi="handleDelApi"
          idName="sa_orderitemsid"
          type="del"
        ></uploadAllData>
      </div>
      <p
        v-if="data.status === '新建'"
        class="normal-margin"
        style="font-size: 13px !important; color: red; font-weight: normal"
      >
        {{ $t(checkFreefreightamount) }}
      </p>
      <Table
        height="calc(100vh - 500px)"
        ref="multipleTable"
        :layout="tablecols"
        :data="tableData"
        :custom="true"
        :checkbox="true"
        fixedName="rowno itemname itemno erpitemno model"
        redirect="left"
        :headerOptions="['needdate']"
        @selectionChange="selectionChange"
      >
        <template v-slot:header="scope">
          <div v-if="scope.column.columnname == 'needdate'">
            <el-date-picker
              style="width: 180px"
              v-if="data.status === '新建'"
              v-model="value2"
              value-format="yyyy-MM-dd"
              slot="reference"
              align="right"
              type="date"
              size="mini"
              :placeholder="$t(`一键交期`)"
              :picker-options="pickerOptions"
              @change="dateChange(scope.column.data)"
            >
            </el-date-picker>
            <span v-else>{{$t('需求日期')}}</span>
          </div>
        </template>
        <template v-slot:customcol="scope">
          <div v-if="scope.column.columnname === 'qty'">
            <el-input-number
              :controls="true"
              controls-position="right"
              :step-strictly="true"
              v-if="data.status === '新建' && data.type != '特殊订单'"
              size="mini"
              v-model="scope.column.data.qty"
              :min="scope.column.data.orderminqty"
              :step="scope.column.data.orderaddqty"
              :label="$t(`输入数量`)"
              @change="qtyChange(scope.column.data, scope.$index)"
            ></el-input-number>
            <span v-else>{{ scope.column.data.qty }}</span>
          </div>
          <div v-else-if="scope.column.columnname === 'needdate'">
            <el-date-picker
              v-if="scope.column.data.delivery > 0 && data.status === '新建'"
              v-model="scope.column.data.needdate"
              type="date"
              :placeholder="$t('选择日期')"
              value-format="yyyy-MM-dd"
              size="mini"
              style="width: 150px"
              :picker-options="pickerOptions"
              @change="onDateChange(scope.column.data)"
              @focus="setPickerOptions(scope.column.data)"
            >
            </el-date-picker>
            <div v-else>
              <p v-if="scope.column.data.delivery === 0">{{$t('不管控交期')}}</p>
              <p v-else>{{ scope.column.data.needdate }}</p>
            </div>
          </div>
          <div v-else-if="scope.column.columnname === 'unit'">
            <el-tag size="mini" type="info" effect="plain">{{
              scope.column.data.unit
            }}</el-tag>
          </div>
          <div v-else-if="scope.column.columnname === 'marketprice'">
            <p>
              ¥&nbsp;{{ tool.formatAmount(scope.column.data.marketprice, 2) }}
            </p>
          </div>
          <div v-else-if="scope.column.columnname === 'defaultprice'">
            <p>
              ¥&nbsp;{{ tool.formatAmount(scope.column.data.defaultprice, 2) }}
            </p>
          </div>
          <div v-else-if="scope.column.columnname === 'defaultamount'">
            <p style="color: red; font-weight: 500">
              ¥&nbsp;{{
                tool.formatAmount(
                  scope.column.data.defaultprice * scope.column.data.qty,
                  2
                )
              }}
            </p>
          </div>
          <div v-else-if="scope.column.columnname === 'price'">
            <p>¥&nbsp;{{ tool.formatAmount(scope.column.data.price, 2) }}</p>
          </div>
          <div v-else-if="scope.column.columnname === 'amount'">
            <p style="color: red; font-weight: 500">
              ¥&nbsp;{{ tool.formatAmount(scope.column.data.amount, 2) }}
            </p>
          </div>
          <div v-else-if="scope.column.columnname === 'aftersalesmagamount'">
            <p style="color: red; font-weight: 500">
              ¥&nbsp;{{ tool.formatAmount(scope.column.data.aftersalesmagamount, 2) }}
            </p>
          </div>
          <div v-else-if="scope.column.columnname === 'remarks'">
            <el-input
              v-model="scope.column.data.remarks"
              :placeholder="$t(`输入订单备注`)"
              size="mini"
              @blur="onConfirm([scope.column.data], true, true)"
            ></el-input>
          </div>
          <div v-else-if="scope.column.columnname == 'cansaleqty' || scope.column.columnname == 'undeliqty' || scope.column.columnname == 'aftersalesmagqty'">
            {{scope.column.data[scope.column.columnname]?scope.column.data[scope.column.columnname]:'0'}}
          </div>
          <div v-else-if="scope.column.columnname == 'invoiceamount' || scope.column.columnname == 'writeoffamount' || scope.column.columnname == 'aftersalesmagamount'">
            {{scope.column.data[scope.column.columnname]?tool.formatAmount(scope.column.data[scope.column.columnname],2,'¥'):'¥0.00'}}
          </div>
          <div v-else-if="scope.column.columnname == 'operation'"></div>
          <p v-else>{{ $t(scope.column.data[scope.column.columnname]) || '--'}}</p>
        </template>
        <template v-slot:opreation="scope">
          <!-- <el-button v-if="data.status == '新建' && data.type != '特殊订单'" type="text" size="mini" @click="deleteOrderProduct(scope.data)">{{$t('删 除')}}</el-button> -->
          <el-button
            v-if="data.status == '新建'"
            type="text"
            size="mini"
            @click="deleteOrderProduct(scope.data)"
            >{{ $t("删 除") }}</el-button
          >
        </template>
      </Table>
      <div style="margin-top: 16px; text-align: right">
        <el-pagination
          background
          small
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="param.content.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-col>
    <el-col :span="24 - setcol">
      <el-drawer
        :title="$t(`添加商品`)"
        :visible.sync="drawer"
        append-to-body
        direction="rtl"
        size="80%"
      >
        <div class="drawer__panel">
          <addProduct
            :drawer="drawer"
            :data="data"
            @onConfirm="onConfirm"
          ></addProduct>
        </div>
      </el-drawer>
    </el-col>
  </el-row>
</template>

<script>
// import addProduct from '@/template/orderCanUseProduct/index.vue'
import addProduct from "@/template/addProduct/index1";
import uploadAllData from "@/components/uploadAllData/index";
import Table from "@/HDrpManagement/orderManage/details/tabs/table";
export default {
  props: ["data", "type"],
  data() {
    return {
      flag: 0,
      freefreightamount: null,
      drawer: false,
      setcol: 24,
      dataRefresh: true,
      tableData: [],
      tablecols: [],
      columnTitle: [],
      excelTitle: "订单明细",
      param: {
        id: 20221109093902,
        content: {
          sa_orderid: this.$route.query.id, //订单ID
          pageNumber: 1,
          pageSize: 10000,
          where: {
            condition: "",
          },
        },
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 24 * 3600 * 1000;
        },
      },
      total: 0,
      currentPage: 0,
      time: null,
      value2: "",
      paramsAdd: {
        id: null,
        content: {
          sa_orderid: this.$route.query.id, //订单ID
          pageNumber: 1,
          pageSize: 100,
          where: {
            condition: "",
          },
        },
      },
      tablecolsAdd: [],
    };
  },
  computed: {
    checkFreefreightamount() {
      let result = "";
      switch (this.freefreightamount) {
        case -1:
          result = this.$t("不免运费");
          break;
        case 0:
          result = this.$t("免运费");
          break;
        default:
          result =
            this.data.amount >= this.freefreightamount
              ? this.$t("当前订单免运费")
              : this.$t("订单满")+`‘${this.tool.formatAmount(
                  this.freefreightamount,
                  2
                )}’${this.$t('元免运费,当前还差')}‘${this.tool.formatAmount(
                  this.freefreightamount - this.data.amount,
                  2
                )}’${this.$t('元')}`;
          break;
      }
      return result;
    },
  },
  components: {
    /*excel:() =>  import('../export_excel'),*/
    excel: () => import("../details/export_excel"),
    addProduct,
    uploadAllData,
    Table,
  },
  methods: {
    async listData() {
      this.param.content.sa_orderid = this.$route.query.id;
      const res = await this.$api.requested(this.param);
      this.tableData = res.data;
      this.total = res.total;
      this.currentPage = res.pageNumber;
      setTimeout(() => {
        this.queryBasicInfo();
      }, 500);
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.params.content.pageSize = val;
      this.listData();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.params.content.pageNumber = val;
      this.listData();
    },
    async deleteOrderProduct(row) {
      const res = await this.$api.requested({
        id: 20221109093702,
        content: {
          sa_orderid: this.$route.query.id,
          sa_orderitemsids: [row.sa_orderitemsid],
        },
      });
      this.tool.showMessage(res, () => {
        this.listData();
        this.$emit("onSuccess");
      });
    },
    // async updateOrderProduct (val) {
    //   const res  = await this.$api.requested({
    //     "id": 20221110145302,
    //     "content": val
    //   })
    //   this.$emit('onSuccess')
    // },
    qtyChange(val, index) {
      if (val.qty > val.orderminqty) {
        if ((val.qty - val.orderminqty) / val.orderaddqty > 0) {
          let k = ((val.qty - val.orderminqty) / val.orderaddqty).toFixed(0);
          val.qty = k * val.orderaddqty + val.orderminqty;
        }
      }
      let that = this;
      val.amount = val.qty * val.price;
      this.$set(this.tableData, index, val);
      // // 防抖
      if (this.time !== null) {
        clearTimeout(this.time);
      }
      this.time = setTimeout(() => {
        that.updateOrder({
          sa_orderid: this.data.sa_orderid, //订单ID
          sys_enterpriseid: this.data.sys_enterpriseid, //企业ID
          sa_contractid: this.data.contacts.contactsid, //合同ID
          type: this.data.type, //订单类型
          items: this.tableData,
        });
        this.$emit("qtyChange");
      }, 500);
    },
    onDateChange(val) {
      let that = this;
      that.value2 = "";
      that.updateOrder({
        sa_orderid: this.data.sa_orderid, //订单ID
        sys_enterpriseid: this.data.sys_enterpriseid, //企业ID
        sa_contractid: this.data.contacts.contactsid, //合同ID
        type: this.data.type, //订单类型
        items: this.tableData,
      });
    },
    async dateChange(row) {
      this.tableData = this.tableData.filter((e) => {
        if (e.delivery > 0) {
          e.needdate = this.value2;
        }
        return e;
      });
      const res = await this.$api.requested({
        id: 20230104143802,
        content: {
          sa_orderid: this.$route.query.id,
          needdate: this.value2,
        },
      });
    },
    async updateOrder(val) {
      const res = await this.$api.requested({
        id: 20221109093602,
        content: val,
      });
      this.time = null
      if (res.code == 1) {
        this.$emit("onSuccess");
      } else {
        this.$message({
          message: res.data + ":" + res.msg,
          type: "error",
        });
        this.listData();
      }
    },
    async setPickerOptions(val) {
      /*var startDate = val.deliverydate
      startDate = startDate.replace(new RegExp("-","gm"),"/")
      var startDateM = (new Date(startDate)).getTime()
      this.pickerOptions = {
        disabledDate(time) {
          return time.getTime() < startDateM;
        },
      }*/
      let newData = new Date();
      newData = newData.setDate(newData.getDate() + val.delivery + this.flag);
      let year = new Date(newData).getFullYear();
      let month = new Date(newData).getMonth() + 1;
      let day = new Date(newData).getDate();
      let param = {
        id: 20231008134404,
        content: {
          isExport: 0,
          isnext: "0",
          pageNumber: 1,
          pageSize: 100,
          where: {
            begindate: year + "-" + month + "-" + day,
            enddate: year + "-" + month + "-" + day,
          },
        },
      };
      const res = await this.$api.requested(param);
      if (res.data.length === 0) {
        this.flag = 0;
        newData = new Date(newData);
        newData = newData.setDate(newData.getDate() - 1);
        this.pickerOptions = {
          disabledDate(time) {
            return time.getTime() < newData;
          },
        };
      } else {
        this.flag = this.flag + 1;
        this.setPickerOptions(val);
      }
    },
    // 订单添加商品
    async onConfirm(data, edit, isupload) {
      if (isupload) {
        const res = await this.$api.requested({
          id: 20221109093602,
          content: {
            sa_orderid: this.$route.query.id, //订单ID
            sys_enterpriseid: this.data.sys_enterpriseid, //企业ID
            type: this.data.type, //订单类型
            items: data.map((e) => {
              return {
                sa_orderitemsid: edit ? e.sa_orderitemsid : 0,
                itemid: e.itemid,
                qty: e.qty,
                needdate: e.deliverydate,
                remarks: e.remarks,
              };
            }),
          },
        });
      }
      this.listData();
      this.$emit("onSuccess");
    },
    async queryBasicInfo() {
      const res = await this.$api.requested({
        id: 20220920084001,
        content: {
          sys_enterpriseid: this.data.sys_enterpriseid,
        },
      });
      this.freefreightamount = res.data.freefreightamount
        ? res.data.freefreightamount
        : 0;
    },
    /*批量添加商品*/
    async addProducts(data) {
      let items = data.map((item) => {
        return {
          sa_orderitemsid: 0,
          itemid: item.itemid,
          qty: item.orderminqty,
          needdate: item.deliverydate,
        };
      });
      const res = await this.$api.requested({
        id: 20221109093602,
        content: {
          sa_orderid: this.$route.query.id, //订单ID
          sys_enterpriseid: this.data.sys_enterpriseid, //企业ID
          type: this.data.type, //订单类型
          items: items,
        },
      });
      this.tool.showMessage(res, () => {
        this.listData();
        this.$refs.addProduct.listData();
        this.$emit("onSuccess");
      });
    },
    /*单个添加商品*/
    async addProduct(data) {
      let res = await this.$api.requested({
        id: 20221109093602,
        content: {
          sa_orderid: this.$route.query.id,
          sys_enterpriseid: this.data.sys_enterpriseid, //企业ID
          type: this.data.type, //订单类型
          items: [
            {
              sa_orderitemsid: 0,
              needdate: data.deliverydate,
              qty: data.orderminqty,
              itemid: data.itemid,
            },
          ],
        },
      });
      this.tool.showMessage(res, () => {
        this.listData();
        this.$refs.addProduct.listData();
        this.$emit("onSuccess");
      });
    },
    /*一键添加*/
    uploadData(uploadApi, data) {
      uploadApi.id = 20221109093602;
      uploadApi.content = {
        sa_orderid: this.$route.query.id,
        sys_enterpriseid: this.data.sys_enterpriseid, //企业ID
        type: this.data.type, //订单类型
        items: data.map((e) => {
          return {
            sa_orderitemsid: 0,
            needdate: e.deliverydate,
            qty: e.orderminqty,
            itemid: e.itemid,
          };
        }),
      };
      this.listData();
      this.$refs.addProduct.list = [];
      this.$emit("onSuccess");
    },

    handlePullApi(pullApi) {
      pullApi.content = {
        sa_orderid: 0, //订单ID
        pageNumber: 1,
        pageSize: 20,
        where: {
          condition: "",
        },
      };
      pullApi.id = 20221109093902;
      pullApi.content.sa_orderid = this.$route.query.id;
    },
    handleDelApi(delApi, data) {
      delApi.id = 20221109093702;
      delApi.content = {
        sa_orderid: this.$route.query.id,
        sa_orderitemsids: data,
      };
      this.$emit("onSuccess");
    },
    selectionChange (selection) {
      this.$emit('select',selection)
    },
  },
  mounted() {
    this.flag = 0;
    this.listData();
    console.log("表结构");
    // this.columnTitle  = []
    // setTimeout(() => {
    //   this.$refs.multipleTable.$refs.table.$children.forEach(obj => {
    //   let columnChild = {'columnname':obj.prop,'filter':0,'rowindex':'','sequence':'','title':obj.label,'width':obj.width}
    //   // 存到columnTitle数组中
    //   this.columnTitle.push(columnChild)
    // })
    // },1000)
  },
  created() {
    this.tablecolsAdd = this.tool.tabelCol(
      this.$route.name
    ).addProductTable.tablecols;
    this.tablecols = this.tool.tabelCol(
      this.$route.name
    ).OrderListTable.tablecols;
  },
  watch: {
    value2(val) {
      console.log(val);
    },
  },
};
</script>
<style scoped>
/deep/ .el-input.is-disabled .el-input__inner {
  color: #666666;
}
/deep/.el-textarea.is-disabled .el-textarea__inner {
  color: #666666;
}
</style>