|
|
@@ -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>
|
