Skip to content

A
apaas-ui
Commit 6293c53f authored by 刘殿昕's avatar 刘殿昕
Browse files
Options

+api入口文件，统一使用axios+table上传，限制table-selarr的value为字符，fwzc+模型

parent fd4c3d70
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 615 additions and 122 deletions
src/assets/css/index.css
View file @ 6293c53f
...@@ -471,6 +471,9 @@ width: 620px!important; ...@@ -471,6 +471,9 @@ width: 620px!important;
.el-radio__input.is-checked .el-radio__inner::after { .el-radio__input.is-checked .el-radio__inner::after {
background-color: #e56600; background-color: #e56600;
} }
.el-radio__inner:hover {
border-color: #e56600;
}
/* 面包屑样式 */ /* 面包屑样式 */
.bread_crumb { .bread_crumb {
margin: 20px; margin: 20px;
......
src/components/table-input.vue
View file @ 6293c53f
<template> <template>
<div class="text-xs-center"> <div>
<el-input <div
ref="inp" v-if="typeHead == 'input' || type == '' || (typeHead == 'upload' && type == 'text')"
v-model="inputText" class="text-xs-center"
:disabled="couldNotEdit || name == ''" >
size="small" <el-input
@input="changeValue" ref="inp"
class="table_in_input" v-model="inputText"
></el-input> :disabled="couldNotEdit || name == ''"
size="small"
@input="changeValue"
class="table_in_input"
></el-input>
</div>
<div v-else-if="typeHead == 'upload' && type == 'file'" class="table_upload">
<el-input
ref="inpUp"
v-model="inputTextUp"
size="small"
:disabled="true"
clearable
class="table_in_input"
>
<el-upload
slot="append"
action="/awecloud/static/image/upload"
:file-list="fileArray"
:limit="1"
:multiple="false"
:on-remove="handleRemove"
:on-success="handleSuccess"
:on-error="handleError"
:before-upload="beforeUpload"
:data="anotherData"
:disabled="couldNotEdit"
>
<el-button size="small" type="primary">上传文件</el-button>
</el-upload>
</el-input>
</div>
</div> </div>
</template> </template>
...@@ -28,8 +59,7 @@ export default { ...@@ -28,8 +59,7 @@ export default {
default: "" default: ""
}, },
name: { name: {
type: String, type: String
default: ""
}, },
rowId: { rowId: {
type: Number, type: Number,
...@@ -38,15 +68,29 @@ export default { ...@@ -38,15 +68,29 @@ export default {
couldNotEdit: { couldNotEdit: {
type: Boolean, type: Boolean,
default: false default: false
},
type: {
type: String,
default: ""
},
typeHead: {
type: String,
default: ""
} }
}, },
data: () => ({ data: () => ({
inputText: "" inputText: "",
fileArray: [],
anotherData: {
directory: "file"
},
inputTextUp: ""
}), }),
mounted() { mounted() {
this.inputText = this.item; this.inputText = this.item;
}, },
methods: { methods: {
// input
changeValue() { changeValue() {
this.$emit("changeInputValue", { this.$emit("changeInputValue", {
rowId: this.rowId, rowId: this.rowId,
...@@ -54,7 +98,31 @@ export default { ...@@ -54,7 +98,31 @@ export default {
inputValue: this.inputText, inputValue: this.inputText,
id: this.id id: this.id
}); });
} },
// upload
beforeUpload(file) {},
handleSuccess(response, file, fileList) {
if (response.success == 1) {
this.fileArray.push({
url: response.data,
name: response.data
});
this.inputTextUp = file.name;
this.$emit("changeUpFile", {
rowId: this.rowId,
header: this.header,
inputValue: this.inputTextUp,
id: this.id,
fileUrl: response.data
});
} else {
this.$message.error("上传文件失败，请重试");
}
},
handleError(err, file, fileList) {
this.$message.error("上传文件失败，请重试");
},
handleRemove(file, fileList) {}
} }
}; };
</script> </script>
...@@ -62,7 +130,9 @@ export default { ...@@ -62,7 +130,9 @@ export default {
.text-xs-center { .text-xs-center {
height: 32px; height: 32px;
} }
.table_upload {
height: 32px;
}
.table_in_input { .table_in_input {
text-align: center; text-align: center;
font-size: 14px; font-size: 14px;
...@@ -75,6 +145,22 @@ export default { ...@@ -75,6 +145,22 @@ export default {
border-radius: 4px; border-radius: 4px;
} }
.text-xs-center .el-input.is-disabled .el-input__inner { .text-xs-center .el-input.is-disabled .el-input__inner {
color: #70747C; color: #70747c;
}
.table_upload input {
width: 100%;
background-color: #f7f8f9;
border-radius: 4px;
}
.table_upload .el-input.is-disabled .el-input__inner {
color: #70747c;
}
.table_upload .el-button {
background-color: #0f2683 !important;
color: #ffffff !important;
border-radius: 0 4px 4px 0;
}
.table_upload .el-input-group__append ul {
display: none;
} }
</style> </style>
\ No newline at end of file
src/components/table-select.vue
View file @ 6293c53f
...@@ -11,10 +11,10 @@ ...@@ -11,10 +11,10 @@
> >
<template v-if="selectArr && selectArr.length > 0"> <template v-if="selectArr && selectArr.length > 0">
<el-option <el-option
v-for="(item,index) in selectArr" v-for="(items, index) in selectArr"
:key="index+3500" :key="index+3500"
:label="item.label" :label="items.label"
:value="item.value" :value="items.value"
></el-option> ></el-option>
</template> </template>
</el-select> </el-select>
...@@ -44,12 +44,10 @@ export default { ...@@ -44,12 +44,10 @@ export default {
default: "" default: ""
}, },
name: { name: {
type: String, type: String
default: ""
}, },
rowId: { rowId: {
type: Number, type: Number
default: 0
}, },
couldNotEdit: { couldNotEdit: {
type: Boolean, type: Boolean,
...@@ -57,12 +55,16 @@ export default { ...@@ -57,12 +55,16 @@ export default {
} }
}, },
data: () => ({ data: () => ({
selectValue: "1" selectValue: "0"
}), }),
mounted() { mounted() {
this.selectValue = this.item; this.selectValue = this.item;
if (!this.selectValue || this.selectValue == "") { if (this.selectValue == null || !this.selectValue || this.selectValue == "") {
this.selectValue = this.selectArr[0].value; if (this.selectArr && this.selectArr.length != 0) {
this.selectValue = this.selectArr[0].value;
} else {
this.selectValue = "";
}
} }
}, },
methods: { methods: {
......
src/components/table-um.vue
View file @ 6293c53f
...@@ -144,21 +144,24 @@ ...@@ -144,21 +144,24 @@
></v-apaas-table-umhref> ></v-apaas-table-umhref>
<!-- could edit --> <!-- could edit -->
<v-apaas-table-input <v-apaas-table-input
v-else-if="item.type === 'input'" v-else-if="item.type === 'input' || item.type === 'upload'"
:item="helper.GetProperty(scope.row, item.prop)" :item="helper.GetProperty(scope.row, item.prop)"
:header="item.prop" :header="item.prop"
:id="scope.row.id" :id="scope.row.id"
:name="scope.row.name" :name="scope.row.name"
:rowId="scope.$index" :rowId="scope.$index"
:type="scope.row.type ? scope.row.type : ''"
:typeHead="item.type"
:couldNotEdit="couldNotEdit" :couldNotEdit="couldNotEdit"
@changeInputValue="changeInputValue" @changeInputValue="changeInputValue"
@changeUpFile="changeUpFile"
></v-apaas-table-input> ></v-apaas-table-input>
<!-- could select --> <!-- could select -->
<v-apaas-table-select <v-apaas-table-select
v-else-if="item.type === 'select'" v-else-if="item.type === 'select'"
:item="helper.GetProperty(scope.row, item.prop)" :item="helper.GetProperty(scope.row, item.prop)"
:header="item.prop" :header="item.prop"
:id="item.id" :id="scope.row.id"
:name="scope.row.name" :name="scope.row.name"
:selectArr="item.selectArr" :selectArr="item.selectArr"
:rowId="scope.$index" :rowId="scope.$index"
...@@ -182,8 +185,11 @@ ...@@ -182,8 +185,11 @@
{{ [1,2,3].indexOf(scope.row[item.prop])!==-1?'':scope.row[item.prop] }} {{ [1,2,3].indexOf(scope.row[item.prop])!==-1?'':scope.row[item.prop] }}
</span> </span>
<!-- 服务添加图标 --> <!-- 服务添加图标 -->
<span v-else-if="item.type === 'hot'" :style="scope.row['hot']?{marginLeft:'-10px'}:{paddingLeft:'2px'}"> <span
<img src="../assets/imgs/list_ic_hot.png" alt="" v-if="scope.row['hot']"> v-else-if="item.type === 'hot'"
:style="scope.row['hot']?{marginLeft:'-10px'}:{paddingLeft:'2px'}"
>
<img src="../assets/imgs/list_ic_hot.png" alt v-if="scope.row['hot']" />
{{ scope.row[item.prop] }} {{ scope.row[item.prop] }}
</span> </span>
<!-- others --> <!-- others -->
...@@ -243,19 +249,19 @@ ...@@ -243,19 +249,19 @@
<script> <script>
import services from "@/services"; import services from "@/services";
import tableInput from "@/components/table-input"; import TableInput from "@/components/table-input";
import tableSelect from "@/components/table-select"; import TableSelect from "@/components/table-select";
import helper from "@/services/helper"; import helper from "@/services/helper";
import DConfirm from "@/components/dialog-remove"; import DConfirm from "@/components/dialog-remove";
import tableUmhref from "@/components/table-umhref"; import TableUmhref from "@/components/table-umhref";
import tableFilter from "@/components/table-filter"; import TableFilter from "@/components/table-filter";
export default { export default {
components: { components: {
"v-apaas-table-input": tableInput, "v-apaas-table-input": TableInput,
"v-apaas-table-select": tableSelect, "v-apaas-table-select": TableSelect,
"v-apaas-table-umhref": tableUmhref, "v-apaas-table-umhref": TableUmhref,
"d-confirm": DConfirm, "d-confirm": DConfirm,
"v-apaas-table-filter": tableFilter "v-apaas-table-filter": TableFilter
}, },
props: { props: {
// 表格型号：mini,medium,small // 表格型号：mini,medium,small
...@@ -615,6 +621,7 @@ export default { ...@@ -615,6 +621,7 @@ export default {
// console.log(this.$refs.cesTable) // console.log(this.$refs.cesTable)
let arr = this.selectedTabsPage; let arr = this.selectedTabsPage;
this.changeInput(arr, val.id, val.inputValue, val.header); this.changeInput(arr, val.id, val.inputValue, val.header);
this.selectedTabsPage = arr;
this.$emit("changeTable", this.selectedTabsPage); this.$emit("changeTable", this.selectedTabsPage);
if ( if (
this.autoAdd && this.autoAdd &&
...@@ -643,13 +650,14 @@ export default { ...@@ -643,13 +650,14 @@ export default {
// this code is low level, you could make it stronger // this code is low level, you could make it stronger
// use tableData[0] as template to edit // use tableData[0] as template to edit
let newRow = {}; let newRow = {};
for (var item in this.selectedTabsPage[0]) { let arr = this.headers;
newRow[item] = ""; arr.forEach(item => {
} newRow[item.prop] = ""
})
newRow.id = newRow.id =
parseInt(Math.random() * 100000, 10) + parseInt(Math.random() * 100000, 10) +
"" + "" +
parseInt(Math.random() * 100000, 10); parseInt(Math.random() * 100000, 10);
this.selectedTabsPage.push(newRow); this.selectedTabsPage.push(newRow);
}, },
// get now table data // get now table data
...@@ -658,6 +666,35 @@ export default { ...@@ -658,6 +666,35 @@ export default {
}, },
filterChange(filter) { filterChange(filter) {
console.log(filter); console.log(filter);
},
// 上传文件事件
changeUpFile(val) {
let arr = this.selectedTabsPage;
this.changeUp(arr, val.id, val.inputValue, val.fileUrl, val.header);
this.selectedTabsPage = arr;
this.$emit("changeTable", this.selectedTabsPage);
console.log(arr, this.selectedTabsPage);
if (
this.autoAdd &&
val.inputValue != "" &&
val.rowId + 1 == this.selectedTabsPage.length
) {
this.addRow();
}
},
// 根据id修改该行上传文件数据
changeUp(arr, id, input, url, header) {
let self = this;
for (let i = 0; i < arr.length; i++) {
if (arr[i].id == id) {
arr[i][header] = input;
arr[i].file_url = url;
return false;
}
if (arr[i].children && arr[i].children.length != 0) {
self.changeUp(arr[i].children, id, input, header);
}
}
} }
} }
}; };
...@@ -682,7 +719,7 @@ export default { ...@@ -682,7 +719,7 @@ export default {
border-bottom: 1px solid #ebeef5 !important; border-bottom: 1px solid #ebeef5 !important;
} }
.ces-table .el-table--border { .ces-table .el-table--border {
border: 1px solid #EBEEF5; border: 1px solid #ebeef5;
} }
/* .ces-table .el-table--enable-row-hover, */ /* .ces-table .el-table--enable-row-hover, */
.ces-table .el-table tbody tr:hover > td { .ces-table .el-table tbody tr:hover > td {
......
src/components/upload_file.vue
View file @ 6293c53f
...@@ -49,7 +49,9 @@ export default { ...@@ -49,7 +49,9 @@ export default {
return { return {
hideUpload: false, hideUpload: false,
fileArray: [], fileArray: [],
anotherData: {} anotherData: {
directory: "file"
}
}; };
}, },
props: { props: {
...@@ -148,8 +150,6 @@ export default { ...@@ -148,8 +150,6 @@ export default {
} }
let url = file.url; let url = file.url;
let detection = true; let detection = true;
// 等于 true 说明是刚刚上传的
// 判断方法有很多 随便用一种。
if (url) detection = url.indexOf("blob") != -1; if (url) detection = url.indexOf("blob") != -1;
if (detection) { if (detection) {
this.fileArray.forEach((item, i, arr) => { this.fileArray.forEach((item, i, arr) => {
......
src/main.js
View file @ 6293c53f
...@@ -22,6 +22,9 @@ import VueI18n from 'vue-i18n' ...@@ -22,6 +22,9 @@ import VueI18n from 'vue-i18n'
Vue.use(VueI18n) Vue.use(VueI18n)
import api from './request/api'
Vue.prototype.$api = api;
new Vue({ new Vue({
el: "#app", el: "#app",
router, router,
......
src/pages/example/example_table.vue
View file @ 6293c53f
...@@ -118,13 +118,17 @@ export default { ...@@ -118,13 +118,17 @@ export default {
], ],
headers1: [ headers1: [
{ label: "服务url", prop: "date", type: "input", align: "left" }, { label: "服务url", prop: "date", type: "input", align: "left" },
{ label: "服务名称", prop: "name", type: "input", align: "center" }, { label: "服务名称", prop: "ssss", type: "upload", align: "center" },
{ {
label: "是否必要", label: "文件类型",
prop: "address", prop: "type",
type: "select", type: "select",
align: "center", align: "center",
width: 100 width: 100,
selectArr: [
{ label: "Text", value: "Text" },
{ label: "File", value: "File" }
]
} }
], ],
headers2: [ headers2: [
......
src/pages/workbench/fwzc_fwcs.vue
View file @ 6293c53f
This diff is collapsed.
src/request/api.js 0 → 100644
View file @ 6293c53f
import workbench from '@/request/api/workbench';
export default {
workbench,
}
\ No newline at end of file
src/request/api/workbench.js 0 → 100644
View file @ 6293c53f
import axios from '@/request/http'; // 导入http中创建的axios实例
import qs from 'qs'; // 根据需求是否导入qs模块
const workbench = {
// 新闻列表
fwzcFwcs(params) {
return axios.post(`/apaas/service/v3/service/manager/test`, params);
},
serviceAdd(params) {
return axios.post(`/apaas/service/v3/service/manager`, params)
}
}
export default workbench;
src/request/http.js 0 → 100644
View file @ 6293c53f
/**
* axios封装
* 请求拦截、响应拦截、错误统一处理
*/
import axios from 'axios';
import router from '../router';
import store from '../store/index';
/**
* 提示函数
* 禁止点击蒙层、显示一秒后关闭
*/
const tip = msg => {
this.$message({
message: msg,
type: 'warning'
});
}
/**
* 跳转登录页
* 携带当前页面路由，以期在登录页面完成登录后返回当前页面
*/
const toLogin = () => {
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
}
/**
* 请求失败后的错误统一处理
* @param {Number} status 请求失败的状态码
*/
const errorHandle = (status, other) => {
// 状态码判断
switch (status) {
// 401: 未登录状态，跳转登录页
case 401:
toLogin();
break;
// 403 token过期
// 清除token并跳转登录页
case 403:
tip('登录过期，请重新登录');
localStorage.removeItem('token');
store.commit('loginSuccess', null);
setTimeout(() => {
toLogin();
}, 1000);
break;
// 404请求不存在
case 404:
tip('请求的资源不存在');
break;
default:
console.log(other);
}
}
// 创建axios实例
var instance = axios.create({ timeout: 1000 * 12 });
// 设置post请求头
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
/**
* 请求拦截器
* 每次请求前，如果存在token则在请求头中携带token
*/
instance.interceptors.request.use(
config => {
const token = store.state.token;
token && (config.headers.Authorization = token);
return config;
},
error => Promise.error(error))
// 响应拦截器
instance.interceptors.response.use(
// 请求成功
res => res.status === 200 ? Promise.resolve(res) : Promise.reject(res),
// 请求失败
error => {
const { response } = error;
if (response) {
// 请求已发出，但是不在2xx的范围
errorHandle(response.status, response.data.message);
return Promise.reject(response);
}
});
export default instance;
static/data.json
View file @ 6293c53f
...@@ -4,28 +4,28 @@ ...@@ -4,28 +4,28 @@
{ {
"date": "2016-05-02", "date": "2016-05-02",
"name": "王小虎", "name": "王小虎",
"address": "0", "type": "File",
"id": "ssss2722", "id": "ssss2722",
"state": 0 "state": 0
}, },
{ {
"date": "2016-05-04", "date": "2016-05-04",
"name": "王小虎", "name": "王小虎",
"address": "0", "type": "Text",
"id": "ssss2224", "id": "ssss2224",
"state": 0 "state": 0
}, },
{ {
"date": "2016-05-01", "date": "2016-05-01",
"name": "王小虎", "name": "王小虎",
"address": "0", "type": "Text",
"id": "ssss222", "id": "ssss222",
"state": 1 "state": 1
}, },
{ {
"date": "2016-05-03", "date": "2016-05-03",
"name": "王小虎", "name": "王小虎",
"address": "0", "type": "File",
"id": "ssss22", "id": "ssss22",
"state": 2 "state": 2
} }
......
yarn.lock
View file @ 6293c53f
...@@ -1362,6 +1362,13 @@ axios@^0.15.3: ...@@ -1362,6 +1362,13 @@ axios@^0.15.3:
dependencies: dependencies:
follow-redirects "1.0.0" follow-redirects "1.0.0"
axios@^0.19.2:
version "0.19.2"
resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.2.tgz#3ea36c5d8818d0d5f8a8a97a6d36b86cdc00cb27"
integrity sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==
dependencies:
follow-redirects "1.5.10"
babel-helper-vue-jsx-merge-props@^2.0.0: babel-helper-vue-jsx-merge-props@^2.0.0:
version "2.0.3" version "2.0.3"
resolved "https://registry.yarnpkg.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz#22aebd3b33902328e513293a8e4992b384f9f1b6" resolved "https://registry.yarnpkg.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz#22aebd3b33902328e513293a8e4992b384f9f1b6"
...@@ -2418,6 +2425,13 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3: ...@@ -2418,6 +2425,13 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3:
dependencies: dependencies:
ms "2.0.0" ms "2.0.0"
debug@=3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
dependencies:
ms "2.0.0"
debug@^3.0.0, debug@^3.1.1, debug@^3.2.5: debug@^3.0.0, debug@^3.1.1, debug@^3.2.5:
version "3.2.6" version "3.2.6"
resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b" resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
...@@ -3136,6 +3150,13 @@ follow-redirects@1.0.0: ...@@ -3136,6 +3150,13 @@ follow-redirects@1.0.0:
dependencies: dependencies:
debug "^2.2.0" debug "^2.2.0"
follow-redirects@1.5.10:
version "1.5.10"
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==
dependencies:
debug "=3.1.0"
follow-redirects@^1.0.0: follow-redirects@^1.0.0:
version "1.10.0" version "1.10.0"
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.10.0.tgz#01f5263aee921c6a54fb91667f08f4155ce169eb" resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.10.0.tgz#01f5263aee921c6a54fb91667f08f4155ce169eb"
...@@ -5777,6 +5798,11 @@ qs@6.7.0: ...@@ -5777,6 +5798,11 @@ qs@6.7.0:
resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc" resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
integrity sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ== integrity sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==
qs@^6.9.4:
version "6.9.4"
resolved "https://registry.yarnpkg.com/qs/-/qs-6.9.4.tgz#9090b290d1f91728d3c22e54843ca44aea5ab687"
integrity sha512-A1kFqHekCTM7cz0udomYUoYNWjBebHm/5wzU/XqrBRBNWectVH0QIiN+NEcZ0Dte5hvzHwbr8+XQmguPhJ6WdQ==
query-string@^4.3.2: query-string@^4.3.2:
version "4.3.4" version "4.3.4"
resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb" resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment