avue表单常规使用说明——vue

短命女 2024-04-18 19:57 71阅读 0赞

avue是基于element二次封装的框架

<template>
        <div class="execution">
            <basic-container>
                <avue-crud               
                           ref="crud"    
                           :page="page"  
                           :data="tableData"   
                           :permission="permissionList"
                           :table-loading="tableLoading"  
                           :option="tableOption"          
                           @on-load="getList"
                           @selection-change="selectionChange"     
                           @search-change="searchChange"         
                           @refresh-change="refreshChange"    
                           @row-update="handleUpdate"    
                           @row-save="handleSave"    
                           @row-del="rowDel">    
                  <template slot="expand" slot-scope="scope">    
                    联系电话：{
       {scope.row.lxdh}}  ,产品费用：{
       {scope.row.cpfy}} ,产品销售净额：{
       {scope.row.xsje}}
                  </template>
                  <template slot="menuLeft" slot-scope="scope">    
                    <el-button type="primary"
                               icon="el-icon-plus"
                               size="small"
                               @click.stop="rowAdd(scope.row)">添加交易</el-button>
                    <el-button type="primary"
                               icon="el-icon-upload2"
                               size="small"
                               plain
                               @click.stop="importExcelDialog">批量导入</el-button>
                    <el-button type="primary"
                               icon="el-icon-sell"
                               size="small"
                               plain
                               @click.stop="rowLotDialog(1,scope.row)">提交申请</el-button>
                    <el-button type="primary"
                               icon="el-icon-tickets"
                               size="small"
                               plain
                               @click.stop="rowLotDialog(2,scope.row)">我要复核</el-button>
                    <el-button type="warning"
                               icon="el-icon-download"
                               size="small"
                               plain
                               @click.stop="exportExcel">导 出</el-button>
                  </template>
                  <template slot="menu" slot-scope="scope">    
                    <el-button icon="el-icon-edit"
                               size="small" type="text"
                               @click.stop="rowUpdate(scope.row,scope.index)">编辑</el-button>
                    <el-button icon="el-icon-delete"
                               size="small" type="text"
                               @click.stop="rowDel(scope.row,scope.index)">删除</el-button>
                    <el-button icon="el-icon-sell"
                               size="small" type="text"
                               @click.stop="rowDialog(1,scope.row,scope.index)">提交</el-button>
                    <el-button icon="el-icon-tickets"
                               size="small" type="text"
                               @click.stop="rowDialog(2,scope.row,scope.index)">复核</el-button>
                    <el-dialog                  
                      title="提交复核申请"       
                      :visible.sync="dialogFormVisibleSbumit"      
                      width="40%"                   
                      append-to-body="true">        
                      <el-form :model="form">            
                        <h3>当前已选择待复核交易共<span>{
       {selectcpobjs.length}}</span>笔，详细交易如下：</h3>
                        <div style="margin-top:20px;" >
                          <el-tooltip
                            class="item"
                            effect="dark"
                            v-for="(item,i) of selectcpobjs" :key="i"
                            placement="top-start">
                            <div slot="content">
                              产品名称:{
       {selectcpobjs[i].cpmc}} , 客户名称:{
       {selectcpobjs[i].hymc}} ，<br/>
                              成交金额:{
       {selectcpobjs[i].cjje}} , 产品定价:{
       {selectcpobjs[i].cpdj}} ,<br/>
                            </div>
                            <el-button>{
       {selectcpobjs[i].cpmc.length>9?selectcpobjs[i].cpmc.slice(0,8)+'...':selectcpobjs[i].cpmc}}</el-button>
                          </el-tooltip>
                        </div>
                        <el-form-item>
                          <el-select v-model="fhrmc" placeholder="请选择复核人">
                            <el-option
                              v-for="item in fhrList"
                              :key="item.userId"
                              :label="item.username"
                              :value="item.userId"></el-option>
                          </el-select>
                        </el-form-item>
                      </el-form>
                      <span slot="footer" class="dialog-footer">
                         <el-button @click="cancelDialog">取 消</el-button>
                         <el-button type="primary" @click="toAudit(1)">发 送</el-button>
                        </span>
                    </el-dialog>
                    <el-dialog title="复核" :visible.sync="dialogFormVisibleTickets" width="40%" append-to-body="true">
                      <el-form :model="form">
                        <div>
                          <h3>当前需审核产品简要信息如下：</h3>
                          <div style="margin-top:20px;" >
                            <el-tooltip
                              class="item"
                              effect="dark"
                              v-for="(item,i) of selectcpobjs" :key="i"
                              placement="top-start">
                              <div slot="content">
                                产品名称:{
       {selectcpobjs[i].cpmc}} , 客户名称:{
       {selectcpobjs[i].hymc}} ，<br/>
                                成交金额:{
       {selectcpobjs[i].cjje}} , 产品定价:{
       {selectcpobjs[i].cpdj}} ,<br/>
                              </div>
                              <el-button>{
       {selectcpobjs[i].cpmc}}</el-button>
                            </el-tooltip>
                          </div>
                          <div style="margin-top:20px;">
                            <el-radio-group v-model="radio" @change="setTextArea">
                              <el-radio-button label="1">同意</el-radio-button>
                              <el-radio-button label="2">不同意</el-radio-button>
                            </el-radio-group>
                            <div style="margin-top:20px;">
                              <el-input
                                type="textarea"
                                :autosize="{ minRows: 5, maxRows: 10}"
                                v-model="textarea"
                                ref="tex">
                              </el-input>
                            </div>
                          </div>
                        </div>
                        <div style="height:10px;"></div>
                      </el-form>
                      <span slot="footer" class="dialog-footer">
                         <el-button type="primary" @click="doAudit(radio)">提 交</el-button>
                         <el-button @click="cancelDialog">取 消</el-button>
                        </span>
                    </el-dialog>
                  </template>
                  <template slot-scope="scope" slot="jkhsjlListForm">
                    <div style="height:135px;">
                      <el-row v-for="(item,i) of jkhsjlListArr" :key="i">
                        <el-col :span="5">
                          <el-input
                            :placeholder=i+1
                            maxlength="18"
                            minlength="1"
                            v-model="index.val[i]">
                          </el-input>
                        </el-col>
                        <el-col :span="1" align="center">--</el-col>
                        <el-col :span="5">
                          <el-input
                            placeholder="回输日期"
                            v-model="hsrq.val[i]">
                          </el-input>
                        </el-col>
                        <el-col :span="1" align="center">--</el-col>
                        <el-col :span="10">
                          <el-input
                            maxlength="18"
                            minlength="1"
                            placeholder="说明"
                            v-model="sm.val[i]">
                          </el-input>
                        </el-col>
                        <el-col :span="1">
                          <el-link @click="jkhsjlListDelete(i)" icon="el-icon-remove-outline" :underline="false" style="margin-left:4px;">
                          </el-link>
                        </el-col>
                        <el-col :span="1">
                          <el-link @click="jkhsjlListAdd()" icon="el-icon-circle-plus-outline" :underline="false">
                          </el-link>
                        </el-col>
                      </el-row>
                    </div>
                  </template>
                </avue-crud>
            </basic-container>
        </div>
    </template>