Merge branch 'purchaseDev' into 'dev'

Purchase dev

See merge request new-business/drp-web!27

src/components/MyCollapse/collapse.vue

@@ -0,0 +1,123 @@
+<template>
+  <transition
+    :name="transitionName"
+    @before-enter="collapseBeforeEnter"
+    @enter="collapseEnter"
+    @after-enter="collapseAfterEnter"
+    @before-leave="collapseBeforeLeave"
+    @leave="collapseLeave"
+    @after-leave="collapseAfterLeave">
+    <slot></slot>
+  </transition>
+</template>
+
+<script>
+/**
+ * 元素折叠过度效果
+ */
+export default {
+  name: 'CollapseTransition',
+  props: {
+    transitionName: {
+      type: String,
+      default: 'collapse-transition'
+    }
+  },
+  data () {
+    return {
+      oldPaddingTop: '',
+      oldPaddingBottom: '',
+      oldOverflow: ''
+    }
+  },
+  methods: {
+    collapseBeforeEnter (el) {
+      // console.log('11, collapseBeforeEnter');
+      this.oldPaddingBottom = el.style.paddingBottom;
+      this.oldPaddingTop = el.style.paddingTop;
+      // 过渡效果开始前设置元素的maxHeight为0，让元素maxHeight有一个初始值
+      el.style.paddingTop = '0';
+      el.style.paddingBottom = '0';
+      el.style.maxHeight = '0';
+    },
+    collapseEnter (el, done) {
+      // console.log('22, collapseEnter');
+      //
+      this.oldOverflow = el.style.overflow;
+      let elHeight = el.scrollHeight;
+      // 过渡效果进入后将元素的maxHeight设置为元素本身的高度，将元素maxHeight设置为auto不会有过渡效果
+      if (elHeight > 0) {
+        el.style.maxHeight = elHeight + 'px';
+      } else {
+        el.style.maxHeight = '0';
+      }
+      el.style.paddingTop = this.oldPaddingTop;
+      el.style.paddingBottom = this.oldPaddingBottom;
+
+      el.style.overflow = 'hidden';
+      // done();
+      let onTransitionDone = function () {
+        done();
+        // console.log('enter onTransitionDone');
+        el.removeEventListener('transitionend', onTransitionDone, false);
+        el.removeEventListener('transitioncancel', onTransitionDone, false);
+      };
+      // 绑定元素的transition完成事件，在transition完成后立即完成vue的过度动效
+      el.addEventListener('transitionend', onTransitionDone, false);
+      el.addEventListener('transitioncancel', onTransitionDone, false);
+    },
+    collapseAfterEnter (el) {
+      // console.log('33, collapseAfterEnter');
+      // 过渡效果完成后恢复元素的maxHeight
+      el.style.maxHeight = '';
+      el.style.overflow = this.oldOverflow;
+    },
+
+    collapseBeforeLeave (el) {
+      // console.log('44, collapseBeforeLeave', el.scrollHeight);
+
+      this.oldPaddingBottom = el.style.paddingBottom;
+      this.oldPaddingTop = el.style.paddingTop;
+      this.oldOverflow = el.style.overflow;
+
+      el.style.maxHeight = el.scrollHeight + 'px';
+      el.style.overflow = 'hidden';
+    },
+    collapseLeave (el, done) {
+      // console.log('55, collapseLeave', el.scrollHeight);
+
+      if (el.scrollHeight !== 0) {
+        el.style.maxHeight = '0';
+        el.style.paddingBottom = '0';
+        el.style.paddingTop = '0';
+      }
+      // done();
+      let onTransitionDone = function () {
+        done();
+        // console.log('leave onTransitionDone');
+        el.removeEventListener('transitionend', onTransitionDone, false);
+        el.removeEventListener('transitioncancel', onTransitionDone, false);
+      };
+      // 绑定元素的transition完成事件，在transition完成后立即完成vue的过度动效
+      el.addEventListener('transitionend', onTransitionDone, false);
+      el.addEventListener('transitioncancel', onTransitionDone, false);
+    },
+    collapseAfterLeave (el) {
+      // console.log('66, collapseAfterLeave');
+      el.style.maxHeight = '';
+      el.style.overflow = this.oldOverflow;
+      el.style.paddingBottom = this.oldPaddingBottom;
+      el.style.paddingTop = this.oldPaddingTop;
+
+      this.oldOverflow = this.oldPaddingBottom = this.oldPaddingTop = '';
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.collapse-transition-enter-active,
+.collapse-transition-leave-active{
+  transition: height .3s ease-in-out, padding .3s ease-in-out, max-height .3s ease-in-out;
+}
+</style>

src/views/purchase/DemandSummary/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div id="demandSummary">
+    采购需求汇总
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+  
+</style>

src/views/purchase/MaterialClassDivision/add.vue

@@ -225,12 +225,12 @@
     </el-form>
 
     <div class="btn_group">
-      <el-col :span="1.5">
+      <el-col :span="1.5" style="margin: 0 10px;">
         <el-button type="primary" size="small" plain @click="save" v-if="pageStu == 'add' || pageStu == 'edit'">保存</el-button>
       </el-col>
-      <el-col :span="1.5" style="margin: 0 10px;">
+      <!-- <el-col :span="1.5" style="margin: 0 10px;">
         <el-button type="primary" size="small" plain @click="submit" v-if="pageStu == 'edit'">提交</el-button>
-      </el-col>
+      </el-col> -->
       <el-col :span="1.5">
         <el-button size="small" plain @click="back">返回</el-button>
       </el-col>

src/views/purchase/MaterialClassDivision/index.vue

@@ -52,6 +52,17 @@
             </el-form-item>
           </el-col>
           <el-col :span="1.5">
+            <el-form-item label="" label-width="20px">
+              <el-button type="primary" size="small" icon="el-icon-search" plain>搜索</el-button>
+              <el-button size="small" icon="el-icon-refresh" plain>重置</el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <CollapseTransition>
+          <div v-show="expanded">
+        <el-row :gutter="10">
+          <el-col :span="1.5">
             <el-form-item label="物料三级大类编码">
               <el-select v-model="queryParams.materialClassifyThree" size="small" style="width: 200px" clearable placeholder="请选择">
                 <el-option
@@ -99,6 +110,9 @@
               </el-select>
             </el-form-item>
           </el-col>
+        </el-row>
+
+        <el-row :gutter="10">
           <el-col :span="1.5">
             <el-form-item label="物料编码">
               <el-select v-model="queryParams.material" size="small" style="width: 200px" clearable placeholder="请选择">
@@ -147,6 +161,9 @@
               </el-select>
             </el-form-item>
           </el-col>
+        </el-row>
+
+        <el-row :gutter="10">
           <el-col :span="1.5">
             <el-form-item label="生产厂家">
             <el-input
@@ -169,14 +186,11 @@
             />
             </el-form-item>
           </el-col>
-          <el-col :span="1.5">
-            <el-form-item label="" label-width="20px">
-              <el-button type="primary" size="small" icon="el-icon-search" plain>搜索</el-button>
-              <el-button size="small" icon="el-icon-refresh" plain>重置</el-button>
-            </el-form-item>
-          </el-col>
         </el-row>
+        </div>
+      </CollapseTransition>
       </el-form>
+      <el-divider class="lines"><i style="cursor: pointer;" :class="expanded?'el-icon-arrow-up':'el-icon-arrow-down'" @click="drop"></i></el-divider>
 
       <el-card>
         <div class="btn_grooup">
@@ -263,14 +277,17 @@
 
 <script>
 import Add from './add.vue'
+import CollapseTransition from '@/components/MyCollapse/collapse.vue'
 import {getDivisionList, delDivision} from '@/api/purchase/basic.js'
 export default {
   name: 'MaterialClassDivision',
   components: {
-    Add
+    Add,
+    CollapseTransition
   },
   data() {
     return {
+      expanded: false,
       // 页面配置
       isList: true,
       // 页面状态
@@ -355,6 +372,9 @@ export default {
       console.log(`当前页: ${val}`);
       this.queryParams.pageNum = val
       this.getList(this.queryParams)
+    },
+    drop() {
+      this.expanded = !this.expanded
     }
   }
 }
@@ -371,4 +391,7 @@ export default {
   display: flex;
   justify-content: flex-end;
 }
+.lines {
+  margin-top: 0;
+}
 </style>

src/views/purchase/PurchaseDemandList/add.vue

@@ -469,12 +469,12 @@
   </el-form>
 
     <div class="btn_group">
-      <el-col :span="1.5">
+      <el-col :span="1.5" style="margin: 0 10px;">
         <el-button type="primary" size="small" plain @click="save" v-if="pageStu == 'add' || pageStu == 'edit'">保存</el-button>
       </el-col>
-      <el-col :span="1.5" style="margin: 0 10px;">
+      <!-- <el-col :span="1.5" style="margin: 0 10px;">
         <el-button type="primary" size="small" plain @click="submit" v-if="pageStu == 'edit'">提交</el-button>
-      </el-col>
+      </el-col> -->
       <el-col :span="1.5">
         <el-button size="small" plain @click="back">返回</el-button>
       </el-col>

src/views/purchase/PurchaseDemandList/index.vue

@@ -52,6 +52,16 @@
             </el-form-item>
           </el-col>
           <el-col :span="1.5">
+            <el-form-item label="" label-width="20px">
+              <el-button type="primary" size="small" icon="el-icon-search" plain>搜索</el-button>
+              <el-button size="small" icon="el-icon-refresh" plain>重置</el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      <CollapseTransition>
+        <div v-show="expanded">
+        <el-row :gutter="10">
+          <el-col :span="1.5">
             <el-form-item label="单据类型">
               <el-select v-model="queryParams.threeName" size="small" style="width: 200px" clearable placeholder="请选择">
                 <el-option
@@ -99,6 +109,9 @@
               </el-select>
             </el-form-item>
           </el-col>
+        </el-row>
+
+        <el-row :gutter="10">
           <el-col :span="1.5">
             <el-form-item label="业务类型">
               <el-select v-model="queryParams.billType" size="small" style="width: 200px" clearable placeholder="请选择">
@@ -145,14 +158,11 @@
             />
             </el-form-item>
           </el-col>
-          <el-col :span="1.5">
-            <el-form-item label="" label-width="20px">
-              <el-button type="primary" size="small" icon="el-icon-search" plain>搜索</el-button>
-              <el-button size="small" icon="el-icon-refresh" plain>重置</el-button>
-            </el-form-item>
-          </el-col>
         </el-row>
+        </div>
+      </CollapseTransition>
       </el-form>
+      <el-divider class="lines"><i style="cursor: pointer;" :class="expanded?'el-icon-arrow-up':'el-icon-arrow-down'" @click="drop"></i></el-divider>
 
       <el-card>
         <div class="btn_grooup">
@@ -234,14 +244,17 @@
 
 <script>
 import Add from './add.vue'
+import CollapseTransition from '@/components/MyCollapse/collapse.vue'
 import {getDemandList, delDemand, downLoadDemand} from '@/api/purchase/purchaseDemand.js'
 export default {
   name: 'PurchaseDemandList',
   components: {
-    Add
+    Add,
+    CollapseTransition
   },
   data() {
     return {
+      expanded: false,
       // 页面配置
       isList: true,
       // 页面状态
@@ -367,6 +380,9 @@ export default {
       console.log(`当前页: ${val}`);
       this.queryParams.pageNum = val
       this.getList(this.queryParams)
+    },
+    drop() {
+      this.expanded = !this.expanded
     }
   }
 }
@@ -383,4 +399,7 @@ export default {
   display: flex;
   justify-content: flex-end;
 }
+.lines {
+  margin-top: 0;
+}
 </style>

src/views/purchase/deliveryAddress/add.vue

@@ -141,12 +141,12 @@
     </el-form>
 
     <div class="btn_group">
-      <el-col :span="1.5">
+      <el-col :span="1.5" style="margin: 0 10px;">
         <el-button type="primary" size="small" plain @click="save" v-if="pageStu == 'add' || pageStu == 'edit'">保存</el-button>
       </el-col>
-      <el-col :span="1.5" style="margin: 0 10px;">
+      <!-- <el-col :span="1.5" style="margin: 0 10px;">
         <el-button type="primary" size="small" plain @click="submit" v-if="pageStu == 'edit'">提交</el-button>
-      </el-col>
+      </el-col> -->
       <el-col :span="1.5">
         <el-button size="small" plain @click="back">返回</el-button>
       </el-col>

src/views/purchase/deliveryAddress/index.vue

@@ -15,7 +15,6 @@
               </el-select>
             </el-form-item>
           </el-col>
-
           <el-col :span="1.5">
             <el-form-item label="仓库档案名称">
               <el-select v-model="queryParams.warehouseCode" size="small" style="width: 200px" clearable placeholder="请选择">
@@ -28,7 +27,6 @@
               </el-select>
             </el-form-item>
           </el-col>
-
           <el-col :span="1.5">
             <el-form-item label="收货仓库编码">
               <el-input
@@ -39,7 +37,6 @@
             />
             </el-form-item>
           </el-col>
-
           <el-col :span="1.5">
             <el-form-item label="收货仓库名称">
               <el-input
@@ -50,7 +47,17 @@
             />
             </el-form-item>
           </el-col>
+          <el-col :span="1.5">
+            <el-form-item label="" label-width="20px">
+              <el-button type="primary" size="small" icon="el-icon-search" plain>搜索</el-button>
+              <el-button size="small" icon="el-icon-refresh" plain>重置</el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
 
+        <CollapseTransition>
+          <div v-show="expanded">
+        <el-row :gutter="10">
           <el-col :span="1.5">
             <el-form-item label="物料分类">
               <el-select v-model="queryParams.materialClassify" size="small" style="width: 200px" clearable placeholder="请选择">
@@ -99,7 +106,9 @@
             />
             </el-form-item>
           </el-col>
+        </el-row>
 
+        <el-row :gutter="10">
           <el-col :span="1.5">
             <el-form-item label="备注">
             <el-input
@@ -136,15 +145,11 @@
               </el-select>
             </el-form-item>
           </el-col>
-
-          <el-col :span="1.5">
-            <el-form-item label="" label-width="20px">
-              <el-button type="primary" size="small" icon="el-icon-search" plain>搜索</el-button>
-              <el-button size="small" icon="el-icon-refresh" plain>重置</el-button>
-            </el-form-item>
-          </el-col>
         </el-row>
+        </div>
+      </CollapseTransition>
       </el-form>
+      <el-divider class="lines"><i style="cursor: pointer;" :class="expanded?'el-icon-arrow-up':'el-icon-arrow-down'" @click="drop"></i></el-divider>
 
       <el-card>
         <div class="btn_grooup">
@@ -230,14 +235,17 @@
 
 <script>
 import Add from './add.vue'
+import CollapseTransition from '@/components/MyCollapse/collapse.vue'
 import {getAddressList, delAddress} from '@/api/purchase/deliveryAddress.js'
 export default {
   name: 'deliveryAddress',
   components: {
-    Add
+    Add,
+    CollapseTransition
   },
   data() {
     return {
+      expanded: false,
       // 页面配置
       isList: true,
       // 页面状态
@@ -325,6 +333,9 @@ export default {
       console.log(`当前页: ${val}`);
       this.queryParams.pageNum = val
       this.getList(this.queryParams)
+    },
+    drop() {
+      this.expanded = !this.expanded
     }
   }
 }
@@ -341,4 +352,7 @@ export default {
   display: flex;
   justify-content: flex-end;
 }
+.lines {
+  margin-top: 0;
+}
 </style>