TBA_GXPT/ruoyi-ui/src/views/developer/workSpace/shenqing.vue

<template>
  <div style="height: 100vh;width: 100%;background-color: white;overflow-y: auto;">
     <el-tabs
        v-model="activeName"
        type="card"
        class="demo-tabs"
        @tab-click="handleClick"
    >
        <el-tab-pane label="全部" name="first">
            <div style="display: flex;align-items: center;line-height: 1.5;">
                <div style="margin-left: 1%;">流程单号:</div>
                <el-input v-model="input" style="width: 15%;margin-left: 1%;" />
                <div style="margin-left: 5%;">信息资源名称:</div>
                <el-input v-model="input" style="width: 15%;margin-left: 1%;" />
                <el-button type="primary" @click="showAdd" size="mini" style="margin-left:5%;">搜索</el-button>
            </div>
            <el-table 
                style="margin-top: 1%;width: 98%;margin-left: 1%;overflow: auto;"
                :data="tableDataCan" 
                :cell-style="{ textAlign: 'center',padding:'3px 0px' }"
                :header-cell-style="{fontSize: '14px', textAlign: 'center', }"
                max-height="45vh"
                :row-style="{ height: heightAll*0.01+'px',fontSize: '17px',textAlign:'center'  }"
                border>
                    <el-table-column prop="parName" label="流程单号">
                    </el-table-column>
                    <el-table-column prop="parName" label="信息资源名称">
                    </el-table-column>
                    <el-table-column prop="parType" label="资源类型" >
                    </el-table-column>
                    <el-table-column prop="parLine" label="服务">
                    </el-table-column>
                    <el-table-column prop="parNote" label="操作" width="120">
                      <template #default="scope">
                          <el-button type="danger" @click="delCan(scope.$index, scope.row)" text size="mini" style="margin-left: 0%;">删除</el-button>
                      </template> 
                    </el-table-column>
                </el-table>
        </el-tab-pane>
        <el-tab-pane label="已通过" name="second">
            
        </el-tab-pane>
        <el-tab-pane label="流程中" name="third">
            
        </el-tab-pane>
        <el-tab-pane label="已终止" name="fourth">
            
        </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
const activeName = ref('first');
onMounted(() => {
});
</script>
<style scoped>

.triangle-border {
            width: 40px;  /* 定义三角形的“容器”宽度 */
            height: 40px; /* 定义三角形的“容器”高度 */
            background-color: #33C358; /* 三角形的填充色 */
            /* 关键：定义多边形的三个顶点 */
            /* 三个点依次是：右上角(100% 0), 右下角(100% 100%), 左上角(0 0) */
            clip-path: polygon(100% 0, 100% 100%, 0 0);
        }
</style>