order-ui-pc/src/views/stock/survey/index.vue

<template>
  <div class="stockWarning pagePadding">
    <div
      v-if="powers && powers.length > 0 && powers.some((item) => item == '001')"
    >
      <div style="width: 100%">
        <el-row style="padding: 20px 0 0 30px">
          <el-col :span="8">
            <CompanySearch
              style="dispaly: inline-block; padding-left: 10px"
              @searchCard="getCompany"
              :isSize="isSize"
            ></CompanySearch>
          </el-col>
          <el-col :span="8"
            ><StockSearch
              :isDisabled="isDesabled"
              :isSize="isSize"
            ></StockSearch
          ></el-col>
        </el-row>
      </div>

      <div class="stock-survey clear">
        <el-row v-for="item in stock_list" :key="item.id" style="float: left">
          <el-col :span="24" class="card">
            <el-card shadow="always">
              <i :class="item.icon" class="icon"></i>
              <!-- <p>{{ item.num }}</p> -->
              <countTo
                style="display: block"
                :startVal="startVal"
                :endVal="item.endVal"
                :duration="3000"
              ></countTo>
              <p style="margin-top: 5px">{{ item.label }}</p>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <ex-table
        v-loading="false"
        :table="table"
        :data="tableData"
        :columns="columns"
        :page="pageInfo"
        :size="size"
        @row-click="handClick"
        @page-curr-change="handlePageChange"
        @page-size-change="handleSizeChange"
        @screen-reset="
          pageInfo.curr = 1;
          parmValue.page = 1;
          searchList();
        "
        @screen-submit="
          pageInfo.curr = 1;
          parmValue.page = 1;
          searchList();
        "
      >
        <template #table-header="{}">
          <div style="width: 100%; height: 30px; line-height: 30px">
            <i class="el-icon-s-unfold" style="height: 10px"></i>库存操作记录
          </div>
        </template>
      </ex-table>
      <add-edit
        :id="modelId"
        :sitem="sitem"
        :show-model="showModel"
        :is-detail="isDetail"
        @refresh="searchList"
        @cancel="showModel = false"
      />
    </div>
    <div v-else>
      <no-auth></no-auth>
    </div>
  </div>
</template>
   <script>
import mixinPage from "@/mixins/elPaginationHandle";
import resToken from "@/mixins/resToken";
// import statusList from "@/assets/js/statusList";
// import asyncRequest from "@/apis/service/stock/stockWarning";
import asyncRequest from "@/mock/service/stock/survey";
import countTo from "vue-count-to";
import addEdit from "./addEdit";
import { mapGetters } from "vuex";

export default {
  name: "survey",
  mixins: [mixinPage, resToken],
  components: {
    addEdit,
    countTo,
  },
  computed: {
    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
    powers() {
      let tran =
        this.$store.getters.btnList.find(
          (item) => item.menu_route == "survey"
        ) || {};
      if (tran && tran.action && tran.action.length > 0) {
        return tran.action;
      } else {
        return [];
      }
    },
  },
  data() {
    return {
      isSize: true, //控制输入框的尺寸
      isDesabled: "",
      options: [], //用于渲染多级仓库的数据
      startVal: 0, //动态效果显示卡片内的数字数量
      stock: [],
      stock_list: [
        //渲染表格上方的卡片选项用的
        {
          id: "1",
          icon: "el-icon-box",
          label: "当前库存",
          num: 0,
          endVal: 0,
        },
        {
          id: "2",
          icon: "el-icon-download",
          label: "待入库",
          endVal: 0,
          num: 0,
        },
        {
          id: "3",
          icon: "el-icon-upload2",
          label: "待出库",
          endVal: 0,
          num: 0,
        },
        {
          id: "4",
          icon: "el-icon-shopping-cart-full",
          label: "可用库存",
          endVal: 0,
          num: 0,
        },
        {
          id: "5",
          icon: "el-icon-truck",
          label: "在途库存",
          num: 0,
          endVal: 0,
        },
      ],
      arr1: [],

      loading: true,
      showModel: false,
      isDetail: false,
      modelId: 0,
      tableData: [], // 表格 - 数据
      table: {
        // 表格 - 参数
        stripe: true,
        border: true,
        // _defaultHeader_: ["setcol"],
      },
      // 表格 - 分页
      pageInfo: {
        size: 15,
        curr: 1,
        total: 0,
      },
      columns: [
        // 表格 - 列参数
        {
          prop: "id",
          label: "记录编号",
        },
        {
          prop: "author",
          label: "操作人",
        },
        {
          prop: "reviewer",
          label: "部门",
        },
        {
          prop: "type",
          label: "库存类型",
        },
        {
          prop: "number",
          label: "操作数量",
          // _slot_: "status",
          // width: "80px",
        },
        {
          prop: "typeo",
          label: "库存来源",
          // sortable: true,
        },
        {
          prop: "addTime",
          label: "操作时间",
          // sortable: true,
        },
      ],
      parmValue: {
        //入参参数
        // name: "", // 业务员名字
        // username: "", // 账号
        // status: "", //
        // page: 1, // 页码
        // size: 15, // 每页显示条数
      },
      // 状态
      // statusOptions: [
      //   { id: "0", label: "禁用" },
      //   { id: "1", label: "启用" },
      // ],
      // nowStock: 20, //当前库存
      // stayStock: 0, //待入库
      // stayOutStock: 0, //待出库
      // stockAble: 0, //可用库存
      // roadStock: 10, //在途库存
      // sitem: null,
      // tableData: [], //渲染表格数据
      // passwordModel: false,
      // passwordModelId: 0,
      // isPasswordDetail: false,
      // statistics: [],
    };
  },
  mounted() {
    this.searchList(); //获取表格信息
    // this.stockList(); //获取卡片内库存数据信息
    // this.stockName(); //获取多级仓库列表信息
  },

  methods: {
    wchange(e) {
      console.log(e);
    },
    restSearch() {
      //清空入参参数
      // this.parmValue = {
      //   name: "", // 业务员名字
      //   username: "", // 账号
      //   status: "", //
      //   page: 1, // 页码
      //   size: 10, // 每页显示条数
      // };
      // this.searchList();
      // // this.stock_list[0].num
    },

    openModal(id, isDetail, sitem) {
      //打开弹窗
      this.showModel = true;
      this.modelId = id;
      this.isDetail = isDetail;
      this.sitem = sitem;
    },
    async deleteById(id, status) {
      //删除功能
      // await this.$confirm("确定要删除？", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning",
      // })
      //   .then(async () => {
      //     const model = {
      //       id: id,
      //       status: status === "1" ? "0" : "1",
      //     };
      //     const res = await asyncRequest.status(model);
      //     if (res && res.code === 0) {
      //       this.$notify.success({
      //         title: "删除成功",
      //         message: "",
      //       });
      //       this.searchList();
      //     } else if (res && res.code >= 100 && res.code <= 104) {
      //       await this.logout();
      //     } else {
      //       this.$message.warning(res.message);
      //     }
      //   })
      //   .catch(() => {
      //     console.log("取消");
      //   });
    },
    getCompany(val) {
      console.log("获取仓库数据");
      console.log(val);
      this.isDesabled = val;
      console.log(this.isDesabled);
      this.stockList();
    },
    async stockList() {
      //获取表格上方的卡片数据
      // console.log(this.stock_list);
      const res1 = await asyncRequest.statistics(this.parmValue);
      // console.log(res1.data);
      const { value1, value2, value3, value4, value5 } = res1.data;
      this.stock.push(value1, value2, value3, value4, value5);
      // this.endVal = value1;
      // console.log(this.stock);
      // console.log(this.stock_list[5].num);
      for (let i = 0; i <= this.stock_list.length - 1; i++) {
        // this.stock_list[i].num = this.stock[i];
        this.stock_list[i].endVal = this.stock[i];
      }
      // console.log(this.stock_list);
    },
    // async stockName() {
    //   //获取多级仓库名称的方法
    //   const res = await asyncRequest.listAll(this.parmValue);
    //   // console.log(res.data);
    //   // this.options = res.data;
    //   // console.log(this.options);
    //   let arr = res.data;
    //   // console.log(arr);
    //   arr.forEach((ele) => {
    //     let item = {
    //       value: ele.id,
    //       label: ele.name,
    //       children: [],
    //     };
    //     ele.child.forEach((elem) => {
    //       let model = {
    //         value: elem.id,
    //         label: elem.name,
    //       };
    //       item.children.push(model);
    //     });
    //     this.options.push(item);
    //   });
    //   console.log(this.options);
    //   // console.log(this.pageInfo.total);
    // },
    async searchList() {
      //获取表格数据
      this.loading = true;
      // const res = await asyncRequest.list(this.parmValue);
      const res = await asyncRequest.log(this.parmValue);
      // console.log(res);
      if (res && res.code === 0 && res.data) {
        // this.tableData = res.data;
        this.tableData = res.data.list;
        this.pageInfo.total = Number(res.data.count);
        // console.log(this.tableData);
        // 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 statusConfirm(id, status) {
      //启用禁用状态
      // let str = status === "1" ? "禁用" : "启用";
      // await this.$confirm("确定要改为" + str + "?", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning",
      // })
      //   .then(async () => {
      //     this.loading = true;
      //     const model = {
      //       id: id,
      //       status: status === "1" ? "0" : "1",
      //     };
      //     const res = await asyncRequest.status(model);
      //     if (res && res.code === 0) {
      //       this.loading = false;
      //       this.$notify.success({
      //         title: "状态修改成功！",
      //         message: "",
      //       });
      //       await this.searchList();
      //     } else if (res && res.code >= 100 && res.code <= 104) {
      //       await this.logout();
      //     } else {
      //       this.$message.warning(res.message);
      //     }
      //   })
      //   .catch(() => {
      //     console.log("取消");
      //   });
    },
  },
};
</script>
   <style lang="scss" scoped>
@import "~@/styles/index.scss";
.card {
  width: 200px;
  height: 115px;
  flex: 1;
}
@media screen and (max-width: 1500px) {
  .card {
    width: 160px;
  }
}
@media screen and (max-width: 1350px) {
  .card {
    width: 130px;
  }
}

.stock-survey {
  width: 100%;
  display: flex;
  // position: relative;
  justify-content: space-around;
  overflow: hidden;
  padding: 20px 0 20px 10px;
  text-align: center;
  .icon {
    font-size: 40px;
    padding-bottom: 10px;
  }
  p {
    cursor: default;
  }
}
</style>