AVue賦值{{}}

<template><!-- vue的模板元素標籤 -->
    <div class="execution">
        <basic-container>
            <avue-crud               <!-- avue的表格標籤 -->
                       ref="crud"    <!-- 在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子組件上,引用就指向組件 -->
                       :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">    <!-- 卡槽expand模板是:表格展開摺疊行佈局。要在tableOption對象的js中搭配expand:true使用;傳入的scope爲當前行的對象,可通過scope.row獲取  -->
                聯繫電話:{{scope.row.lxdh}}  ,產品費用:{{scope.row.cpfy}} ,產品銷售淨額:{{scope.row.xsje}}
              </template>
              <template slot="menuLeft" slot-scope="scope">    <!-- 卡槽menuLeft模板是:表格上方菜單欄按鈕。  -->
                <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">    <!-- 卡槽menu模板是:表格內右側邊操作菜單欄按鈕。  -->
                <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                  <!-- 使用element彈窗對話框方式,對提交操作按鈕佈局  -->
                  title="提交複覈申請"       <!-- 彈窗標題  -->
                  :visible.sync="dialogFormVisibleSbumit"      <!-- 是否顯示 Dialog,支持 .sync 修飾符  -->
                  width="40%"                   <!-- 彈出的對話框寬度  -->
                  append-to-body="true">        <!-- Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必須指定該屬性並賦值爲 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>

 

href="{{scope.row.logisticsResultfile}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章