فهرست منبع

利润总账添加 拖拽修改

wengyuwen 4 سال پیش
والد
کامیت
d8987f05d0
5فایلهای تغییر یافته به همراه654 افزوده شده و 3 حذف شده
  1. 2 2
      src/main.js
  2. 228 0
      src/utils/dialog.js
  3. 413 0
      src/views/reportManagement/profitGeneralLedger/index.vue
  4. 1 0
      src/views/warehouseBusiness/inStock/index.vue
  5. 10 1
      vue.config.js

+ 2 - 2
src/main.js

@@ -23,7 +23,7 @@ import Pagination from "@/components/Pagination";
 //自定义表格工具扩展
 import RightToolbar from "@/components/RightToolbar"
 import echarts from "echarts";
-
+import '@/utils/dialog.js'
 // 全局方法挂载
 Vue.prototype.$echarts = echarts;
 Vue.prototype.getDicts = getDicts
@@ -164,4 +164,4 @@ Vue.directive("input-limit", {
       }, 0)
     })
   }
-})
+})

+ 228 - 0
src/utils/dialog.js

@@ -0,0 +1,228 @@
+
+import Vue from 'vue'
+Vue.directive('dialogDrag', {
+  bind(el, binding, vnode, oldVnode) {
+    // 弹框可拉伸最小宽高
+    const minWidth = 400
+    const minHeight = 300
+    // 初始非全屏
+    let isFullScreen = false
+    // 当前顶部高度
+    let nowMarginTop = 0
+    // 获取弹框头部(这部分可双击全屏)
+    const dialogHeaderEl = el.querySelector('.el-dialog__header')
+    // 弹窗
+    const dragDom = el.querySelector('.el-dialog')
+    // 给弹窗加上overflow auto;不然缩小时框内的标签可能超出dialog;
+    dragDom.style.overflow = 'auto'
+    // 清除选择头部文字效果
+    // dialogHeaderEl.onselectstart = new Function("return false");
+    // 头部加上可拖动cursor
+    dialogHeaderEl.style.cursor = 'move'
+    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
+    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
+    const moveDown = e => {
+      // 鼠标按下,计算当前元素距离可视区的距离
+      const disX = e.clientX - dialogHeaderEl.offsetLeft
+      const disY = e.clientY - dialogHeaderEl.offsetTop
+      // 获取到的值带px 正则匹配替换
+      let styL, styT
+      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
+      if (sty.left.includes('%')) {
+        styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
+        styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
+      } else {
+        styL = +sty.left.replace(/\px/g, '')
+        styT = +sty.top.replace(/\px/g, '')
+      }
+      document.onmousemove = function(e) {
+        // 通过事件委托,计算移动的距离
+        const l = e.clientX - disX
+        const t = e.clientY - disY
+        // 移动当前元素
+        dragDom.style.left = `${l + styL}px`
+        dragDom.style.top = `${t + styT}px`
+        // 将此时的位置传出去
+        // binding.value({x:e.pageX,y:e.pageY})
+      }
+      document.onmouseup = function(e) {
+        document.onmousemove = null
+        document.onmouseup = null
+      }
+    }
+    dialogHeaderEl.onmousedown = moveDown
+    // 当前宽高
+    let nowWidth = 0
+    // let nowHight = 0
+    // 双击头部全屏效果
+    dialogHeaderEl.ondblclick = e => {
+      if (isFullScreen === false) {
+        // nowHight = dragDom.clientHeight
+        nowWidth = dragDom.clientWidth
+        nowMarginTop = dragDom.style.marginTop
+        dragDom.style.left = 0
+        dragDom.style.top = 0
+        dragDom.style.height = '100VH'
+        dragDom.style.width = '100VW'
+        dragDom.style.marginTop = 0
+        isFullScreen = true
+        dialogHeaderEl.style.cursor = 'initial'
+        dialogHeaderEl.onmousedown = null
+      } else {
+        dragDom.style.height = 'auto'
+        dragDom.style.width = nowWidth + 'px'
+        dragDom.style.marginTop = nowMarginTop
+        isFullScreen = false
+        dialogHeaderEl.style.cursor = 'move'
+        dialogHeaderEl.onmousedown = moveDown
+      }
+    }
+    dragDom.onmousemove = function(e) {
+      // let moveE = e
+      if (
+        e.clientX > dragDom.offsetLeft + dragDom.clientWidth - 10 ||
+        dragDom.offsetLeft + 10 > e.clientX
+      ) {
+        dragDom.style.cursor = 'w-resize'
+      } else if (
+        el.scrollTop + e.clientY >
+        dragDom.offsetTop + dragDom.clientHeight - 10
+      ) {
+        dragDom.style.cursor = 's-resize'
+      } else {
+        dragDom.style.cursor = 'default'
+
+        dragDom.onmousedown = null
+      }
+      dragDom.onmousedown = e => {
+        const clientX = e.clientX
+        const clientY = e.clientY
+        const elW = dragDom.clientWidth
+        const elH = dragDom.clientHeight
+        const EloffsetLeft = dragDom.offsetLeft
+        const EloffsetTop = dragDom.offsetTop
+        dragDom.style.userSelect = 'none'
+        const ELscrollTop = el.scrollTop
+        // 判断点击的位置是不是为头部
+        if (
+          clientX > EloffsetLeft &&
+          clientX < EloffsetLeft + elW &&
+          clientY > EloffsetTop &&
+          clientY < EloffsetTop + 100
+        ) {
+          // 如果是头部在此就不做任何动作,以上有绑定dialogHeaderEl.onmousedown = moveDown;
+        } else {
+          document.onmousemove = function(e) {
+            // 移动时禁用默认事件
+            e.preventDefault()
+            // 左侧鼠标拖拽位置
+            if (clientX > EloffsetLeft && clientX < EloffsetLeft + 10) {
+              // 往左拖拽
+              if (clientX > e.clientX) {
+                dragDom.style.width = elW + (clientX - e.clientX) * 2 + 'px'
+              }
+              // 往右拖拽
+              if (clientX < e.clientX) {
+                if (dragDom.clientWidth < minWidth) {
+                  console.log()
+                } else {
+                  dragDom.style.width = elW - (e.clientX - clientX) * 2 + 'px'
+                }
+              }
+            }
+            // 右侧鼠标拖拽位置
+            if (
+              clientX > EloffsetLeft + elW - 10 &&
+              clientX < EloffsetLeft + elW
+            ) {
+              // 往左拖拽
+              if (clientX > e.clientX) {
+                if (dragDom.clientWidth < minWidth) {
+                  console.log()
+                } else {
+                  dragDom.style.width = elW - (clientX - e.clientX) * 2 + 'px'
+                }
+              }
+              // 往右拖拽
+              if (clientX < e.clientX) {
+                dragDom.style.width = elW + (e.clientX - clientX) * 2 + 'px'
+              }
+            }
+            // 底部鼠标拖拽位置
+            if (
+              ELscrollTop + clientY > EloffsetTop + elH - 20 &&
+              ELscrollTop + clientY < EloffsetTop + elH
+            ) {
+              // 往上拖拽
+              if (clientY > e.clientY) {
+                if (dragDom.clientHeight < minHeight) {
+                  console.log()
+                } else {
+                  dragDom.style.height = elH - (clientY - e.clientY) * 2 + 'px'
+                }
+              }
+              // 往下拖拽
+              if (clientY < e.clientY) {
+                dragDom.style.height = elH + (e.clientY - clientY) * 2 + 'px'
+              }
+            }
+          }
+          // 拉伸结束
+          document.onmouseup = function(e) {
+            document.onmousemove = null
+
+            document.onmouseup = null
+          }
+        }
+      }
+    }
+  }
+})
+
+// v-dialogDrag: 弹窗拖拽
+// Vue.directive('dialogDrag', {
+//   bind(el, binding, vnode, oldVnode) {
+//     const dialogHeaderEl = el.querySelector('.el-dialog__header')
+//     const dragDom = el.querySelector('.el-dialog')
+//     dialogHeaderEl.style.cursor = 'move'
+//
+//     // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
+//     const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
+//
+//     dialogHeaderEl.onmousedown = (e) => {
+//       // 鼠标按下,计算当前元素距离可视区的距离
+//       const disX = e.clientX - dialogHeaderEl.offsetLeft
+//       const disY = e.clientY - dialogHeaderEl.offsetTop
+//
+//       // 获取到的值带px 正则匹配替换
+//       let styL, styT
+//
+//       // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
+//       if (sty.left.includes('%')) {
+//         styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
+//         styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
+//       } else {
+//         styL = +sty.left.replace(/\px/g, '')
+//         styT = +sty.top.replace(/\px/g, '')
+//       }
+//
+//       document.onmousemove = function(e) {
+//         // 通过事件委托,计算移动的距离
+//         const l = e.clientX - disX
+//         const t = e.clientY - disY
+//
+//         // 移动当前元素
+//         dragDom.style.left = `${l + styL}px`
+//         dragDom.style.top = `${t + styT}px`
+//
+//         // 将此时的位置传出去
+//         // binding.value({x:e.pageX,y:e.pageY})
+//       }
+//
+//       document.onmouseup = function(e) {
+//         document.onmousemove = null
+//         document.onmouseup = null
+//       }
+//     }
+//   }
+// })

+ 413 - 0
src/views/reportManagement/profitGeneralLedger/index.vue

@@ -0,0 +1,413 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="货权方" prop="fCorpid">
+        <el-select
+          v-model="queryParams.fCorpid"
+          filterable
+          remote
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+          :remote-method="corpsRemoteMethod"
+          placeholder="请选择货权方"
+        >
+          <el-option
+            v-for="(dict, index) in fMblnoOptions"
+            :key="index.fId"
+            :label="dict.fName"
+            :value="dict.fId"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="提单号" prop="fMblno">
+        <el-input
+          v-model="queryParams.fMblno"
+          placeholder="请输入提单号"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="结算单位" prop="fToCorpid">
+        <el-select
+          v-model="queryParams.fToCorpid"
+          placeholder="请选择结算单位"
+          filterable
+          remote
+          clearable
+          style="width: 200px"
+          @keyup.enter.native="handleQuery"
+          :remote-method="corpsRemoteMethod"
+        >
+          <el-option
+            v-for="(dict, index) in fMblnoOptions"
+            :key="index.fId"
+            :label="dict.fName"
+            :value="dict.fId"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="货物名称" prop="fProductName">
+        <el-select
+          v-model="queryParams.fProductName"
+          filterable
+          remote
+          clearable
+          size="small"
+          :remote-method="goodsRemoteMethod"
+          @keyup.enter.native="handleQuery"
+          placeholder="请选择货物名称"
+        >
+          <el-option
+            v-for="(dict, index) in goodsOptions"
+            :key="index.fId"
+            :label="dict.fName"
+            :value="dict.fId"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="品牌" prop="fMarks">
+        <el-input
+          v-model="queryParams.fMarks"
+          placeholder="请输入品牌"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="结算状态" prop="fReconciliation">
+        <el-select
+          v-model="queryParams.fReconciliation"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        >
+          <el-option label="未收" value="0"/>
+          <el-option label="全部" value="1"/>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="费用状态" prop="fBillstatus">
+        <el-select
+          v-model="queryParams.fBillstatus"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        >
+          <el-option label="录入" value="0"/>
+          <el-option label="审核通过" value="1"/>
+
+        </el-select>
+      </el-form-item>
+      <el-form-item label="审核日期" prop="timeExamine">
+        <el-date-picker
+          v-model="queryParams.timeExamine"
+          type="daterange"
+          value-format="yyyy-MM-dd"
+          clearable
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          @keyup.enter.native="handleQuery">
+        </el-date-picker>
+      </el-form-item>
+
+      <el-form-item>
+        <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>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['warehouseBusiness:whgenleg:export']"
+        >导出</el-button>
+      </el-col>
+	  <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="receivableList" show-summary :summary-method="getSum">
+      <!-- <el-table-column type="selection" width="55" align="center" /> -->
+      <el-table-column type="index" label="行号" align="center" />
+      <el-table-column label="货权方" sortable align="center" prop="fName" width="220"/>
+      <el-table-column label="结算单位" sortable align="center" prop="fFeesName" width="220" />
+      <el-table-column label="提单号" sortable align="center" prop="fMblno" width="216" show-overflow-tooltip />
+      <el-table-column label="货物名称" align="center" prop="fProductName" show-overflow-tooltip/>
+      <el-table-column label="品牌" align="center" prop="fMarks" width="120"/>
+      <el-table-column label="审核日期" align="center" prop="fReviewDate">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.fReviewDate, "{y}-{m}-{d}") }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="应收金额" align="center" prop="fAmount" />
+      <el-table-column label="应付金额" align="center" prop="fStlamount"/>
+      <el-table-column label="利润" align="center" prop="nnfinished"/>
+
+
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      :page-sizes="[50,100, 200, 500, 1000]"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+import { listWhgenleg, getWhgenleg, delWhgenleg, addWhgenleg, updateWhgenleg, exportWhgenleg } from "@/api/reportManagement/receivable";
+import {listWarehouse} from "@/api/basicdata/warehouse";
+import {listArea} from "@/api/basicdata/area";
+import {listGoods} from "@/api/basicdata/goods";
+import {listCorps} from "@/api/basicdata/corps";
+
+export default {
+  name: "generalLedgerDr",
+  components: {
+  },
+  data() {
+    return {
+      // 货权方(客户数据)
+      fMblnoOptions: [],
+      // 贸易方式(数据字典),对应t_trademodels 字典
+      fTrademodeidOptions: [],
+      // 货物
+      goodsOptions: [],
+      // 仓库(仓库数据)
+      warehouseOptions: [],
+      kqhouseOptions: [],
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 库存总账表格数据
+      receivableList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 50,
+        fCorpid: null,
+        fMblno: null,
+        timeExamine: null,
+        fToCorpid: null,
+        fProductName: null,
+        fMarks: null,
+        fReconciliation: null,
+        fBillstatus: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        fMarks: [
+          { required: true, message: "唛头不能为空", trigger: "blur" }
+        ],
+      }
+    };
+  },
+  created() {
+    this.getList();
+    this.getDicts("data_trademodes").then((response) => {
+      this.fTrademodeidOptions = response.data;
+    });
+  },
+  methods: {
+    getSum(param){
+        const { columns, data } = param
+        const sums = []
+        columns.forEach((column, index) => {
+          if (index === 0) {
+            sums[index] = '总计'
+          } else if (index ===7  || index ===8 || index ===9 ) {
+            const values = data.map(item => Number(item[column.property]))
+            if (!values.every(value => isNaN(value))) {
+              sums[index] = values.reduce((prev, curr) => {
+                const value = Number(curr)
+                if (!isNaN(value)) {
+                  return prev + curr
+                } else {
+                  return prev
+                }
+              }, 0)
+            }
+          }
+        })
+        return sums
+      },
+
+    // 贸易方式(数据字典),对���t_trademodels 字典翻译
+    fTrademodeidFormat(row, column) {
+      return this.selectDictLabel(this.fTrademodeidOptions, row.fTrademodeid);
+    },
+    /* 远程模糊查询仓库 */
+    warehouseRemoteMethod(name) {
+      if (name == null || name === "") {
+        return false;
+      }
+      let queryParams = { pageNum: 1, pageSize: 10, fName: name };
+      listWarehouse(queryParams).then((response) => {
+        this.warehouseOptions = response.rows;
+      });
+    },
+    /* 远程模糊查询库区 */
+    kqhouseRemoteMethod(name) {
+      if (name == null || name === "") {
+        return false;
+      }
+      if (!this.queryParams.fWarehouseid) {
+        this.$message.error("请输入仓库!");
+        return false;
+      }
+
+      let queryParams = {
+        pageNum: 1,
+        pageSize: 10,
+        fWarehouseid: this.queryParams.fWarehouseid,
+        fName: name,
+      };
+      listArea(queryParams).then((response) => {
+        this.kqhouseOptions = response.rows;
+      });
+    },
+    /* 远程模糊查询商品 */
+    goodsRemoteMethod(name) {
+      if (name == null || name === "") {
+        return false;
+      }
+      let queryParams = { pageNum: 1, pageSize: 10, fName: name };
+      listGoods(queryParams).then((response) => {
+        this.goodsOptions = response.rows;
+      });
+    },
+    /* 远程模糊查询用户 */
+    corpsRemoteMethod(name) {
+      if (name == null || name === "") {
+        return false;
+      }
+      let queryParams = { pageNum: 1, pageSize: 10, fName: name };
+      listCorps(queryParams).then((response) => {
+        this.fMblnoOptions = response.rows;
+        this.KHblnoOptions = response.rows;
+      });
+    },
+    /** 查询库存总账列表 */
+    getList() {
+      this.loading = true;
+      this.getDicts('approval_process').then((response) => {
+        this.options = response.data
+      })
+      listWhgenleg(this.queryParams).then(response => {
+        this.receivableList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        fAccyear: null,
+        fId: null,
+        fAccmonth: null,
+        fCorpid: null,
+        fMblno: null,
+        fOriginalbillno: null,
+        fWarehouseLocationid: null,
+        fGoodsid: null,
+        fTrademodeid: null,
+        fPreqty: null,
+        fPregrossweight: null,
+        fPrenetweight: null,
+        fQtyd: null,
+        fVolumnd: null,
+        fGrossweightd: null,
+        fNetweightd: null,
+        fVolumnc: null,
+        fQtyc: null,
+        fQtyblc: null,
+        fGrossweightc: null,
+        fNetweightc: null,
+        fGrossweightblc: null,
+        fNetweightblc: null,
+        fCntrno: null,
+        fStatus: "0",
+        delFlag: null,
+        createBy: null,
+        fMarks: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: null,
+        remark: null
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加库存总账";
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.fAccyear != null) {
+            updateWhgenleg(this.form).then(response => {
+              this.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addWhgenleg(this.form).then(response => {
+              this.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      const queryParams = this.queryParams;
+      this.$confirm('是否确认导出所有库存总账数据项?', "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(function() {
+          return exportWhgenleg(queryParams);
+        }).then(response => {
+          this.download(response.msg);
+        })
+    }
+  }
+};
+</script>

+ 1 - 0
src/views/warehouseBusiness/inStock/index.vue

@@ -405,6 +405,7 @@
 
     <!-- 新增或修改仓库主(出入库)对话框 -->
     <el-dialog
+      v-dialogDrag
       :visible.sync="open"
       :close-on-click-modal="false"
       @close='addCloseDialog'

+ 10 - 1
vue.config.js

@@ -72,7 +72,16 @@ module.exports = {
         symbolId: 'icon-[name]'
       })
       .end()
-
+    config.module
+      .rule('iconfont')
+      .test(/\.(png|jpg|gif)$/)
+      .include.add(resolve('src/assets/iconfont'))
+      .end()
+      .use('url-loader')
+      .loader('url-loader')
+      .options({
+      })
+      .end()
     config
       .when(process.env.NODE_ENV !== 'development',
         config => {