<template>
|
<div>
|
<table
|
style="border: 1px solid black; border-collapse: collapse; width: 1800px"
|
>
|
<thead>
|
<tr>
|
<th
|
style="
|
background-color: #add8e6;
|
text-align: center;
|
border: 1px solid black;
|
"
|
colspan="5"
|
>
|
工作基本属性
|
</th>
|
</tr>
|
</thead>
|
<tbody>
|
<tr>
|
<td
|
style="background-color: #add8e6; width: 200px; text-align: right"
|
>
|
工作名称：
|
</td>
|
<td style="padding-left: 20px">
|
<input type="text" />
|
</td>
|
</tr>
|
|
<tr>
|
<td colspan="2" style="text-align: center; padding-top: 20px">
|
<div
|
style="
|
color: red;
|
font-size: 26px;
|
font-weight: 700;
|
margin-bottom: 10px;
|
"
|
>
|
{{title}}
|
</div>
|
<slot></slot>
|
</td>
|
</tr>
|
|
<tr>
|
<td
|
style="background-color: #add8e6; width: 200px; text-align: right"
|
>
|
附件文件：
|
</td>
|
<td style="padding: 5px 10px">
|
<el-button type="danger" plain>删除文件</el-button>
|
<el-button type="primary" plain>阅读文件</el-button>
|
<el-button type="warning" plain>编辑文件</el-button>
|
</td>
|
</tr>
|
<tr style="padding: 5px">
|
<td
|
style="background-color: #add8e6; width: 200px; text-align: right"
|
>
|
上传附件：
|
</td>
|
<td style="padding: 5px 10px">
|
<el-button type="danger" plain>选择文件</el-button>
|
未选择任何文件
|
<el-button type="warning" plain>上传</el-button>
|
</td>
|
</tr>
|
</tbody>
|
<thead>
|
<tr>
|
<th
|
style="
|
background-color: #add8e6;
|
text-align: center;
|
border: 1px solid black;
|
"
|
colspan="5"
|
>
|
流程审批附加属性
|
</th>
|
</tr>
|
</thead>
|
<tbody>
|
<tr style="padding: 5px">
|
<td
|
style="background-color: #add8e6; width: 200px; text-align: right"
|
>
|
下一节点选择：
|
</td>
|
<td style="padding: 5px 10px">
|
<select>
|
<option value="公开">节点序号：1--节点名称：领导审核</option>
|
<option value="保密">保密</option>
|
<option value="机密">机密</option>
|
<option value="绝密">绝密</option>
|
</select>
|
</td>
|
</tr>
|
<tr style="padding: 5px">
|
<td
|
style="background-color: #add8e6; width: 200px; text-align: right"
|
>
|
评审模式：
|
</td>
|
<td style="padding: 5px 10px">一人通过可向下流转</td>
|
</tr>
|
<tr style="padding: 5px">
|
<td
|
style="background-color: #add8e6; width: 200px; text-align: right"
|
>
|
审批人选择模式：
|
</td>
|
<td style="padding: 5px 10px">从默认审批人中选择</td>
|
</tr>
|
<tr style="padding: 5px">
|
<td
|
style="background-color: #add8e6; width: 200px; text-align: right"
|
>
|
审批人选择：
|
</td>
|
<td style="padding: 5px 10px">
|
<select>
|
<option value="公开">张三</option>
|
<option value="保密">李四</option>
|
<option value="机密">王五</option>
|
<option value="绝密">绝密</option>
|
</select>
|
</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
title: {
|
type: String,
|
required: true
|
}
|
}
|
};
|
</script>
|
|
<style>
|
/* 添加样式来统一处理表格行的边框 */
|
table tr {
|
border-top: 1px solid black;
|
border-bottom: 1px solid black;
|
}
|
.biao {
|
margin: 0 auto;
|
}
|
.biao td,
|
.biao th {
|
border-right: 1px solid black;
|
border-bottom: 1px solid black;
|
white-space: nowrap; /* 防止换行 */
|
overflow: hidden; /* 超出部分隐藏 */
|
text-overflow: ellipsis; /* 超出部分显示省略号 */
|
padding: 10px 0 10px 10px; /* 上右下左，增加左padding */
|
}
|
.biao tr:last-child td {
|
border-bottom: none;
|
}
|
.biao tr td:first-child {
|
border-left: none;
|
}
|
.custom-input {
|
border: none;
|
border-bottom: 1px solid black;
|
background-color: transparent;
|
width: 100%; /* 让输入框充满单元格 */
|
}
|
.custom-input:focus {
|
border-bottom: 2px solid #0000ff; /* 聚焦时加粗并高亮下边框 */
|
outline: none; /* 去除浏览器默认的聚焦轮廓 */
|
}
|
</style>
|
