|
|
@@ -5,10 +5,11 @@
|
|
|
<el-header>
|
|
|
<div style="display: flex;justify-content: space-between;align-items:center;width:100%;padding:0 10px;">
|
|
|
<div>
|
|
|
- <p>产品名称：{{ row.name }}</p>
|
|
|
+ <p>{{ typesOf==1?'产品类别名称：':'产品名称：' }}{{ row.name }}</p>
|
|
|
</div>
|
|
|
<div>
|
|
|
- <el-dropdown split-button type="primary" size="small" @click="handleCommand('0')" @command="handleCommand($event)">
|
|
|
+ <el-dropdown split-button type="primary" size="small" @click="handleCommand('0')"
|
|
|
+ @command="handleCommand($event)">
|
|
|
<span>导 入</span>
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
|
<el-dropdown-item command="1">复制</el-dropdown-item>
|
|
|
@@ -57,7 +58,8 @@
|
|
|
</el-aside>
|
|
|
<el-container>
|
|
|
<el-main>
|
|
|
- <component :is="componentType" :tableData="tableData" :queryParams="queryParams" @option="handleOption">
|
|
|
+ <component :is="componentType" :tableData="tableData" :queryParams="queryParams" @option="handleOption"
|
|
|
+ @on-sort="handleSort">
|
|
|
</component>
|
|
|
</el-main>
|
|
|
<el-footer>
|
|
|
@@ -70,6 +72,7 @@
|
|
|
</el-container>
|
|
|
|
|
|
<classifyNode ref="classifyNode" :treeDataPath="treeDataPath" @isSuccess="handleSuccess"></classifyNode>
|
|
|
+ <myImageViewer v-if="showImg" :on-close="closeViewer" :src="imgSrc"></myImageViewer>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -79,7 +82,7 @@ import classifyNode from '../dialog/classifyNode.vue';
|
|
|
export default {
|
|
|
props: {
|
|
|
row: Object,
|
|
|
- typesOf:Number,
|
|
|
+ typesOf: String,//1是产品类别分类架构，2是产品架构
|
|
|
},
|
|
|
components: {
|
|
|
frameworkTable,
|
|
|
@@ -88,107 +91,19 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
// 控制显示哪一种视图
|
|
|
+ searchOption: {},
|
|
|
+ // 父级id
|
|
|
+ parentId: '0',
|
|
|
+ // 显示视图
|
|
|
componentType: 'frameworkTable',
|
|
|
// 查询产品名称数据
|
|
|
productName: '',
|
|
|
// 树形组件的数据源
|
|
|
- treeData: [
|
|
|
-
|
|
|
- {
|
|
|
- "id": 200,
|
|
|
- "parentId": 0,
|
|
|
- "structureName": "测试2",
|
|
|
- "path": "0,200",
|
|
|
- "pathName": "测试2/",
|
|
|
- "productId": 43,
|
|
|
- "pictures": [],
|
|
|
- "children": [
|
|
|
- {
|
|
|
- "id": 201,
|
|
|
- "parentId": 200,
|
|
|
- "structureName": "测试2.1",
|
|
|
- "path": "0,200,201",
|
|
|
- "pathName": "测试2/测试2.1/",
|
|
|
- "productId": 43,
|
|
|
- "pictures": [
|
|
|
- {
|
|
|
- "id": 60,
|
|
|
- "structureId": 201,
|
|
|
- "name": "98",
|
|
|
- "suffix": "jpg",
|
|
|
- "url": "/20230511/52caccb536774dd49e476a0762acf842.jpg"
|
|
|
- }
|
|
|
- ],
|
|
|
- "children": [
|
|
|
- {
|
|
|
- "id": 202,
|
|
|
- "parentId": 201,
|
|
|
- "structureName": "测试2.3",
|
|
|
- "path": "0,200,201,202",
|
|
|
- "pathName": "测试2/测试2.1/测试2.3/",
|
|
|
- "productId": 43,
|
|
|
- "pictures": [],
|
|
|
- "children": [
|
|
|
- {
|
|
|
- "id": 203,
|
|
|
- "parentId": 202,
|
|
|
- "structureName": "大伏笔",
|
|
|
- "path": "0,200,201,202,203",
|
|
|
- "pathName": "测试2/测试2.1/测试2.3/大伏笔/",
|
|
|
- "productId": 43,
|
|
|
- "pictures": [],
|
|
|
- "children": [],
|
|
|
- "patentNum": 0,
|
|
|
- "createPersonName": "测试",
|
|
|
- "createTime": "2023-05-10 16:27:40"
|
|
|
- }
|
|
|
- ],
|
|
|
- "patentNum": 0,
|
|
|
- "createPersonName": "测试",
|
|
|
- "createTime": "2023-05-10 16:27:27"
|
|
|
- },
|
|
|
- {
|
|
|
- "id": 225,
|
|
|
- "parentId": 201,
|
|
|
- "structureName": "测试3",
|
|
|
- "path": "0,200,201,225",
|
|
|
- "pathName": "测试2/测试2.1/测试3/",
|
|
|
- "productId": 43,
|
|
|
- "pictures": [],
|
|
|
- "children": [],
|
|
|
- "patentNum": 0,
|
|
|
- "createPersonName": "测试",
|
|
|
- "createTime": "2023-05-11 17:28:06"
|
|
|
- }
|
|
|
- ],
|
|
|
- "patentNum": 0,
|
|
|
- "createPersonName": "测试",
|
|
|
- "createTime": "2023-05-10 16:27:19"
|
|
|
- },
|
|
|
- {
|
|
|
- "id": 227,
|
|
|
- "parentId": 200,
|
|
|
- "structureName": "新增节点",
|
|
|
- "path": "0,200,227",
|
|
|
- "pathName": "测试2/新增节点/",
|
|
|
- "productId": 43,
|
|
|
- "pictures": [],
|
|
|
- "children": [],
|
|
|
- "patentNum": 0,
|
|
|
- "createPersonName": "测试",
|
|
|
- "createTime": "2023-05-12 08:50:37"
|
|
|
- }
|
|
|
- ],
|
|
|
- "patentNum": 0,
|
|
|
- "createPersonName": "测试",
|
|
|
- "createTime": "2023-05-10 16:27:12"
|
|
|
- }
|
|
|
-
|
|
|
- ],
|
|
|
+ treeData: [],
|
|
|
// 树形组件的显示及其子级
|
|
|
defaultProps: {
|
|
|
- children: 'children',
|
|
|
- label: 'structureName'
|
|
|
+ children: 'child',
|
|
|
+ label: 'name'
|
|
|
},
|
|
|
// 架构路径数组
|
|
|
treeDataPath: [],
|
|
|
@@ -201,46 +116,53 @@ export default {
|
|
|
total: 0,
|
|
|
// 架构表格数据源
|
|
|
tableData: [
|
|
|
- {
|
|
|
- "id": 202,
|
|
|
- "parentId": 201,
|
|
|
- "structureName": "测试2.3",
|
|
|
- "path": "0,200,201,202",
|
|
|
- "pathName": "测试2/测试2.1/测试2.3/",
|
|
|
- "productId": 43,
|
|
|
- "pictures": [],
|
|
|
- "patentNum": 0,
|
|
|
- "createPersonName": "测试",
|
|
|
- "createTime": "2023-05-10 16:27:27"
|
|
|
- },
|
|
|
- {
|
|
|
- "id": 225,
|
|
|
- "parentId": 201,
|
|
|
- "structureName": "测试3",
|
|
|
- "path": "0,200,201,225",
|
|
|
- "pathName": "测试2/测试2.1/测试3/",
|
|
|
- "productId": 43,
|
|
|
- "pictures": [],
|
|
|
- "children": [],
|
|
|
- "patentNum": 0,
|
|
|
- "createPersonName": "测试",
|
|
|
- "createTime": "2023-05-11 17:28:06"
|
|
|
- }
|
|
|
+
|
|
|
],
|
|
|
// 节点的展开
|
|
|
expandedKeys: [],
|
|
|
- // 当前节点下的所有数据
|
|
|
- nodeChildrenData: [],
|
|
|
+ // 排序
|
|
|
+ sort: [],
|
|
|
+ //展示图片
|
|
|
+ showImg:false,
|
|
|
+ //图片地址
|
|
|
+ imgSrc:'',
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
this.row.typesOf = this.typesOf
|
|
|
// 请求数据（左侧tree）
|
|
|
- // this.getList()
|
|
|
+ this.getList()
|
|
|
+ // 请求列表的数据（右侧table）
|
|
|
+ this.getTableList()
|
|
|
// 请求架构路径
|
|
|
- // this.getPath()
|
|
|
+ this.getPath()
|
|
|
},
|
|
|
methods: {
|
|
|
+ //获取排序字段// 子组件table排序
|
|
|
+ handleSort({ column, prop, order, }) {
|
|
|
+ this.sort = []//如需要多个字段排序，则不需要清空
|
|
|
+ if (order == 'null') {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var orderType = {
|
|
|
+ ascending: 0,
|
|
|
+ descending: 1
|
|
|
+ }
|
|
|
+ var params = this.sort.find(item => {
|
|
|
+ return item.orderBy == prop
|
|
|
+ })
|
|
|
+ if (params) {
|
|
|
+ params.orderType = orderType[order]
|
|
|
+ } else {
|
|
|
+ params = {}
|
|
|
+ params.orderBy = prop
|
|
|
+ params.orderType = orderType[order]
|
|
|
+ this.sort.push(params)
|
|
|
+ }
|
|
|
+ this.queryParams.current = 1
|
|
|
+ //1表示展开行2表示基础表格
|
|
|
+ this.getTableList()
|
|
|
+ },
|
|
|
//导入、复制等按钮事件
|
|
|
handleCommand(event) {
|
|
|
switch (event) {
|
|
|
@@ -258,10 +180,11 @@ export default {
|
|
|
// 专利导入
|
|
|
importProject() { },
|
|
|
// 节点复制
|
|
|
- nodeCopy(){},
|
|
|
+ nodeCopy() { },
|
|
|
// 子组件传来的消息,新增成功、编辑成功
|
|
|
handleSuccess(val) {
|
|
|
this.getList()
|
|
|
+ this.getTableList()
|
|
|
this.getPath()
|
|
|
},
|
|
|
//请求新数据后保持刷新前所点击的节点高亮并展开
|
|
|
@@ -297,22 +220,12 @@ export default {
|
|
|
},
|
|
|
// 预览图片
|
|
|
commandPackage(row) {
|
|
|
- if (row.pictures && row.pictures.length > 0) {
|
|
|
- var item = row.pictures[0]//item是图片每条信息
|
|
|
- var FileUrl = this.$p + row.pictures[0].url//FileUrl是每张图片的url
|
|
|
- var isPicture = 1
|
|
|
- const router = this.$router.resolve({
|
|
|
- path: '/checkFile',
|
|
|
- query: {
|
|
|
- row: JSON.stringify(item),
|
|
|
- FileUrl: FileUrl,
|
|
|
- isPicture: isPicture,
|
|
|
- }
|
|
|
- })
|
|
|
- window.open(router.href, '_blank');
|
|
|
- } else {
|
|
|
- this.$message.info("暂无图片，请先上传图片再进行预览！")
|
|
|
- }
|
|
|
+ this.imgSrc = this.$commonJS.checkViewer(row.systemFileList[0].guid)
|
|
|
+ this.showImg = true
|
|
|
+ },
|
|
|
+ //关闭预览图片
|
|
|
+ closeViewer(){
|
|
|
+ this.showImg = false
|
|
|
},
|
|
|
// 删除
|
|
|
deleNode(row) {
|
|
|
@@ -322,11 +235,12 @@ export default {
|
|
|
type: 'warning'
|
|
|
}).then(() => {
|
|
|
// 调用接口
|
|
|
- this.deleData.push(row)
|
|
|
let params = [row.id]
|
|
|
- this.$api.deleteEvent(params).then(res => {
|
|
|
+ this.$api.deleteTreeNode(params).then(res => {
|
|
|
if (res.code == 200) {
|
|
|
this.getList()
|
|
|
+ this.parentId = 0
|
|
|
+ this.getTableList()
|
|
|
this.$message.success('删除该当前分类节点及所属子级分类节点成功!');
|
|
|
}
|
|
|
})
|
|
|
@@ -334,32 +248,34 @@ export default {
|
|
|
this.$message.info('已取消删除');
|
|
|
});
|
|
|
},
|
|
|
- // 按钮新增分类节点/树节点新增
|
|
|
+ // 按钮新增分类节点
|
|
|
handleAppend() {
|
|
|
this.$refs.classifyNode.open(null, this.row)
|
|
|
},
|
|
|
// 根据产品名称查询产品
|
|
|
- handleQuery() {
|
|
|
- this.getList()
|
|
|
+ async handleQuery() {
|
|
|
+ await this.getList()
|
|
|
// 遍历返回的数据，对有相同搜索值进行高亮
|
|
|
- this.treeData.forEach(item => {
|
|
|
- this.getChildrenHeight(item)
|
|
|
- })
|
|
|
+ this.getChildrenHeight(this.treeData)
|
|
|
+
|
|
|
},
|
|
|
// 递归查询每一个children是否有与搜索相同的字段
|
|
|
getChildrenHeight(data) {
|
|
|
- if (data.name.indexOf(this.productName) != -1) {
|
|
|
- data.name.replace(this.productName, `<span style="color:red;font-weight:700;">${this.productName}</span>`)
|
|
|
- }
|
|
|
- if (data.children && data.children.length > 0) {
|
|
|
- this.getChildrenHeight(data.children)
|
|
|
- } else {
|
|
|
- return
|
|
|
- }
|
|
|
+ data.forEach(item => {
|
|
|
+ if (item.name.indexOf(this.productName) != -1) {
|
|
|
+ item.name.replace(this.productName, `<span style="color:red;font-weight:700;">${this.productName}</span>`)
|
|
|
+ }
|
|
|
+ if (item.child && item.child.length > 0) {
|
|
|
+ this.getChildrenHeight(item.child)
|
|
|
+ } else {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
},
|
|
|
// 树节点上的新增
|
|
|
append(data, node) {
|
|
|
- this.$refs.classifyNode.open(null, this.row,data)
|
|
|
+ this.$refs.classifyNode.open(null, this.row, data)
|
|
|
// console.log(data, node);
|
|
|
},
|
|
|
// 树节点上的编辑
|
|
|
@@ -374,26 +290,90 @@ export default {
|
|
|
// 树节点点击事件
|
|
|
handleNodeClick(data, node) {
|
|
|
// console.log(data, node);
|
|
|
- if (data.children && data.children.length > 0) {
|
|
|
- // this.tableData =
|
|
|
- this.nodeChildrenData = data.children
|
|
|
- this.handleCurrent()
|
|
|
+ if (data.child && data.child.length > 0) {
|
|
|
+ this.parentId = data.id
|
|
|
+ this.getTableList()
|
|
|
}
|
|
|
},
|
|
|
+
|
|
|
// 请求数据（tree）
|
|
|
- getList() {
|
|
|
+ async getList() {
|
|
|
let params = {
|
|
|
name: this.productName,//事件名称
|
|
|
type: this.typesOf,//类型：1产品类别，2产品，3技术分类，4自定义树
|
|
|
typeId: this.row.id,//产品或类别id
|
|
|
}
|
|
|
- this.$api.queryList(params).then(res => {
|
|
|
+ await this.$api.queryTreeNodeTree(params).then(res => {
|
|
|
if (res.code == 200) {
|
|
|
- this.treeData = res.data
|
|
|
- this.nodeChildrenData = res.data.children
|
|
|
- this.handleCurrent()
|
|
|
+ this.treeData = res.data.data
|
|
|
}
|
|
|
- }).cath(err => {
|
|
|
+ }).catch(err => {
|
|
|
+ this.$message.error(err.message)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //准备生成检索式数据
|
|
|
+ getSearch() {
|
|
|
+ let arr = []
|
|
|
+ let arr1 = ['name', 'type', 'typeId', 'parentId']
|
|
|
+ arr1.forEach(item => {
|
|
|
+ let label = ''
|
|
|
+ if (item == 'name') {//事件名称
|
|
|
+ label = this.productName
|
|
|
+ } else if (item == 'type') {
|
|
|
+ label = this.typesOf
|
|
|
+ } else if (item == 'typeId') {
|
|
|
+ label = this.row.id
|
|
|
+ } else {
|
|
|
+ label = this.parentId
|
|
|
+ }
|
|
|
+ let obj = {
|
|
|
+ searchValue: {
|
|
|
+ label: label
|
|
|
+ },
|
|
|
+ type: '1',
|
|
|
+ value: item,
|
|
|
+ }
|
|
|
+ arr.push(obj)
|
|
|
+ })
|
|
|
+ return arr
|
|
|
+ },
|
|
|
+ // 生成检索式
|
|
|
+ search(val) {
|
|
|
+ let params = {}
|
|
|
+ val.forEach(item => {
|
|
|
+ if (item.type == 3) {
|
|
|
+ params[item.value] = item.searchValue.map(itemValue => {
|
|
|
+ return itemValue.value
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ params[item.value] = item.searchValue.label
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // 返回字符串
|
|
|
+ this.searchOption.searchQuery = this.$commonJS.objectToString(params)
|
|
|
+
|
|
|
+ },
|
|
|
+ // 请求列表数据
|
|
|
+ getTableList() {
|
|
|
+ let val = this.getSearch()
|
|
|
+ this.search(val)
|
|
|
+
|
|
|
+ let params = {
|
|
|
+ ...this.queryParams,//分页
|
|
|
+ ...this.searchOption,//检索条件
|
|
|
+ orderDTOList: this.sort,//排序
|
|
|
+ // name: this.productName,//事件名称
|
|
|
+ // type: this.typesOf,//类型：1产品类别，2产品，3技术分类，4自定义树
|
|
|
+ // typeId: this.row.id,//产品或类别id
|
|
|
+ }
|
|
|
+ this.$api.queryTable(params).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.tableData = res.data.data
|
|
|
+ this.total = res.data.total
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ this.tableData = []
|
|
|
+ this.total = 0
|
|
|
this.$message.error(err.message)
|
|
|
})
|
|
|
},
|
|
|
@@ -401,25 +381,21 @@ export default {
|
|
|
getPath() {
|
|
|
let params = {
|
|
|
type: this.typesOf,//区分产品架构、自定义树等
|
|
|
- type_id: this.row.id,//产品或类别id
|
|
|
+ typeId: this.row.id,//产品或类别id
|
|
|
}
|
|
|
- this.$api.path(params).then(res => {
|
|
|
+ this.$api.queryTreePath(params).then(res => {
|
|
|
if (res.code == 200) {
|
|
|
- this.treeDataPath = res.data
|
|
|
+ this.treeDataPath = res.data.data
|
|
|
}
|
|
|
+ }).catch(err => {
|
|
|
+ this.treeDataPath = []
|
|
|
+ this.$message.error(err.message)
|
|
|
})
|
|
|
},
|
|
|
// 分页
|
|
|
handleCurrentChange(val) {
|
|
|
this.queryParams.current = val;
|
|
|
- this.handleCurrent()
|
|
|
- },
|
|
|
- // 分页处理
|
|
|
- handleCurrent() {
|
|
|
- this.total = this.nodeChildrenData.length
|
|
|
- let start = this.queryParams.size * (this.queryParams.current - 1)
|
|
|
- let end = this.queryParams.size * this.queryParams.current
|
|
|
- this.tableData = this.nodeChildrenData.slice(start, end)
|
|
|
+ this.getTableList()
|
|
|
},
|
|
|
},
|
|
|
}
|
zhuhao