协议

src/views/agree/special/special.vue

@@ -33,16 +33,29 @@
                     <span>删除</span>
                 </el-button>
             </template>
-            <HcTable :column="tableColumn" :datas="tableData" :loading="tableLoading" isCheck @selection-change="tableSelectionChange">
-                <template #action="{row,index}">
-                    <el-button size="small" type="primary" @click="editRowClick(row)">修改</el-button>
-                    <el-button size="small" type="warning">查看</el-button>
-                    <el-button size="small" type="danger">删除</el-button>
-                </template>
-            </HcTable>
-            <template #action>
-                <HcPages :pages="searchForm" @change="pageChange"/>
-            </template>
+            <div class="agree-special-card" :class="isTableRow?'info':''">
+                <div class="special-table-box">
+                    <div class="special-table">
+                        <HcTable :column="tableColumn" :datas="tableData" :loading="tableLoading" isCheck
+                                 @selection-change="tableSelectionChange" @row-click="tableRowClick"
+                        >
+                            <template #action="{row,index}">
+                                <el-button size="small" type="primary" @click="editRowClick(row)">修改</el-button>
+                                <el-button size="small" type="warning">查看</el-button>
+                                <el-button size="small" type="danger">删除</el-button>
+                            </template>
+                        </HcTable>
+                    </div>
+                    <div class="special-page">
+                        <HcPages :pages="searchForm" @change="pageChange"/>
+                    </div>
+                </div>
+                <div class="special-table-info">
+                    <HcCardItem title="已填写的专项设施信息详情" scrollbar>
+                        <HcTable :column="tableColumn1" :datas="tableData1"/>
+                    </HcCardItem>
+                </div>
+            </div>
         </HcCard>
     </HcPageLayout>
 </template>
@@ -80,12 +93,16 @@ const pageChange = ({current, size}) => {
 //获取数据
 const tableLoading = ref(false)
 const tableColumn = [
-    {key: 'key1', name: '协议编号'},
-    {key: 'key2', name: '协议书名称'},
-    {key: 'key3', name: '地类补偿金额'},
-    {key: 'key4', name: '青苗及附着物补偿金额'},
-    {key: 'key5', name: '补偿总金额'},
-    {key: 'action', name: '操作', width: '190', align: 'center'},
+    {key: 'key1', name: '协议编号', width: 200},
+    {key: 'key2', name: '协议书名称', minWidth: 200},
+    {key: 'key3', name: '补偿总金额(万元)', width: 200},
+    {key: 'key4', name: '拆迁单位', width: 200},
+    {key: 'key5', name: '拆迁日期', width: 200},
+    {key: 'key6', name: '施工单位', minWidth: 200},
+    {key: 'key7', name: '甲方', minWidth: 200},
+    {key: 'key8', name: '乙方', minWidth: 200},
+    {key: 'key9', name: '丙方', minWidth: 200},
+    {key: 'action', name: '操作', width: '190', align: 'center', fixed: 'right'},
 ]
 const tableData = ref([
     {id: 1, key1: 'xxxx', key2: 'xxxx', key3: '65632'},
@@ -102,6 +119,28 @@ const tableSelectionChange = (rows) => {
     console.log(rows)
 }
 
+//详情
+const tableColumn1 = [
+    {key: 'key1', name: '拆迁桩号'},
+    {key: 'key2', name: '拆迁长度(公里)'},
+    {key: 'key3', name: '拆迁类型'},
+    {key: 'key4', name: '补偿标准(万元/公里)'},
+    {key: 'key5', name: '补偿金额(万元)'},
+    {key: 'key6', name: '备注'},
+]
+const tableData1 = ref([
+    {id: 1, key1: 'xxxx', key2: 'xxxx', key3: '65632'},
+    {id: 2, key1: 'xxxx', key2: 'xxxx', key3: '65632'},
+    {id: 3, key1: 'xxxx', key2: 'xxxx', key3: '65632'},
+    {id: 4, key1: 'xxxx', key2: 'xxxx', key3: '65632'},
+])
+
+const isTableRow = ref(false)
+const tableRowClick = () => {
+    isTableRow.value = true
+}
+
+
 //新增
 const addRowClick = () => {
     router.push({
@@ -123,4 +162,36 @@ const editRowClick = (row) => {
     height: 100%;
     padding: 18px;
 }
+.agree-special-card {
+    position: relative;
+    height: 100%;
+    .special-table-box {
+        position: relative;
+        height: 100%;
+        .special-table {
+            position: relative;
+            height: calc(100% - 52px);
+        }
+        .special-page {
+            position: relative;
+            margin-top: 20px;
+        }
+    }
+    .special-table-info {
+        position: relative;
+        margin-top: 0;
+        height: 0;
+        display: none;
+    }
+    &.info {
+        .special-table-box {
+            height: calc(100% - 335px);
+        }
+        .special-table-info {
+            margin-top: 34px;
+            height: 300px;
+            display: block;
+        }
+    }
+}
 </style>