From b46e6d2306515f94bf77c06e8d80ac76267e3ddb Mon Sep 17 00:00:00 2001
From: gaoshp <291585735@qq.com>
Date: 星期日, 02 六月 2024 21:44:23 +0800
Subject: [PATCH] 搜索
---
src/views/console/bom-list/index.vue | 246 +++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 205 insertions(+), 41 deletions(-)
diff --git a/src/views/console/bom-list/index.vue b/src/views/console/bom-list/index.vue
index 31029aa..f6aaf40 100644
--- a/src/views/console/bom-list/index.vue
+++ b/src/views/console/bom-list/index.vue
@@ -1,47 +1,50 @@
<template>
- <div class="rolePage">
+ <div class="bomPage">
<div class="roleContainer">
- <div class="roleContainer-title">浜у搧鍒楄〃</div>
- <el-input v-model="keyword" prefix-icon="el-icon-search" placeholder="杈撳叆鎼滅储鍐呭" clearable @keyup.enter="searchBtn"></el-input>
- <ul>
- <li v-for="(item,index) in leftData" @click="changeTabaleLi(item,index)">
- <span :class="{active: item.active}">{{item.roleName}}</span>
+ <div class="bomContainer-title">浜у搧鍒楄〃</div>
+ <el-input v-model="keyword" size="small" prefix-icon="el-icon-search" placeholder="杈撳叆鎼滅储鍐呭" clearable @keyup.enter="searchBtn"></el-input>
+ <ul class="left-ul">
+ <li v-for="(item,index) in leftData" :class="{active: item.active}" @click="changeTabaleLi(index)">
+ <span>銆恵{item.code}}銆憑{item.name}}</span>
</li>
</ul>
</div>
- <div class="role-main-tabs">
- <div class="role-main-header">
- <div class="roleContainer-title">BOM娓呭崟</div>
- <div>
- <div>BOM鐗堟湰</div>
- <div>
- <span>浜у搧鍚嶇О</span>
- <span>浜у搧缂栧彿</span>
+ <div class="bom-main-tabs">
+ <div class="bom-main-header">
+ <div class="bomContainer-title">BOM娓呭崟</div>
+ <div style="padding: 20px;border-bottom: 1px solid #dee;">
+ <div class="main-info">
+ <div class="main-info-title">BOM 鐗堟湰</div>
+ <div class="main-info-tooltip">
+ <div class="main-info-item"><span style="background-color: yellow"></span><span>鏈畾鐗�</span></div>
+ <div class="main-info-item"><span style="background-color: #b7c9f3"></span><span>宸插畾鐗�</span></div>
+ </div>
+ </div>
+ <div class="main-info-conent">
+ <span>浜у搧鍚嶇О<span>{{info.name}}</span></span>
+ <span>浜у搧缂栧彿<span>{{info.code}}</span></span>
</div>
<div>
- <span>鏈畾鐗�</span>
- <span>宸插畾鐗�</span>
- </div>
- <div>
- 娣诲姞鏂扮増鏈�
+ <el-button type="primary" @click="addVis">娣诲姞鏂扮増鏈�</el-button>
</div>
</div>
</div>
- <el-tabs tab-position="top">
- <div>
- <div>BOM娓呭崟鍒楄〃</div>
+ <div class="bom-main-content">
+ <div class="main-content-left">
+ <div class="bomContainer-title">BOM娓呭崟鍒楄〃</div>
+ <div></div>
</div>
- <div>
+ <div class="main-content-right">
<ul>
- <li>鐗╂枡缂栧彿</li>
- <li>鐗╂枡鍚嶇О</li>
- <li>瑙勬牸</li>
- <li>璁￠噺鍗曚綅</li>
- <li>鐗╂枡绫诲瀷</li>
- <li>鐗╂枡灞炴��</li>
- <li>鏄惁蹇呮</li>
- <li>棰濆畾搴撳瓨</li>
- <li>瀹夊叏搴撳瓨</li>
+ <li>鐗╂枡缂栧彿<span>-</span></li>
+ <li>鐗╂枡鍚嶇О<span>-</span></li>
+ <li>瑙勬牸<span>-</span></li>
+ <li>璁￠噺鍗曚綅<span>-</span></li>
+ <li>鐗╂枡绫诲瀷<span>-</span></li>
+ <li>鐗╂枡灞炴��<span>-</span></li>
+ <li>鏄惁蹇呮<span>-</span></li>
+ <li>棰濆畾搴撳瓨<span>-</span></li>
+ <li>瀹夊叏搴撳瓨<span>-</span></li>
</ul>
<el-table ref="multipleTableRef0" :data="tableData" border style="width: 100%" class="multipleTableRef">
<el-table-column prop="name" label="宸ュ簭缂栧彿"></el-table-column>
@@ -51,44 +54,205 @@
<el-table-column prop="standardModel" label="鍥哄畾鑰楁崯"></el-table-column>
<el-table-column fixed="right" label="鎿嶄綔" width="200px">
<template #default="scope">
- <el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">缂栬緫</el-button>
+ <!-- <el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">缂栬緫</el-button>
<el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">鍒锋柊</el-button>
- <el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">鍒犻櫎</el-button>
+ <el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">鍒犻櫎</el-button> -->
</template>
</el-table-column>
</el-table>
</div>
- </el-tabs>
+ </div>
</div>
+ <el-dialog title="" v-model="visible" :width="360" class="visible-model">
+ <el-form :model="routeForm" :rules="routeRules" ref="dialogForm" label-width="120px"
+ label-position="center">
+ <el-row>
+ <el-col :span="24">
+ <el-form-item label="宸ヨ壓璺嚎鐗堟湰" prop="test">
+ <el-select v-model="routeForm.test" style="width: 100%" placeholder="璇烽�夋嫨">
+ <el-option v-for="item in testList" :key="item.id" :label="item.title" :value="item.id"/>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ <template #footer>
+ <el-button @click="visible = false">鍙栨秷</el-button>
+ <el-button type="primary" :loading="isSaveing" @click="routeSubmit">纭畾</el-button>
+ </template>
+ </el-dialog>
</div>
</template>
<script>
export default {
name: 'BOM',
- components: {
-
- },
+ components: {},
data() {
return {
+ testList: [],
+ routeForm: {
+ test: ""
+ },
+ routeRules: {
+ test: [
+ { required: true, message: "璇烽�夋嫨宸ヨ壓璺嚎鐗堟湰" }
+ ]
+ },
+ visible: false,
leftData: [],
dialog: {
save: false,
permission: false
},
+ info: {},
tableData: []
}
},
mounted(){
-
+ this.getLeftTree();
},
methods: {
+ routeSubmit() {
+ this.$refs.dialogForm.validate(async (valid) => {
+ if (valid) {
+ // this.$HTTP.post("/api/blade-system/data-scope/submit",obj).then(res=> {
+ // this.isSaveing = false;
+ // if(res.code == 200) {
+ // this.$emit('success', this.addDictForm, this.mode);
+ // this.visible = false;
+ // this.$message.success("鎿嶄綔鎴愬姛");
+ // }else {
+ // this.$alert(res.message, "鎻愮ず", {type: 'error'});
+ // }
+ // })
+ }else{
+ return false;
+ }
+ })
+ },
searchBtn() {},
-
+ addVis() {
+ this.visible = true;
+ },
+ changeTabaleLi(index) {
+ this.leftData.forEach(item=> {
+ item.active = false;
+ })
+ this.leftData[index].active = true;
+ this.info = this.leftData[index];
+ },
+ getLeftTree() {
+ this.$HTTP.get("/api/blade-cps/product/tree").then(res=> {
+ if(res.code == 200) {
+ this.leftData = res.data;
+ }
+ })
+ }
}
}
</script>
<style scoped>
-
+.bomPage {
+ display: flex;
+ min-height: 100%;
+ margin: 8px;
+}
+.bomContainer-title {
+ font-size: 16px;
+ text-align: center;
+ height: 38px;
+ line-height: 38px;
+ border-bottom: 1px solid #e2e2e2;
+ background-color: #409eff;
+ color: #fff;
+ border-radius: 2px 2px 0 0;
+ margin-bottom: 12px;
+}
+.roleContainer {
+ width: 240px;
+ margin-right: 8px;
+ padding: 4px;
+ background-color: #fff;
+}
+.bom-main-tabs {
+ flex: 1;
+ padding: 8px;
+ background-color: #fff;
+}
+.left-ul {
+ margin-top: 12px;
+ padding-left:30px;
+ padding-right:30px;
+}
+.left-ul li {
+ padding: 6px 6px;
+ list-style: none;
+ cursor: pointer;
+ margin-bottom: 6px;
+}
+.left-ul .active {
+ background-color: #7ab3ee;
+ display: inline-block;
+ width: 100%;
+}
+.left-ul li:hover {
+ background-color: #eff4f9;
+}
+.main-info {
+ display: flex;
+ justify-content: space-between;
+}
+.main-info-title {
+ font-size: 14px;
+ padding-left: 8px;
+ border-left: 2px solid #7ab3ee;
+}
+.main-info-tooltip {
+ display: flex;
+ font-size: 12px;
+}
+.main-info-item {
+ margin-right: 8px;
+}
+.main-info-item span:nth-child(1) {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ margin-right: 4px;
+ display: inline-block;
+}
+.main-info-conent {
+ display: flex;
+ margin: 8px 0px 12px;
+}
+.main-info-conent > span {
+ margin-right: 12px;
+ font-size: 14px;
+}
+.main-info-conent > span span {
+ margin-left:12px;
+}
+.bom-main-content {
+ display: flex;
+}
+.main-content-left {
+ width: 320px;
+}
+.main-content-right {
+ flex: 1;
+}
+.main-content-right ul {
+ padding: 12px 30px;
+}
+.main-content-right ul li {
+ width: 50%;
+ float: left;
+ list-style: none;
+ margin-bottom:12px;
+}
+.main-content-right ul li span {
+ margin-left:12px;
+}
</style>
--
Gitblit v1.9.3