2022.7.19

src/api/budget/budget.js

@@ -0,0 +1,41 @@
+import request from "@/utils/request";
+
+export function getBudget(params){
+  return request({
+    method:'get',
+    url:'/api/admin/plan/index',
+    params
+  })
+}
+
+export function addBudget(data){
+  return request({
+    method:'post',
+    url:'/api/admin/plan/store',
+    data
+  })
+}
+
+export function delBudget(params){
+  return request({
+    method:'get',
+    url:'/api/admin/plan/destroy',
+    params
+  })
+}
+
+export function editorBudget(data){
+  return request({
+    method:'post',
+    url:'/api/admin/plan/save',
+    data
+  })
+}
+
+export function detailBudget(params){
+  return request({
+    method:'get',
+    url:"/api/admin/plan/show",
+    params
+  })
+}

src/api/contract/contract.js

@@ -0,0 +1,41 @@
+import request from "@/utils/request";
+
+export function getContract(params){
+  return request({
+    method:'get',
+    url:'/api/admin/contract/index',
+    params
+  })
+}
+
+export function addContrant(data){
+  return request({
+    method:"post",
+    url:'/api/admin/contract/store',
+    data
+  })
+}
+
+export function detailContract(params){
+  return request({
+    method:'get',
+    url:'/api/admin/contract/show',
+    params
+  })
+}
+
+export function delContract(params){
+  return request({
+    method:'get',
+    url:'/api/admin/contract/destroy',
+    params
+  })
+}
+
+export function editorContract(post){
+  return request({
+    method:'post',
+    url:'/api/admin/contract/save',
+    post
+  })
+}

src/components/XyDialog/index.vue

@@ -8,7 +8,7 @@ export default {
     },
     width:{
       type:Number,
-      default:520
+      default:600
     },
     isShow:{
       type:Boolean,
@@ -91,13 +91,30 @@ export default {
           default(){
             if(type === "form"){
               let formItems = []
-              Object.keys(form).forEach((key)=>{
-                formItems.push(
-                  <el-form-item
-                    prop={key}>
-                    {eval(`{$scopedSlots.${key} ? $scopedSlots.${key}() : ''}`)}
-                  </el-form-item>
-                )
+              Object.keys(form).map((key)=>{
+                if(typeof form[key] === "object"){
+                  formItems.push(
+                    <div style={{'display':'flex','flex-wrap':'wrap'}}>
+                      {
+                        Object.keys(form[key]).map((key1)=>{
+                          return (
+                            <el-form-item
+                              prop={key1}>
+                              {eval(`{$scopedSlots.${key1} ? $scopedSlots.${key1}() : ''}`)}
+                            </el-form-item>
+                          )
+                        })
+                      }
+                    </div>
+                  )
+                }else{
+                  formItems.push(
+                    <el-form-item
+                      prop={key}>
+                      {eval(`{$scopedSlots.${key} ? $scopedSlots.${key}() : ''}`)}
+                    </el-form-item>
+                  )
+                }
               })
               return (
                 <el-form

src/components/XyTable/index.vue

@@ -124,6 +124,7 @@ export default {
               if(item.customFn){
                 return (
                   <el-table-column
+                    align={item.align ?? 'center'}
                     sortable={item.sortable ?? true}
                     width={item.width ?? 'auto'}
                     min-width={item.minWidth ?? item.width}
@@ -148,6 +149,7 @@ export default {
                       if(item1.customFn){
                         return (
                           <el-table-column
+                            align={item1.align ?? 'center'}
                             header-align={item1.headerAlign ?? 'center'}
                             label={item1.label}
                             width={item1.width ?? 'auto'}
@@ -226,7 +228,7 @@ export default {
             }
           </el-table>)
           :
-          <el-table height={tableHeight}/> }
+          <el-table height={height ?? tableHeight}/> }
 
         <el-backtop
           target=".el-table__body-wrapper"

src/utils/request.js

@@ -1,7 +1,8 @@
 import axios from 'axios'
-import { MessageBox, Message } from 'element-ui'
+import { MessageBox, Message,Loading } from 'element-ui'
 import store from '@/store'
 import { getToken } from '@/utils/auth'
+let loading;
 
 // create an axios instance
 const service = axios.create({
@@ -14,6 +15,11 @@ const service = axios.create({
 service.interceptors.request.use(
   config => {
     // do something before request is sent
+    loading = Loading.service({
+      lock:true,
+      background:"rgba(0,0,0,0.4)",
+      text:"正在加载中..."
+    })
 
     if (store.getters.token) {
       // let each request carry token
@@ -45,6 +51,7 @@ service.interceptors.response.use(
    * You can also judge the status by HTTP Status Code
    */
   response => {
+    loading.close()
     const res = response.data
 
     // if the custom code is not 20000, it is judged as an error.
@@ -74,6 +81,7 @@ service.interceptors.response.use(
     }
   },
   error => {
+    loading.close()
     console.log('err' + error) // for debug
     Message({
       message: error.message,

src/views/budget/budgetList.vue

@@ -6,91 +6,167 @@
         <div>
           <span style="padding: 0 6px;">年份</span>
           <span>
-            <Select v-model="select.year" style="width:120px">
-              <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-            </Select>
+            <DatePicker placeholder="选择所属年份" type="year" placement="bottom" :value="select.year" style="width: 130px;" @on-change="(e)=>select.year = e"></DatePicker></DatePicker>
           </span>
 
           <span style="padding: 0 6px;">
             预算类型
           </span>
           <span>
-            <Select v-model="select.type" style="width:120px;">
-            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-          </Select>
+            <Select placeholder="选择预算类型" v-model="select.type" style="width:130px;" clearable>
+              <Option v-for="item in [{label:'部门预算',value:1},{label:'水务计划',value:2}]" :value="item.value" :key="item.value">{{ item.label }}</Option>
+            </Select>
           </span>
 
           <span style="padding: 0 6px;">
             科室
           </span>
           <span>
-            <Select v-model="select.department" style="width:200px;">
-            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-          </Select>
+            <el-cascader
+              placeholder="选择科室"
+              size="small"
+              :value="select.department"
+              style="width: 160px;"
+              :options="departments"
+              :props="{ checkStrictly: true, label: 'name', value: 'id' }"
+              clearable
+              @change="e => select.department = e[e.length-1] || ''"/>
           </span>
-          <Button type="primary"  style="margin-left: 10px" @click="isShowAdd = true">新增</Button>
-          <Button type="primary"  style="margin-left: 10px">查询</Button>
-          <Button type="primary"  style="margin-left: 10px">重置</Button>
+          <Button type="primary"  style="margin-left: 10px" @click="isShowAdd = true,getDepartment()">新增</Button>
+          <Button type="primary"  style="margin-left: 10px" @click="getBudgets">查询</Button>
+          <Button type="primary"  style="margin-left: 10px" @click="()=>select={page:1,year:'', type:'', department:''}">重置</Button>
         </div>
       </slot>
     </lx-header>
 
-    <xy-table :table-item="table"></xy-table>
+    <xy-table :table-item="table" :list="list" @delete="deleteTable" @editor="showEditor"></xy-table>
 
     <div style="display: flex;justify-content: flex-end;">
-      <Page :total="20" show-elevator />
+      <Page :total="total" show-elevator @on-change="pageChange"/>
     </div>
 
-    <xy-dialog :is-show.sync="isShowAdd" type="form" :form="form" title="新增计划" :rules="rules" @submit="submit">
+    <xy-dialog :is-show.sync="isShowAdd" type="form" :form="form" title="新增计划" :rules="rules" @submit="submit" ref="addBudget">
       <template v-slot:name>
         <Row>
-          <Col span="5" style="color: red;"><span style="font-weight: 600;padding-right: 4px;">*</span>项目名称</Col>
+          <Col span="5"><span style="color: red;font-weight: 600;padding-right: 4px;">*</span>项目名称</Col>
           <Col>
-            <Input v-model="form.name" style="width: 300px;"/>
+            <Input placeholder="请填写项目名称" v-model="form.name" style="width: 300px;"/>
           </Col>
         </Row>
       </template>
       <template v-slot:type>
         <Row>
-          <Col span="5" style="color: red;"><span style="font-weight: 600;padding-right: 4px;">*</span>预算类型</Col>
+          <Col span="5"><span style="color: red;font-weight: 600;padding-right: 4px;">*</span>预算类型</Col>
           <Col>
-            <Select v-model="form.type" style="width: 300px;">
-              <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+            <Select placeholder="请选择预算类型" v-model="form.type" style="width: 300px;">
+              <Option v-for="item in [{label:'部门预算',value:1},{label:'水务计划',value:2}]" v-model="item.value" :key="item.value">{{ item.label }}</Option>
             </Select>
           </Col>
         </Row>
       </template>
-      <template v-slot:date>
+      <template v-slot:year>
         <Row>
-          <Col span="5">项目所属年份</Col>
+          <Col span="5"><span style="color: red;font-weight: 600;padding-right: 4px;">*</span>项目所属年份</Col>
           <Col>
-            <DatePicker placement="bottom"  v-model="form.date" type="date" placeholder="Select date" style="width: 300px;"></DatePicker>
+            <DatePicker placeholder="请选择所属年份" type="year" placement="bottom" :value="form.year" style="width: 300px;" @on-change="(e)=>form.year = e"></DatePicker>
           </Col>
         </Row>
       </template>
       <template v-slot:department>
         <Row>
-          <Col span="5" style="color: red;"><span style="font-weight: 600;padding-right: 4px;">*</span>科室</Col>
+          <Col span="5"><span style="font-weight: 600;padding-right: 4px;color: red;">*</span>科室</Col>
+          <Col>
+            <el-cascader
+              :value="form.department"
+              style="width: 300px;"
+              :options="departments"
+              :props="{ checkStrictly: true, label: 'name', value: 'id' }"
+              clearable
+              @change="e => form.department = e[e.length-1] || ''"/>
+          </Col>
+        </Row>
+      </template>
+      <template v-slot:content>
+        <Row>
+          <Col span="5"><span style="font-weight: 600;padding-right: 4px;color: red;">*</span>内容</Col>
+          <Col>
+            <Input type="textarea" placeholder="请填写内容" v-model="form.content" style="width: 300px;"/>
+          </Col>
+        </Row>
+      </template>
+      <template v-slot:money>
+        <Row>
+          <Col span="5"><span style="font-weight: 600;padding-right: 4px;color: red;">*</span>金额</Col>
+          <Col>
+            <Input placeholder="请填写金额" v-model="form.money" style="width: 300px;"/>
+          </Col>
+        </Row>
+      </template>
+      <template v-slot:remark>
+        <Row>
+          <Col span="5">备注</Col>
+          <Col>
+            <Input placeholder="请填写备注" type="textarea" v-model="form.remark" style="width: 300px;"/>
+          </Col>
+        </Row>
+      </template>
+    </xy-dialog>
+
+    <xy-dialog title="详情" type="form" :is-show.sync="isShowEditor" :form="editorForm" :rules="rules">
+      <template v-slot:name>
+        <Row>
+          <Col span="5"><span style="color: red;font-weight: 600;padding-right: 4px;">*</span>项目名称</Col>
+          <Col>
+            <Input placeholder="请填写项目名称" v-model="editorForm.name" style="width: 300px;"/>
+          </Col>
+        </Row>
+      </template>
+      <template v-slot:type>
+        <Row>
+          <Col span="5"><span style="color: red;font-weight: 600;padding-right: 4px;">*</span>预算类型</Col>
           <Col>
-            <Select v-model="form.department" style="width: 300px;">
-              <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+            <Select placeholder="请选择预算类型" v-model="editorForm.type" style="width: 300px;">
+              <Option v-for="item in [{label:'部门预算',value:1},{label:'水务计划',value:2}]" v-model="item.value" :key="item.value">{{ item.label }}</Option>
             </Select>
           </Col>
         </Row>
       </template>
+      <template v-slot:year>
+        <Row>
+          <Col span="5"><span style="color: red;font-weight: 600;padding-right: 4px;">*</span>项目所属年份</Col>
+          <Col>
+            <DatePicker placeholder="请选择所属年份" type="year" placement="bottom" :value="editorForm.year" style="width: 300px;" @on-change="(e)=>form.year = e"></DatePicker>
+          </Col>
+        </Row>
+      </template>
+      <template v-slot:department>
+        <Row>
+          <Col span="5"><span style="font-weight: 600;padding-right: 4px;color: red;">*</span>科室</Col>
+          <Col>
+            <el-cascader
+              size="small"
+              :value="editorForm.department"
+              style="width: 300px;"
+              :options="departments"
+              :props="{ checkStrictly: true, label: 'name', value: 'id' }"
+              clearable
+              @change="e => editorForm.department = e[e.length-1] || ''"/>
+          </Col>
+        </Row>
+      </template>
       <template v-slot:content>
         <Row>
-          <Col span="5">内容</Col>
+          <Col span="5"><span style="font-weight: 600;padding-right: 4px;color: red;">*</span>内容</Col>
           <Col>
-            <Input v-model="form.content" style="width: 300px;"/>
+            <Input type="textarea" placeholder="请填写内容" v-model="editorForm.content" style="width: 300px;"/>
           </Col>
         </Row>
       </template>
       <template v-slot:money>
         <Row>
-          <Col span="5" style="color: red;"><span style="font-weight: 600;padding-right: 4px;">*</span>金额</Col>
+          <Col span="5"><span style="font-weight: 600;padding-right: 4px;color: red;">*</span>金额</Col>
           <Col>
-            <Input v-model="form.money" style="width: 300px;"/>
+            <Input placeholder="请填写金额" v-model="editorForm.money" style="width: 300px;"/>
           </Col>
         </Row>
       </template>
@@ -98,15 +174,22 @@
         <Row>
           <Col span="5">备注</Col>
           <Col>
-            <Input type="textarea" v-model="form.remark" style="width: 300px;"/>
+            <Input placeholder="请填写备注" type="textarea" v-model="editorForm.remark" style="width: 300px;"/>
           </Col>
         </Row>
       </template>
+      <template v-slot:footerContent>
+        <Button type="primary" @click="editorTable">确定</Button>
+      </template>
     </xy-dialog>
   </div>
 </template>
 
 <script>
+import {addBudget,getBudget,delBudget,editorBudget,detailBudget} from "@/api/budget/budget"
+import {listdept} from "@/api/system/department"
+import {Message} from "element-ui";
+import {parseTime} from "@/utils"
 export default {
   data() {
     return {
@@ -114,69 +197,184 @@ export default {
       form:{
         name:"",
         type:"",
-        date:"",
+        year:"",
         department:"",
-        content:"",
         money:"",
+        content:"",
         remark:""
       },
       rules:{
         name:[
-          {required:true}
+          {required:true,message:"必填"}
         ],
         type:[
-          {required:true}
+          {required:true,message:"必选"}
+        ],
+        year:[
+          {required:true,message:"必选"}
         ],
         department:[
-          {required:true}
+          {required:true,message:"必选"}
         ],
         money:[
-          {required:true}
+          {required:true,message:"必填"}
         ],
+        content:[
+          {required:true,message:"必填"}
+        ]
       },
+      list:[],
+      total:0,
+      pageIndex:1,
       table:[
         {
           label:"预算类型",
+          prop:'type',
+          width:120,
+          formatter:(cell,data,value)=>{
+            switch (value){
+              case 1:
+                return "部门预算"
+                break;
+              case 2:
+                return "水务计划"
+                break;
+              default:
+                return "未知"
+            }
+          }
         },
         {
           label:"项目名称",
+          prop:'name',
+          width: 200,
+          align:'left'
         },
         {
           label:"所属年份",
+          prop:'year',
+          width: 120
         },
         {
           label: "相关科室",
+          prop:'plan_department_id',
+          width: 180
         },
         {
           label:"描述",
+          prop:'content',
+          width: 240,
+          align:'left'
         },
         {
           label:"创建信息",
+          prop:'created_at',
+          width: 200,
+          formatter:(cell,data,value)=>{
+            return parseTime(new Date(value))
+          }
         }
       ],
       select:{
+        page:1,
         year:"",
         type:"",
         department:""
       },
-      cityList: [
-        {
-          value: 'New York',
-          label: 'New York'
-        },
-        {
-          value: 'London',
-          label: 'London'
-        }
-      ],
+      departments:[],//部门类型
+
+      //编辑信息
+      isShowEditor:false,
+      editorForm:{},
     }
   },
   methods: {
+    //翻页
+    pageChange(e){
+      this.pageIndex = e
+      this.getBudgets()
+    },
+    //获取科室
+    getDepartment(){
+      listdept().then(res=>{
+        this.departments = res
+      })
+    },
+    //查询计划列表
+    getBudgets(){
+      getBudget({
+        page_size:10,
+        page:this.pageIndex,
+        year:this.select.year,
+        type:this.select.type,
+        plan_department_id:this.select.department
+      }).then(res=>{
+        this.list = res.data
+        this.total = res.total
+      })
+    },
+    //新增提交
     submit(){
-      console.log(this.form)
-    }
-  },
+      addBudget({
+        name:this.form.name,
+        type:this.form.type,
+        year:this.form.year,
+        content:this.form.content,
+        money:this.form.money,
+        plan_department_id:this.form.department,
+        remark:this.form.remark
+      }).then(res=>{
+        Message({
+          message:'操作成功',
+          type:'success'
+        })
+        this.isShowAdd = false
+        this.$refs["addBudget"].reset()
+      })
+    },
+    //删除
+    deleteTable(e){
+      delBudget({id:e.id}).then(res=>{
+        Message({
+          message:'操作成功',
+          type:'success'
+        })
+        this.getBudgets()
+      })
+    },
 
+    //修改
+    editorTable(){
+      editorBudget(this.editorForm).then(res=>{
+        this.isShowEditor = false
+        Message({
+          message:'操作成功',
+          type:'success'
+        })
+        this.getBudgets()
+      })
+    },
+    showEditor(row){
+      this.getDepartment()
+      detailBudget({id:row.id}).then(res=>{
+        this.editorForm =
+          {
+            name:res.name,
+            type:res.type,
+            department:res.plan_department_id,
+            money:res.money,
+            year:res.year,
+            content:res.content,
+            remark:res.remark
+          }
+        this.isShowEditor = true
+      })
+    },
+  },
+  mounted() {
+    this.getDepartment()
+    this.getBudgets()
+  }
 }
 </script>
 

src/views/capital/projectCapitalManage.vue

@@ -1,12 +1,210 @@
 <template>
-  <div>
+  <div style="padding: 0 20px;">
+    <lx-header icon="md-apps" text="预算计划" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
+      <div slot="content"></div>
+      <slot>
+        <div>
+          <span style="padding: 0 6px;">年份</span>
+          <span>
+            <DatePicker v-model="select.year" placeholder="请选择年份" type="year" placement="bottom" style="width:130px"></DatePicker>
+          </span>
+
+          <span style="padding: 0 6px;">
+            预算类型
+          </span>
+          <span>
+            <Select placeholder="请选择预算类型" style="width:130px;" v-model="select.type">
+            <Option v-for="item in []" :value="item.value" :key="item.value">{{ item.label }}</Option>
+          </Select>
+          </span>
+          <span style="padding: 0 6px;">
+            科室
+          </span>
+          <span>
+            <Select placeholder="请选择科室" style="width:200px;" v-model="select.department">
+            <Option v-for="item in []" :value="item.value" :key="item.value">{{ item.label }}</Option>
+          </Select>
+          </span>
+
+          <Button type="primary"  style="margin-left: 10px">查询</Button>
+          <Button type="primary"  style="margin-left: 10px">重置</Button>
+        </div>
+      </slot>
+    </lx-header>
+
+    <xy-table :table-item="table" :list="[{}]">
+      <template v-slot:btns>
+        <el-table-column label="操作" fixed="right" width="110" header-align="center">
+          <template slot-scope="scope">
+            <Button type="primary" size="small" @click="isShowExamineApply = true">审核确认</Button>
+          </template>
+        </el-table-column>
+      </template>
+    </xy-table>
+
+<!--    审核申请-->
+    <xy-dialog :is-show="isShowExamineApply" type="form" title="付款审核" class="examine-apply" :form="form" :width="800">
+      <template v-slot:extraFormTop>
+        <div class="examine-apply-item">
+          <div class="examine-apply-item-title">受款单位</div>
+          <div class="examine-apply-item-content">受款单位</div>
+        </div>
+        <div class="examine-apply-item">
+          <div class="examine-apply-item-title">合同名称</div>
+          <div class="examine-apply-item-content">合同名称</div>
+        </div>
+        <div class="examine-apply-item">
+          <div class="examine-apply-item-title">合同金额</div>
+          <div class="examine-apply-item-content">100000</div>
+        </div>
+        <div style="display: flex;">
+          <div class="examine-apply-item">
+            <div class="examine-apply-item-title">已付金额</div>
+            <div class="examine-apply-item-content">20000</div>
+            <div class="examine-apply-item-unit">（元）</div>
+          </div>
+          <div class="examine-apply-item">
+            <div class="examine-apply-item-title">支付占比</div>
+            <div class="examine-apply-item-content">10%</div>
+          </div>
+          <div class="examine-apply-item">
+            <div class="examine-apply-item-title">已付笔数</div>
+            <div class="examine-apply-item-content">10</div>
+            <div style="color: red;cursor: pointer;margin-left: 26px;">点击查看列表</div>
+          </div>
+        </div>
+      </template>
+
+      <template v-slot:payment>
+        <Row :wrap="false">
+          <Col span="8">
+            <span style="font-weight: 600;padding-right: 4px;color: red;">*</span>
+            <span>申请付款金额</span>
+          </Col>
+          <Col offset="0">
+            <Input placeholder="请填写付款金额" v-model="form.money.payment" style="width: 160px;"></Input>
+          </Col>
+        </Row>
+      </template>
+      <template v-slot:deduction>
+        <Row :wrap="false">
+          <Col span="8" offset="0">
+            <span style="font-weight: 600;padding-right: 4px;color: red;">*</span>
+            <span>本期扣款金额</span>
+          </Col>
+          <Col offset="2">
+            <Input placeholder="请填写付款金额" v-model="form.money.deduction" style="width: 160px;"></Input>
+          </Col>
+        </Row>
+      </template>
+      <template v-slot:type>
+        <Row :wrap="false">
+          <Col span="4">
+            <span style="font-weight: 600;padding-right: 4px;color: red;">*</span>
+            <span>款项类型</span>
+          </Col>
+          <Col offset="0">
+            <Select placeholder="请选择款项类型" v-model="form.type" style="width: 160px;"></Select>
+          </Col>
+        </Row>
+      </template>
+      <template v-slot:isLast>
+        <Row :wrap="false">
+          <Col span="4" offset="0">
+            <span style="font-weight: 600;padding-right: 4px;color: red;">*</span>
+            <span>是否最后一笔</span>
+          </Col>
+          <Col offset="0">
+            <Checkbox v-model="form.isLast"></Checkbox>
+          </Col>
+        </Row>
+      </template>
+      <template v-slot:extraFormBottom>
+        <xy-table :list="[{}]" :show-index="false" :table-item="searchTable" :height="240" style="margin-top: 10px;">
+          <template v-slot:btns>
+            <el-table-column label="使用金额" header-align="center">
+              <Input />
+            </el-table-column>
+          </template>
+        </xy-table>
+      </template>
+    </xy-dialog>
   </div>
 </template>
 
 <script>
 export default {
   data() {
-    return {}
+    return {
+      select:{
+        year:null,
+        type:null,
+        department:''
+      },
+      table:[
+        {
+          label:"预算类型",
+          width: 140
+        },
+        {
+          label:"项目名称",
+          width: 160
+        },
+        {
+          label:"付款申请金额（单位W）",
+          width: 240
+        },
+        {
+          label:"实际支付金额",
+          width: 180
+        },
+        {
+          label:"款项类型",
+          width: 160
+        },
+        {
+          label:"状态",
+          width: 140
+        },
+        {
+          label:"创建信息",
+          width: 160
+        }
+      ],
+
+      //审核申请
+      isShowExamineApply:false,
+      form:{
+        money:{
+          payment:'',
+          deduction:''
+        },
+        type:'',
+        isLast:'',
+      },
+      searchTable:[
+        {
+          sortable:false,
+          width:36,
+          customFn:()=>{
+            return (
+              <div>
+                <Checkbox></Checkbox>
+              </div>
+            )
+          }
+        },
+        {
+          label:"分类"
+        },
+        {
+          label:"名称"
+        },
+        {
+          label:"计划金额"
+        }
+      ],
+    }
   },
   methods: {
 
@@ -16,4 +214,23 @@ export default {
 </script>
 
 <style scoped lang="scss">
+  .examine-apply{
+
+    &-item{
+      display: flex;
+
+      padding-bottom: 10px;
+      &-title{
+
+        padding: 0 20px;
+      }
+      &-content{
+
+      }
+    }
+  }
+
+  ::v-deep .el-form-item{
+    flex: 1;
+  }
 </style>

src/views/contract/contractList.vue

@@ -7,16 +7,16 @@
           <div>
             <span style="padding: 0 6px;word-break: keep-all;">创建日期</span>
             <span>
-             <DatePicker type="daterange" placement="bottom-start" placeholder="Select date" style="width: 180px"></DatePicker>
-          </span>
+              <DatePicker placeholder="请选择日期" type="daterange" placement="bottom-start" style="width: 180px"></DatePicker>
+            </span>
           </div>
 
           <div>
             <span style="padding: 0 6px;word-break: keep-all;">
             合同类型
             </span>
-            <Select v-model="select.type" style="width:120px;">
-              <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+            <Select placeholder="请选择类型" v-model="select.type" style="width:120px;">
+              <Option v-for="item in [{label:'服务',value:1},{label:'货品',value:2},{label:'工程',value:3}]" :value="item.value" :key="item.value">{{ item.label }}</Option>
             </Select>
           </div>
 
@@ -24,8 +24,8 @@
             <span style="padding: 0 6px;word-break: keep-all;">
             科室
           </span>
-            <Select v-model="select.department" style="width:200px;">
-              <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+            <Select placeholder="请选择科室" v-model="select.department" style="width:200px;">
+              <Option v-for="item in departments" :value="item.id" :key="item.id">{{ item.name }}</Option>
             </Select>
           </div>
 
@@ -33,8 +33,8 @@
             <span style="padding: 0 6px;word-break: keep-all;">
             采购形式
           </span>
-            <Select v-model="select.purchaseModality" style="width:200px;">
-              <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+            <Select placeholder="请选择采购形式" v-model="select.purchaseModality" style="width:200px;">
+              <Option v-for="item in purchaseType" :value="item.id" :key="item.id">{{ item.value }}</Option>
             </Select>
           </div>
 
@@ -42,8 +42,8 @@
             <span style="padding: 0 6px;word-break: keep-all;">
             采购方式
           </span>
-            <Select v-model="select.purchaseMethods" style="width:200px;">
-              <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+            <Select placeholder="请选择采购方式" v-model="select.purchaseMethods" style="width:200px;">
+              <Option v-for="item in purchaseWay" :value="item.id" :key="item.id">{{ item.value }}</Option>
             </Select>
           </div>
 
@@ -52,6 +52,7 @@
             预算金额
             </span>
             <InputNumber
+              placeholder="最小金额"
               :min="0"
               :max="select.priceMax"
               v-model="select.priceMin"
@@ -59,6 +60,7 @@
               :parser="value => value.replace(/$s?|(,*)/g, '')"/>
             <span style="padding: 0 5px;">-</span>
             <InputNumber
+              placeholder="最大金额"
               :max="Number.MAX_VALUE"
               :min="select.priceMin"
               v-model="select.priceMax"
@@ -75,74 +77,156 @@
       </slot>
     </lx-header>
 
-    <xy-table :table-item="table"></xy-table>
+    <xy-table :table-item="table" :list="[{}]" @detailClick="isShowDetail = true"></xy-table>
 
     <div style="display: flex;justify-content: flex-end;">
       <Page :total="20" show-elevator />
     </div>
 
+<!--    合同详情-->
+    <xy-dialog :is-show.sync="isShowDetail" type="normal" title="详情" class="contract-detail">
+      <template v-slot:normalContent>
+        <div class="base-info">
+          <div class="base-info-title">项目基本信息</div>
+          <div class="base-info-item">
+            <div class="base-info-item-title">项目名称</div>
+            <div class="base-info-item-content">项目名称</div>
+          </div>
+          <div class="base-info-item">
+            <div class="base-info-item-title">项目类型</div>
+            <div class="base-info-item-content">服务</div>
+          </div>
+          <div style="display: flex;justify-content: space-between;">
+            <div class="base-info-item" style="flex-basis: 50%">
+              <div class="base-info-item-title">采购形式</div>
+              <div class="base-info-item-content">服务区</div>
+            </div>
+            <div class="base-info-item" style="flex-basis: 50%">
+              <div class="base-info-item-title">采购方式</div>
+              <div class="base-info-item-content">服务</div>
+            </div>
+          </div>
+          <div class="base-info-item">
+            <div class="base-info-item-title">项目预算</div>
+            <div class="base-info-item-content">50</div>
+            <div class="base-info-item-unit">(万)</div>
+          </div>
+          <div class="base-info-item">
+            <div class="base-info-item-title">资金渠道</div>
+            <div class="base-info-item-content">部门预算</div>
+          </div>
+        </div>
+        <div class="link-budget-plan">
+          <div class="link-budget-plan-title">关联预算计划</div>
+          <xy-table :height="260" :table-item="linkBudgetPlanTable" :show-index="false" :list="[{}]">
+            <template v-slot:btns>
+              <div></div>
+            </template>
+          </xy-table>
+        </div>
+        <div class="sign-info">
+          <div class="sign-info-title">签订信息</div>
+          <div class="sign-info-item">
+            <div class="sign-info-item-title">合同金额</div>
+            <div class="sign-info-item-content">50</div>
+            <div class="sign-info-item-unit">（万）</div>
+          </div>
+          <div style="display: flex;justify-content: space-between">
+            <div class="sign-info-item" style="flex-basis: 50%">
+              <div class="sign-info-item-title">承包商\供应商</div>
+              <div class="sign-info-item-content">某个公司</div>
+            </div>
+            <div class="sign-info-item" style="flex-basis: 50%">
+              <div class="sign-info-item-title">执行部门</div>
+              <div class="sign-info-item-content">信息科</div>
+            </div>
+          </div>
+        </div>
+        <div class="related-processes">
+          <div class="related-processes-title">相关流程</div>
+          <div class="related-processes-item">
+            <div>采购流程查看</div>
+            <div>合同会签流程</div>
+            <div>招标审批流程</div>
+          </div>
+        </div>
+        <div class="journal">
+          <div class="journal-title">日志</div>
+          <xy-table :height="240" :table-item="journalTable" :list="[{}]" :show-index="false">
+            <template v-slot:btns>
+              <div></div>
+            </template>
+          </xy-table>
+        </div>
+      </template>
+
+      <template v-slot:footerContent>
+        <div></div>
+      </template>
+    </xy-dialog>
+
 <!--  新增合同  -->
-    <xy-dialog :is-show.sync="isShowAdd" title="新增合同" type="form" :form="form">
+    <xy-dialog :is-show.sync="isShowAdd" title="新增合同" type="form" :form="form" :rules="rules" @submit="submit">
       <template v-slot:name>
         <Row>
-          <Col span="5" style="color: red;"><span style="font-weight: 600;padding-right: 4px;">*</span>项目名称</Col>
+          <Col span="5"><span style="font-weight: 600;padding-right: 4px;color: red;">*</span>项目名称</Col>
           <Col>
-            <Input v-model="form.name" style="width: 300px;"/>
+            <Input placeholder="请填写项目名称" v-model="form.name" style="width: 300px;"/>
           </Col>
         </Row>
       </template>
       <template v-slot:type>
         <Row>
-          <Col span="5" style="color: red;"><span style="font-weight: 600;padding-right: 4px;">*</span>预算类型</Col>
+          <Col span="5"><span style="font-weight: 600;padding-right: 4px;color: red;">*</span>项目类型</Col>
           <Col>
-            <Select v-model="form.type" style="width: 300px;">
-              <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+            <Select placeholder="请选择项目类型" v-model="form.type" style="width: 300px;">
+              <Option v-for="item in [{label:'服务',value:1},{label:'货品',value:2},{label:'工程',value:3}]" :value="item.value" :key="item.value">{{ item.label }}</Option>
             </Select>
           </Col>
         </Row>
       </template>
       <template v-slot:methods>
         <Row>
-          <Col span="5" style="color: red;"><span style="font-weight: 600;padding-right: 4px;">*</span>采购类型</Col>
+          <Col span="5"><span style="font-weight: 600;padding-right: 4px;color: red;">*</span>采购类型</Col>
           <Col>
-            <Select v-model="form.methods" style="width: 300px;">
-              <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+            <Select placeholder="请选择采购类型" v-model="form.methods" style="width: 300px;">
+              <Option v-for="item in purchaseType" :value="item.id" :key="item.id">{{ item.value }}</Option>
             </Select>
           </Col>
         </Row>
       </template>
       <template v-slot:modality>
         <Row>
-          <Col span="5" style="color: red;"><span style="font-weight: 600;padding-right: 4px;">*</span>采购形式</Col>
+          <Col span="5"><span style="font-weight: 600;padding-right: 4px;color: red;">*</span>采购形式</Col>
           <Col>
-            <Select v-model="form.modality" style="width: 300px;">
-              <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+            <Select placeholder="请选择采购形式" v-model="form.modality" style="width: 300px;">
+              <Option v-for="item in purchaseWay" :value="item.id" :key="item.id">{{ item.value }}</Option>
             </Select>
           </Col>
         </Row>
       </template>
       <template v-slot:price>
         <Row>
-          <Col span="5" style="color: red;"><span style="font-weight: 600;padding-right: 4px;">*</span>合同预算价</Col>
+          <Col span="5"><span style="font-weight: 600;padding-right: 4px;color: red;">*</span>合同预算价</Col>
           <Col>
-            <Input v-model="form.price" style="width: 300px;"/>
+            <Input placeholder="请填写合同预算价" v-model="form.price" style="width: 300px;"/>
           </Col>
-          <Col style="color: red;" offset="1">（万）</Col>
+          <Col offset="1">（万）</Col>
         </Row>
       </template>
       <template v-slot:fundingChannels>
         <Row>
-          <Col span="5" style="color: red;"><span style="font-weight: 600;padding-right: 4px;">*</span>资金渠道</Col>
+          <Col span="5"><span style="font-weight: 600;padding-right: 4px;color: red;">*</span>资金渠道</Col>
           <Col>
-            <Select v-model="form.fundingChannels" style="width: 300px;">
-              <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+            <Select placeholder="请选择资金渠道" v-model="form.fundingChannels" style="width: 300px;">
+              <Option v-for="item in moneyWay" :value="item.id" :key="item.id">{{ item.value }}</Option>
             </Select>
           </Col>
         </Row>
       </template>
       <template v-slot:isBudget>
         <Row>
-          <Col span="5" style="color: red;"><span style="font-weight: 600;padding-right: 4px;">*</span>是否预算</Col>
+          <Col span="5"><span style="font-weight: 600;padding-right: 4px;color: red;">*</span>是否预算</Col>
           <Col>
             <i-switch v-model="form.isBudget" @on-change="form.isBudget = $event" />
           </Col>
@@ -150,9 +234,9 @@
       </template>
       <template v-if="form.isBudget" v-slot:plan>
         <Row>
-          <Col span="5" style="color: red;"><span style="font-weight: 600;padding-right: 4px;">*</span>关联预算计划</Col>
+          <Col span="5"><span style="font-weight: 600;padding-right: 4px;color: red;">*</span>关联预算计划</Col>
           <Col>
-            <Input v-model="form.plan" style="width: 300px;" icon="ios-arrow-down" readonly @on-focus="isShowPlan = true"></Input>
+            <Input placeholder="请选择关联预算计划" v-model="form.plan" style="width: 300px;" icon="ios-arrow-down" readonly @on-focus="isShowPlan = true,getBudgets()"></Input>
           </Col>
         </Row>
       </template>
@@ -161,9 +245,9 @@
 <!--  新增表 预算计划  -->
     <xy-dialog :is-show.sync="isShowPlan" title="预算计划" :width="640">
       <template v-slot:normalContent>
-        <Input search enter-button="搜 索" placeholder="搜索预算计划.." />
+        <Input search enter-button="搜 索" placeholder="搜索预算计划.." @on-search="(value)=>(getBudgets({name:value}))"/>
 
-        <xy-table :table-item="searchTable" :height="240" style="margin-top: 10px;">
+        <xy-table :list="plans" :show-index="false" :table-item="planTable" :height="240" style="margin-top: 10px;">
           <template v-slot:btns>
             <el-table-column label="使用金额" header-align="center">
               <Input />
@@ -182,7 +266,7 @@
     </xy-dialog>
 
 <!--    付款登记-->
-    <xy-dialog title="付款登记" :is-show.sync="isShowPaymentRegistration" type="form" class="payment-registration" :form="paymentRegistrationForm">
+    <xy-dialog title="付款登记" :is-show.sync="isShowPaymentRegistration" type="form" class="payment-registration" :form="paymentRegistrationForm" :rules="paymentRegistrationRules">
       <template v-slot:extraFormTop>
         <div class="payment-registration-row">
           <div class="payment-registration-row-title">受款单位</div>
@@ -208,46 +292,46 @@
           <div class="payment-registration-row">
             <div class="payment-registration-row-title">已付笔数</div>
             <div class="payment-registration-row-content">10</div>
-            <div class="payment-registration-row-content" style="color: #ff0000;padding-left: 10px;cursor: pointer;">点击查看列表</div>
+            <div class="payment-registration-row-content" style="color: #ff0000;padding-left: 16px;cursor: pointer;">点击查看列表</div>
           </div>
         </div>
       </template>
       <template v-slot:applyMoney>
         <Row>
-          <Col span="5" style="color: red;"><span style="font-weight: 600;padding-right: 4px;">*</span>申请付款金额</Col>
+          <Col span="5"><span style="font-weight: 600;padding-right: 4px;color: red;">*</span>申请付款金额</Col>
           <Col>
-            <Input v-model="paymentRegistrationForm.applyMoney" style="width: 300px;"></Input>
+            <Input placeholder="请填写付款金额" v-model="paymentRegistrationForm.applyMoney" style="width: 300px;"></Input>
           </Col>
         </Row>
       </template>
       <template v-slot:deductionMoney>
         <Row>
-          <Col span="5" style="color: red;"><span style="font-weight: 600;padding-right: 4px;">*</span>本期扣款金额</Col>
+          <Col span="5"><span style="font-weight: 600;padding-right: 4px;color: red;">*</span>本期扣款金额</Col>
           <Col>
-            <Input v-model="paymentRegistrationForm.deductionMoney" style="width: 300px;"></Input>
+            <Input placeholder="请填写扣款金额" v-model="paymentRegistrationForm.deductionMoney" style="width: 300px;"></Input>
           </Col>
         </Row>
       </template>
       <template v-slot:type>
         <Row>
-          <Col span="5" style="color: red;"><span style="font-weight: 600;padding-right: 4px;">*</span>款项类型
-
+          <Col span="5"><span style="font-weight: 600;padding-right: 4px;color: red;">*</span>款项类型
           </Col>
           <Col>
-            <Select v-model="paymentRegistrationForm.type" style="width: 300px;"></Select>
+            <Select placeholder="请选择款项类型" v-model="paymentRegistrationForm.type" style="width: 300px;"></Select>
           </Col>
         </Row>
       </template>
       <template v-slot:isLast>
         <Row>
-          <Col span="5" style="color: red;"><span style="font-weight: 600;padding-right: 4px;">*</span>是否最后一笔</Col>
+          <Col span="5"><span style="font-weight: 600;padding-right: 4px;color: red;">*</span>是否最后一笔</Col>
           <Col>
             <i-switch v-model="paymentRegistrationForm.isLast" @on-change="paymentRegistrationForm.isLast = $event" />
           </Col>
         </Row>
       </template>
       <template v-slot:extraFormBottom>
-        <xy-table :table-item="searchTable" :height="240" style="margin-top: 10px;">
+        <Input search enter-button="搜 索" placeholder="搜索预算计划.." />
+        <xy-table :list="[{}]" :show-index="false" :table-item="planTable" :height="240" style="margin-top: 10px;">
           <template v-slot:btns>
             <el-table-column label="使用金额" header-align="center">
               <Input />
@@ -260,41 +344,25 @@
 </template>
 
 <script>
-import ResizeObserver from "resize-observer-polyfill";
-
+import {getContract,addContrant,delContract,detailContract} from "@/api/contract/contract"
+import {getparameter} from "@/api/system/dictionary"
+import {listdept} from "@/api/system/department";
+import {getBudget} from "@/api/budget/budget"
 export default {
   data() {
-    return {
-      isShowPaymentRegistration:false,
-      paymentRegistrationForm:{
-        applyMoney:"",
-        deductionMoney:"",
-        type:"",
-        isLast:""
-      },
-      searchTable:[
-        {
-          label:"分类"
-        },
-        {
-          label:"名称"
-        },
-        {
-          label:"计划金额"
+    var planPass = (rule, value, callback) => {
+      if(this.form.isBudget){
+        if(this.form.plan == ''){
+          return callback(new Error('必选'))
+        }else{
+          callback()
         }
-      ],
-      isShowPlan:false,
-      isShowAdd:false,
-      form:{
-        name:"",
-        type:"",
-        methods:"",
-        modality:"",
-        price:"",
-        fundingChannels:"",
-        isBudget:true,
-        plan:""
-      },
+      }else{
+        callback()
+      }
+    }
+    return {
+      //搜索
       select:{
         startDate:"",
         endDate:"",
@@ -302,76 +370,272 @@ export default {
         department:"",
         purchaseModality:"",
         purchaseMethods:"",
-        priceMin:0,
-        priceMax:0,
+        priceMin:null,
+        priceMax:null,
         status:""
       },
-      cityList: [
-        {
-          value: 'New York',
-          label: 'New York'
-        },
-        {
-          value: 'London',
-          label: 'London'
-        }
-      ],
+      purchaseType: [],//购买形式
+      purchaseWay:[],//购买方式
+      moneyWay:[],//资金渠道
+      departments:[],//部门科室
+      //表格
       table:[
         {
           label:"项目名称",
+          width: 160
         },
         {
-          label:"采购形势"
+          label:"采购形势",
+          width: 160
         },
         {
-          label:"项目类型"
+          label:"项目类型",
+          width: 160
         },
         {
-          label:"采购方式"
+          label:"采购方式",
+          width: 160
         },
         {
-          label:"资金来源"
+          label:"资金来源",
+          width: 160
         },
         {
-          label:"项目预算(万元)"
+          label:"项目预算(万元)",
+          width: 200
         },
         {
-          label:"合同状态"
+          label:"合同状态",
+          width: 160
         },
         {
-          label:"流程",
+          label:"采购流程",
           multiHd:[
             {
               label:"请示流程",
+              width: 200
             },
             {
-              label:"采购流程"
+              label:"采购业务审批流程",
+              width: 200
             },
             {
-              label:"招标审核流程"
+              label:"招标审核流程",
+              width: 200
             },
             {
-              label:"合同会签流程"
+              label:"合同会签流程",
+              width: 200
             }
           ]
         },
         {
-          label:"创建科室"
+          label:"创建科室",
+          width: 200
+        },
+        {
+          label:"创建人",
+          width: 200
+        },
+        {
+          label:"创建信息",
+          width: 200
+        }
+      ],
+
+      //合同详情
+      isShowDetail:false,
+      linkBudgetPlanTable:[
+        {
+          label:"ID",
+          sortable:false,
+          width:160
+        },
+        {
+          label:"类型",
+          width:100,
+          sortable: false,
+          customFn:()=>{
+            return (
+              <div>
+                <Tag color="primary">类型一</Tag>
+              </div>
+            )
+          }
+        },
+        {
+          label:"项目",
+          width: 140,
+          sortable: false
+        },
+        {
+          label:"金额",
+          sortable: false
+        }
+      ],
+      journalTable:[
+        {
+          label:'ID',
+          sortable:false
+        },
+        {
+          label:"日志类型",
+          sortable:false
+        },
+        {
+          label:"日志内容",
+          sortable:false
+        },
+        {
+          label:"操作人",
+          sortable:false
         },
         {
-          label:"创建人"
+          label:"时间",
+          sortable:false
+        }
+      ],
+
+      //付款登记
+      isShowPaymentRegistration:false,
+      paymentRegistrationForm:{
+        applyMoney:"",
+        deductionMoney:"",
+        type:"",
+        isLast:""
+      },
+      paymentRegistrationRules:{
+        applyMoney:[
+          {required:true,message:"必填"}
+        ],
+        deductionMoney:[
+          {required:true,message:"必填"}
+        ],
+        type:[
+          {required:true,message:"必选"}
+        ]
+      },
+      planTable:[
+        {
+          sortable:false,
+          width:36,
+          customFn:()=>{
+            return (
+              <div>
+                <Checkbox></Checkbox>
+              </div>
+            )
+          }
+        },
+        {
+          label:"分类",
+          prop:'type',
+          formatter:(cell,data,value)=>{
+            switch (value){
+              case 1:
+                return "部门预算"
+                break;
+              case 2:
+                return "水务计划"
+                break;
+              default:
+                return "未知"
+            }
+          }
+        },
+        {
+          label:"名称",
+          prop:'name',
+          align:'left'
         },
         {
-          label:"创建信息"
+          label:"计划金额",
+          prop:'money',
+          align:'right'
         }
-      ]
+      ],
+
+
+      //新增
+      isShowAdd:false,
+      form:{
+        name:"",
+        type:"",
+        methods:"",
+        modality:"",
+        price:"",
+        fundingChannels:"",
+        isBudget:true,
+        plan:''
+      },
+      rules:{
+        name:[
+          {required:true,message:"必填"}
+        ],
+        type:[
+          {required:true,message:"必选"}
+        ],
+        methods:[
+          {required:true,message:"必选"}
+        ],
+        modality:[
+          {required:true,message:"必选"}
+        ],
+        price:[
+          {required:true,message:"必填"}
+        ],
+        fundingChannels:[
+          {required:true,message:"必填"}
+        ],
+        plan:[
+          {validator:planPass}
+        ]
+      },
+      isShowPlan:false,//新增中预算计划
+      plans:[],//预算数据
+      plansPageIndex:1,
     }
   },
   methods: {
+    //获取预算计划
+    async getBudgets(params){
+      this.plans = (await getBudget(params ?? {page_size:10,page:this.plansPageIndex})).data
+    },
+    //获取资金渠道
+    async getMoneyWay(){
+      this.moneyWay = (await getparameter({number:'money_way'})).detail
+    },
+    //获取购买方式
+    async getPurchaseWay(){
+      this.purchaseWay = (await getparameter({number:'purchase_way'})).detail
+    },
+    //获取科室
+    async getDepartment(){
+      this.departments = await listdept()
+    },
+    //获取购买形式列表
+    async getPurchaseType(){
+      this.purchaseType = (await getparameter({number:'purchase_type'})).detail
+    },
 
+    //获取合同列表
+    getContracts(){
+      getContract().then((res)=>{
+        console.log(res)
+      })
+    },
+
+    //新建合同
+    submit(){
+      console.log(this.form)
+    }
   },
   mounted() {
-    //
+    this.getPurchaseType()
+    this.getContracts()
+    this.getDepartment()
+    this.getPurchaseWay()
+    this.getMoneyWay()
   },
 }
 </script>
@@ -380,6 +644,10 @@ export default {
   .selects{
     display: flex;
     flex-wrap: wrap;
+
+    &>div{
+      margin-bottom: 6px;
+    }
   }
   .selectTop{
     margin-top: 10px;
@@ -392,7 +660,6 @@ export default {
 
       padding: 6px 0;
       &-title{
-        color: #ff0000;
 
         padding: 0 10px;
       }
@@ -401,4 +668,88 @@ export default {
       }
     }
   }
+
+  .contract-detail{
+
+    .base-info{
+
+      &-title{
+        font-weight: 600;
+
+        padding: 0 10px;
+      }
+      &-item{
+        display: flex;
+
+        margin-top: 8px;
+        &-title{
+
+          padding: 0 20px;
+        }
+        &-content{
+
+        }
+        &-unit{
+
+          margin-left: 20px;
+        }
+      }
+    }
+
+    .link-budget-plan{
+
+      margin-top: 20px;
+      &-title{
+        @extend .base-info-title;
+
+        padding-bottom: 10px;
+      }
+    }
+
+    .sign-info{
+
+      &-title{
+        @extend .link-budget-plan-title;
+      }
+      &-item{
+        @extend .base-info-item;
+        &-title{
+          @extend .base-info-item-title;
+        }
+        &-content{
+          @extend .base-info-item-content;
+        }
+        &-unit{
+          @extend .base-info-item-unit;
+        }
+      }
+    }
+
+    .related-processes{
+
+      margin-top: 20px;
+      &-title{
+        @extend .link-budget-plan-title;
+      }
+      &-item{
+        color: red;
+        cursor: pointer;
+        display: flex;
+
+        &>div{
+          flex-basis: 25%;
+
+          padding: 0 20px;
+        }
+      }
+    }
+
+    .journal{
+
+      margin-top: 20px;
+      &-title{
+        @extend .link-budget-plan-title;
+      }
+    }
+  }
 </style>

src/views/contract/paymentRegistrationList.vue

@@ -0,0 +1,36 @@
+<template>
+  <div style="padding: 0 20px;">
+    <lx-header icon="md-apps" text="付款登记" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
+      <div slot="content"></div>
+      <slot>
+        <span style="padding: 0 6px;word-break: keep-all;">创建日期</span>
+        <span>
+          <DatePicker placeholder="请选择日期" type="date" placement="bottom-start" style="width: 180px"></DatePicker>
+        </span>
+
+        <span style="padding: 0 6px;word-break: keep-all;">关键字</span>
+        <span>
+          <Input placeholder="请输入关键字" type="date" style="width: 180px"></Input>
+        </span>
+
+        <Button type="primary"  style="margin-left: 10px" ghost>重置</Button>
+        <Button type="primary"  style="margin-left: 10px">查询</Button>
+      </slot>
+    </lx-header>
+
+    <xy-table></xy-table>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  methods: {},
+
+}
+</script>
+
+<style scoped lang="scss">
+</style>

src/views/statisticalReport/budgetProgress.vue

@@ -0,0 +1,41 @@
+<template>
+  <div style="padding: 0 20px;">
+    <lx-header icon="md-apps" text="预算进展情况" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
+      <div slot="content"></div>
+      <slot>
+        <span style="padding: 0 6px;word-break: keep-all;">年份</span>
+        <span>
+          <DatePicker placeholder="请选择年份" type="year" placement="bottom-start" style="width: 160px"></DatePicker>
+        </span>
+
+        <span style="padding: 0 6px;word-break: keep-all;">预算类型</span>
+        <span>
+          <Select placeholder="请选择预算类型" type="date" style="width: 160px"></Select>
+        </span>
+
+        <span style="padding: 0 6px;word-break: keep-all;">科室</span>
+        <span>
+          <Select placeholder="请选择科室" type="date" style="width: 160px"></Select>
+        </span>
+
+        <Button type="primary"  style="margin-left: 10px" ghost>重置</Button>
+        <Button type="primary"  style="margin-left: 10px">查询</Button>
+      </slot>
+    </lx-header>
+
+    <xy-table></xy-table>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  methods: {},
+
+}
+</script>
+
+<style scoped lang="scss">
+</style>