From e51a8bda1e15ad30654c5f90f5591f240a5ec3de Mon Sep 17 00:00:00 2001
From: zouyu <2723363702@qq.com>
Date: 星期二, 22 八月 2023 18:02:09 +0800
Subject: [PATCH] modified: .env.development new file: src/api/home.js new file: src/assets/404_images/bg.png modified: src/main.js modified: src/views/home/index.vue modified: src/views/standardLibrary/index.vue
---
src/views/standardLibrary/index.vue | 483 +++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 375 insertions(+), 108 deletions(-)
diff --git a/src/views/standardLibrary/index.vue b/src/views/standardLibrary/index.vue
index 2811310..7e30213 100644
--- a/src/views/standardLibrary/index.vue
+++ b/src/views/standardLibrary/index.vue
@@ -1,150 +1,178 @@
<template>
<div class="standard-library-main">
<div class="content-main">
- <div class="library-bom">
+ <div class="library-bom" style="width: 300px;">
<el-input
v-model="filterText"
placeholder="杈撳叆鍏抽敭瀛楄繘琛岃繃婊�"
/>
+ <el-button type="text">鍏ㄩ儴</el-button>
<el-tree
ref="tree"
+ style="width: 100%;"
class="filter-tree"
- :data="data"
+ :data="standardTree"
:props="defaultProps"
+ node-key="id"
+ highlight-current
default-expand-all
:filter-node-method="filterNode"
- >
- </el-tree>
+ :render-content="renderContent"
+ @node-click="nodeClick"
+ />
</div>
- <div class="library-table">
+ <div class="library-table" style="width: 80%;">
<div class="table-header">
<div class="search-bar">
- <el-form ref="form" inline="true" :model="searchData">
+ <el-form ref="form" :inline="true" :model="searchData">
<el-form-item>
<el-input
- placeholder="璇疯緭鍏ヤ汉鍛樺悕绉�/鍘熸潗鏂欏悕绉�"
v-model="searchData.keyword"
+ placeholder="璇疯緭鍏ヤ汉鍛樺悕绉�/鍘熸潗鏂欏悕绉�"
>
<i slot="prefix" class="el-input__icon el-icon-search" />
</el-input>
</el-form-item>
<el-form-item>
- <el-button type="primary">鏌ヨ</el-button>
- <el-button type="primary" plain>閲嶇疆</el-button>
- <!-- <el-button type="text">楂樼骇鎼滅储<i class="el-icon-arrow-down el-icon--right" /></el-button> -->
+ <el-button type="primary" @click="filteredTableData">鏌ヨ</el-button>
+ <el-button type="primary" plain @click="resetBtn">閲嶇疆</el-button>
</el-form-item>
</el-form>
</div>
<div class="serve-btn">
- <el-button type="primary" icon="el-icon-plus">鏂板浜哄憳</el-button>
+ <el-button type="primary" icon="el-icon-plus" @click="addTreeFormVisible = true">鏂板</el-button>
</div>
</div>
<div class="table-box">
<el-table
- ref="personnerlTable"
-
- :cell-style="{textAlign: 'center'}"
- :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}"
- :data="personnerlTable"
+ ref="tableData"
+ row-key="id"
+ max-height="680"
+ :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+ :cell-style="{textAlign: 'left'}"
+ :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'left'}"
+ :data="tableData"
style="width: 100%"
>
<el-table-column
- prop="roleName"
- label="瑙掕壊鍚嶇О"
- min-width="120"
- />
- <el-table-column
- prop="rolePermissions"
- label="瑙掕壊鏉冮檺"
- min-width="120"
- />
- <el-table-column
- prop="age"
- label="骞撮緞"
- min-width="150"
- />
- <el-table-column
- prop="creatTime"
- label="鍒涘缓鏃堕棿"
- min-width="180"
- />
- <el-table-column
- prop="phone"
- label="鐢佃瘽"
- min-width="200"
- />
- <el-table-column
- prop="mailbox"
- label="閭"
- min-width="200"
- />
- <el-table-column
- prop="incumbentStatus"
- label="鍦ㄨ亴鐘舵��"
- min-width="120"
- :filters="[{ text: 0, value: 0 }, { text: 1, value: 1 }]"
- :filter-method="filterTag"
- filter-placement="bottom-end"
+ type="index"
+ label="搴忓彿"
+ width="100px"
>
- <template slot-scope="scope">
- <el-tag
- :type="scope.row.businessStatus === 0 ? 'primary' : 'success'"
- disable-transitions
- >{{ scope.row.businessStatus === 0 ? '鏈悓鎰�' : '宸插悓鎰�' }}</el-tag>
+ <template v-if="scope.row.index+1" slot-scope="scope">
+ {{ scope.row.index+1 }}
</template>
</el-table-column>
<el-table-column
- label="鎿嶄綔"
- min-width="120"
+ prop="father"
+ label="鍚嶇О"
+ width="320px"
>
<template slot-scope="scope">
- <el-button @click="handleClick(scope.row)" type="text" size="small">缂栬緫</el-button>
- <!-- <el-button type="text" size="small">缂栬緫</el-button> -->
+ <el-tag size="mini" :type="scope.row.father? '':'success'" :style="{borderRadius: '40%',marginRight: '12px'}">{{ scope.row.father? '01':'02' }}</el-tag> {{ scope.row.father || scope.row.name }}
</template>
</el-table-column>
+ <el-table-column
+ prop="unit"
+ label="鍗曚綅"
+ width="300px"
+ />
+ <el-table-column
+ prop="required"
+ label="鏍囧噯"
+ width="300px"
+ />
+ <el-table-column
+ prop="internal"
+ label="鍐呮帶鍒�"
+ width="300px"
+ />
</el-table>
+ <!-- 寮瑰嚭琛ㄥ崟椤� -->
<div>
+ <!-- -->
+ </div>
+ <div>
+ <!-- 鍒嗛〉鍣� -->
<el-pagination
+ :current-page="pageParams.pageNo"
+ :page-sizes="[10, 15, 20, 25]"
+ :page-size="pageParams.pageSize"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="pageParams.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
- :current-page="currentPage"
- :page-sizes="[100, 200, 300, 400]"
- :page-size="100"
- layout="total, sizes, prev, pager, next, jumper"
- :total="400">
- </el-pagination>
+ />
</div>
</div>
</div>
</div>
+ <el-dialog class="addTree" title="娣诲姞鎸囨爣" width="28%" :visible.sync="addTreeFormVisible" @close="closeAddTreeForm">
+ <el-form v-model="addTreeForm" label-position="top">
+ <el-form-item label="涓婄骇">
+ <el-cascader
+ v-model="addTreeForm.addTypeArr"
+ :options="formTypeOptions"
+ :props="{ ...defaultProps,checkStrictly: true }"
+ clearable
+ @change="changeCascader"
+ />
+ </el-form-item>
+ <el-form-item v-show="addTreeForm.addTypeArr.length<2" label="鐗╂枡鍚嶇О">
+ <el-input v-model="addTreeForm.materialName" />
+ </el-form-item>
+ <el-form-item v-show="addTreeForm.addTypeArr.length<3" label="鎵ц鏍囧噯">
+ <el-input v-model="addTreeForm.standardName" />
+ </el-form-item>
+ <el-form-item v-show="addTreeForm.addTypeArr.length<4" label="瑙勬牸鍨嬪彿">
+ <el-input v-model="addTreeForm.specificationsName" />
+ </el-form-item>
+ </el-form>
+ <div slot="footer" class="dialog-footer">
+ <el-button type="primary" @click="subAddTreeForm">纭� 瀹�</el-button>
+ <el-button @click="addTreeFormVisible = false">鍙� 娑�</el-button>
+ </div>
+ </el-dialog>
</div>
</template>
<script>
+import { getMaterialList, getProductList, getProductSonList,
+ addMaterial, addStandards, addSpecifications
+} from '@/api/standardLibrary'
export default {
data() {
return {
- data: [{
- id: 1,
- label: '涓�绾� 1',
- children: [{
- id: 4,
- label: '浜岀骇 1-1',
- children: [{
- id: 9,
- label: '涓夌骇 1-1-1'
- }, {
- id: 10,
- label: '涓夌骇 1-1-2'
- }]
- }]
- }],
+ addTreeFormVisible: false,
+ filterText: '',
+ // 鏍囧噯搴揵om鏍�
+ standardTree: [],
+ // bom鐨�,榛樿閰嶇疆鍊�
defaultProps: {
children: 'children',
- label: 'label'
+ label: 'name',
+ value: 'id'
},
+ // 鏌ヨ鏉′欢
searchData: {
keyword: ''
+ },
+ tableData: [
+ ],
+ oldtableData: [],
+ // 鍒嗛〉鍙傛暟
+ pageParams: {
+ pageNo: 1,
+ pageSize: 12,
+ total: 0
+ },
+ tablespecifications: [
+ ],
+ // 閫変腑鐨勮妭鐐规暟鎹�
+ selectData: {},
+ formTypeOptions: [],
+ addTreeForm: {
+ addTypeArr: []
}
}
},
@@ -153,61 +181,287 @@
this.$refs.tree.filter(val)
}
},
+ created() {
+ this.getStandardTree()
+ },
methods: {
filterNode(value, data) {
if (!value) return true
return data.label.indexOf(value) !== -1
+ },
+ // 鑾峰彇bom鏍戠殑鏍囧噯鏁版嵁
+ async getStandardTree() {
+ const { data } = await getMaterialList()
+ console.log(data)
+ this.standardTree = data.map(item => {
+ let name = null
+ switch (item.type) {
+ case 1:
+ name = '鍘熸潗鏂�'
+ break
+ case 2:
+ name = '鍗婃垚鍝�'
+ break
+ case 3:
+ name = '鎴愬搧'
+ break
+ }
+ return {
+ ...item, id: item.type, name
+ }
+ })
+ console.log(this.standardTree)
+ // formTypeOptions
+ // 榛樿绗竴涓洓绾ц妭鐐规悳绱紝鏂板閰嶇疆椤�
+ const treeOptions = JSON.parse(JSON.stringify(this.standardTree))
+ this.getDefault(treeOptions, 0)
+ console.log(treeOptions)
+ this.formTypeOptions = treeOptions
+ this.$nextTick().then(() => {
+ const firstNode = document.querySelector('.el-tree-node .el-tree-node__children .el-tree-node .el-tree-node__children .el-tree-node .el-tree-node__children .el-tree-node')
+ firstNode.click()
+ // console.log(firstNode)
+ })
+ },
+ getDefault(arr, index) {
+ for (const item of arr) {
+ if (item.children && item.children?.length > 0) {
+ // 鏈夊瓙鑺傜偣
+ this.getDefault(item.children, index + 1)
+ if (index === 2) {
+ item.children = null
+ }
+ }
+ // else {
+ // // if ('children' in item) {
+ // // //
+ // // } else {
+ // // // console.log(index, item)
+ // // }
+ // }
+ }
+ },
+ // 鐐瑰嚮bom鏍戣妭鐐规柟娉�
+ async nodeClick(data, node, element) {
+ // console.log('data', data)
+ // console.log('children' in data)
+ // 鏄瓙鑺傜偣
+ if (node.level === 4) {
+ // console.log(data, node)
+ // 瀛樹笅閫変腑鑺傜偣
+ this.selectData = data
+ // eslint-disable-next-line prefer-const
+ this.getTableByClick(data)
+ }
+ if (!('children' in data)) {
+ return
+ }
+ },
+ async getTableByClick(data) {
+ // eslint-disable-next-line prefer-const
+ let { data: { row, total }} = await getProductList({ pageNo: this.pageParams.pageNo, pageSize: this.pageParams.pageSize, specificationsId: data.id })
+ // console.log(row)
+ this.pageParams.total = total
+ row = row.map((item, index) => ({ ...item, index }))
+ for (const item of row) {
+ if (item.children) {
+ const res = await getProductSonList({ fatherName: item.father })
+ item.children = res.data
+ item.id = item.father
+ }
+ }
+ this.tableData = row
+ },
+ specificationDetails(row) {
+ // 璺宠浆浜у搧瑙勬牸璇︽儏椤�
+ this.$router.push(`/standardLibrary/SpecificationDetails/${row.id}`)
+ },
+ handleSizeChange(val) {
+ console.log(`姣忛〉 ${val} 鏉)
+ this.pageParams.pageSize = val
+ this.getTableByClick(this.selectData)
+ },
+ handleCurrentChange(val) {
+ console.log(`褰撳墠椤�: ${val}`)
+ this.pageParams.pageNo = val
+ this.getTableByClick(this.selectData)
+ },
+ // 鏌ヨ鎸夐挳
+ filteredTableData() {
+ this.oldtableData = this.tableData
+ // 鏍规嵁杈撳叆鐨勫叧閿瓧寰楀埌杩囨护鍚庣殑鏁版嵁锛屽鏋滄湁灏辨妸杩囨护鍚庣殑鏁版嵁灞曠ず鍦ㄩ〉闈笂
+ const filteredtabledata = this.tableData.filter(item => {
+ return item.name.includes(this.searchData.keyword)
+ })
+ // console.log('filteredtabledata', filteredtabledata)
+ this.tableData = filteredtabledata
+ },
+ // 閲嶇疆鎸夐挳
+ resetBtn() {
+ this.searchData.keyword = ''
+ this.tableData = this.oldtableData
+ },
+ renderContent(h, { node, data, store }) {
+ // console.log('data', data)
+ // console.log('node', node)
+ // 鍒ゆ柇鏄惁鏄埗鑺傜偣鎴栨枃浠跺す
+ const isFolder = ('children') in data
+ return (
+ <span class='tree-node'>
+ {isFolder ? (
+ <i
+ class={node.expanded ? 'el-icon-folder-opened blue-folder' : 'el-icon-folder blue-folder'}
+ ></i>
+ ) : (
+ <i class='el-icon-document blue-folder'></i>
+ )}
+ <div class='tree-lable'>[{node.level}] {data.name}</div>
+ </span>
+ )
+ },
+ async subAddTreeForm() {
+ this.addTreeFormVisible = false
+ console.log(this.addTreeForm.addTypeArr.length)
+ let res = null
+ try {
+ switch (this.addTreeForm.addTypeArr.length) {
+ case 1:
+ console.log(this.addTreeForm)
+ res = await addMaterial({ ...this.addTreeForm, type: this.addTreeForm.addTypeArr.pop() })
+ break
+ case 2:
+ console.log(this.addTreeForm)
+ res = await addStandards({ ...this.addTreeForm, materialId: this.addTreeForm.addTypeArr.pop() })
+ break
+ case 3:
+ console.log(this.addTreeForm)
+ res = await addSpecifications({ ...this.addTreeForm, standardId: this.addTreeForm.addTypeArr.pop() })
+ break
+ }
+ } catch (error) {
+ this.$message.error('娣诲姞澶辫触')
+ }
+
+ console.log(res)
+ this.$message.success('娣诲姞鎴愬姛')
+ this.addTreeForm = {}
+ this.getStandardTree()
+ this.getTableByClick(this.selectData)
+ },
+ changeCascader(data) {
+ console.log(data)
+ this.addTreeForm.addTypeArr = data
+ },
+ closeAddTreeForm() {
+ this.addTreeForm = {
+ addTypeArr: []
+ }
+ console.log(this.addTreeForm)
}
+ /** 琛ㄦ牸鏌愯鐐瑰嚮浜嬩欢 */
+ // handleRowClick(row, column, event) {
+ // // 鍒ゆ柇褰撳墠琛屾槸鍚︽湁瀛愰泦锛岃嫢娌℃湁鍒欑粨鏉熷鐞�
+ // // console.log(row)
+ // if (!row.children) return
+ // this.$refs.tableData.toggleRowExpansion(row)
+ // }
}
}
</script>
<style lang="scss" scoped>
+
+// el-table琛ㄦ牸瀵归綈
+::v-deep .el-table__row:not([class*="el-table__row--level-"]) {
+ td:nth-child(2){
+ padding-left: 23px !important;
+ }
+}
+// .dialogform {
+// transform: translate(-50%, -50%);
+// top: 50% !important;
+// left: 50% !important;
+// width: 1000px;
+// height: 800px;
+// }
.standard-library-main{
- width: 100%;
+ width: 100vh;
height: 100%;
// 椤甸潰涓績鍐呭鍖哄煙
.content-main{
display: flex;
height: 100%;
min-height: calc(100vh - 88px);
+ max-height: calc(100vh - 88px);
padding: 15px;
>div{
padding: 20px;
background: #fff;
}
.library-bom{
- flex: 2;
- margin-right: 12px;
+ // padding-right: 10px;
+ width: 300px;
+ // height: 100%;
+ max-height: 100%;
+ // margin-right: 12px;
+ // overflow-y: scroll;
.el-tree {
- margin-top: 12px;
+ // margin-top:
+ width: 100%;
::v-deep .el-tree-node__content{
height: 24px !important;
- font-size: 14px;
- display: inline-block !important;
+ font-size: 18px;
+ // display: inline-block !important;
padding: 2px;
- color: #333;
- }
- ::v-deep .el-tree-node__content:hover{
- background: rgba(58,124,253,0.1) ;
- // opacity: 0.31;
- border-radius: 3px;
- color: #333 !important;
- }
- ::v-deep .el-tree-node:focus>.el-tree-node__content{
- background: rgba(58,124,253,0.1) ;
- // opacity: 0.31;
- border-radius: 3px;
- color: #333 !important;
+ // color: #333;
+ .tree-node{
+ display: flex;
+ align-items: center;
+ height: 20px;
+ }
+ .tree-lable{
+ height: 100%;
+ line-height: 23px;
+ font-size: 12px;
+ padding-left: 8px;
+ }
+ .blue-folder{
+ color: rgb(64, 158, 255)
+ }
}
}
+ // .el-tree {
+ // margin-top: 12px;
+ // ::v-deep .el-tree-node__content{
+ // height: 24px !important;
+ // font-size: 14px;
+ // display: inline-block !important;
+ // padding: 2px;
+ // color: #333;
+ // }
+ // ::v-deep .el-tree-node__content:hover{
+ // background: rgba(58,124,253,0.1) ;
+ // // opacity: 0.31;
+ // border-radius: 3px;
+ // color: #333 !important;
+ // }
+ // ::v-deep .el-tree-node:focus>.el-tree-node__content{
+ // background: rgba(58,124,253,0.1) ;
+ // // opacity: 0.31;
+ // border-radius: 3px;
+ // color: #333 !important;
+ // }
+ // }
}
.library-table{
- flex: 8;
+ // height: 100%;
+ width: 170vh;
+ max-height: 100%;
+ // flex: 8;
margin-left: 12px;
display: flex;
flex-direction: column;
-
+ // overflow-y: scroll;
.table-header{
display: flex;
justify-content: space-between;
@@ -221,10 +475,15 @@
// padding: 20px 20px 10px 20px;
display: flex;
flex-direction: column;
- .el-table {
- flex: 1;
- }
- >div:nth-child(2){
+ justify-content: space-between;
+
+ // .el-table {
+ // flex: 1;
+ // max-height: 680px;
+ // overflow-y: scroll;
+ // }
+ >div:nth-child(3){
+ // height: 20px;
display: flex;
justify-content: end;
margin: 10px 0;
@@ -232,5 +491,13 @@
}
}
}
+ .addTree{
+ .el-form-item{
+ margin-bottom: 10px;
+ }
+ .el-cascader{
+ width: 100%;
+ }
+ }
}
</style>
--
Gitblit v1.9.3