zoukankan      html  css  js  c++  java
  • 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=" 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=" 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>
  • 相关阅读:
    从零开始整SpringBoot-工具与插件
    算法与数据结构学习笔记(目录)
    牛客小白月赛30(个人题解)
    Manjaro 上手使用简明教程
    C++函数:std::tie 详解
    Educational Codeforces Round 99 (Rated for Div. 2) (A ~ F)个人题解
    VS Code C++ 项目快速配置模板
    【字符串算法】字典树详解
    关于算法竞赛某些常见基础错误
    Teacher Ma专场
  • 原文地址:https://www.cnblogs.com/tang0125/p/13074317.html
Copyright © 2011-2022 走看看