Преглед изворни кода

系统中间支付项页面

duy пре 1 година
родитељ
комит
2ce9fd3588
3 измењених фајлова са 724 додато и 5 уклоњено
  1. 677 1
      src/views/measure/interimPay.vue
  2. 3 3
      src/views/measure/systemUnit.vue
  3. 44 1
      src/views/measure/template.vue

+ 677 - 1
src/views/measure/interimPay.vue

@@ -1,11 +1,687 @@
 <!--  -->
 <template>
-    <div >系统中间支付想</div>
+   <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"
+             :option="option"
+             :page.sync="page"
+             v-model="form"
+              @on-load="onLoad">
+
+         <!-- 合同公式 -->
+        <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">
+          <table class="table-form" style="width: 100%;">
+              <tbody><tr><td colspan="8">
+                  <b>详情信息</b>
+              </td>
+              </tr><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>
+      <h4>汇总项</h4>
+      <div class="totalbox">
+        <avue-crud :data="totaldata" :option="totaloption" >
+          <template slot="menuLeft">
+              <el-button type="primary" size="small"
+                        icon="el-icon-plus"
+                        @click="addTotal">新增汇总项</el-button>
+            </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,
+        tip: false,
+        border: true,
+        index: true,
+        dialogWidth: 1000,
+        calcHeight: 30,
+        addBtnText:'新增支付项',
+        
+        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,
+         
+          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: '承包商',
+          },
+        ]
+      }
+    },
+    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>
   

+ 3 - 3
src/views/measure/systemUnit.vue

@@ -44,7 +44,7 @@
       style="width: 74%; padding-left: 0px; padding-right: 0px"
     >
       <div class="boxnei">
-        <div class="mg-b-10">节点信息</div>
+        <h4 class="mg-b-10">节点信息</h4>
         <form class="form-horizontal">
             <table class="table-form" style="width: 100%;">
                 <tbody><tr>
@@ -66,7 +66,7 @@
               </tbody>
           </table>
         </form>
-        <div class="mg-b-10 mg-t-20">下级节点列表</div>
+        <h4 class="mg-b-10 mg-t-20">下级节点列表</h4>
         <div class="tableclass">
             <el-table
             :data="tableData"
@@ -388,7 +388,7 @@ background: #eee;
 .form-horizontal .table-form, .form-horizontal .table-form td {
     border: 1px solid #ddd;
     background-color: #fdfdfd;
-    font-size: 16px;
+    font-size: 14px;
     padding: 4px;
 }
 

+ 44 - 1
src/views/measure/template.vue

@@ -3,7 +3,10 @@
         <avue-crud 
             :data="data" 
             :option="option"
+            :page.sync="page"
             @search-change="searchChange"
+            @current-change="currentChange"
+            @size-change="sizeChange"
         >
         <template
             slot-scope="scope"
@@ -35,7 +38,41 @@ export default {
           name: '计量测试',
           tips: '备注222'
         }, 
+        {
+          name: '广西二级路公路计量单元划分模板',
+          tips: '备注111'
+        }, {
+          name: '计量测试',
+          tips: '备注222'
+        }, 
+        {
+          name: '广西二级路公路计量单元划分模板',
+          tips: '备注111'
+        }, {
+          name: '计量测试',
+          tips: '备注222'
+        }, 
+        {
+          name: '广西二级路公路计量单元划分模板',
+          tips: '备注111'
+        }, {
+          name: '计量测试',
+          tips: '备注222'
+        }, 
+        {
+          name: '广西二级路公路计量单元划分模板',
+          tips: '备注111'
+        }, {
+          name: '计量测试',
+          tips: '备注222'
+        }, 
+       
       ],
+      page: {
+        pageSize: 10,
+        currentPage: 1,
+        total: 16
+      },
       option: {
         height: 'auto',
         calcHeight: 30,
@@ -86,7 +123,13 @@ export default {
          
         }
       })
-    }
+    },
+    currentChange (currentPage) {
+      this.page.currentPage = currentPage;
+    },
+    sizeChange (pageSize) {
+      this.page.pageSize = pageSize;
+    },
   }
 }