新增入库

src/combination/MainForm.vue

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <el-form label-width="88px" ref="form" :model="form">
+      <el-row>
+        <el-col v-for="(item,index) in searchdata" :span="item.span" :key="index">
+          <el-form-item :label="item.name" :label-width="item.labelSize + 'px'" :rules="[item.rules]">
+            <el-select v-if="item.form == 1" v-model="form[item.label]" :style="{ width: item.width + 'px' }">
+              <el-option v-for="(item,index) in item.data"
+              :key="index"
+              :label="item.label"
+              :value="item.value"/>
+            </el-select>
+            <el-input v-if="item.form == 2" v-model="form[item.label]" :style="{ width: item.width + 'px' }"></el-input>
+            <el-input v-if="item.form == 4" type="textarea" v-model="form[item.label]" :style="{ width: item.width + 'px' }"></el-input>
+            <el-date-picker v-if="item.form == 3" v-model="form[item.label]" :style="{ width: item.width + 'px' }" type="date" placeholder="选择日期" format="yyyy - MM - dd" value-format="yyyy-MM-dd">
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+      </el-row>
+        <div v-if="show">
+          <el-row>
+            <el-col v-for="(item,index) in hidedata" :span="item.span" :key="index">
+              <el-form-item :label="item.name" :label-width="item.labelSize + 'px'"
+                            :rules="[item.rules]">
+
+                <el-select v-if="item.form == 1" v-model="form[item.label]" :style="{ width: item.width + 'px' }">
+                  <el-option v-for="(item,index) in item.data"
+                             :key="index"
+                             :label="item.label"
+                             :value="item.value"/>
+                </el-select>
+                <el-input v-if="item.form == 2" v-model="form[item.label]" :style="{ width: item.width + 'px' }"></el-input>
+                <el-input v-if="item.form == 4" type="textarea" v-model="form[item.label]" :style="{ width: item.width + 'px' }"></el-input>
+                <el-date-picker v-if="item.form == 3" v-model="form[item.label]" :style="{ width: item.width + 'px' }" type="date" placeholder="选择日期" format="yyyy - MM - dd" value-format="yyyy-MM-dd">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </div>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MainForm',
+  props:['searchdata','hidedata','display','queryParms','form','data','show'],
+  data() {
+    return{
+    }
+  },
+  created() {
+console.log(this.show)
+  },
+  methods:{
+    // hide() {
+    //   this.$emit('handleClick')
+    // },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/combination/listComponent.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    {{listStyle}}
     <div style="width: 100%;height: 40px;">
       <div style="margin: 0 12px;float: left;">
         <el-button
@@ -33,13 +34,16 @@
       @selection-change="handleSelectionChange"
       :row-class-name="rowClassName"
     >
+      <el-table-column type="selection" width="55" align="center"/>
       <el-table-column
         v-for="(item,index) in setRowList"
         :key="index"
         :prop="item.label"
         :label="item.name"
         :width="item.width"
+        :fixed="item.fixed"
         align="center"
+        sortable
       >
         <template slot-scope="scope">
           <span v-if="item.name === '操作'">
@@ -126,6 +130,11 @@
         <el-button type="primary" @click="save()">确 定</el-button>
       </span>
     </el-dialog>
+<!--    {{listStyle}}-->
+    <br>
+    {{queryList.columnList}}
+    <br>
+    {{setRowList}}
   </div>
 </template>
 
@@ -134,20 +143,34 @@ import { addSet, resetModule } from "@/api/system/set";
 import Cookies from "js-cookie";
 export default {
   name: 'listComponent',
-  props: ['tableData', 'listStyle','queryList','customButton'],
+  props: ['tableData', 'listStyle','queryList','customButton','arrow'],
   data() {
     return {
-      setRowList:this.queryList.columnList.length !== 0?this.queryList.columnList:this.listStyle,
+      setRowList:this.queryList.columnList,
       showSetting: false,
       allCheck: false,
     }
   },
+  watch:{
+    // 'queryList.columnList':(newValue,oldValue){
+    //   console.log(setRowList)
+    //   // this.initData()
+    // }
+    queryList: function (newValue,oldValue) {
+      console.log(newValue,oldValue)
+      this.setRowList = newValue.columnList
+    },
+  },
   created() {
     console.log(this.listStyle)
     console.log(this.queryList)
     console.log(this.queryList.columnList.length)
   },
   methods: {
+    initData(){
+      this.setRowList = this.queryList.columnList
+      console.log(this.setRowList)
+    },
     //行号设置
     rowClassName({row, rowIndex}) {
       console.log(row,rowIndex)
@@ -234,8 +257,17 @@ export default {
     //选择
     handleSelectionChange(selection){
       this.$emit('selectionbox', selection)
-    }
-  }
+    },
+    handleQuery(){
+
+    },
+    resetQuery(){
+
+    },
+    handleClick(){
+      this.$emit('handleClick')
+    },
+  },
 }
 </script>
 

src/main.js

@@ -23,6 +23,8 @@ import RightToolbar from "@/components/RightToolbar"
 //自定义列表组件
 import listComponent from '@/combination/listComponent'
 Vue.component('listComponent', listComponent)
+import MainForm from '@/combination/MainForm'
+Vue.component('MainForm', MainForm)
 import draggable from "vuedraggable";
 Vue.component('draggable', draggable)
 // 全局方法挂载

src/views/components/MainForm.vue

@@ -1,46 +0,0 @@
-<template>
-  <div>
-    <el-form label-width="88px" ref="form" :model="form">
-      <el-row>
-        <el-col v-for="(item,index) in searchdata" :span="item.span" :key="index">
-          <el-form-item :label="item.name" v-if="index <= display" :label-width="item.labelSize + 'px'"
-                        :rules="[item.rules]">
-            <el-select v-if="item.form == 1" v-model="form[item.label]" :style="{ width: item.width + 'px' }"></el-select>
-            <el-input v-if="item.form == 2" v-model="form[item.label]" :style="{ width: item.width + 'px' }"></el-input>
-            <el-input v-if="item.form == 4" type="textarea" v-model="form[item.label]" :style="{ width: item.width + 'px' }"></el-input>
-            <el-date-picker v-if="item.form == 3" v-model="form[item.label]" :style="{ width: item.width + 'px' }" type="date" placeholder="选择日期" format="yyyy - MM - dd" value-format="yyyy-MM-dd">
-            </el-date-picker>
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'MainForm',
-  props:['searchdata','display','queryParms','form'],
-  data() {
-    return{
-    }
-  },
-  created() {
-    console.log(this.searchdata)
-  },
-  methods:{
-    hide() {
-      // if (this.display == this.searchdata.length + 1){
-      //   this.display = 3
-      // }else {
-      //   this.display = this.searchdata.length + 1
-      // }
-      this.$emit('handleClick')
-    },
-  }
-}
-</script>
-
-<style scoped>
-
-</style>

src/views/project/index.vue

@@ -153,7 +153,7 @@
 </template>
 
 <script>
-import MainForm from '@/views/components/MainForm'
+import MainForm from '@/combination/MainForm'
 import MainList from '@/views/components/MainList'
 import Cookies from 'js-cookie'
 import { addSet, resetModule, select } from '@/api/system/set'

src/views/warehouse/inStock/index.vue

@@ -0,0 +1,558 @@
+<template>
+  <div class="app-container">
+    <div v-if="MainTable == false">
+      <MainForm
+        ref="MainForm"
+        :searchdata="formOption"
+        :hidedata="hidedata"
+        :display="display"
+        :form="queryParms"
+        :show="show"
+        @handleClick="handleClick"
+      />
+      <div style="width:40%;margin-left:60%;margin-bottom: -10%">
+        <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-button
+          @click="handleClick"
+          :icon="arrow"
+          size="mini"
+        >展开</el-button
+        >
+      </div>
+      <listComponent
+        style="clear:both"
+        v-if="waitFor"
+        :tableData="tableData"
+        @selectionbox="selectionbox"
+        @see="viewMethod"
+        @modify="modification"
+        @deletion="deletion"
+        @buttonList="buttonList"
+        @showSearch="showSearch"
+        @getList="getList"
+        :customButton="customButton"
+        :arrow="arrow"
+        :listStyle="listStyle"
+        :queryList="queryList"/>
+    </div>
+    <div v-if="MainTable == true">
+      <MainForm
+        ref="MainForm"
+        :searchdata="detailOption"
+        :hidedata="hideDetail"
+        :display="display"
+        :form="queryParms"
+        :show="show = true"
+        @handleClick="handleClick"
+      />
+      <list-component
+        v-if="waitFor"
+        :tableData="detailData"
+        @selectionbox="selectionbox"
+        @see="viewMethod"
+        @modify="modification"
+        @deletion="deletion"
+        @buttonList="buttonList"
+        @showSearch="showSearch"
+        @getList="getList"
+        :customButton="detailButton"
+        :listStyle="mainStyle"
+        :queryList="detailList"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import { select } from '@/api/system/set'
+import Cookies from 'js-cookie'
+export default {
+  name: 'inStock',
+  data(){
+    return{
+      MainTable:false,
+      show: false,
+      arrow:'el-icon-arrow-up',
+      queryList:{
+        tableName:'入库主表',
+        columnList:[]
+      },
+      detailList:{
+        tableName:'仓库入库详情',
+        columnList:[]
+      },
+      //判断自定义列是否有值再渲染组件
+      waitFor:false,
+      display:3,
+      queryParms:{},
+      //主页面默认显示4个表单数据
+      formOption:[
+        {
+          span:6,
+          label: 'fNumber',
+          name:"系统编号",
+          form:2,
+          width:200,
+          labelSize:'80',
+          rules:''
+        },
+        {
+          span:6,
+          label: 'fNumber',
+          name:"项目名称",
+          form:2,
+          width:200,
+          labelSize:'80',
+          rules:''
+        },
+        {
+          span:6,
+          label: 'fNumber',
+          name:"客户名称",
+          form:1,
+          width:200,
+          labelSize:'80',
+          rules:''
+        },
+        {
+          span:6,
+          label: 'fNumber',
+          name:"金额",
+          form:2,
+          width:200,
+          labelSize:'80',
+          rules:''
+        },
+
+      ],
+      //隐藏表单数据
+      hidedata:[
+        {
+          span:6,
+          label: 'fNumber',
+          name:"申请日期",
+          form:3,
+          width:200,
+          labelSize:'80',
+          rules:''
+        },
+        {
+          span:6,
+          label: 'fNumber',
+          name:"申请人",
+          form:2,
+          width:200,
+          labelSize:'80',
+          rules:''
+        },
+        {
+          span:6,
+          label: 'fNumber',
+          name:"备注",
+          form:2,
+          width:200,
+          labelSize:'80',
+          rules:''
+        },
+      ],
+      //表名称
+      tableData:[],
+      //从表表名
+      detailData:[],
+      //传输表
+      mainStyle:[],
+      //表数据
+      listStyle: [
+        {
+          surface: "1",
+          label: "fLineNumber",
+          name: "序号",
+          checked: 0,
+          width: 100,
+          onabort:''
+        },{
+          surface: "2",
+          label: "fMaterial1",
+          name: "申请编号",
+          checked: 0,
+          width: 100,
+        },{
+          surface: "3",
+          label: "fMaterial2",
+          name: "项目名称",
+          checked: 0,
+          width: 200,
+          operation:1
+        },{
+          surface: "4",
+          label: "fMaterial2",
+          name: "客户名称",
+          checked: 0,
+          width: 200,
+          operation:1
+        },{
+          surface: "5",
+          label: "fMaterial2",
+          name: "金额",
+          checked: 0,
+          width: 200,
+          operation:1
+        },{
+          surface: "6",
+          label: "fMaterial2",
+          name: "申请日期",
+          checked: 0,
+          width: 200,
+          operation:1
+        },{
+          surface: "7",
+          label: "fMaterial2",
+          name: "申请人",
+          checked: 0,
+          width: 200,
+          operation:1
+        },{
+          surface: "8",
+          label: "fMaterial2",
+          name: "状态",
+          checked: 0,
+          width: 200,
+          operation:1
+        },{
+          surface: "9",
+          label: "fMaterial2",
+          name: "审核日期",
+          checked: 0,
+          width: 200,
+          operation:1
+        },{
+          surface: "10",
+          label: "fMaterial2",
+          name: "备注",
+          checked: 0,
+          width: 200,
+          operation:1
+        },{
+          surface: "11",
+          label: "fMaterial2",
+          name: "操作",
+          checked: 0,
+          width: 200,
+          operation:1
+        }
+
+      ],
+      //从表数据
+      detailStyle: [
+        {
+          surface: "1",
+          label: "fLineNumber",
+          name: "序号",
+          checked: 0,
+          width: 100,
+          onabort:''
+        },{
+          surface: "2",
+          label: "fMaterial1",
+          name: "品名",
+          checked: 0,
+          width: 100,
+          changeable:1,
+          data:[]
+        },{
+          surface: "3",
+          label: "fMaterial2",
+          name: "单价",
+          checked: 0,
+          width: 200,
+          operation:2,
+          changeable:2,
+        },{
+          surface: "4",
+          label: "fMaterial3",
+          name: "数量",
+          checked: 0,
+          width: 200,
+          operation:2,
+          changeable:2,
+        },{
+          surface: "5",
+          label: "fMaterial4",
+          name: "计量单位",
+          checked: 0,
+          width: 200,
+          changeable:1,
+          operation:2
+        },{
+          surface: "6",
+          label: "fMaterial5",
+          name: "库区",
+          checked: 0,
+          width: 200,
+          operation:2,
+          changeable:1
+        },{
+          surface: "7",
+          label: "fMaterial6",
+          name: "金额",
+          checked: 0,
+          width: 200,
+          operation:1,
+          changeable: 2
+        },{
+          surface: "8",
+          label: "fMaterial7",
+          name: "状态",
+          checked: 0,
+          width: 200,
+          operation:1,
+          changeable: 1,
+          data:[
+            {
+            label:'正常',
+            value:'0'
+          },
+            {
+            label: '停用',
+            value: '1'
+            }
+          ]
+        },{
+          surface: "9",
+          label: "fMaterial8",
+          name: "审核日期",
+          checked: 0,
+          width: 200,
+          operation:1,
+          changeable: 3
+        },{
+          surface: "10",
+          label: "fMaterial9",
+          name: "备注",
+          checked: 0,
+          width: 200,
+          operation:1,
+          changeable: 2
+        },{
+          surface: "11",
+          label: "fMaterial10",
+          name: "操作",
+          checked: 0,
+          width: 200,
+          operation:2
+        }
+
+      ],
+      //详情主表
+      detailOption:[
+        {
+          span:6,
+          label: 'fNumber',
+          name:"系统编号",
+          form:2,
+          width:200,
+          labelSize:'80',
+          rules:''
+        },
+        {
+          span:6,
+          label: 'fNumber',
+          name:"供应商",
+          form:1,
+          width:200,
+          labelSize:'80',
+          rules:'',
+          data:[{
+            label:'盛源嘉',
+            value:1
+          }]
+        },
+        {
+          span:6,
+          label: 'fNumber',
+          name:"库管员",
+          form:2,
+          width:200,
+          labelSize:'80',
+          rules:''
+        },
+        {
+          span:6,
+          label: 'fNumber',
+          name:"仓库",
+          form:1,
+          width:200,
+          labelSize:'80',
+          rules:''
+        },
+      ],
+      //详情主表隐藏
+      hideDetail:[
+        {
+          span:6,
+          label: 'fNumber',
+          name:"入库日期",
+          form:3,
+          width:200,
+          labelSize:'80',
+          rules:''
+        },
+        {
+          span:6,
+          label: 'fNumber',
+          name:"付款单位",
+          form:1,
+          width:200,
+          labelSize:'80',
+          rules:''
+        },
+        {
+          span:6,
+          label: 'fNumber',
+          name:"备注",
+          form:4,
+          width:200,
+          labelSize:'80',
+          rules:''
+        },
+
+      ],
+      //按钮
+      customButton:[
+        {
+          type:'primary',
+          size:'small',
+          icon:'el-icon-edit',
+          name:'新增',
+          disabled:false,
+        },{
+          type:'danger',
+          size:'small',
+          icon:'el-icon-edit',
+          name:'修改',
+          disabled:true
+        }
+      ],
+      detailButton:[
+        {
+          type:'primary',
+          size:'small',
+          icon:'el-icon-edit',
+          name:'录入',
+          disabled:false,
+        },{
+          type:'danger',
+          size:'small',
+          icon:'el-icon-edit',
+          name:'修改',
+          disabled:true
+        }
+      ]
+    }
+  },
+  created() {
+    this.getRow()
+  },
+  methods:{
+    handleClick(){
+      this.show = !this.show
+    },
+    handleQuery(){
+
+    },
+    resetQuery(){
+
+    },
+    //查询列数据
+    getRow() {
+      this.data = {
+        tableName: this.queryList.tableName,
+        userId: Cookies.get("userName"),
+      };
+      select(this.data).then((res) => {
+        console.log(res)
+        if (res.data.length != 0) {
+          this.queryList.columnList = res.data.filter((e) => e.checked == 0);
+          this.queryList.columnList = res.data;
+          this.queryList.columnList = this.queryList.columnList.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;
+          }, []);
+          this.waitFor = true
+        }else {
+          this.waitFor = true
+          this.queryList.columnList = this.listStyle
+        }
+        console.log(this.getRowList)
+      });
+    },
+    //选择框
+    selectionbox(selection){
+      console.log(selection)
+    },
+    //查看
+    viewMethod(scope){
+      console.log(scope)
+    },
+    //修改
+    modification(scope){
+      console.log(scope)
+    },
+    //删除
+    deletion(scope){
+      console.log(scope)
+    },
+    //所以按钮
+    buttonList(row){
+      console.log(row)
+      console.log(this.detailStyle)
+      if(row.name == '新增'){
+        this.detailList.columnList = this.detailStyle
+        console.log(this.detailStyle)
+        this.MainTable = true
+      }else if(row.name == '录入'){
+        this.detailData.push({
+          fLineNumber:null,
+          fMaterial1:null,
+          fMaterial2:null,
+          fMaterial3:null,
+          fMaterial4:null,
+          fMaterial5:null,
+          fMaterial6:null,
+          fMaterial7:null,
+          fMaterial8:null,
+          fMaterial9:null,
+          fMaterial10:null,
+        })
+      }
+    },
+    // 显示搜索条件、点击后会调用此方法
+    showSearch(){
+      console.log('到我了')
+    },
+    //点击刷新会调用此方法
+    getList(){
+      console.log('到我了2')
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>