up

src/components/base-button.vue

@@ -1,8 +1,8 @@
 <template>
   <div
-    :class="type === '1' ? 'btn' : 'btn1'"
-    :style="`width:${width}px`"
-    class="flex flex-center mr-5 font-12 pointer"
+      :class="type === '1' ? 'btn' : 'btn1'"
+      :style="`width:${width}px`"
+      class="flex flex-center mr-5 font-12 pointer"
   >
     <el-icon :color="type === '1' ? 'white' : '#E9A856'" size="16px">
       <component :is="icon"></component>
@@ -53,7 +53,7 @@ export default {
 
 .btn1 {
   border-radius: 6px;
-  padding: 8px 16px;
+  padding: 7px 16px;
   height: 18px;
   font-size: 14px;
   background-color: white;

src/views/contract/component/info.vue

@@ -3,38 +3,60 @@
     <div class="padding top flex flex-center flex-justify-between">
       <span>基础信息</span>
       <div>
-        <el-button type="primary" plain> {{ save }} </el-button>
+        <el-button type="primary" plain> {{ save }}</el-button>
       </div>
     </div>
     <div class="padding">
       <el-form
-        label-position="right"
-        label-width="100px"
-        :disabled="disabled"
-        style="background-color: white"
+          label-position="right"
+          label-width="100px"
+          :disabled="disabled"
+          style="background-color: white"
       >
         <div class="full-width flex flex-center flex-justify-between">
-          <el-form-item label="备案时间" class="flex-child-average">
-            <el-input v-model="form.name" />
+          <el-form-item label="合同名称" class="flex-child-average">
+            <el-input v-model="form.name"/>
           </el-form-item>
-          <el-form-item label="合同签订时间" class="flex-child-average">
-            <el-input v-model="form.region" />
+          <el-form-item label="合同类别" class="flex-child-average">
+            <el-input v-model="form.region"/>
           </el-form-item>
         </div>
         <div class="full-width flex flex-center flex-justify-between">
-          <el-form-item label="开工时间" class="flex-child-average">
-            <el-input v-model="form.type" />
+          <el-form-item label="合同编号" class="flex-child-average">
+            <el-input v-model="form.type"/>
           </el-form-item>
           <el-form-item label="合同金额" class="flex-child-average">
-            <el-input v-model="form.type" />
+            <el-input v-model="form.type"/>
           </el-form-item>
         </div>
         <div class="full-width flex flex-center flex-justify-between">
           <el-form-item label="合同甲方" class="flex-child-average">
-            <el-input v-model="form.type" />
+            <el-input v-model="form.type"/>
           </el-form-item>
           <el-form-item label="合同乙方" class="flex-child-average">
-            <el-input v-model="form.type" />
+            <el-input v-model="form.type"/>
+          </el-form-item>
+        </div>
+        <div class="full-width flex flex-center flex-justify-between">
+          <el-form-item label="签订日期" class="flex-child-average">
+            <el-input v-model="form.type"/>
+          </el-form-item>
+          <el-form-item label="到期日期" class="flex-child-average">
+            <el-input v-model="form.type"/>
+          </el-form-item>
+        </div>
+        <div class="full-width flex flex-center flex-justify-between">
+          <el-form-item label="签订地点" class="flex-child-average">
+            <el-input v-model="form.type"/>
+          </el-form-item>
+          <el-form-item label="合同状态" class="flex-child-average">
+            <el-input v-model="form.type"/>
+          </el-form-item>
+        </div>
+        <div class="full-width flex flex-center flex-justify-between">
+          <el-form-item label="支付方式" class="flex-child-average">
+            <el-input v-model="form.type" autosize
+                      type="textarea"/>
           </el-form-item>
         </div>
       </el-form>

src/views/contract/component/info2.vue

@@ -2,42 +2,20 @@
   <div>
     <div class="padding top flex flex-center flex-justify-between">
       <span>台账信息</span>
-      <div>
-        <el-button type="primary" plain> {{ save }} </el-button>
-      </div>
     </div>
-    <div class="padding">
-      <el-form
-        label-position="right"
-        label-width="100px"
-        :disabled="disabled"
-        style="background-color: white"
+    <div class="ml-20 mr-20 mt-20">
+      <avue-crud
+          :option="option"
+          :data="data"
+          ref="crud"
+          v-model="form"
+          :before-open="beforeOpen"
+          @row-del="rowDel"
+          @row-save="rowSave"
+          @row-update="rowUpdate"
+          @on-load="onLoad"
       >
-        <div class="full-width flex flex-center flex-justify-between">
-          <el-form-item label="备案时间" class="flex-child-average">
-            <el-input v-model="form.name" />
-          </el-form-item>
-          <el-form-item label="合同签订时间" class="flex-child-average">
-            <el-input v-model="form.region" />
-          </el-form-item>
-        </div>
-        <div class="full-width flex flex-center flex-justify-between">
-          <el-form-item label="开工时间" class="flex-child-average">
-            <el-input v-model="form.type" />
-          </el-form-item>
-          <el-form-item label="合同金额" class="flex-child-average">
-            <el-input v-model="form.type" />
-          </el-form-item>
-        </div>
-        <div class="full-width flex flex-center flex-justify-between">
-          <el-form-item label="合同甲方" class="flex-child-average">
-            <el-input v-model="form.type" />
-          </el-form-item>
-          <el-form-item label="合同乙方" class="flex-child-average">
-            <el-input v-model="form.type" />
-          </el-form-item>
-        </div>
-      </el-form>
+      </avue-crud>
     </div>
   </div>
 </template>
@@ -47,12 +25,49 @@ export default {
   name: 'info',
   data() {
     return {
-      disabled: true,
-      save: '编辑',
-      form: {
-        name: '',
-        region: '',
-        type: ''
+      form: {},
+      data: [{
+        id: 3,
+        prop: 'ooooo'
+      }],
+      option: {
+        align: 'center',
+        menuAlign: 'center',
+        menuWidth: 220,
+        menuBtnTitle: '支付凭证',
+        size: 'mini',
+        addBtn: true,
+        editBtn: true,
+        editBtnText: '添加',
+        editBtnIcon: 'Plus',
+        viewBtn: true,
+        delBtn: true,
+        refreshBtn: false,
+        columnBtn: false,
+        labelWidth: 140,
+        border: true,
+        column: [
+          {
+            label: '名称',
+            prop: 'noticeType'
+          },
+          {
+            label: '款项类别',
+            prop: 'noticeType'
+          },
+          {
+            label: '支付金额',
+            prop: 'noticeType'
+          },
+          {
+            label: '付款时间',
+            prop: 'noticeType'
+          },
+          {
+            label: '备注',
+            prop: 'noticeType'
+          },
+        ]
       }
     }
   }

src/views/contract/component/info3.vue

@@ -2,42 +2,20 @@
   <div>
     <div class="padding top flex flex-center flex-justify-between">
       <span>相关信息文件</span>
-      <div>
-        <el-button type="primary" plain> {{ save }} </el-button>
-      </div>
     </div>
-    <div class="padding">
-      <el-form
-        label-position="right"
-        label-width="100px"
-        :disabled="disabled"
-        style="background-color: white"
+    <div class="ml-20 mr-20 mt-20">
+      <avue-crud
+          :option="option"
+          :data="data"
+          ref="crud"
+          v-model="form"
+          :before-open="beforeOpen"
+          @row-del="rowDel"
+          @row-save="rowSave"
+          @row-update="rowUpdate"
+          @on-load="onLoad"
       >
-        <div class="full-width flex flex-center flex-justify-between">
-          <el-form-item label="备案时间" class="flex-child-average">
-            <el-input v-model="form.name" />
-          </el-form-item>
-          <el-form-item label="合同签订时间" class="flex-child-average">
-            <el-input v-model="form.region" />
-          </el-form-item>
-        </div>
-        <div class="full-width flex flex-center flex-justify-between">
-          <el-form-item label="开工时间" class="flex-child-average">
-            <el-input v-model="form.type" />
-          </el-form-item>
-          <el-form-item label="合同金额" class="flex-child-average">
-            <el-input v-model="form.type" />
-          </el-form-item>
-        </div>
-        <div class="full-width flex flex-center flex-justify-between">
-          <el-form-item label="合同甲方" class="flex-child-average">
-            <el-input v-model="form.type" />
-          </el-form-item>
-          <el-form-item label="合同乙方" class="flex-child-average">
-            <el-input v-model="form.type" />
-          </el-form-item>
-        </div>
-      </el-form>
+      </avue-crud>
     </div>
   </div>
 </template>
@@ -47,15 +25,44 @@ export default {
   name: 'info',
   data() {
     return {
-      disabled: true,
-      save: '编辑',
-      form: {
-        name: '',
-        region: '',
-        type: ''
+      form: {},
+      data: [{
+        id: 3,
+        prop: 'ooooo'
+      }],
+      option: {
+        align: 'center',
+        menuAlign: 'center',
+        menuWidth: 220,
+        menuBtnTitle: '支付凭证',
+        size: 'mini',
+        addBtn: true,
+        addBtnText: '上传',
+        editBtn: false,
+        viewBtn: true,
+        delBtn: true,
+        refreshBtn: false,
+        columnBtn: false,
+        labelWidth: 140,
+        border: true,
+        column: [
+          {
+            label: '文件名称',
+            prop: 'noticeType'
+          },
+          {
+            label: '上传状态',
+            prop: 'noticeType'
+          },
+          {
+            label: '上传时间',
+            prop: 'noticeType'
+          },
+        ]
       }
     }
   }
+
 }
 </script>
 

src/views/contract/index.vue

@@ -1,15 +1,53 @@
 <template>
   <el-card shadow="hover">
+    <el-form v-model="form" class="full-width" label-width="120px">
+      <div class="flex">
+        <div class="flex flex-center mt-15 mr-10">
+          <el-form-item label="关键字" class="full-width" style="margin-left: -50px">
+            <el-input
+                v-model="form.projectName"
+                placeholder="输入合同关键字"
+                prefix-icon="Search"
+                clearable
+            />
+          </el-form-item>
+          <el-form-item class="full-width" label="合同类别">
+            <el-select v-model="form.isStart" clearable>
+              <el-option
+                  v-for="item in start"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item class="full-width" label="合同状态">
+            <el-select v-model="form.isStorage" clearable>
+              <el-option
+                  v-for="item in storage"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </div>
+        <div class="flex flex-center ml-20">
+          <base-button type="0" title="重置" icon="Refresh"/>
+          <base-button/>
+        </div>
+      </div>
+    </el-form>
     <avue-crud
-      :option="option"
-      :data="data"
-      ref="crud"
-      v-model="form"
-      :before-open="beforeOpen"
-      @row-del="rowDel"
-      @row-save="rowSave"
-      @row-update="rowUpdate"
-      @on-load="onLoad"
+        :option="option"
+        :data="data"
+        ref="crud"
+        v-model="form"
+        :before-open="beforeOpen"
+        @row-del="rowDel"
+        @row-save="rowSave"
+        @row-update="rowUpdate"
+        @on-load="onLoad"
     >
     </avue-crud>
   </el-card>
@@ -17,38 +55,77 @@
 
 <route>
 {
-name: '合同管理',
+name: '合同信息',
 meta: { layout: 'empty'}
 }
 </route>
 <script>
+import BaseButton from "@/components/base-button.vue";
+
 export default {
+  components: {BaseButton},
   data() {
     return {
       form: {},
-      data: [
-        {
-          id: '333',
-          noticeType: 'noticeTypenoticeType'
-        }
-      ],
+      data: [{
+        id: 3,
+        prop: 'ooooo'
+      }],
       option: {
         align: 'center',
         menuAlign: 'center',
-        menuWidth: 380,
+        menuWidth: 180,
         size: 'mini',
         addBtn: false,
         editBtn: false,
         viewBtn: true,
+        delBtn: true,
         refreshBtn: false,
         columnBtn: false,
         labelWidth: 140,
         border: true,
         column: [
           {
-            label: '会议类型',
+            label: '合同名称',
+            prop: 'noticeType'
+          },
+          {
+            label: '合同编号',
+            prop: 'noticeType'
+          },
+          {
+            label: '合同金额',
+            prop: 'noticeType'
+          },
+          {
+            label: '已付金额',
+            prop: 'noticeType'
+          },
+          {
+            label: '未付金额',
+            prop: 'noticeType'
+          },
+          {
+            label: '合同类型',
+            prop: 'noticeType'
+          },
+          {
+            label: '签订对方',
+            prop: 'noticeType'
+          },
+          {
+            label: '签订日期',
             prop: 'noticeType'
-          }
+          },
+          {
+            label: '合同状态',
+            prop: 'noticeType'
+          },
+          {
+            label: '到期日期',
+            prop: 'noticeType'
+          },
+
         ]
       }
     }
@@ -58,7 +135,7 @@ export default {
       if (type === 'view') {
         const data = this.$router.resolve({
           path: '/contract/detail',
-          query: { id: this.form.id }
+          query: {id: this.form.id}
         })
         window.open(data.href, '_blank')
       }