vue列表&添加&修改

  1 <template>
  2     <el-main>
  3 
  4         <el-form :inline="true" :model="queryForm" class="demo-form-inline">
  5             <el-form-item label="单号">
  6                 <el-input v-model="queryForm.no" placeholder="单号"></el-input>
  7             </el-form-item>
  8             <el-form-item label="商品名称">
  9                 <el-select v-model="queryForm.gid" placeholder="商品名称">
 10                     <el-option :label="goodes.gname" :value="goodes.id" v-for="goodes in goodesList"></el-option>
 11 
 12                 </el-select>
 13             </el-form-item>
 14             <el-form-item>
 15                 <el-button type="primary" @click="onSubmit">查询</el-button>
 16             </el-form-item>
 17         </el-form>
 18 
 19         <el-button size="mini" @click="add()">添加</el-button>
 20         <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
 21             <el-table-column type="selection" width="55">
 22             </el-table-column>
 23 
 24             <el-table-column prop="id" label="#" width="80">
 25             </el-table-column>
 26 
 27             <el-table-column prop="no" label="单号" width="80">
 28             </el-table-column>
 29 
 30             <el-table-column label="日期" width="80">
 31                 <template slot-scope="scope">{{ scope.row.date }}</template>
 32             </el-table-column>
 33 
 34             <el-table-column prop="warehourse" label="仓库" width="80">
 35             </el-table-column>
 36 
 37             <el-table-column prop="type" label="类型" width="80">
 38             </el-table-column>
 39 
 40             <el-table-column prop="gname" label="商品名称" width="80">
 41             </el-table-column>
 42 
 43             <el-table-column prop="price" label="单价" width="80">
 44             </el-table-column>
 45 
 46             <el-table-column prop="amount" label="数量" width="80">
 47             </el-table-column>
 48 
 49             <el-table-column prop="sum" label="总金额" width="80">
 50             </el-table-column>
 51 
 52             <el-table-column prop="name" label="供应商名称" width="80">
 53             </el-table-column>
 54 
 55             <el-table-column prop="contacts" label="联系人" width="80">
 56             </el-table-column>
 57 
 58             <el-table-column prop="telephone" label="联系电话" width="80">
 59             </el-table-column>
 60 
 61             <el-table-column label="操作">
 62                 <template slot-scope="scope">
 63                     <el-button size="mini" @click="handleEdit(scope.row.id)">编辑</el-button>
 64                     <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
 65                 </template>
 66             </el-table-column>
 67 
 68         </el-table>
 69 
 70         <el-pagination :current-page="queryForm.pageNum" :page-count="pageCount" @current-change="gotoPage" layout="prev, pager, next">
 71         </el-pagination>
 72     </el-main>
 73 </template>
 74 
 75 <script>
 76     export default {
 77         data() {
 78             return {
 79                 goodesList: [],
 80                 tableData: [],
 81                 queryForm: {
 82                     pageNum: 1,
 83                     pageSize: 3
 84                 },
 85                 pageCount: 1
 86             }
 87         },
 88         methods: {
 89             //添加
 90             add(){
 91                 this.$router.push("/update/0");
 92             },
 93             listGoodes() {
 94                 this.axios.get("http://localhost:8090/goodes/listGoodes").then(res => {
 95                     this.goodesList = res.data;
 96                 })
 97             },
 98             handleSelectionChange() {
 99 
100             },
101             //删除
102             handleDelete(id) {
103 
104             },
105             //修改
106             handleEdit(id) {
107                 this.$router.push("/update/"+id);
108             },
109             gotoPage(pageNum) {
110                 this.queryForm.pageNum = pageNum;
111                 this.list();
112             },
113             onSubmit() {
114                 this.queryForm.pageNum = 1;
115                 this.list();
116             },
117             list() {
118                 this.axios.get("http://localhost:8090/record/list", {
119                     params: this.queryForm
120                 }).then(res => {
121                     this.tableData = res.data.list;
122                     this.queryForm.pageNum = res.data.pageNum;
123                     this.pageCount = res.data.pages;
124                 })
125             }
126         },
127         created() {
128             this.list();
129             this.listGoodes();
130         }
131     }
132 </script>
133 
134 <style scoped>
135 
136 </style>

  1 <template>
  2     <el-main>
  3         <el-form ref="form" :model="form" label-width="80px">
  4           
  5           <el-form-item label="单号">
  6             <el-input v-model="form.no"></el-input>
  7           </el-form-item>
  8           
  9           <el-form-item label="类型">
 10             <el-select v-model="form.type" placeholder="请选择类型">
 11               <el-option label="入库" value="入库"></el-option>
 12               <el-option label="出库" value="出库"></el-option>
 13             </el-select>
 14           </el-form-item>
 15          
 16           <el-form-item label="日期">
 17             <el-col :span="11">
 18               <el-date-picker type="date" placeholder="选择日期" v-model="form.date" style="width: 100%;"></el-date-picker>
 19             </el-col>
 20           </el-form-item>
 21           
 22           <el-form-item label="仓库">
 23             <el-input v-model="form.warehourse"></el-input>
 24           </el-form-item>
 25           
 26           <el-form-item label="商品名称">
 27               <el-select v-model="form.gid" placeholder="商品名称">
 28                   <el-option :label="goodes.gname" :value="goodes.id" v-for="goodes in goodesList"></el-option> 
 29               </el-select>
 30           </el-form-item>
 31          
 32          <el-form-item label="单价">
 33            <el-input v-model="form.price"></el-input>
 34          </el-form-item>
 35          
 36          <el-form-item label="数量">
 37            <el-input v-model="form.amount"></el-input>
 38          </el-form-item>
 39          
 40          <el-form-item label="总金额">
 41            <el-input v-model="form.sum"></el-input>
 42          </el-form-item>
 43          
 44          <el-form-item label="供应商名称">
 45              <el-select v-model="form.sid" placeholder="商品名称">
 46                  <el-option :label="sup.name" :value="sup.id" v-for="sup in supplierList"></el-option> 
 47              </el-select>
 48          </el-form-item>
 49          
 50           
 51           <el-form-item>
 52             <el-button type="primary" @click="onSubmit">立即创建</el-button>
 53             <el-button>取消</el-button>
 54           </el-form-item>
 55         </el-form>
 56     </el-main>
 57 </template>
 58 
 59 <script>
 60     export default {
 61         data(){
 62             return{
 63                 supplierList:[],
 64                 goodesList:[],
 65                 form:{
 66                     
 67                 }
 68             }
 69         },
 70         methods:{
 71             onSubmit(){
 72                 this.axios.post("http://localhost:8090/record/save",this.form).then(res=>{
 73                     this.$router.push("/Record");
 74                 })
 75             },
 76             listSupplier(){
 77                 this.axios.get("http://localhost:8090/supplier/listSupplier").then(res => {
 78                     this.supplierList = res.data;
 79                 })
 80             },
 81             listGoodes() {
 82                 this.axios.get("http://localhost:8090/goodes/listGoodes").then(res => {
 83                     this.goodesList = res.data;
 84                 })
 85             },
 86         },
 87         created() {
 88             this.listGoodes();
 89             this.listSupplier();
 90             let params=this.$route.params;
 91             if(params.id>0){
 92                 this.axios.get("http://localhost:8090/record/selectOne",{params:{id:params.id}}).then(res=>{
 93                     this.form=res.data;
 94                 })
 95             }
 96         }
 97     }
 98 </script>
 99 
100 <style scoped>
101 
102 </style>