Showing
11 changed files
with
134 additions
and
36 deletions
| @@ -7,6 +7,14 @@ | @@ -7,6 +7,14 @@ | ||
| 7 | background: white; | 7 | background: white; |
| 8 | background-color: #CCCCCC; | 8 | background-color: #CCCCCC; |
| 9 | padding: 3px 3px; | 9 | padding: 3px 3px; |
| 10 | + width:calc(100% - 10px); | ||
| 11 | + overflow:hidden; | ||
| 12 | +} | ||
| 13 | + | ||
| 14 | +.container .cm-card{ | ||
| 15 | + overflow-y:auto; | ||
| 16 | + background: white; | ||
| 17 | + border-radius: 3px | ||
| 10 | } | 18 | } |
| 11 | 19 | ||
| 12 | /* | 20 | /* |
| @@ -664,6 +664,9 @@ layui.define(['view'], function(exports){ | @@ -664,6 +664,9 @@ layui.define(['view'], function(exports){ | ||
| 664 | , toYTHViewScreen: function () { | 664 | , toYTHViewScreen: function () { |
| 665 | window.open(sessionStorage.getItem("ythView") + '?access_token=' + localStorage.getItem("access_token")); | 665 | window.open(sessionStorage.getItem("ythView") + '?access_token=' + localStorage.getItem("access_token")); |
| 666 | } | 666 | } |
| 667 | + , toDZSWJScreen: function () { | ||
| 668 | + window.open(window.location.origin + '/vue3/index.html#/zj/dp?access_token=' + localStorage.getItem("access_token")); | ||
| 669 | + } | ||
| 667 | 670 | ||
| 668 | //向右滚动页面标签 | 671 | //向右滚动页面标签 |
| 669 | , leftPage: function () { | 672 | , leftPage: function () { |
| @@ -68,7 +68,7 @@ | @@ -68,7 +68,7 @@ | ||
| 68 | </li> | 68 | </li> |
| 69 | <li class="layui-nav-item" lay-tips="电子税务局"> | 69 | <li class="layui-nav-item" lay-tips="电子税务局"> |
| 70 | <!-- <a href="javascript:;" layadmin-event="toBigScreen"><i class="layui-icon layui-icon-chart-screen"></i></a>--> | 70 | <!-- <a href="javascript:;" layadmin-event="toBigScreen"><i class="layui-icon layui-icon-chart-screen"></i></a>--> |
| 71 | - <a href="javascript:;" layadmin-event="toBigScreen" ><img src="/src/style/img/icon-dianzishuiwuju.png" style="width: 16px;height: 16px"></a> | 71 | + <a href="javascript:;" layadmin-event="toDZSWJScreen" ><img src="/src/style/img/icon-dianzishuiwuju.png" style="width: 16px;height: 16px"></a> |
| 72 | </li> | 72 | </li> |
| 73 | <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-unselect> | 73 | <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-unselect> |
| 74 | <a href="javascript:;" layadmin-event="more"><i class="layui-icon layui-icon-more-vertical"></i></a> | 74 | <a href="javascript:;" layadmin-event="more"><i class="layui-icon layui-icon-more-vertical"></i></a> |
| @@ -7,7 +7,21 @@ export default { | @@ -7,7 +7,21 @@ export default { | ||
| 7 | 7 | ||
| 8 | } | 8 | } |
| 9 | }, | 9 | }, |
| 10 | - setup() { | 10 | + props:{ |
| 11 | + treeNode: { | ||
| 12 | + type: Object, | ||
| 13 | + default: {} | ||
| 14 | + }, | ||
| 15 | + parentNode: { | ||
| 16 | + type: Object, | ||
| 17 | + default: {} | ||
| 18 | + }, | ||
| 19 | + projectId: { | ||
| 20 | + type: String, | ||
| 21 | + default: '' | ||
| 22 | + } | ||
| 23 | + }, | ||
| 24 | + setup(props, {attrs, slots, emit}) { | ||
| 11 | let height = Vue.ref(window.innerHeight - 130); | 25 | let height = Vue.ref(window.innerHeight - 130); |
| 12 | const {proxy} = Vue.getCurrentInstance(); | 26 | const {proxy} = Vue.getCurrentInstance(); |
| 13 | 27 | ||
| @@ -78,7 +92,7 @@ export default { | @@ -78,7 +92,7 @@ export default { | ||
| 78 | proxy.$http.post("/api-web/bOpsPerson/personCollect", { | 92 | proxy.$http.post("/api-web/bOpsPerson/personCollect", { |
| 79 | "page":1, | 93 | "page":1, |
| 80 | "limit":10, | 94 | "limit":10, |
| 81 | - "projectId":"1" | 95 | + "projectId": treeNode.map.nodeType.projectId |
| 82 | }, function (res) { | 96 | }, function (res) { |
| 83 | if (res && res.data) { | 97 | if (res && res.data) { |
| 84 | dataList.value = res.data | 98 | dataList.value = res.data |
| @@ -92,6 +106,11 @@ export default { | @@ -92,6 +106,11 @@ export default { | ||
| 92 | getPage(); | 106 | getPage(); |
| 93 | }) | 107 | }) |
| 94 | 108 | ||
| 109 | + // 监听编辑状态 | ||
| 110 | + Vue.watch(() => props.treeNode, (newValue, oldVlaue) => { | ||
| 111 | + getPage(); | ||
| 112 | + }); | ||
| 113 | + | ||
| 95 | 114 | ||
| 96 | return { | 115 | return { |
| 97 | columns, | 116 | columns, |
| @@ -3,8 +3,15 @@ | @@ -3,8 +3,15 @@ | ||
| 3 | <el-row :gutter="5"> | 3 | <el-row :gutter="5"> |
| 4 | <el-col :span="4"> | 4 | <el-col :span="4"> |
| 5 | <div :style="{'min-height':height+'px','height':'100%','overflow':'auto'}" style="background-color: white;border-radius: 3px"> | 5 | <div :style="{'min-height':height+'px','height':'100%','overflow':'auto'}" style="background-color: white;border-radius: 3px"> |
| 6 | - <el-tree :data="dataSource" :default-expanded-keys="[1]" :props="defaultProps" | ||
| 7 | - @node-click="handleNodeClick"/> | 6 | + <el-tree :data="dataSource" :default-expanded-keys="[1]" :props="defaultProps" > |
| 7 | + <template #default="{ node, data }"> | ||
| 8 | + <div style=" width: 100%;"> | ||
| 9 | + <div style="width: 100%;max-width: 100%;overflow: hidden;text-overflow: ellipsis;text-align: left;" @click="handleNodeClick(data)" :title="node.label"> | ||
| 10 | + {{node.label }} | ||
| 11 | + </div> | ||
| 12 | + </div> | ||
| 13 | + </template> | ||
| 14 | + </el-tree> | ||
| 8 | </div> | 15 | </div> |
| 9 | </el-col> | 16 | </el-col> |
| 10 | <el-col :span="20" > | 17 | <el-col :span="20" > |
| 1 | -<!--:style="{'height':height+'px','max-height':height+'px','overflow':'auto'}"--> | ||
| 2 | -<div class="container tree-config" :style="{'height':height+'px','max-height':height+'px','overflow':'auto'}"> | ||
| 3 | - <el-row :gutter="5"> | 1 | +<div class="container" :style="{'height':height+'px','max-height':height+'px'}"> |
| 2 | + <el-row :gutter="5" > | ||
| 4 | <el-col :span="4" > | 3 | <el-col :span="4" > |
| 5 | - <cm-res-type-tree-view :treeData="treeData" :show-tools="true"></cm-res-type-tree-view> | 4 | + <div class="cm-card" :style="{'min-height':height+'px','height':'100%'}"> |
| 5 | + <el-tree :data="treeData" :default-expanded-keys="[1]" @node-click="handleNodeClick"/> | ||
| 6 | + </div> | ||
| 6 | </el-col> | 7 | </el-col> |
| 7 | <el-col :span="20" > | 8 | <el-col :span="20" > |
| 8 | - <div class="card-item"> | ||
| 9 | - <div style="padding: 3px 6px;text-align: right"> | ||
| 10 | - <el-button type="primary" @click="showDialog">配置</el-button> | ||
| 11 | - </div> | ||
| 12 | - <el-table :data="tableData" style="width: 100%"> | ||
| 13 | - <el-table-column fixed prop="date" label="Date" width="150" /> | ||
| 14 | - <el-table-column prop="name" label="Name" width="120" /> | ||
| 15 | - <el-table-column prop="state" label="State" width="120" /> | ||
| 16 | - <el-table-column prop="city" label="City" width="120" /> | ||
| 17 | - <el-table-column prop="address" label="Address" width="600" /> | ||
| 18 | - <el-table-column prop="zip" label="Zip" width="120" /> | ||
| 19 | - <el-table-column fixed="right" label="Operations" width="120"> | ||
| 20 | - <template #default> | ||
| 21 | - <el-button type="text" size="small" @click="handleClick">Detail</el-button> | ||
| 22 | - <el-button type="text" size="small">Edit</el-button> | ||
| 23 | - </template> | ||
| 24 | - </el-table-column> | ||
| 25 | - </el-table> | 9 | + <div class="cm-card" :style="{'min-height':height+'px','height':'100%'}" > |
| 26 | </div> | 10 | </div> |
| 27 | </el-col> | 11 | </el-col> |
| 28 | </el-row> | 12 | </el-row> |
| 29 | - | ||
| 30 | - <el-dialog top="2vh" :title="dialog.title" v-model="dialogVisible" custom-class="config-dialog" width="80%" destroy-on-close> | ||
| 31 | - <tree-config></tree-config> | ||
| 32 | - </el-dialog> | ||
| 33 | - | ||
| 34 | </div> | 13 | </div> |
| @@ -9,14 +9,14 @@ export default { | @@ -9,14 +9,14 @@ export default { | ||
| 9 | data() { | 9 | data() { |
| 10 | return { | 10 | return { |
| 11 | props : { | 11 | props : { |
| 12 | - label:'title', | 12 | + label:'label', |
| 13 | children:'children' | 13 | children:'children' |
| 14 | } | 14 | } |
| 15 | } | 15 | } |
| 16 | }, | 16 | }, |
| 17 | setup() { | 17 | setup() { |
| 18 | const {proxy} = Vue.getCurrentInstance(); | 18 | const {proxy} = Vue.getCurrentInstance(); |
| 19 | - let height = Vue.ref(window.innerHeight - 50); | 19 | + let height = Vue.ref(window.innerHeight -10); |
| 20 | const treeData = Vue.ref([]); | 20 | const treeData = Vue.ref([]); |
| 21 | const tableData = Vue.ref([]); | 21 | const tableData = Vue.ref([]); |
| 22 | 22 | ||
| @@ -33,13 +33,17 @@ export default { | @@ -33,13 +33,17 @@ export default { | ||
| 33 | 33 | ||
| 34 | // 获取左侧树结构 | 34 | // 获取左侧树结构 |
| 35 | let loadTree = () => { | 35 | let loadTree = () => { |
| 36 | - proxy.$http.get("/api-web/res/list/tree", {}, function (res) { | 36 | + proxy.$http.get("/api-web/v32/res/list/tree", {}, function (res) { |
| 37 | if (res && res.data) { | 37 | if (res && res.data) { |
| 38 | treeData.value = res.data | 38 | treeData.value = res.data |
| 39 | } | 39 | } |
| 40 | }); | 40 | }); |
| 41 | } | 41 | } |
| 42 | 42 | ||
| 43 | + let handleNodeClick =(data) =>{ | ||
| 44 | + console.log(data) | ||
| 45 | + } | ||
| 46 | + | ||
| 43 | // 挂载完 | 47 | // 挂载完 |
| 44 | Vue.onMounted(() => { | 48 | Vue.onMounted(() => { |
| 45 | loadTree(); | 49 | loadTree(); |
| 1 | +<div class="container" :style="{'height':height+'px','max-height':height+'px'}"> | ||
| 2 | + <el-row :gutter="5" > | ||
| 3 | + <el-col :span="4" > | ||
| 4 | + <div class="cm-card" :style="{'min-height':height+'px','height':'100%'}"> | ||
| 5 | + <el-tree :data="treeData" :default-expanded-keys="[1]" @node-click="handleNodeClick"/> | ||
| 6 | + </div> | ||
| 7 | + </el-col> | ||
| 8 | + <el-col :span="20" > | ||
| 9 | + <div class="cm-card" :style="{'min-height':height+'px','height':'100%'}" > | ||
| 10 | + </div> | ||
| 11 | + </el-col> | ||
| 12 | + </el-row> | ||
| 13 | +</div> |
| 1 | +export default { | ||
| 2 | + name: 'resIndex', | ||
| 3 | + template: '', | ||
| 4 | + components: { | ||
| 5 | + 'tree-config': Vue.defineAsyncComponent( | ||
| 6 | + () => myImport('components/page/res/treeconfig/index') | ||
| 7 | + ), | ||
| 8 | + }, | ||
| 9 | + data() { | ||
| 10 | + return { | ||
| 11 | + props : { | ||
| 12 | + label:'label', | ||
| 13 | + children:'children' | ||
| 14 | + } | ||
| 15 | + } | ||
| 16 | + }, | ||
| 17 | + setup() { | ||
| 18 | + const {proxy} = Vue.getCurrentInstance(); | ||
| 19 | + let height = Vue.ref(window.innerHeight -10); | ||
| 20 | + const treeData = Vue.ref([]); | ||
| 21 | + const tableData = Vue.ref([]); | ||
| 22 | + | ||
| 23 | + const dialog = Vue.ref({ | ||
| 24 | + title: '资源类型配置', | ||
| 25 | + activeName: '' | ||
| 26 | + }); | ||
| 27 | + const dialogVisible = Vue.ref(false); | ||
| 28 | + | ||
| 29 | + // 弹框 | ||
| 30 | + let showDialog = () => { | ||
| 31 | + dialogVisible.value = true; | ||
| 32 | + } | ||
| 33 | + | ||
| 34 | + // 获取左侧树结构 | ||
| 35 | + let loadTree = () => { | ||
| 36 | + proxy.$http.get("/api-web/v32/res/list/tree", {}, function (res) { | ||
| 37 | + if (res && res.data) { | ||
| 38 | + treeData.value = res.data | ||
| 39 | + } | ||
| 40 | + }); | ||
| 41 | + } | ||
| 42 | + | ||
| 43 | + let handleNodeClick =(data) =>{ | ||
| 44 | + console.log(data) | ||
| 45 | + } | ||
| 46 | + | ||
| 47 | + // 挂载完 | ||
| 48 | + Vue.onMounted(() => { | ||
| 49 | + loadTree(); | ||
| 50 | + console.log('onMounted'); | ||
| 51 | + }) | ||
| 52 | + | ||
| 53 | + | ||
| 54 | + return { | ||
| 55 | + treeData, | ||
| 56 | + height, | ||
| 57 | + showDialog, | ||
| 58 | + dialogVisible, | ||
| 59 | + tableData, | ||
| 60 | + dialog | ||
| 61 | + } | ||
| 62 | + } | ||
| 63 | +} |
-
Please register or login to post a comment