yos_web/src/HDrpManagement/serveBillMag/modules/product/add.vue

<template>
  <div>
    <el-button size="mini" type="primary" @click="addBtn">{{
      $t("添 加")
    }}</el-button>
    <el-drawer append-to-body :visible.sync="dialogFormVisible" size="70%">
      <div slot="title" style="font-size: 15px">{{$t('添加商品')}}</div>
      <div class="drawer__panel">
        <el-input
          style="width: 250px; margin-bottom: 10px"
          size="small"
          :placeholder="$t('请输入搜索内容')"
          clearable
          @clear="getOrderList((params.content.pageNumber = 1))"
          v-model="params.content.where.condition"
          @keyup.enter.native="getOrderList((params.content.pageNumber = 1))"
        ></el-input>
        <selectTable
          @selectChange="selectChange"
          v-if="dialogFormVisible"
          idName="itemid"
          ref="table"
          v-model="result"
          :layout="tablecols"
          :data="orderList"
          :custom="true"
          height="500px"
          @upDateData="upDateData"
        >
          <template v-slot:customcol="scope">
            <div>{{ $t(scope.column.data[scope.column.columnname]) }}</div>
          </template>
        </selectTable>
        <div class="container normal-panel" style="text-align: right">
          <el-pagination
            style="text-align: right"
            background
            small
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="params.content.pageNumber"
            :page-size="params.content.pageSize"
            layout="total, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
      <div class="fixed__btn__panel">
        <el-button
          size="small"
          @click="dialogFormVisible = false"
          class="normal-btn-width"
          >{{ $t("取 消") }}</el-button
        >
        <el-button
          size="small"
          type="primary"
          @click="onSubmit"
          :disabled="isLength"
          class="normal-btn-width"
          >{{ $t("确 定") }}</el-button
        >
      </div>
    </el-drawer>
  </div>
</template>

<script>
import selectTable from "@/components/selectTable/index";
import { log } from "@antv/g2plot/lib/utils";
export default {
  name: "add",
  props: ["data", "disabled"],
  components: { selectTable },
  data() {
    return {
      result: [],
      selectArr: [],
      isLength: true,
      dialogFormVisible: false,
      orderList: [],
      tablecols: [],
      total: 0,
      params: {
        id: 20230206161703,
        content: {
          pageNumber: 1,
          pageSize: 20,
          sa_serviceorderid: "",
          sa_orderid: "",
          where: {
            condition: "",
          },
        },
      },
    };
  },
  computed: {
    isEdit() {
      return function (data) {
        console.log(this.selectArr.some((item) => item == data));
        let is = this.selectArr.some((item) => item == data);
        return is;
      };
    },
  },
  mounted() {
    this.getOrderList();
  },
  created() {
    this.tablecols = this.tool.tabelCol(
      this.$route.name
    ).productTable.tablecols;
  },
  watch: {
    dialogFormVisible(val) {
      if (!val) {
        this.$refs.table.allArr = [];
      }
    },
  },
  methods: {
    addBtn() {
      this.dialogFormVisible = true;
      this.getOrderList();
    },
    async onSubmit() {
      let data = this.$refs.table.allArr.map((item) => {
        return {
          sa_serviceorderitemsid: 0,
          itemid: item.itemid,
          reason: "",
          qty: 1,
        };
      });
      let res = await this.$api.requested({
        id: "20230206161803",
        content: {
          sa_serviceorderid: this.$route.query.id,
          iteminfos: data,
        },
      });
      this.tool.showMessage(res, () => {
        this.$emit("onSuccess");
        this.dialogFormVisible = false;
      });
    },
    async getOrderList() {
      this.params.content.sa_serviceorderid = this.data.sa_serviceorderid;
      this.params.content.sa_orderid = this.data.sa_orderid;
      let res = await this.$api.requested(this.params);
      console.log(res.data);

      this.orderList = res.data;
      this.total = res.total;
      console.log(res);
    },
    selectChange(data) {
      this.selectArr = data;
      this.isLength = data.length < 1;
    },
    upDateData(data) {
      this.selectArr = data;
      this.isLength = data.length < 1;
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.params.content.pageSize = val;
      this.getOrderList();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.params.content.pageNumber = val;
      this.getOrderList();
    },
  },
};
</script>

<style scoped>
.dialog-footer {
  margin-top: 0;
}
.el-select {
  width: 100%;
}
</style>