diff --git a/src/assets/css/index.css b/src/assets/css/index.css index 9fd11366d18982ac9eeeb561937a2acca098f172..110273c2da9cce8f15baccfb3844f80c4fd627a0 100644 --- a/src/assets/css/index.css +++ b/src/assets/css/index.css @@ -216,22 +216,24 @@ div{ text-align: center; } /* 设置tab切换的样式 */ -.el-tabs__nav{ - left:50%; - transform: translateX(-50%)!important; -} -.el-tabs__item.is-disabled{ +.el-tabs__item.is-disabled { color: #8890a7 !important; } -.el-tabs__item{ +.el-tabs__item { font-size: 16px; + color: #8890a7; line-height: 24px!important; } -.el-tabs__item.is-active{ - color: #264dd9 !important; +.el-tabs__item:hover { + color: #687087; + +} +.el-tabs__item.is-active { + color: #e56600 !important; } .el-tabs__active-bar{ - background-color:#264dd9 !important; + height: 3px; + background-color:#e56600 !important; } .el-tabs__nav-wrap::after{ height: 1px; @@ -412,4 +414,47 @@ width: 620px!important; } .triangle-position { margin-left: 35px; -} */ \ No newline at end of file +} */ +.el-input__inner { + border-radius: 8px; +} +.el-input-group__append, .el-input-group__prepend { + border-radius: 8px; +} +.el-button { + border-radius: 8px; +} +/* 下拉选样式 */ +.el-select-dropdown { + border-radius: 8px; +} +.el-select-dropdown__list { + padding: 0; + background-color: #0f2683; + top: 10px; + border-radius: 4px; +} +.el-select-dropdown__item { + font-size: 12px; + padding: 0 20px; + color: #f4f7fc; + height: 34px; + line-height: 34px; + background-color: #0f2683; +} +.el-select-dropdown__item.hover, +.el-select-dropdown__item:hover { + background-color: #3f4f9c; +} +.el-select-dropdown__item.selected { + color: #f4f7fc; +} +.el-scrollbar { + border-radius: 8px; +} +.el-popper[x-placement^=bottom] .popper__arrow::after { + border-bottom-color: transparent; +} +.el-popper[x-placement^=top] .popper__arrow::after { + border-top-color: transparent; +} \ No newline at end of file diff --git a/src/components/block-radius.vue b/src/components/block-radius.vue index 2548bf20e93e5299bc8c52537172445e8f0719c0..4f85df9f0e5d2a95340f889416e67921d7013128 100644 --- a/src/components/block-radius.vue +++ b/src/components/block-radius.vue @@ -20,6 +20,7 @@ export default { background-color: #fff; border-radius: 10px; padding: 20px; + margin-bottom: 20px; } diff --git a/src/components/table-input.vue b/src/components/table-input.vue index 2b678b1f961a0adbc4bacb45b762582dd141921b..0feff7dc27674d04bd263023bbde0daddccfacb4 100644 --- a/src/components/table-input.vue +++ b/src/components/table-input.vue @@ -1,6 +1,13 @@ @@ -19,6 +26,10 @@ export default { rowId: { type: Number, default: 0 + }, + couldNotEdit: { + type: Boolean, + default: false } }, data: () => ({ @@ -52,5 +63,9 @@ export default { .text-xs-center input { width: 100%; background-color: #f7f8f9; + border-radius: 4px; +} +.text-xs-center .el-input.is-disabled .el-input__inner { + color: #70747C; } \ No newline at end of file diff --git a/src/components/table-select.vue b/src/components/table-select.vue new file mode 100644 index 0000000000000000000000000000000000000000..d68a021f3ce48eb3b8b1af8e5898e7dded21f43f --- /dev/null +++ b/src/components/table-select.vue @@ -0,0 +1,74 @@ + + + + + \ No newline at end of file diff --git a/src/components/table-um.vue b/src/components/table-um.vue index afb2595b8068cb968814c1556583e90c84eabe49..a59878c9a35d1c63c3389b64f0fe8ce69e9e35d1 100644 --- a/src/components/table-um.vue +++ b/src/components/table-um.vue @@ -80,8 +80,18 @@ :item="helper.GetProperty(scope.row, item.prop)" :header="item.prop" :rowId="scope.$index" + :couldNotEdit="couldNotEdit" @changeInputValue="changeInputValue" > + + import services from "@/services"; import tableInput from "@/components/table-input"; +import tableSelect from "@/components/table-select"; import helper from "@/services/helper"; import DConfirm from "@/components/dialog-remove"; import tableUmhref from "@/components/table-umhref"; export default { components: { "v-apaas-table-input": tableInput, + "v-apaas-table-select": tableSelect, "v-apaas-table-umhref": tableUmhref, "d-confirm": DConfirm }, @@ -198,6 +210,10 @@ export default { type: Boolean, default: false }, + couldNotEdit: { + type: Boolean, + default: false + }, // 是否显示删除弹窗 isDialog: { type: Boolean, default: false }, confirmOptions: { @@ -245,14 +261,10 @@ export default { type: Boolean, default: false }, - couldEditStyle: { - type: Boolean, - default: false - }, headerCellClassName: { type: String, default: "" - }, + } }, data() { return { @@ -280,72 +292,6 @@ export default { label: "50" } ], - tableData: [ - { - date: "2016-05-02", - name: "王小虎", - address: "上海市普陀区金沙江路 1518 弄", - id: "ssss2722" - }, - { - date: "2016-05-04", - name: "王小虎", - address: "上海市普陀区金沙江路 1517 弄", - id: "ssss2224" - }, - { - date: "2016-05-01", - name: "王小虎", - address: "上海市普陀区金沙江路 1519 弄", - id: "ssss222" - }, - { - date: "2016-05-03", - name: "王小虎", - address: "上海市普陀区金沙江路 1516 弄", - id: "ssss22" - } - ], - tableData1: [ - { - id: 1, - date: "2016-05-02", - name: "王小虎", - address: "上海市普陀区金沙江路 1518 弄" - }, - { - id: 2, - date: "2016-05-04", - name: "王小虎", - address: "上海市普陀区金沙江路 1517 弄" - }, - { - id: 3, - date: "2016-05-01", - name: "王小虎", - address: "上海市普陀区金沙江路 1519 弄", - children: [ - { - id: 31, - date: "2016-05-01", - name: "王小虎", - address: "上海市普陀区金沙江路 1519 弄" - }, - { - id: 32, - date: "2016-05-01", - name: "王小虎", - address: "上海市普陀区金沙江路 1519 弄" - } - ] - }, - { - id: 4, - date: "2016-05-03", - name: "王小虎", - address: "上海市普陀区金沙江路 1516 弄" - } - ], search: "", times: null }; @@ -375,13 +321,7 @@ export default { if (this.url == "") { // console.log(this.emptyText); // the if statement is to choose which data could be show, only used for test and template - if (this.emptyText == "暂时没数据") { - this.selectedTabsPage = this.tableData; - } else if (this.emptyText == "可输入表格暂时没数据") { - this.selectedTabsPage = this.tableData; - } else if (this.emptyText == "树结构暂时没数据") { - this.selectedTabsPage = this.tableData1; - } + this.selectedTabsPage = []; this.pagination.total = this.selectedTabsPage.length; if (this.autoAdd) { this.addRow(); @@ -405,12 +345,12 @@ export default { getDataFromApi() { return new Promise((resolve, reject) => { const { page, rowsPerPage } = this.pagination; - this.all_url = `${this.url}`; + this.all_url = `/static/data.json`; this.$http .get(this.all_url) .then(response => { - let newArr = response.data[this.rowprop]; - let total = response.data.listMeta.totalItems; + let newArr = response.data.data[this.url]; + let total = newArr.length; resolve({ newArr, total }); }) .catch(function(response) { @@ -490,6 +430,9 @@ export default { newRow[item] = ""; } this.selectedTabsPage.push(newRow); + }, + getTableData() { + return this.selectedTabsPage; } } }; diff --git a/src/pages/example_table.vue b/src/pages/example_table.vue index c23e0e043920a95fc1fe4d7eff0c81a7826b43d9..b3caa446f3e3e6cbb53f45535971d93028eb7199 100644 --- a/src/pages/example_table.vue +++ b/src/pages/example_table.vue @@ -3,11 +3,11 @@

常规表格

+ 服务测试 + + + + + + + + + + s