element+vue's select multi-select selects all

<template>
  <div class="page-container">
    <div ref="toolbarHeight">
      <el-card class="box-card">
        <div class="title-wrapper">
          <breadcrumb></breadcrumb>
        </div>
      </el-card>
    </div>
    <el-card>
      <div class="flex-between">
        <div>
          <el-button
            size="small"
            type="primary"
            @click="handelAdd"
            v-limit="['inventoryOperate:plan:add']"
            >新增</el-button
          >
          <el-button
            size="small"
            type="primary"
            @click="handelPreserve"
            v-limit="['inventoryOperate:plan:preservate']"
            >生成</el-button
          >
          <el-button
            size="small"
            @click="removeBatch"
            v-limit="['inventoryOperate:plan:remove']"
            >删除</el-button
          >
        </div>
        <div>
          <table-heads
            :tableId="tableId"
            :tableHeads="tableHeads"
            @handelconfirmHead="confirmdata"
            @handelrender="renderHide"
          ></table-heads>
          <el-button
            type="primary"
            plain
            size="small"
            icon="el-icon-refresh-right"
            @click="handleFilter"
            >刷新</el-button
          >
          <el-button
            type="primary"
            size="small"
            icon="el-icon-download"
            plain
            @click="handleClickDown"
            v-limit="['inventoryOperate:plan:export']"
            >导出</el-button
          >
          <el-button
            type="primary"
            size="small"
            icon="el-icon-printer"
            plain
            @click="handelPrint"
            >打印</el-button
          >
        </div>
      </div>
      <!-- 表格 -->
      <el-row>
        <el-col :span="24" v-if="handelrender">
          <el-table
            ref="ReservationTable"
            border
            stripe
            :max-height="tableHeight"
            @header-dragend="headerDragend"
            :data="list"
            :cell-style="$style.cellStyle"
            :header-cell-style="$style.rowClass"
          >
            <el-table-column
              class-name="cannotDrag"
              type="selection"
              width="55"
            />
            <!--checkbox-->
            <el-table-column label="序号" type="index" width="55" />
            <el-table-column
              v-for="item in confirmHead"
              :key="item.label"
              :label="item.label"
              :prop="item.prop"
              :width="item.width"
              align="center"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span
                  v-if="item.chacao"
                  v-limit="['inventoryOperate:plan:detail']"
                >
                  <el-link
                    type="primary"
                    :underline="false"
                    @click="handleDetail(scope.row)"
                    >{
   
   { scope.row.billNo }}
                  </el-link>
                </span>
                <span v-else-if="item.owners">
                  <span v-if="scope.row.owners == null">全部</span>
                  <span
                    v-for="(item, index) in scope.row.owners"
                    :key="index"
                    v-else
                  >
                    [{
   
   { item.id }}]{
   
   { item.name }},
                  </span>
                </span>
                <span v-else-if="item.areas">
                  <span v-if="scope.row.areas == null">全部</span>
                  <span
                    v-for="(item, index) in scope.row.areas"
                    :key="index"
                    v-else
                  >
                    {
   
   { item.name }}
                  </span>
                </span>
                <span v-else-if="item.mode">
                  <el-tag v-if="scope.row.mode == 0" type="success">{
   
   {
                    INVENTORY_CHECK_MODE[scope.row.mode]
                  }}</el-tag>
                  <el-tag v-else-if="scope.row.mode == 1">{
   
   {
                    INVENTORY_CHECK_MODE[scope.row.mode]
                  }}</el-tag>
                </span>
                <span v-else>{
   
   { scope.row[item.prop] }}</span>
              </template>
            </el-table-column>
            <template slot="empty">
              <img
                src="../../assets/img/empty.png"
                alt=""
                srcset=""
                style="height: calc(100vh - 560px)"
              />
              <h4>暂无数据~</h4>
            </template>
          </el-table>
          <pagination
            v-show="page.total > 0"
            :total="page.total"
            :page.sync="page.pageNum"
            :limit.sync="page.pageSize"
            @pagination="getQueryList"
          />
        </el-col>
      </el-row>
    </el-card>
    <!-- 边界对话框 -->
    <el-dialog
      title="新增盘点单"
      :visible.sync="popVisible"
      :close-on-click-modal="false"
      width="30%"
      :append-to-body="true"
      style="text-align: center"
      @close="addDialogClosed"
      v-dialogDrag
    >
      <el-form
        :model="detailForm"
        ref="detail"
        label-width="110px"
        size="small"
        :rules="rules"
      >
        <!-- <el-row>
          <el-col :span="24">
            <el-form-item label="仓库名称:" prop="houseName">
              <el-input
                v-model.trim="detailForm.houseName"
                show-word-limit
                clearable
                placeholder="请输入仓库名称"
                :disabled="true"
              />
            </el-form-item>
          </el-col>
        </el-row> -->
        <el-col :span="24">
          <el-form-item label="区域名称:" prop="areas">
            <el-select
              v-model="detailForm.areas"
              placeholder="请选择区域名称"
              style="width: 100%"
              multiple
              filterable
              collapse-tags
              @change="AreaChange"
              @remove-tag="removeTagArea"
            >
              <el-option
                label="全部"
                value="null"
                key="null"
                @click.native="selectAllArea"
              ></el-option>
              <el-option
                v-for="item in categoryData"
                :key="item.whAId"
                :label="item.whAName"
                :value="item.whAId"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="货主名称:" prop="owners">
            <el-select
              v-model="detailForm.owners"
              placeholder="请选择货主名称"
              style="width: 100%"
              multiple
              filterable
              @remove-tag="removeTag"
              collapse-tags
              @change="storeNameChange"
              :filter-method="storeNameFilter"
            >
              <el-option
                label="全部"
                value="null"
                key="null"
                v-if="searchVal == ''"
                @click.native="selectAll"
              ></el-option>
              <el-option
                v-for="item in storeNameData"
                :key="item.id"
                :label="item.storeName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="盘点模式:" prop="mode">
            <el-select
              v-model="detailForm.mode"
              placeholder="请选择盘点模式"
              style="width: 100%"
            >
              <el-option
                v-for="item in ModeData"
                :key="item.id"
                :label="item.value"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-show="detailForm.mode == 1">
          <el-form-item label="动盘日期:" prop="date">
            <el-date-picker
              align="right"
              unlink-panels
              v-model="detailForm.date"
              type="daterange"
              range-separator="~"
              start-placeholder="选择开始日期"
              end-placeholder="选择结束日期"
              value-format="yyyy-MM-dd"
              style="width: 100%"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="popVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="submitForm"
          >保 存</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
      
       getDictionaries } from "@/utils/dictionaries";
import pagination from "@/components/Pagination";
import {
      
       listStore, goodsExport } from "@/http/moudules/basicInformate";
import {
      
      
  dictionaryQueryByCode,
  queryAllWarehouseArea,
} from "@/http/moudules/warehouse";
import tableHeads from "@/components/tableHeades";
import {
      
      
  inventoryCheck,
  inventoryCheckDelete,
  inventoryCheckConfirm,
  queryPage,
} from "@/http/moudules/inventoryOperate";
import tableMixin from "@/mixin/tableMixin";
import {
      
       plantableHeads } from "@/constants/inventoryOperate";

export default {
      
      
  name: "Plan",
  components: {
      
      
    pagination,
    tableHeads,
  },
  mixins: [tableMixin],
  data() {
      
      
    return {
      
      
      pickerOptions: {
      
      
        shortcuts: [
          {
      
      
            text: "最近一周",
            onClick(picker) {
      
      
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
      
      
            text: "最近一个月",
            onClick(picker) {
      
      
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      tableId: "Plan",
      tableHeight: null, // 默认初始值
      loading: false,
      list: [], // 列表
      page: {
      
      
        pageNum: 1,
        pageSize: 20,
        total: 0,
      }, // 页码,
      popVisible: false,
      detailForm: {
      
       houseName: "", areas: "", owners: "", mode: "", date: "" },
      storeNameData: [],
      categoryData: [],
      goodsTypeData: [],
      confirmHead: [],
      handelrender: true,
      tableHeads: plantableHeads,
      all: false,
      rules: {
      
      
        owners: [{
      
       required: true, message: "请输入", trigger: "blur" }],
        areas: [{
      
       required: true, message: "请选择", trigger: "change" }],
        houseName: [{
      
       required: true, message: "请选择", trigger: "change" }],
        mode: [{
      
       required: true, message: "请选择", trigger: "change" }],
      },
      ModeData: [],
      owners: [],
      areas: [],
      INVENTORY_CHECK_MODE: {
      
      },
      disabledCheck: true,
      searchVal: "",
      detail: {
      
      },
    };
  },

  activated() {
      
      
    this.getQueryList();
    this.$nextTick(() => {
      
      
      window.onresize = () => {
      
      
        this.tableHeight =
          window.innerHeight -
          this.$refs.ReservationTable.$el.offsetTop -
          this.$refs.toolbarHeight.offsetHeight -
          280;
      };
    });
  },
  mounted() {
      
      
    // this.getQueryList();
    this.queryCategory();
    this.queryArea();
    this.queryMode();
    this.INVENTORY_CHECK_MODE = getDictionaries("INVENTORY_CHECK_MODE");
    this.tableHeight =
      window.innerHeight -
      this.$refs.ReservationTable.$el.offsetTop -
      this.$refs.toolbarHeight.offsetHeight -
      280;
  },
  computed: {
      
      },
  created() {
      
      },

  methods: {
      
      
    confirmdata(val) {
      
      
      this.confirmHead = val;
      // ;
    },
    renderHide(val) {
      
      
      this.handelrender = val;
    },
    queryCategory(val) {
      
      
      listStore({
      
       pageNum: 1, pageSize: 100, id: val, storeStatus: 0 })
        .then((res) => {
      
      
          this.storeNameData = res.data.data.list;
        })
        .catch(() => {
      
      
          this.storeNameData = [];
        });
    },
    queryMode() {
      
      
      dictionaryQueryByCode({
      
       parentCode: "INVENTORY_CHECK_MODE" })
        .then((res) => {
      
      
          this.ModeData = res.data.data;
        })
        .catch(() => {
      
      
          this.ModeData = [];
        });
    },
    queryArea() {
      
      
      queryAllWarehouseArea()
        .then((res) => {
      
      
          this.categoryData = res.data.data;
        })
        .catch(() => {
      
      
          this.categoryData = [];
        });
    },
    // 获取列表
    getQueryList() {
      
      
      this.loading = true;
      queryPage({
      
      
        ...this.page,
        param: {
      
      
          staffId: localStorage.getItem(
            "currentUserId" + localStorage.getItem("urlHerf")
          ),
          houseId: localStorage.getItem(
            "whId" + localStorage.getItem("urlHerf")
          ),
        },
      })
        .then((res) => {
      
      
          this.loading = false;
          this.list = res.data.data.list;
          // this.list=[]
          this.page.total = res.data.data.total;
        })
        .catch(() => {
      
      
          this.list = [];
        });
    },
    //详情
    handleDetail(row) {
      
      
      this.$router.push({
      
      
        name: "PlanDetail",
        query: {
      
      
          id: row.id,
        },
      });
      localStorage.setItem("PlanDetail", row.id);
    },
    // 新增
    handelAdd() {
      
      
      this.popVisible = true;
      this.detailForm = {
      
      
        houseName: localStorage.getItem(
          "whName" + localStorage.getItem("urlHerf")
        ),
      };
    },
    //保存
    submitForm() {
      
      
      this.$refs["detail"].validate(async (valid) => {
      
      
        if (valid) {
      
      
          if (this.detailForm.owners.includes("null")) {
      
      
            this.owners = null;
          } else {
      
      
            if (this.detailForm.owners != null) {
      
      
              let date = this.storeNameData.filter(
                (item) => this.detailForm.owners.indexOf(item.id) > -1
              );
              this.owners = date.map((item) => ({
      
      
                id: item.id,
                name: item.storeName,
                code: item.id,
              }));
            }
          }
          if (this.detailForm.areas.includes("null")) {
      
      
            this.areas = null;
          } else {
      
      
            if (this.detailForm.areas != null) {
      
      
              let date = this.categoryData.filter(
                (item) => this.detailForm.areas.indexOf(item.whAId) > -1
              );
              // this.areas = date;
              this.areas = date.map((item) => ({
      
      
                id: item.whAId,
                name: item.whAName,
                code: item.whACode,
              }));
            }
          }
          const data = Object.assign({
      
      }, this.detailForm, {
      
      
            startDate: this.detailForm.date ? this.detailForm.date[0] : null,
            endDate: this.detailForm.date ? this.detailForm.date[1] : null,
            owners: this.owners,
            areas: this.areas,
            houseId: localStorage.getItem(
              "whId" + localStorage.getItem("urlHerf")
            ),
            houseCode: localStorage.getItem(
              "whCode" + localStorage.getItem("urlHerf")
            ),
          });
          inventoryCheck(data).then((res) => {
      
      
            // ;
            const {
      
       code, msg } = res.data;
            const title = code === 200 ? "操作成功" : "操作失败";
            const type = code === 200 ? "success" : "error";
            this.$notification(title, type, msg);
            if (code === 200) {
      
      
              this.popVisible = false;
              this.getQueryList();
            }
          });
        } else {
      
      
          this.$message.error("仓库资料校验未通过！");
          return false;
        }
      });
    },
    // 批量删除
    removeBatch() {
      
      
      this.handleRemove(
        this.$refs.ReservationTable.selection.map((item) => item.id)
      );
    },
    //删除
    handleRemove(params) {
      
      
      if (!params.length) {
      
      
        this.$message.warning("请选择数据！");
        return;
      }
      this.$confirm("此操作将删除该条消息, 是否继续?", "提示", {
      
      
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
      
      
          inventoryCheckDelete(params).then((res) => {
      
      
            const {
      
       code, msg } = res.data;
            const title = code === 200 ? "操作成功" : "操作失败";
            const type = code === 200 ? "success" : "error";
            this.$notification(title, type, msg);
            this.loading = false;
            this.popVisible = false;
            this.getQueryList();
          });
        })
        .catch((err) => console.error(err));
    },
    //刷新
    handleFilter() {
      
      
      this.page.pageNum = 1;
      this.getQueryList();
    },
    // 监听 添加仓库对话框的关闭事件
    addDialogClosed() {
      
      
      this.$refs.detail.resetFields();
    },
    //重置
    resetForm(formName) {
      
      
      this.$refs[formName].resetFields();
      this.getQueryList();
    },
    // 导出
    handleClickDown() {
      
      
      // goodsExport(this.search).then((res) => {
      
      
      //   try {
      
      
      //     const src = URL.createObjectURL(new Blob([res.data]));
      //     const link = document.createElement("a");
      //     link.href = src;
      //     link.setAttribute("download", "商品信息.xls");
      //     document.body.appendChild(link);
      //     link.style.display = "none";
      //     link.click();
      //   } catch (err) {
      
      
      //
      //   }
      // });
    },
    // 打印
    handelPrint() {
      
      },
    // 保存
    handelPreserve() {
      
      
      var params = this.$refs.ReservationTable.selection.map((item) => item.id);
      if (!params.length) {
      
      
        this.$message.warning("请选择数据！");
        return;
      }
      this.$confirm("是否保存该数据?", "提示", {
      
      
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
      
      
          inventoryCheckConfirm(params).then((res) => {
      
      
            const {
      
       code, msg } = res.data;
            const title = code === 200 ? "操作成功" : "操作失败";
            const type = code === 200 ? "success" : "error";
            this.$notification(title, type, msg);
            this.loading = false;
            this.popVisible = false;
            this.getQueryList();
          });
        })
        .catch((err) => console.error(err));
    },
    // 货主名称全选
    storeNameChange(val) {
      
      
      if (this.searchVal !== "" && val.length - 1 < this.storeNameData.length) {
      
      
        return "";
      } else if (
        !val.includes("null") &&
        val.length === this.storeNameData.length
      ) {
      
      
        this.detailForm.owners.unshift("null");
      } else if (
        val.includes("null") &&
        val.length - 1 < this.storeNameData.length
      ) {
      
      
        this.detailForm.owners = this.detailForm.owners.filter((item) => {
      
      
          return item !== "null";
        });
      }
    },
    // 货主名称自定义查询模板
    storeNameFilter(val) {
      
      
      this.searchVal = val;
      this.queryCategory(val);
    },
    removeTag(val) {
      
      
      console.log(val);
      if (val === "null") {
      
      
        this.detailForm.owners = [];
      }
    },
    // 货主选择全部
    selectAll() {
      
      
      if (this.detailForm.owners.length < this.storeNameData.length) {
      
      
        this.detailForm.owners = [];
        this.storeNameData.map((item) => {
      
      
          this.detailForm.owners.push(item.id);
        });

        this.detailForm.owners.unshift("null");
        // this.detailForm.owners = null;
      } else {
      
      
        this.detailForm.owners = [];
      }
    },
    // 区域名称全选
    AreaChange(val) {
      
      
      console.log();
      if (!val.includes("null") && val.length === this.categoryData.length) {
      
      
        this.detailForm.areas.unshift("null");
      } else if (
        val.includes("null") &&
        val.length - 1 < this.categoryData.length
      ) {
      
      
        this.detailForm.areas = this.detailForm.areas.filter((item) => {
      
      
          return item !== "null";
        });
      }
    },
    removeTagArea(val) {
      
      
      if (val === "null") {
      
      
        this.detailForm.areas = [];
      }
    },
    // 区域选择全部
    selectAllArea() {
      
      
      if (this.detailForm.areas.length < this.categoryData.length) {
      
      
        this.detailForm.areas = [];
        this.categoryData.map((item) => {
      
      
          this.detailForm.areas.push(item.whAId);
        });

        this.detailForm.areas.unshift("null");
        // this.detailForm.areas = null;
      } else {
      
      
        this.detailForm.areas = [];
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/mixin.scss";
</style>