|
|
@@ -21,8 +21,8 @@
|
|
|
</el-card>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
- <el-col :span="18" class="h-100">
|
|
|
- <div class="h-100">
|
|
|
+ <el-col :span="18" class="h-100" v-if="isShowList">
|
|
|
+ <div class="h-100 rule-box-all">
|
|
|
|
|
|
<el-card class="box-card h-100">
|
|
|
<div slot="header" class="clearfix">
|
|
|
@@ -34,6 +34,7 @@
|
|
|
size="small"
|
|
|
style="background-color:#2550A2;color:white;font-weight:bold;"
|
|
|
plain
|
|
|
+ @click="addRule"
|
|
|
>新增
|
|
|
</el-button>
|
|
|
<el-button
|
|
|
@@ -48,13 +49,96 @@
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div>
|
|
|
+ <div class="rule-box">
|
|
|
+ <div class="rule-box-item" v-for="item in ruleItemOptions" :key="item.id" @click="ruleDetailClick">
|
|
|
+ <div class="rule-box-item-icon">
|
|
|
+ <i class="el-icon-folder" style=" cursor: pointer; font-size: 48px;color:orange"></i>
|
|
|
+ </div>
|
|
|
+ <div class="rule-box-item-title">{{ item.title }}</div>
|
|
|
+ </div>
|
|
|
|
|
|
</div>
|
|
|
+ <el-pagination
|
|
|
+ style="margin-top: 30px;text-align: center;"
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="currentPage"
|
|
|
+ :page-size="pageSize"
|
|
|
+ :total="ruleItemOptions.length"
|
|
|
+ layout="prev, pager, next"
|
|
|
+ class="pagination"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
</el-card>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
+ <el-col :span="18" class="h-100" v-if="!isShowList">
|
|
|
+
|
|
|
+ <el-card class="box-card h-100">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <i class="el-icon-arrow-left" style="margin-right: 5px; cursor: pointer;" @click="goBack"></i>
|
|
|
+ <span>返回上一级</span>
|
|
|
+ </div>
|
|
|
+ <div class="box-card-title">
|
|
|
+ GB 175-2023
|
|
|
+ </div>
|
|
|
+ <div class="box-card-content1">
|
|
|
+ <div class="box-card-content1-left">
|
|
|
+ <div class="box-card-content1-left-item">
|
|
|
+ 下达日期：2023-12-12
|
|
|
+ </div>
|
|
|
+ <div class="box-card-content1-left-item">
|
|
|
+ 实施日期：2023-12-12
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ 文件名称.pdf
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box-card-content1-right">
|
|
|
+ <el-button type="danger" size="small">效果预览</el-button>
|
|
|
+ <el-button type="warning" size="small">规范更新</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box-card-content2">
|
|
|
+ <div class="box-card-content2-top">
|
|
|
+ <div class="box-card-content2-title">
|
|
|
+ <div class="title-container">
|
|
|
+ <span>样品信息</span>
|
|
|
+ <i class="el-icon-circle-plus" @click="addYp"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box-card-content2-list">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box-card-content2-bottom">
|
|
|
+ <div class="box-card-content2-title">
|
|
|
+ <span>技术指标</span>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
</el-row>
|
|
|
+ <el-dialog
|
|
|
+ title="新增"
|
|
|
+ :visible.sync="addDialogVisible"
|
|
|
+ width="30%"
|
|
|
+ append-to-body
|
|
|
+
|
|
|
+ >
|
|
|
+ <div class="input-container">
|
|
|
+ <span>规范文件夹名称</span>
|
|
|
+ <el-input v-model="titleInput" placeholder="请输入内容" style="width: 300px;"></el-input>
|
|
|
+ </div>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="addDialogVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="addDialogVisible = false">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
@@ -74,15 +158,34 @@ import {getLazytree} from "@/api/manager/wbsprivate";
|
|
|
isLeaf: function (data) {
|
|
|
return !data.hasChildren || (data.isExistForm==1);
|
|
|
},
|
|
|
- }
|
|
|
+ },
|
|
|
+ ruleItemOptions:[
|
|
|
+ {id:1,title:'规范名称'},
|
|
|
+ {id:2,title:'规范名称'},
|
|
|
+ {id:3,title:'规范名称'},
|
|
|
+ {id:1,title:'规范名称'},
|
|
|
+ {id:2,title:'规范66名称'},
|
|
|
+ {id:3,title:'规范名称'},
|
|
|
+
|
|
|
+
|
|
|
+ ],
|
|
|
+ addDialogVisible:false,
|
|
|
+ titleInput:'',
|
|
|
+ isShowList:true,
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: 40, // 8列 * 5行 = 40
|
|
|
};
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ currentPageData() {
|
|
|
+ const start = (this.currentPage - 1) * this.pageSize
|
|
|
+ const end = start + this.pageSize
|
|
|
+ return this.ruleItemOptions.slice(start, end)
|
|
|
+ }
|
|
|
+ },
|
|
|
created(){
|
|
|
console.log(this.$route.query,'this.$route.query;');
|
|
|
-
|
|
|
const { id, tenant_id,projectid,parentId } = this.$route.query;
|
|
|
- console.log(tenant_id,'tenant_id');
|
|
|
-
|
|
|
this.id = id;
|
|
|
this.parentId = 0;
|
|
|
this.tenant_id = tenant_id;
|
|
|
@@ -97,7 +200,6 @@ import {getLazytree} from "@/api/manager/wbsprivate";
|
|
|
if (node.level != 0) {
|
|
|
pid = node.data.id;
|
|
|
}
|
|
|
- const type = this.wbsType;
|
|
|
getLazytree(this.id, pid, this.tenant_id, this.projectid, {
|
|
|
wbsType: 2,
|
|
|
}).then((res) => {
|
|
|
@@ -111,12 +213,28 @@ import {getLazytree} from "@/api/manager/wbsprivate";
|
|
|
},
|
|
|
goBack() {
|
|
|
this.$router.go(-1)
|
|
|
- }
|
|
|
+ },
|
|
|
+ addRule(){
|
|
|
+ this.addDialogVisible = true;
|
|
|
+ },
|
|
|
+ ruleDetailClick(){
|
|
|
+ this.isShowList = false;
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.currentPage = val
|
|
|
+ },
|
|
|
+ handleSizeChange(val) {
|
|
|
+ this.pageSize = val
|
|
|
+ this.currentPage = 1
|
|
|
+ },
|
|
|
+ addYp(){
|
|
|
+
|
|
|
+ }
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
+<style scoped lang="scss">
|
|
|
.container-box {
|
|
|
height: calc(100vh - 120px);
|
|
|
|
|
|
@@ -135,4 +253,95 @@ import {getLazytree} from "@/api/manager/wbsprivate";
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
+.rule-box{
|
|
|
+ width: 100%;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(8, 1fr);
|
|
|
+ grid-template-rows: repeat(4, 1fr);
|
|
|
+ gap: 50px;
|
|
|
+ padding: 20px;
|
|
|
+ height: 600px;
|
|
|
+ overflow-y:hidden;
|
|
|
+
|
|
|
+ .rule-box-item{
|
|
|
+ text-align: center;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .rule-box-item-icon {
|
|
|
+ margin-bottom: 8px;
|
|
|
+
|
|
|
+ }
|
|
|
+ .rule-box-item-title {
|
|
|
+ font-size: 14px;
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+.input-container {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.input-container span {
|
|
|
+ margin-right: 10px; /* 根据需要调整间距 */
|
|
|
+}
|
|
|
+.box-card-title{
|
|
|
+ font-weight: bolder;
|
|
|
+ font-size: 24px;
|
|
|
+}
|
|
|
+.box-card-content1{
|
|
|
+ margin-top: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 100%;
|
|
|
+ .box-card-content1-left{
|
|
|
+ display: flex;
|
|
|
+ .box-card-content1-left-item{
|
|
|
+ margin-right: 25px;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+.box-card-content2{
|
|
|
+ margin-top: 10px;
|
|
|
+ padding: 10px;
|
|
|
+
|
|
|
+ .box-card-content2-title{
|
|
|
+ color: rgba(130, 130, 130, 1);
|
|
|
+ font-size: 10px;;
|
|
|
+ width: 98%;
|
|
|
+ padding-left: 20px;
|
|
|
+ font-size: 18px;
|
|
|
+ line-height: 40px;
|
|
|
+ background: rgb(240, 240, 240);
|
|
|
+ .title-container {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding-right: 20px;
|
|
|
+
|
|
|
+ i {
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 22px;
|
|
|
+ color: #2550A2;
|
|
|
+ // 添加过渡效果
|
|
|
+ &:hover {
|
|
|
+ color: #409EFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.box-card-content2-list{
|
|
|
+
|
|
|
+}
|
|
|
+.box-card-content2-bottom{
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+
|
|
|
</style>
|
