saber/src/views/measure/interimPay.vue

<!--  -->
<template>
   <div style="height: 100%" class="flexStar">
    <div class="boxswai" style="width: 50%; padding-left: 0px">
      <div class="boxnei" style="display: flex; flex-direction: column">
        <avue-crud :data="data"
        ref="crud"
             :option="option"
             :page.sync="page"
             v-model="form"
        
              @on-load="onLoad">
              <template slot="menuLeft">
                <span style="font-weight: bold;"> 系统中期支付项列表</span>
               
              </template>
              <template slot="menuRight">
                <el-button type="primary" size="small"    icon="el-icon-plus" @click="handleAdd">添加中期支付项</el-button>
              </template>

         <!-- 合同公式 -->
        <template
            slot-scope="{type}"
            slot="key11Form"
          >
            <div class="flexStar">
              <el-input :disabled="true" v-model="form.key11" style="width: 70%;margin-right: 10px;"></el-input>
                <el-link type="primary" @click="handleaddFormula">添加公式</el-link>
                <el-link type="primary" class="marleft10">删除公式</el-link>
            </div>
          </template>
          <template
            slot-scope="{type}"
            slot="key12Form"
          >
            <div class="flexStar">
              <el-input :disabled="true" v-model="form.key12" style="width: 70%;margin-right: 10px;"></el-input>
                <el-link type="primary" @click="handleaddFormula">添加公式</el-link>
                <el-link type="primary" class="marleft10">删除公式</el-link>
            </div>
          </template>
          <template
            slot-scope="{type}"
            slot="key13Form"
          >
            <div class="flexStar">
              <el-input :disabled="true" v-model="form.key13" style="width: 70%;margin-right: 10px;"></el-input>
                <el-link type="primary" @click="handleaddFormula">添加公式</el-link>
                <el-link type="primary" class="marleft10">删除公式</el-link>
            </div>
          </template>
         
        </avue-crud>
       <!-- 添加公式弹窗 -->
       <el-dialog
                title="添加公式"
                :visible.sync="addFormuladialog"
                append-to-body
                width="60%"
                :before-close="formuladialogClose">
               
                <avue-crud :data="fordata"
                  :option="foroption"
                  :page.sync="forpage"
                  @row-click="rowClick"
                  @on-load="foronLoad">
                  <template slot="menuLeft">
                    <div class="flex" style="align-items: center;">
                      <span style="white-space: nowrap;"> 公式分类：</span>
                      <el-select v-model="forType" placeholder="请选择">
                            <el-option
                              v-for="item in forOptions"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                      </el-select>
                    </div>
                  </template>
                  <template #radio="{row}">
                    <el-radio v-model="selectRow"
                              :label="row.$index">{{ row.$index+1 }}</el-radio>
                  </template>

                </avue-crud>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="addFormuladialog = false">取 消</el-button>
                  <el-button type="primary" @click="addFormuladialog = false">确 定</el-button>
                </span>
       </el-dialog>
      
      </div>
    </div>

    <div
      class="boxswai"
      style="width: 50%; padding-left: 0px; padding-right: 0px"
    >
    <div class="boxnei">

      <form id="inputForm" action="" method="post" class="form-horizontal">
        <h4>详情信息</h4>
          <table class="table-form" style="width: 100%;">
              <tbody>
                <tr>
                  <td class="tit" width="20%">支付项编号：</td>
                  <td id="code">100章</td>
                  <td class="tit" width="20%">支付项名称：</td>
                  <td id="itemName">100章</td>
              </tr>
              <tr>
                  <td class="tit" width="20%">支付项类型：</td>
                  <td id="itemType">100章</td>
                  <td class="tit" width="20%">是否为扣款项：</td>
                  <td id="negative">否</td>
              </tr>
              <tr>
                  <td class="tit" width="20%">是否合计项：</td>
                  <td id="sumItem">否</td>
                  <td class="tit" width="20%">是否显示百分比：</td>
                  <td id="showPercent">是</td>
              </tr>
              <tr>
                  <td class="tit" width="20%">是否手动输入：</td>
                  <td id="useHand">否</td>
                  <td class="tit" width="20%">排序号：</td>
                  <td id="orderNum">1</td>
              </tr>
              <tr>
                  <td class="tit" width="20%">合同计算公式名称：</td>
                  <td colspan="3" id="contractCalcName">章清单合同原总金额</td>
              </tr>
              <tr>
                  <td class="tit" width="20%">变更计算公式名称：</td>
                  <td colspan="3" id="alterationCalcName">章清单变更金额</td>
              </tr>
              <tr>
                  <td class="tit" width="20%">本期计算公式名称：</td>
                  <td colspan="3" id="calcName">章清单本期完成金额</td>
              </tr>
              <tr>
                  <td class="tit" width="10%">备注：</td>
                  <td colspan="3" id="remark"></td>
              </tr>
          </tbody></table>

      </form>
    
      <div class="totalbox">
        <avue-crud :data="totaldata" :option="totaloption" >
          <template slot="menuLeft">
            <span style="font-weight: bold;margin-right: 5px;">汇总项</span>
              <el-link type="primary" size="small"
                        icon="el-icon-plus"
                        @click="addTotal">添加汇总项</el-link>
            </template>
        </avue-crud>
      </div>
    </div>
    </div>
    <!-- 添加汇总项弹窗 -->
    <el-dialog
      append-to-body
      title="添加汇总项"
      :visible.sync="tatoldialogVisible"
      width="50%"
      :before-close="handleTatolClose">
        <avue-crud :data="tadddata"
        :option="taddoption"
         >
        
      </avue-crud>
      <span slot="footer" class="dialog-footer">
        <el-button @click="tatoldialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="tatoldialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
   </div>
  </template>
  
  <script >
  export default {
  data () {
    return {
      page: {
        pageSize: 20,
        pagerCount: 5
      },
      form:{},
      data: [],
      option: {
        height: 'auto',
        refreshBtn:false,
        columnBtn:false,
        addBtn:false,
        tip: false,
        border: true,
        index: true,
        dialogWidth: 1000,
        calcHeight: 30,
        addBtnText:'新增支付项',
        menuWidth: 140,
        
        dialogClickModal: false,
        column: [
          { span: 24,
            labelWidth: 130,
            label: '支付项编号',
            prop: 'key1'
          },
          { span: 24,
            labelWidth: 130,
            label: '支付项名称',
            prop: 'key2',
            rules: [{
              required: true,
              message: "请输入名称",
              trigger: "blur"
            }]
          },
          { span: 24,
            labelWidth: 130,
            label: '支付项类型',
            prop: 'key3',
            type: "select",
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=table_template_type",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
            dataType: "number",
            rules: [{
              required: true,
              message: "选择类型",
              trigger: "blur"
            }]
          },
          { span: 24,
            labelWidth: 130,
            label: '合同计算公式名称',
            prop: 'key11',
            disabled:true,
            hide: true, 
            
          },
          { span: 24,
            labelWidth: 130,
            label: '变更计算公式名称',
            prop: 'key12',
            disabled:true,
            hide: true, 
          },
          { span: 24,
            labelWidth: 130,
            label: '本期计算公式名称',
            prop: 'key13',
            disabled:true,
            hide: true, 
          },
          { span: 24,
            labelWidth: 130,
            label: '是否为扣款项',
            prop: 'key4',
            type: "select",
            
            dicData: [
                {
                  label: "否",
                  value: 0
                },
                {
                  label: "是",
                  value: 1
                }
              ],
         
          },
          { span: 24,
            labelWidth: 130,
            label: '是否加粗',
            prop: 'key21',
            type: "select",
            hide: true, 
            dicData: [
                {
                  label: "否",
                  value: 0
                },
                {
                  label: "是",
                  value: 1
                }
              ],
         
          },
          { span: 24,
            labelWidth: 130,
            label: '是否手动输入',
            hide: true, 
            prop: 'key22',
            type: "select",
            dicData: [
                {
                  label: "否",
                  value: 0
                },
                {
                  label: "是",
                  value: 1
                }
              ],
         
          },
          { span: 24,
            labelWidth: 130,
            label: '是否显示百分比',
            hide: true, 
            prop: 'key22',
            type: "select",
            dicData: [
                {
                  label: "否",
                  value: 0
                },
                {
                  label: "是",
                  value: 1
                }
              ],
         
          },
          {
            labelWidth: 130,
            hide: true, 
            span:24,
            label: '是否合计项',
            prop: 'key5',
            type: "select",
            dicData: [
                {
                  label: "否",
                  value: 0
                },
                {
                  label: "是",
                  value: 1
                }
              ],
          },
          {
            labelWidth: 130,
            span:24,
            label: '支付适用类型',
            prop: 'key6',
            type: "select",
            dicData: [
                {
                  label: "承包商",
                  value: 0
                },
                {
                  label: "监理",
                  value: 1
                }
              ],
          },
          { span: 24,
            hide: true, 
            labelWidth: 130,
            label: '排序号',
            prop: 'key7',
       
          },
          { span: 24,
            hide: true, 
            labelWidth: 130,
            label: '备注',
            prop: 'key8',
            type: "textarea",
      
          },
        ],
        
      },
      addFormuladialog:false,
      forpage: {
        pageSize: 20,
        pagerCount: 5
      },
      fordata: [],
      foroption: {
        border:true,
        align: 'center',
        refreshBtn:false,
        columnBtn:false,
        menu:false,
        addBtn:false,
        editBtn:false,
        delBtn:false,
      
        
        column: [
          {
          label: '选择',
          prop: 'radio',
          width: 60,
          hide: false
        },
          {
            label: '公式编号',
            prop: 'name'
          },
          {
            label: '公式名称',
            prop: 'sex'
          },
          {
            label: '公式备注',
            prop: 'key3'
          }
        ]
      },
  
      selectRow: '',
      forType:'',
      forOptions:[
      {
          value: '选项1',
          label: '公路计量'
        }, {
          value: '选项2',
          label: '监理服务'
        }, 
      ],
      totaldata: [
          {
            ids:1,
            name:'200',
            sex:'200章',
            key3:'否',
            key4:'否',
            key5:'承包商'
          },{
            ids:1,
            name:'200',
            sex:'200章',
            key3:'否',
            key4:'否',
            key5:'承包商'
          },
            {
            ids:1,
            name:'200',
            sex:'200章',
            key3:'否',
            key4:'否',
            key5:'承包商'
          },     {
            ids:1,
            name:'200',
            sex:'200章',
            key3:'否',
            key4:'否',
            key5:'承包商'
          },
          
            {
            ids:1,
            name:'200',
            sex:'200章',
            key3:'否',
            key4:'否',
            key5:'承包商'
          },
        ],
      totaloption:{
          rowKey:'ids',
          refreshBtn:false,
          columnBtn:false,
          editBtn:false,
          border:true,
          index:true,
          height:'auto',
          calcHeight: 90,
          menuWidth: 80,
         
          addBtn:false,
          column:[
             {
              label:'支付项编号',
              prop:'name'
            }, {
              label:'支付项名称',
              prop:'sex'
            },
            {
              label:'支付项类型',
              prop:'key3'
            },
            {
              label:'合同计算公式',
              prop:'key3'
            },
            {
              label:'变更计算公式',
              prop:'key4'
            },
            {
              label:'本期计算公式',
              prop:'key5'
            },
            {
              label:'是否为扣款项',
              prop:'key5',
          
            },
          ],
         
      },
      tatoldialogVisible:false,
      tadddata:[
      {
            ids:1,
            name:'200',
            sex:'200章',
            key3:'否',
            key4:'否',
            key5:'承包商'
          },{
            ids:1,
            name:'200',
            sex:'200章',
            key3:'否',
            key4:'否',
            key5:'承包商'
          },
            {
            ids:1,
            name:'200',
            sex:'200章',
            key3:'否',
            key4:'否',
            key5:'承包商'
          },     {
            ids:1,
            name:'200',
            sex:'200章',
            key3:'否',
            key4:'否',
            key5:'承包商'
          },
          
            {
            ids:1,
            name:'200',
            sex:'200章',
            key3:'否',
            key4:'否',
            key5:'承包商'
          },
      ],
      taddoption: {
        delBtn: false,
        editBtn: false,
        addBtn:false,
        columnBtn:false,
        refreshBtn:false,
        border:true,
        selection:true,
        index:true,
        menu:false,
        column:[
             {
              label:'支付项编号',
              prop:'name'
            }, {
              label:'支付项名称',
              prop:'sex'
            },
            {
              label:'支付项类型',
              prop:'key3'
            },
            {
              label:'合同计算公式',
              prop:'key3'
            },
            {
              label:'变更计算公式',
              prop:'key4'
            },
            {
              label:'本期计算公式',
              prop:'key5'
            },
            {
              label:'是否为扣款项',
              prop:'key5'
            },
          ],
      },
    }
  },
  methods: {
    onLoad (page) {
     
      this.page.total = 40
      //模拟分页
      if (this.page.currentPage === 1) {
        this.data = [
          {
            key1: 100,
            key2: '100章',
            key3: 2,
            key4: '否',
            key5: '否',
            key6: '承包商',
          },    {
            key1: 200,
            key2: '200章',
            key3: 1,
            key4: '否',
            key5: '否',
            key6: '承包商',
          },
        ]
      } else if (this.page.currentPage == 2) {
        this.data = [
          {
            key1: 100,
            key2: 1,
            key3: '100章',
            key4: '否',
            key5: '否',
            key6: '承包商',
          },    {
            key1: 200,
            key2: 2,
            key3: '200章',
            key4: '否',
            key5: '否',
            key6: '承包商',
          },
        ]
      }
    },
    //添加中期支付项

    handleAdd() {
      this.$refs.crud.rowAdd();
  },
    handleaddFormula(){
      this.addFormuladialog=true
    },
    formuladialogClose(){
      this.addFormuladialog=false
    },
    foronLoad (page) {
      this.forpage.total = 40
      //模拟分页
      if (this.forpage.currentPage === 1) {
        this.fordata = [
          {
            id: 1,
            name: 'advance_HT',
            sex: '动员预付款合同金额',
            key3:'单独使用计量期,取本期内动员预付款支付的金额汇总，定制动员预付款计量期模块专用'
          },  {
            id: 2,
            name: 'advance_HT',
            sex: '动员预付款合同金额',
            key3:'单独使用计量期,取本期内动员预付款支付的金额汇总，定制动员预付款计量期模块专用'
          }
        ]
      } 
    },
    rowClick (row) {
      this.selectRow = row.$index
      this.$message.success('选择序号' + row.$index)
    },
    addTotal(){
      console.log('xin');
      this.tatoldialogVisible=true
    },
    handleTatolClose(){
      this.tatoldialogVisible=false
    }
}
}
  </script>
  <style lang='scss' scoped>

.form-horizontal .table-form, .form-horizontal .table-form td {
    border: 1px solid #ddd;
    background-color: #fdfdfd;
    font-size: 14px;
    padding: 4px;
}
.totalbox{
  width: 100%;
  margin-top: 20px;
 
 
}
  </style>