4d42674d by lihua

登记进度节点多的时候显示横向滚动条

1 parent 48f9beef
...@@ -259,7 +259,7 @@ onMounted(() => { ...@@ -259,7 +259,7 @@ onMounted(() => {
259 <el-table-column v-for="item in tableFields" :label="item.label" :width="item.width" :min-width="item.minWidth" 259 <el-table-column v-for="item in tableFields" :label="item.label" :width="item.width" :min-width="item.minWidth"
260 :fixed="item.fixed" :align="item.align" :type="item.type == 'index' ? '' : undefined" 260 :fixed="item.fixed" :align="item.align" :type="item.type == 'index' ? '' : undefined"
261 :sortable="item.sortable ?? false" :prop="item.field" :class-name="item.columClass" 261 :sortable="item.sortable ?? false" :prop="item.field" :class-name="item.columClass"
262 :show-overflow-tooltip="item.type != 'switch'"> 262 :show-overflow-tooltip="item.type != 'switch' && item.type != 'stepsBar'">
263 <template #header> 263 <template #header>
264 <template v-if="!!item?.toolTipContent"> 264 <template v-if="!!item?.toolTipContent">
265 <span style="color:#000;display: inline-block">{{ item.label }}</span> 265 <span style="color:#000;display: inline-block">{{ item.label }}</span>
......
...@@ -117,13 +117,15 @@ const tableInfo = ref({ ...@@ -117,13 +117,15 @@ const tableInfo = ref({
117 rowKey: 'guid', 117 rowKey: 'guid',
118 loading: false, 118 loading: false,
119 fields: [{ label: "序号", type: "index", width: 56, align: "center" }, 119 fields: [{ label: "序号", type: "index", width: 56, align: "center" },
120 { label: "数据资产名称", field: "daName", width: 180, align: "left", type: 'text_btn', value: 'assetDetail', columClass: 'text_btn', click: (scope) => { 120 {
121 let row = scope.row; 121 label: "数据资产名称", field: "daName", width: 180, align: "left", type: 'text_btn', value: 'assetDetail', columClass: 'text_btn', click: (scope) => {
122 router.push({ 122 let row = scope.row;
123 name: 'registerInfoDetail', 123 router.push({
124 query: { guid: row.guid, name: row.daName, tenantGuid: row.tenantGuid, tenantName: row.tenantName, type: 'asset' } 124 name: 'registerInfoDetail',
125 }); 125 query: { guid: row.guid, name: row.daName, tenantGuid: row.tenantGuid, tenantName: row.tenantName, type: 'asset' }
126 } }, 126 });
127 }
128 },
127 { label: "所属公司", field: "tenantName", width: 240 }, 129 { label: "所属公司", field: "tenantName", width: 240 },
128 { label: "数交所", field: "exchangeName", width: 200 }, 130 { label: "数交所", field: "exchangeName", width: 200 },
129 { label: "流程状态", field: "approveVO", type: "approveTag", width: 96, align: 'center' }, 131 { label: "流程状态", field: "approveVO", type: "approveTag", width: 96, align: 'center' },
...@@ -134,7 +136,7 @@ const tableInfo = ref({ ...@@ -134,7 +136,7 @@ const tableInfo = ref({
134 }, 136 },
135 { label: "证书状态", field: "documentState", type: "tag", width: 96, align: 'center' }, 137 { label: "证书状态", field: "documentState", type: "tag", width: 96, align: 'center' },
136 { 138 {
137 label: "审核阶段", field: "progress", className: 'custom-steps', type: "stepsBar", width: 320, align: 'center', fixed: 'right', stepsInfo: (scope) => { 139 label: "审核阶段", field: "progress", className: 'custom-steps costume_scroll small', type: "stepsBar", width: 320, align: 'center', fixed: 'right', stepsInfo: (scope) => {
138 let nodes = scope.row.approveVO?.nodes; 140 let nodes = scope.row.approveVO?.nodes;
139 if (!nodes?.length) { 141 if (!nodes?.length) {
140 return null; 142 return null;
...@@ -142,6 +144,12 @@ const tableInfo = ref({ ...@@ -142,6 +144,12 @@ const tableInfo = ref({
142 return { 144 return {
143 list: nodes.map((n, index) => { 145 list: nodes.map((n, index) => {
144 return { 146 return {
147 tooltip: {
148 placement: 'top',
149 content: n.processName,
150 className: 'step_title_tooltip',
151 effect: 'light',
152 },
145 title: n.processName, 153 title: n.processName,
146 value: index + 1 154 value: index + 1
147 } 155 }
...@@ -209,11 +217,22 @@ onBeforeMount(() => { ...@@ -209,11 +217,22 @@ onBeforeMount(() => {
209 217
210 :deep(.custom-steps) { 218 :deep(.custom-steps) {
211 width: 100%; 219 width: 100%;
212 height: 60px; 220 height: 64px;
213 display: flex; 221 display: flex;
222 overflow: auto hidden;
223
224 &.costume_scroll {
225 &.small {
226 padding-bottom: 4px;
227 }
228 }
214 229
215 .el-steps { 230 .el-steps {
216 width: 100%; 231 width: 100%;
232
233 .el-step {
234 min-width: 55px;
235 }
217 } 236 }
218 } 237 }
219 </style> 238 </style>
...\ No newline at end of file ...\ No newline at end of file
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!