order-ui-pc/src/components/search-stock-good-modal/index.vue

<template>
  <el-dialog
    :title="'仓库商品选择'"
    :center="true"
    align="left"
    top="8vh"
    width="1040px"
    @close="showModelThis = false"
    :close-on-click-modal="false"
    :visible.sync="showModelThis"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    append-to-body
  >
    <el-card style="margin-top: -20px" class="modal-form-style">
      <el-table
        :data="tableData"
        border
        :size="size"
        v-loading="loading"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <template v-for="(column, index) in columns">
          <el-table-column
            v-if="column._slot_ && column._slot_ === 'good_name'"
            show-overflow-tooltip
            :key="column + index"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.good_name }}</span>
              <span
                v-for="(si, sii) in scope.row.specinfo"
                :key="si.spec_value_id + sii"
                >{{ sii === 0 ? "_" : "-" }}{{ si.spec_name }}[{{
                  si.spec_value
                }}]</span
              >
            </template>
          </el-table-column>
          <el-table-column
            v-else
            :key="column + index"
            show-overflow-tooltip
            v-bind="column"
          />
        </template>
      </el-table>
      <div
        v-if="pageInfo !== false && tableData && tableData.length > 0"
        class="Pagination clear"
        style="text-align: right; padding: 16px 0 0 0"
      >
        <div style="wiith: 90%" class="fl">
          <el-pagination
            :current-page="pageInfo.curr"
            :page-size="pageInfo.size"
            :size="searchSize"
            layout="total,  prev, pager, next, jumper"
            :total="pageInfo.total"
            @size-change="
              (pageInfo.curr = 1),
                (parmValue.page = 1),
                (pageInfo.size = $event),
                (parmValue.size = $event),
                searchList()
            "
            @current-change="
              (pageInfo.curr = $event), (parmValue.page = $event), searchList()
            "
          />
        </div>
        <div class="fr">
          <el-button type="primary" :size="'mini'" @click="resultList()"
            >保 存</el-button
          >
        </div>
      </div>
    </el-card>
  </el-dialog>
</template>

<script>
import asyncRequest from "@/apis/components/search-stock-good-modal";
import resToken from "@/mixins/resToken";
import mixinPage from "@/mixins/elPaginationHandle";
import { mapGetters } from "vuex";
import columns from "./columns";
export default {
  name: "searchStockGoodModal",

  mixins: [resToken, mixinPage],
  computed: {
    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
  },
  props: ["showModel", "once", "code", "good_code", "cat_id"],

  /**
   * 属性集合
   * @param {Boolean}       showModel             : 是否弹出弹窗        必填
   * @param {Boolean}       once                  : 是否只选一条        非必填
   * @param {Boolean}       code                  : 仓库CODE           非必填
   */
  /**
   * 事件集合
   * @searchChange             : 选中值变化调用   抛出选中数据
   */
  data() {
    return {
      options: [],
      multipleSelection: [],
      selectLoading: false,
      loading: true,
      showModelThis: false,
      parmValue: {
        wsm_code: "", //仓库code
        cat_id: "",
        page: 1, // 页码
        size: 10, // 每页显示条数
      },
      tableData: [],
      passwordModel: false,
      passwordModelId: 0,
      isPasswordDetail: false,
      // 表格 - 数据
      tableData: [],
      // 表格 - 参数
      table: {
        stripe: true,
        border: true,
        // _defaultHeader_: ["setcol"],
      },
      // 表格 - 分页
      pageInfo: {
        size: 10,
        curr: 1,
        total: 0,
      },
      // 表格 - 列参数
      columns: columns,
    };
  },
  watch: {
    showModel: function (val) {
      this.showModelThis = val;
      if (val) {
        this.supplierCode = [];
        this.searchList();
      }
    },
    showModelThis(val) {
      if (!val) {
        this.$emit("cancel");
      }
    },
  },

  methods: {
    restSearch() {
      this.parmValue = {
        wsm_code: "", //仓库code
        cat_id: "",
        page: 1, // 页码
        size: 10, // 每页显示条数
      };
      // 表格 - 分页
      this.pageInfo = {
        size: 10,
        curr: 1,
        total: 0,
      };
      this.searchList();
    },
    async searchList() {
      this.loading = true;
      this.parmValue.wsm_code = this.code || "";
      this.parmValue.type_code = this.good_code || "";
      this.parmValue.stock_max = "1";
      this.parmValue.cat_id = this.cat_id;

      const res = await asyncRequest.list(this.parmValue);
      if (res && res.code === 0 && res.data) {
        this.tableData = res.data.list;
        this.tableData.forEach((v) => {
          v.class_cat = "";
          if (v.can && v.can.length > 0) {
            v.can.forEach((x, i) => {
              v.class_cat += i === 0 ? x.name : "_" + x.name;
            });
          }
        });

        this.pageInfo.total = Number(res.data.count);
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        this.tableData = [];
        this.pageInfo.total = 0;
      }
      this.loading = false;
    },
    async handleSelectionChange(selection) {
      this.multipleSelection = selection;
    },
    async resultList() {
      if (
        this.multipleSelection &&
        this.multipleSelection.length > 1 &&
        this.once
      ) {
        this.$message.warning("只能选择一条商品信息！");
        return;
      }
      let list = JSON.parse(JSON.stringify(this.multipleSelection));
      list.map((v) => {
        delete v["id"];
        return v;
      });
      this.showModelThis = false;
      this.$emit("searchChange", list);
    },
  },
};
</script>

<style>
</style>