仓储分析页面

src/views/Warehousing/analysis/index.vue

@@ -0,0 +1,526 @@
+<template>
+  <div class="app-container">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      v-show="showSearch"
+      label-width="70px"
+      size="small"
+    >
+      <el-row>
+        <el-col :xs="12" :sm="6">
+          <el-form-item label="客户名称">
+            <el-select
+              v-model="queryParams.fCorpid"
+              clearable
+              filterable
+              placeholder="请输入客户名称"
+            >
+              <el-option
+                v-for="(item, index) in fMblnoOptions"
+                :key="index.fId"
+                :label="item.fName"
+                :value="item.fId"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :xs="12" :sm="6">
+          <el-form-item label="仓库">
+            <el-select v-model="queryParams.fWarehouseid" placeholder="请选择仓库库区">
+              <el-option
+                v-for="(item, index) in warehouseOptions"
+                :key="index.fId"
+                :label="item.fName"
+                :value="item.fId"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :xs="12" :sm="6">
+          <el-form-item label="库管员">
+            <el-select
+              v-model="queryParams.fStorekeeper"
+              filterable
+              clearable
+              placeholder="请选择库管员"
+            >
+              <el-option
+                v-for="(item, index) in userOptions"
+                :key="index.userName"
+                :label="item.nickName"
+                :value="item.userName"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :xs="12" :sm="6">
+          <el-form-item label="截止日期">
+            <el-date-picker
+              v-model="queryParams.a"
+              type="daterange"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              :default-time="['00:00:00', '23:59:59']"
+              clearable
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              :picker-options="pickerOptions"
+              unlink-panels
+              style="width: 230px"
+            ></el-date-picker>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <!--      列设置-->
+      <el-dialog title="提示" :visible.sync="showSetting" width="700px" v-dialogDrag append-to-body>
+        <template slot="title">
+          <div class="avue-crud__dialog__header">
+            <span class="el-dialog__title">
+            <span
+              style="display:inline-block;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span>
+            </span>
+          </div>
+        </template>
+        <div>配置排序列数据（拖动调整顺序）</div>
+        <div style="margin-left: 17px">
+          <el-checkbox
+            v-model="allCheck"
+            label="全选"
+            @change="allChecked"
+          ></el-checkbox>
+        </div>
+        <div style="padding: 4px; display: flex; justify-content: center">
+          <draggable
+            v-model="setRowList"
+            group="site"
+            animation="300"
+            @start="onStart"
+            @end="onEnd"
+            handle=".indraggable"
+          >
+            <transition-group>
+              <div
+                v-for="item in setRowList"
+                :key="item.surface"
+                class="listStyle"
+              >
+                <div style="width: 500px" class="indraggable">
+                  <div class="progress" :style="{ width: item.width + 'px' }">
+                    <el-checkbox
+                      :label="item.name"
+                      v-model="item.checked"
+                      :true-label="0"
+                      :false-label="1"
+                    >{{ item.name }}
+                    </el-checkbox>
+                  </div>
+                </div>
+                <el-input-number
+                  v-model.number="item.width"
+                  controls-position="right"
+                  :min="1"
+                  :max="500"
+                  size="mini"
+                ></el-input-number>
+              </div>
+            </transition-group>
+          </draggable>
+        </div>
+        <span slot="footer" class="dialog-footer">
+        <el-button @click="showSetting = false">取 消</el-button>
+        <el-button @click="delRow" type="danger">重 置</el-button>
+        <el-button type="primary" @click="save()">确 定</el-button>
+      </span>
+      </el-dialog>
+
+      <el-row :gutter="10" style="padding-bottom: 10px">
+        <el-col :span="1.5">
+          <el-button
+            type="warning"
+            icon="el-icon-download"
+            size="mini"
+            @click="handleExport"
+          >导出</el-button>
+        </el-col>
+        <div class="tabSetting">
+          <div style="margin-right: 20px">
+            <el-button
+              type="cyan"
+              icon="el-icon-search"
+              size="mini"
+              @click="handleQuery"
+            >搜索</el-button
+            >
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+            >重置</el-button
+            >
+            <right-toolbar
+              :showSearch.sync="showSearch"
+              @queryTable="getList"
+            ></right-toolbar>
+            <div style="margin: 0 12px;float: right">
+              <el-button
+                icon="el-icon-setting"
+                size="mini"
+                circle
+                @click="showSetting = !showSetting"
+              ></el-button>
+            </div>
+          </div>
+        </div>
+      </el-row>
+    </el-form>
+
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="出库" name="outStock"></el-tab-pane>
+      <el-tab-pane label="在库" name="inStock"></el-tab-pane>
+    </el-tabs>
+    <el-table
+      ref="table"
+      v-loading="loading"
+      :data="dataList"
+      show-summary
+      :summary-method="getSum"
+      :height="tableHeight"
+    >
+      <el-table-column
+        type="index"
+        label="行号"
+        align="center"
+        fixed
+      />
+      <el-table-column
+        v-for="(item, index) in getRowList"
+        :key="index"
+        :label="item.name"
+        :width="item.width"
+        :prop="item.label"
+        align="center"
+        :fixed="item.fixed"
+        :show-overflow-tooltip="true"
+        sortable
+      >
+      </el-table-column>
+    </el-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+import { listCorps } from "@/api/basicdata/corps";
+import { listWarehousesss } from "@/api/basicdata/warehouse";
+import { queryClerkRoleList } from "@/api/warehouseBusiness/warehouseInStock";
+import Cookies from "js-cookie";
+import {addSet, resetModule, select} from '@/api/system/set';
+import draggable from "vuedraggable";
+
+export default {
+  name: "index",
+  components: {
+    draggable
+  },
+  data() {
+    return {
+      loading: false,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      total: 0,
+      dataList: [],
+      tableHeight: '300',
+      // 显示搜索条件
+      showSearch: true,
+      fMblnoOptions: [], //客户
+      warehouseOptions: [], //仓库
+      userOptions: [],
+      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]);
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+            picker.$emit('pick', [start, end]);
+          }
+        }]
+      },
+      activeName: 'outStock',
+
+      // 设置列开关
+      showSetting: false,
+      setRowList: [],
+      getRowList: [],
+      //自定义列宽
+      allCheck: false,
+      drag: false,
+      tableDate:[
+        {
+          surface: "1",
+          label: "fBilltype",
+          name: "业务类型",
+          checked: 0,
+          width: 150,
+        },
+        {
+          surface: "2",
+          label: "fCorpid",
+          name: "客户名称",
+          checked: 0,
+          width: 150,
+        },
+        {
+          surface: "3",
+          label: "fMblno",
+          name: "提单号",
+          checked: 0,
+          width: 150,
+        },
+        {
+          surface: "4",
+          label: "fQty",
+          name: "件数",
+          checked: 0,
+          width: 80,
+        },
+        {
+          surface: "5",
+          label: "fGrossweight",
+          name: "毛重",
+          checked: 0,
+          width: 100,
+        },
+        {
+          surface: "6",
+          label: "fWarehouseInformation",
+          name: "仓库",
+          checked: 0,
+          width: 150,
+        },
+        {
+          surface: "7",
+          label: "fBsdate",
+          name: "入库日期",
+          checked: 0,
+          width: 150,
+        },
+        {
+          surface: "8",
+          label: "fBsdate",
+          name: "出库日期",
+          checked: 0,
+          width: 150,
+        },
+        {
+          surface: "9",
+          label: "fStorekeeper",
+          name: "仓管员",
+          checked: 0,
+          width: 150,
+        },
+        {
+          surface: "10",
+          label: "createBy",
+          name: "制单人",
+          checked: 0,
+          width: 150,
+        },
+        {
+          surface: "11",
+          label: "createTime",
+          name: "制单日期",
+          checked: 0,
+          width: 150,
+        },
+      ],
+    }
+  },
+  created() {
+    this.setRowList = this.tableDate;
+    this.getRowList = this.tableDate;
+    listCorps({ type: 1 }).then((response) => {
+      this.fMblnoOptions = response.rows;
+    });
+    listWarehousesss({fStatus: 0, delFlag: 0}).then((response) => {
+      this.warehouseOptions = response.rows;
+    });
+    queryClerkRoleList().then((response) => {
+      this.userOptions = response.data;
+    });
+  },
+  mounted() {
+    this.$nextTick(() => {
+      // 监听浏览器高度变化，改变表格高度
+      window.onresize = () => {
+        this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 70
+      }
+    })
+  },
+  methods: {
+    getList() {
+      setTimeout(() => {
+        this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 70
+      }, 300)
+    },
+    // 搜索
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.queryParams.pageSize = 10;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 10,
+      }
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    //导出
+    handleExport() {},
+    //合计
+    getSum(param) {
+      const { columns, data } = param;
+      const sums = [];
+      var values = [];
+      columns.forEach((column, index) => {
+        if (index === 0) {
+          sums[index] = "合计";
+          return;
+        }
+        if (column.property === "fGrossweight") {
+          values = data.map((item) => Number(item["fGrossweight"]));
+        }
+        if (column.property === "fQty") {
+          values = data.map((item) => Number(item["fQty"]));
+        }
+        if (
+          column.property === "fGrossweight" ||
+          column.property === "fQty"
+        ) {
+          sums[index] = values.reduce((prev, curr) => {
+            const value = Number(curr);
+            if (!isNaN(value)) {
+              return prev + curr;
+            } else {
+              return prev;
+            }
+          }, 0);
+          if (column.property === "fGrossweight") {
+            sums[index] = (sums[index] / 1000).toFixed(4) + "(吨)";
+          }
+          if (column.property === "fQty") {
+            // sums[index] = sums[index].toFixed(2);
+            sums[index] = sums[index];
+          }
+        }
+      });
+      return sums;
+    },
+
+
+    //列设置全选
+    allChecked() {
+      if (this.allCheck == true) {
+        this.setRowList.map((e) => {
+          return (e.checked = 0);
+        });
+      } else {
+        this.setRowList.map((e) => {
+          return (e.checked = 1);
+        });
+      }
+    },
+    //开始拖拽事件
+    onStart() {
+      this.drag = true;
+    },
+    //拖拽结束事件
+    onEnd() {
+      this.drag = false;
+    },
+    //重置列表
+    delRow() {
+      this.data = {
+        tableName: "仓储分析列表",
+        userId: Cookies.get("userName"),
+      };
+      resetModule(this.data).then((res) => {
+        if (res.code == 200) {
+          this.showSetting = false;
+          this.setRowList = this.tableDate;
+          console.log(this.setRowList)
+          this.getRowList = this.tableDate;
+        }
+      });
+    },
+    //保存列设置
+    save() {
+      this.showSetting = false;
+      this.data = {
+        tableName: "仓储分析列表",
+        userId: Cookies.get("userName"),
+        sysTableSetList: this.setRowList,
+      };
+      addSet(this.data).then((res) => {
+        this.getRowList = this.setRowList.filter((e) => e.checked == 0);
+      });
+    },
+    //查询列数据
+    getRow() {
+      let that = this;
+      this.data = {
+        tableName: "仓储分析列表",
+        userId: Cookies.get("userName"),
+      };
+      select(this.data).then((res) => {
+        if (res.data.length != 0) {
+          this.getRowList = res.data.filter((e) => e.checked == 0);
+          this.setRowList = res.data;
+          this.setRowList = this.setRowList.reduce((res, item) => {
+            res.push({
+              surface: item.surface,
+              label: item.label,
+              name: item.name,
+              checked: item.checked,
+              width: item.width,
+              fixed: item.fixed,
+            });
+            return res;
+          }, []);
+        }
+      });
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+/deep/ .el-tabs .el-tabs__content {
+  overflow-x: visible !important;
+}
+</style>