From 05af8ab86ed2550ef68179c335b9096ae1a422b4 Mon Sep 17 00:00:00 2001 From: liudianxin Date: Tue, 19 May 2020 19:20:40 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=BA=94=E7=94=A8=E5=95=86=E5=BA=97?= =?UTF-8?q?=E5=8D=A1=E7=89=87=EF=BC=8C+table=E8=8E=B7=E5=8F=96select?= =?UTF-8?q?=EF=BC=8C=E5=AE=8C=E6=95=B4=E6=95=B0=E6=8D=AE=E7=BB=93=E6=9E=84?= =?UTF-8?q?=E3=80=81=E5=8F=AF=E4=B8=8D=E4=BC=A0id=EF=BC=8C=E4=BA=91?= =?UTF-8?q?=E8=B5=84=E6=BA=90=E5=86=99=E4=BA=86=E4=B8=80=E7=82=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/css/index.css | 4 +- src/components/commodity-card.vue | 19 +- src/components/commodity-list.vue | 9 +- src/components/service_list.vue | 22 +- src/components/shop-cloud/shop-cloud.vue | 88 +++++++ src/components/table-um.vue | 285 +++++++++++++++-------- src/pages/example_table.vue | 39 +++- src/pages/fwzc_fwcs.vue | 12 - src/pages/shop_cloud.vue | 6 +- static/data.json | 11 +- 10 files changed, 343 insertions(+), 152 deletions(-) create mode 100644 src/components/shop-cloud/shop-cloud.vue diff --git a/src/assets/css/index.css b/src/assets/css/index.css index c406821..dfc85db 100644 --- a/src/assets/css/index.css +++ b/src/assets/css/index.css @@ -229,7 +229,7 @@ div{ background-color: #edf0ff; } /* 设置tree的样式 */ -.usrrole .el-tree-node:focus>.el-tree-node__content{ +/* .usrrole .el-tree-node:focus>.el-tree-node__content{ background: rgb(248, 249, 253) !important; } .usrrole .el-tree-node__content:hover{ @@ -269,7 +269,7 @@ border-radius:8px; border-top-right-radius:8px; border-bottom-left-radius:0; border-bottom-right-radius:0; -} +} */ /* 左右布局 */ .flex { height: 100%; diff --git a/src/components/commodity-card.vue b/src/components/commodity-card.vue index ed7f2bc..eb1a952 100644 --- a/src/components/commodity-card.vue +++ b/src/components/commodity-card.vue @@ -6,24 +6,24 @@ class="com_card_img" />
-
ApaasApaasApaasApaas
-
v1.876
+
{{ cellData.title }}
+
V{{ cellData.version }}
 上线时间
-
2019-12-04
+
{{ cellData.onlineTime }}
 部署次数
-
888888
+
{{ cellData.num }}
- 加入购物车 + 加入购物车 查看详情
@@ -44,6 +44,9 @@ export default { if (this.url != "") { this.$router.push(this.url + "/" + parame); } + }, + addShop(id) { + } }, mounted() {} @@ -70,7 +73,7 @@ export default { margin-bottom: 35px; } .com_card_name_v { - width: calc(100% - 70px); + width: calc(100% - 80px); } .com_card_img { width: 60px; @@ -86,7 +89,7 @@ export default { font-size: 18px; font-weight: 700; margin-top: 4px; - margin-bottom: 8px; + margin-bottom: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; @@ -127,7 +130,7 @@ export default { color: #f8f9fd; } .btn_2:hover { - background-color: #142b88; + background-color: #1d3694; color: #f8f9fd; } \ No newline at end of file diff --git a/src/components/commodity-list.vue b/src/components/commodity-list.vue index 9e7d82a..810e378 100644 --- a/src/components/commodity-list.vue +++ b/src/components/commodity-list.vue @@ -2,10 +2,7 @@
-
- -
-
+
@@ -122,11 +119,11 @@ export default { let listWidth = this.$refs.commodityCardIn.clientWidth; let rowCardNum = Math.floor(listWidth / 310); let cardArr = this.$refs.commodityCardIn.children; - console.log(rowCardNum, listWidth / rowCardNum); + // console.log(rowCardNum, listWidth / rowCardNum); for (let i = 0; i < cardArr.length; i++) { cardArr[i].style.width = (listWidth / rowCardNum) - 1 + "px"; } - console.log(this.$refs.commodityCardIn); + // console.log(this.$refs.commodityCardIn); } }, mounted() { diff --git a/src/components/service_list.vue b/src/components/service_list.vue index 2d29fc2..7019765 100644 --- a/src/components/service_list.vue +++ b/src/components/service_list.vue @@ -162,7 +162,7 @@ export default { lists: [ { id: 0, - title: "水路货物周转量情况", + title: "水路货物周转量情况水路货物周转量情况", state: 0, resourceSummary: "提供水路货物周转量排名和同比增长的专题数据服务提供水路货物周转量排名和同比增长的专题数据服务提供水路货物周转量排名和同比增长的专题数据服务", @@ -172,7 +172,10 @@ export default { updateTime: "2020-03-12 18:31:12", numberOfMonth: "2698755", rate: 3, - mapService: 1 + mapService: 1, + version: 2.888, + onlineTime: "2019-04-11 12:50:30", + num: 66666 }, { id: 1, @@ -185,7 +188,10 @@ export default { serviceType: "数据服务 专题数据服务 企业专题数据服务", updateTime: "2020-03-12 18:31:12", numberOfMonth: "2698745", - rate: 3.4 + rate: 3.4, + version: 2.888, + onlineTime: "2019-04-11 12:50:30", + num: 66666 }, { id: 2, @@ -198,7 +204,10 @@ export default { serviceType: "数据服务 专题数据服务 企业专题数据服务", updateTime: "2020-03-12 18:31:12", numberOfMonth: "2698455", - rate: 2.5 + rate: 2.5, + version: 2.888, + onlineTime: "2019-04-11 12:50:30", + num: 66666 }, { id: 3, @@ -211,7 +220,10 @@ export default { serviceType: "数据服务 专题数据服务 企业专题数据服务", updateTime: "2020-03-12 18:31:12", numberOfMonth: "267455", - rate: 3.7 + rate: 3.7, + version: 2.888, + onlineTime: "2019-04-11 12:50:30", + num: 66666 } ], filterLists: [ diff --git a/src/components/shop-cloud/shop-cloud.vue b/src/components/shop-cloud/shop-cloud.vue new file mode 100644 index 0000000..dec1e2b --- /dev/null +++ b/src/components/shop-cloud/shop-cloud.vue @@ -0,0 +1,88 @@ + + + + + diff --git a/src/components/table-um.vue b/src/components/table-um.vue index 1aa76d4..c035178 100644 --- a/src/components/table-um.vue +++ b/src/components/table-um.vue @@ -17,6 +17,14 @@ " > + 获取勾选项 新增 + >新增 - + - + - 分配 - - - 已分配 - + >分配 + 已分配 {{ btn.label }} + >{{ btn.label }} {{ btn.label }} + >{{ btn.label }} - - {{ btn.line }} - + {{ btn.line }} @@ -199,9 +188,7 @@ trigger="hover" :content="scope.row[item.prop]" > -
- {{ scope.row[item.prop] }} -
+
{{ scope.row[item.prop] }}
{{ scope.row[item.prop] }} @@ -240,7 +227,7 @@ :disabled="pagination.page == 1" >   第{{ pagination.page }}页 / 共{{ - Math.ceil(pagination.total / pagination.rowsPerPage) + Math.ceil(pagination.total / pagination.rowsPerPage) }}页 >>"); - if (this.url == "") { - // console.log(this.emptyText); - // the if statement is to choose which data could be show, only used for test and template - this.selectedTabsPage = []; - if (this.datas) { - this.selectedTabsPage = this.datas; + this.getDataFromApi().then( + data => { + this.selectedTabsPage = JSON.parse(JSON.stringify(data.newArr)); + this.pagination.total = data.total; + if (this.autoAdd) { + this.addRow(); + } + if (this.selectedTabsPage[0].id) { + } else { + let arrs = this.selectedTabsPage; + this.addId(arrs, "00000000"); + this.selectedTabsPage = arrs; + } + this.metaData = [...this.selectedTabsPage]; + }, + err => { + console.log("失败" + err); } - this.pagination.total = 0; - if (this.autoAdd) { - this.addRow(); + ); + }, + addId(arr, id) { + let self = this; + for (let i = 0; i < arr.length; i++) { + arr[i].id = + parseInt(Math.random() * 100000, 10) + + "" + + parseInt(Math.random() * 100000, 10); + arr[i].parentId = id; + if (arr[i].children && arr[i].children.length != 0) { + self.addId(arr[i].children, arr[i].id); } - } else { - this.getDataFromApi().then( - (data) => { - this.selectedTabsPage = JSON.parse(JSON.stringify(data.newArr)); - this.pagination.total = data.total; - if (this.autoAdd) { - this.addRow(); - } - }, - (err) => { - console.log("失败" + err); - } - ); } }, // get data from api getDataFromApi() { return new Promise((resolve, reject) => { const { page, rowsPerPage } = this.pagination; - this.all_url = `/static/data.json`; - this.$http - .get(this.all_url) - .then((response) => { - let newArr = response.data.data[this.url]; - // if it is true url, total is response's total - let total = newArr.length; - resolve({ newArr, total }); - }) - .catch(function(response) { - // this.loading = false; - reject(response); - }); + if (this.url == "") { + let newArr = []; + if (this.datas) { + newArr = this.datas; + } + let total = newArr.length; + resolve({ newArr, total }); + } else { + this.all_url = `/static/data.json`; + this.$http + .get(this.all_url) + .then(response => { + let newArr = response.data.data[this.url]; + // if it is true url, total is response's total + let total = newArr.length; + resolve({ newArr, total }); + }) + .catch(function(response) { + // this.loading = false; + reject(response); + }); + } }); }, + getSelect() { + console.log(JSON.stringify(this.metaData)); + }, // search debonce 500ms searchVal() { if (this.times !== null) clearTimeout(this.times); @@ -498,12 +509,85 @@ export default { }, // 表格勾选 select(rows, row) { + if (rows.indexOf(row) != -1) { + let arrs = this.metaData; + this.setMeta(arrs, row, 1); + if (row.parentId && row.parentId != "00000000") { + this.getParent(arrs, row.parentId); + } + } else { + let arrs = this.metaData; + this.setMeta(arrs, row, 0); + } this.$emit("select", rows, row); }, // 全选 selectAll(rows) { + let arrs = this.metaData; + if (rows.length == arrs.length) { + this.setAllMeta(arrs, 1); + } else { + this.setAllMeta(arrs, 0); + } this.$emit("select", rows); }, + // 设置元素select + setMeta(arr, row, state) { + let self = this; + for (let i = 0; i < arr.length; i++) { + if (arr[i].id == row.id) { + if (arr[i].selected) { + arr[i].selected = state; + } else { + arr[i].selected = 1; + } + if (arr[i].children && arr[i].children.length != 0) { + self.setChildren(arr[i].children, state); + } + return false; + } else if (arr[i].children && arr[i].children.length != 0) { + self.setMeta(arr[i].children, row, state); + } + } + }, + // 设置每一个子元素的状态 + setChildren(arr, state) { + let self = this; + for (let i = 0; i < arr.length; i++) { + arr[i].selected = state; + self.$refs.cesTable.toggleRowSelection(arr[i], state); + if (arr[i].children && arr[i].children.length != 0) { + self.setChildren(arr[i].children, state); + } + } + }, + // 设置所有元素的状态 + setAllMeta(arr, state) { + let self = this; + for (let i = 0; i < arr.length; i++) { + self.$refs.cesTable.toggleRowSelection(arr[i], state); + arr[i].selected = state; + if (arr[i].children && arr[i].children.length != 0) { + self.setAllMeta(arr[i].children, state); + } + } + }, + // 获取父元素 + getParent(arr, id) { + let self = this; + for (let i = 0; i < arr.length; i++) { + if (arr[i].id == id) { + arr[i].selected = 1; + self.$refs.cesTable.toggleRowSelection(arr[i], 1); + if (arr[i].parentId && arr[i].parentId != "00000000") { + self.getParent(arr, arr[i].parentId); + } + } + if (arr[i].children && arr[i].children.length != 0) { + self.getParent(arr[i].children, id); + } + } + }, handleCurrentChange(val) { this.pagination.page += val; this.getDataFromApiSync(); @@ -515,14 +599,13 @@ export default { this.$emit("refresh"); }, renderHeader(h, obj) { - console.log(obj.column); return h("span", { class: "ces-table-require" }, obj.column.label); }, refreshuseList() { this.$message({ showClose: true, message: this.label + "成功", - type: "success", + type: "success" }); }, switchChange(val) { @@ -594,7 +677,7 @@ export default { if (this.filterList && this.filterList.length) { this.filterData = {}; this.filterToggle = {}; - this.filterList.forEach((item) => { + this.filterList.forEach(item => { this.$set(this.filterData, item.prop, []); this.$set(this.filterToggle, item.prop, false); }); @@ -607,8 +690,8 @@ export default { this.filterData[prop].push(filter); } console.log(this.filterData); - }, - }, + } + } }; diff --git a/src/pages/example_table.vue b/src/pages/example_table.vue index 16ddf05..260d226 100644 --- a/src/pages/example_table.vue +++ b/src/pages/example_table.vue @@ -55,10 +55,10 @@ :headers="headers2" url="tableData1" :searchShow="false" - :addRowBtn="false" + :addRowBtn="true" :autoAdd="false" :isDialog="false" - :isSelection="false" + :isSelection="true" :isIndex="true" :confirmOptions="confirmOptions" :detailsUrl="detailsUrl" @@ -68,6 +68,7 @@ :paginationShow="false" :pageSizeShow="false" headerCellClassName="th_pink" + :getSelectBtn="true" >
@@ -77,9 +78,27 @@ import cesTable from "@/components/table-um"; export default { data: () => ({ headers: [ - { label: "服务url", prop: "date", type: "href", align: "left", minWidth: "50%" }, - { label: "服务名称", prop: "name", type: "href", align: "center", minWidth: "60%" }, - { label: "中文名", prop: "address", type: "href", align: "right",width: "100" }, + { + label: "服务url", + prop: "date", + type: "href", + align: "left", + minWidth: "50%" + }, + { + label: "服务名称", + prop: "name", + type: "href", + align: "center", + minWidth: "60%" + }, + { + label: "中文名", + prop: "address", + type: "href", + align: "right", + width: "100" + }, { label: "操作", type: "Button", @@ -100,7 +119,13 @@ export default { headers1: [ { label: "服务url", prop: "date", type: "input", align: "left" }, { label: "服务名称", prop: "name", type: "input", align: "center" }, - { label: "是否必要", prop: "address", type: "select", align: "center", width: 100 } + { + label: "是否必要", + prop: "address", + type: "select", + align: "center", + width: 100 + } ], headers2: [ { label: "服务url", prop: "date", type: "", align: "left" }, @@ -139,7 +164,7 @@ export default { name: "服务状态", prop: "fwzt", data: ["数据服务", "时空服务", "视频服务", "感知服务", "综合服务"] - }, + } ] }), components: { diff --git a/src/pages/fwzc_fwcs.vue b/src/pages/fwzc_fwcs.vue index 9c7ea2b..3b28bf8 100644 --- a/src/pages/fwzc_fwcs.vue +++ b/src/pages/fwzc_fwcs.vue @@ -356,7 +356,6 @@ export default { optionsOrganization: [], datasQqcs: [ { - id: 123134445, name: "name", field_type: "string", label: "", @@ -365,7 +364,6 @@ export default { children: null }, { - id: 1213445, name: "age", field_type: "float", label: "", @@ -374,7 +372,6 @@ export default { children: null }, { - id: 12313444, name: "childs", field_type: "array", label: "", @@ -382,7 +379,6 @@ export default { example: "", children: [ { - id: 1231345, name: "", field_type: "object", label: "", @@ -390,7 +386,6 @@ export default { example: "", children: [ { - id: 123344445, name: "name", field_type: "string", label: "", @@ -399,7 +394,6 @@ export default { children: null }, { - id: 11344445, name: "age", field_type: "float", label: "", @@ -414,7 +408,6 @@ export default { ], datasFhcs: [ { - id: 123134445, name: "name", field_type: "string", label: "", @@ -423,7 +416,6 @@ export default { children: null }, { - id: 1213445, name: "age", field_type: "float", label: "", @@ -432,7 +424,6 @@ export default { children: null }, { - id: 12313444, name: "childs", field_type: "array", label: "", @@ -440,7 +431,6 @@ export default { example: "", children: [ { - id: 1231345, name: "", field_type: "object", label: "", @@ -448,7 +438,6 @@ export default { example: "", children: [ { - id: 123344445, name: "name", field_type: "string", label: "", @@ -457,7 +446,6 @@ export default { children: null }, { - id: 11344445, name: "age", field_type: "float", label: "", diff --git a/src/pages/shop_cloud.vue b/src/pages/shop_cloud.vue index 828934b..84b790e 100644 --- a/src/pages/shop_cloud.vue +++ b/src/pages/shop_cloud.vue @@ -5,7 +5,7 @@ - +
@@ -13,11 +13,11 @@