完善组件和采购页面

src/combination/formComponent.vue

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <el-form v-model="form" style="display:flex;flex-wrap: wrap">
+      <el-form-item
+        v-for="(item,index) in formOption" :key="index" v-if="(index+1) <= inDex"
+        :prop="item.label"
+        :label="item.name"
+        :label-width="item.labelSize + 'px'"
+      >
+        <el-input v-model="form[item.label]" v-if="item.inputType == 2" :style="{ width: item.width + 'px' }" size="small"></el-input>
+        <el-select v-model="form[item.label]" slot="prepend" placeholder="请选择" v-else-if="item.inputType == 1">
+          <el-option v-for="(item,index) in dataList[item.label]" :key="index" :label="item.fName" :value="item.fId"></el-option>
+        </el-select>
+        <el-input
+          v-if="item.inputType == 4"
+          type="textarea"
+          autosize
+          placeholder="请输入内容"
+          v-model="form[item.label]">
+        </el-input>
+        <div style="width: 100%;display:flex;" v-if="item.inputType == 5">
+          <el-input v-model="number" placeholder="请输入内容" @input="spellNumbers(item.label)"></el-input>
+          <span style="padding-left: 10px;padding-right: 10px">至</span>
+          <el-input v-model="numBer" placeholder="请输入内容" @input="spellNumbers(item.label)"></el-input>
+        </div>
+        <el-date-picker
+          v-if="item.inputType == 3"
+          v-model="form[item.label]"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期">
+        </el-date-picker>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+export default {
+  name: 'formComponent',
+  props:['formOption','dataList','inDex'],
+  data() {
+    return {
+      form:{},
+      numBer:'',
+      number:'',
+    };
+  },
+  methods: {
+    returnToForm(){
+      this.$emit('returnToForm', this.form)
+    },
+    spellNumbers(name){
+      this.form[name] = [this.number,this.numBer]
+    },
+    bug(){
+      console.log('到这里')
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/combination/listComponent.vue

@@ -1,6 +1,5 @@
 <template>
   <div>
-    {{listStyle}}
     <div style="width: 100%;height: 40px;">
       <div style="margin: 0 12px;float: left;">
         <el-button
@@ -27,6 +26,29 @@
           @queryTable="getList"
         ></right-toolbar>
       </div>
+      <div style="margin-right:10px;float: right">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-search"
+          size="mini"
+          @click="feedback('搜索')"
+        >搜索</el-button>
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-search"
+          @click="feedback('重置')"
+          size="mini"
+        >重置</el-button>
+        <el-button
+          type="info"
+          plain
+          icon="el-icon-search"
+          @click="feedback('展开')"
+          size="mini"
+        >展开</el-button>
+      </div>
     </div>
     <el-table
       :data="tableData"
@@ -36,7 +58,7 @@
     >
       <el-table-column type="selection" width="55" align="center"/>
       <el-table-column
-        v-for="(item,index) in setRowList"
+        v-for="(item,index) in queryList.columnList"
         :key="index"
         :prop="item.label"
         :label="item.name"
@@ -127,14 +149,9 @@
       <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>
+        <el-button type="primary" @click="save">确 定</el-button>
       </span>
     </el-dialog>
-<!--    {{listStyle}}-->
-    <br>
-    {{queryList.columnList}}
-    <br>
-    {{setRowList}}
   </div>
 </template>
 
@@ -143,10 +160,9 @@ import { addSet, resetModule } from "@/api/system/set";
 import Cookies from "js-cookie";
 export default {
   name: 'listComponent',
-  props: ['tableData', 'listStyle','queryList','customButton','arrow'],
+  props: ['tableData', 'listStyle','queryList','customButton','arrow','setRowList'],
   data() {
     return {
-      setRowList:this.queryList.columnList,
       showSetting: false,
       allCheck: false,
     }
@@ -158,7 +174,7 @@ export default {
     // }
     queryList: function (newValue,oldValue) {
       console.log(newValue,oldValue)
-      this.setRowList = newValue.columnList
+      this.queryList.columnList = newValue.columnList
     },
   },
   created() {
@@ -168,24 +184,24 @@ export default {
   },
   methods: {
     initData(){
-      this.setRowList = this.queryList.columnList
-      console.log(this.setRowList)
+      this.queryList.columnList = this.queryList.columnList
+      console.log(this.queryList.columnList)
     },
     //行号设置
     rowClassName({row, rowIndex}) {
-      console.log(row,rowIndex)
+      // console.log(row,rowIndex)
       //把每一行的索引放进row.id
       row.fLineNumber = rowIndex+1;
-      console.log(row.fLineNumber)
+      // console.log(row.fLineNumber)
     },
     //列设置全选
     allChecked() {
       if (this.allCheck == true) {
-        this.setRowList.map((e) => {
+        this.queryList.columnList.map((e) => {
           return (e.checked = 0);
         });
       } else {
-        this.setRowList.map((e) => {
+        this.queryList.columnList.map((e) => {
           return (e.checked = 1);
         });
       }
@@ -201,15 +217,16 @@ export default {
     //保存列设置
     save() {
       this.showSetting = false;
-      this.data = {
+      let data = {
         tableName: this.queryList.tableName,
         userId: Cookies.get("userName"),
-        sysTableSetList: this.setRowList,
+        sysTableSetList: this.queryList.columnList,
       };
-      addSet(this.data).then((res) => {
+      addSet(data).then((res) => {
         if (res.code == 200) {
+          console.log(res)
           this.showSetting = false;
-          this.getRowList = this.setRowList.filter((e) => e.checked == 0);
+          this.queryList.columnList = this.queryList.columnList.filter((e) => e.checked == 0);
         }
       });
     },
@@ -222,7 +239,7 @@ export default {
       resetModule(this.data).then((res) => {
         if (res.code == 200) {
           this.showSetting = false;
-          this.setRowList = this.listStyle;
+          this.queryList.columnList = this.listStyle;
           console.log(this.getRowList)
         }
       });
@@ -234,6 +251,10 @@ export default {
     getList(){
       this.$emit('getList')
     },
+    //搜索、重置、展开
+    feedback(res){
+      this.$emit('feedback',res)
+    },
     //所有按钮
     buttonList(row){
       this.$emit('buttonList', row)

src/main.js

@@ -25,6 +25,8 @@ import listComponent from '@/combination/listComponent'
 Vue.component('listComponent', listComponent)
 import MainForm from '@/combination/MainForm'
 Vue.component('MainForm', MainForm)
+import formComponent from '@/combination/formComponent'
+Vue.component('formComponent', formComponent)
 import draggable from "vuedraggable";
 Vue.component('draggable', draggable)
 // 全局方法挂载

src/views/purchaseRequest/index.vue

@@ -0,0 +1,275 @@
+<template>
+  <div class="app-container">
+    <formComponent
+    :formOption="formOption"
+    :dataList="dataList"
+    :inDex="inDex"
+    ref="avatar"
+    @returnToForm="returnToForm"
+    />
+    <listComponent
+      :tableData="tableData"
+      @selectionbox="selectionbox"
+      @see="viewMethod"
+      @modify="modification"
+      @deletion="deletion"
+      @buttonList="buttonList"
+      @showSearch="showSearch"
+      @feedback="feedback"
+      @getList="getList"
+      :customButton="customButton"
+      :listStyle="listStyle"
+      :queryList="queryList"
+      :setRowList="setRowList"
+    />
+  </div>
+</template>
+
+<script>
+import {select} from '@/api/system/set'
+import Cookies from 'js-cookie'
+import formComponent from '@/combination/formComponent'
+export default {
+  name: 'index',
+  data(){
+    return{
+      dataList:{},
+      inDex:4,
+      tableData:[
+        {fMaterial1:'11111'}
+      ],
+      listStyle:[
+        {
+          surface: "1",
+          label: "fLineNumber",
+          name: "序号",
+          checked: 0,
+          width: 100,
+          onabort:''
+        },{
+          surface: "2",
+          label: "fMaterial1",
+          name: "申请编号",
+          checked: 0,
+          width: 100,
+          onabort:'this.value=this.value.replace(/[^_a-zA-Z]/g,\'\')'
+        },{
+          surface: "3",
+          label: "fMaterial1",
+          name: "项目名称",
+          checked: 0,
+          width: 100,
+          onabort:''
+        },{
+          surface: "4",
+          label: "fMaterial1",
+          name: "客户名称",
+          checked: 0,
+          width: 100,
+          onabort:''
+        },{
+          surface: "5",
+          label: "fMaterial1",
+          name: "金额",
+          checked: 0,
+          width: 100,
+          onabort:''
+        },{
+          surface: "6",
+          label: "fMaterial1",
+          name: "申请日期",
+          checked: 0,
+          width: 100,
+          onabort:''
+        },{
+          surface: "7",
+          label: "fMaterial1",
+          name: "申请人",
+          checked: 0,
+          width: 100,
+          onabort:''
+        },{
+          surface: "8",
+          label: "fMaterial1",
+          name: "审核日期",
+          checked: 0,
+          width: 100,
+          onabort:''
+        },{
+          surface: "9",
+          label: "fMaterial1",
+          name: "备注",
+          checked: 0,
+          width: 100,
+          onabort:''
+        },{
+          surface: "10",
+          label: "fMaterial1",
+          name: "操作",
+          checked: 0,
+          width: 160,
+          operation:'1',
+          onabort:''
+        }
+      ],
+      queryList:{
+        tableName:'采购申请',
+        columnList:[]
+      },
+      setRowList:[],
+      customButton:[
+        {
+          type:'primary',
+          size:'mini',
+          icon:'el-icon-edit',
+          name:'录入',
+          disabled:false,
+        },{
+          type:'warning',
+          size:'mini',
+          icon:'el-icon-edit',
+          name:'修改',
+          disabled:false,
+        },{
+          type:'primary',
+          size:'mini',
+          icon:'el-icon-edit',
+          name:'导出',
+          disabled:false,
+        },{
+          type:'primary',
+          size:'mini',
+          icon:'el-icon-edit',
+          name:'复制新增',
+          disabled:false,
+        }
+      ],
+      formOption:[
+        {
+          span:6,
+          label: 'fNumber',
+          name:"申请编号",
+          inputType:2,
+          width:200,
+          labelSize:'80',
+          rules:''
+        },{
+          span:6,
+          label: 'fNumber',
+          name:"项目名称",
+          inputType:2,
+          width:200,
+          labelSize:'80',
+          rules:''
+        },{
+          span:6,
+          label: 'fNumber',
+          name:"客户名称",
+          inputType:2,
+          width:200,
+          labelSize:'80',
+          rules:''
+        },{
+          span:6,
+          label: 'fNumber',
+          name:"申请人",
+          inputType:2,
+          width:200,
+          labelSize:'80',
+          rules:''
+        },{
+          span:6,
+          label: 'fNumberasda',
+          name:"金额",
+          inputType:5,
+          width:200,
+          labelSize:'80',
+          rules:''
+        },{
+          span:6,
+          label: 'fNumber',
+          name:"申请日期",
+          inputType:3,
+          width:200,
+          labelSize:'80',
+          rules:''
+        }
+      ],
+    }
+  },
+  created() {
+    this.getRow()
+  },
+  methods:{
+    //查询列数据
+    getRow() {
+      let data = {
+        tableName: this.queryList.tableName,
+        userId: Cookies.get("userName"),
+      };
+      select(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.setRowList = res.data
+          this.queryList.columnList = this.queryList.columnList.filter((e) => e.checked == 0);
+          // this.waitFor = true
+        }else {
+          // this.waitFor = true
+          this.queryList.columnList = this.listStyle
+          console.log(this.queryList.columnList)
+        }
+      });
+    },
+    returnToForm(row){
+      console.log(row,111)
+    },
+    //查看
+    viewMethod(scope){
+      console.log(scope)
+    },
+    //修改
+    modification(scope){
+      console.log(scope)
+    },
+    //删除
+    deletion(scope){
+      console.log(scope)
+    },
+    //选择框
+    selectionbox(selection){
+      console.log(selection)
+    },
+    //所以按钮
+    buttonList(row){
+      console.log(row)
+    },
+    // 显示搜索条件、点击后会调用此方法
+    showSearch(){
+      console.log('到我了')
+    },
+    //搜索、重置、展开
+    feedback(res){
+      console.log(res)
+      if (res == '展开'){
+        if (this.inDex == 4){
+          this.inDex = this.formOption.length
+        }else {
+          this.inDex = 4
+        }
+      }else if (res == '搜索'){
+        console.log(this.$refs.avatar.form)
+      }
+    },
+    //点击刷新会调用此方法
+    getList(){
+      console.log('到我了2')
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>