dai_siki
5 years ago
13 changed files with 755 additions and 8 deletions
@ -1,2 +1,3 @@ |
|||
/src/icons/iconfont.js |
|||
/*.js |
|||
*.js |
|||
*.vue |
|||
|
|||
@ -0,0 +1,2 @@ |
|||
.vscode |
|||
.eslintrc.js |
|||
@ -0,0 +1,18 @@ |
|||
export default [ |
|||
{ |
|||
key: 'customerId', |
|||
title: '客户id', |
|||
display: ['formA', 'formU', 'table', 'model'], |
|||
fixed: false, |
|||
block: true, |
|||
width: 100 |
|||
}, |
|||
{ |
|||
key: 'customerName', |
|||
title: '客户名称', |
|||
display: ['formA', 'formU', 'table', 'model'], |
|||
fixed: false, |
|||
block: true, |
|||
width: 100 |
|||
}, |
|||
] |
|||
@ -0,0 +1,33 @@ |
|||
export default [{ |
|||
key: 'appId', |
|||
title: '应用id', |
|||
display: ['formA', 'formU', 'table', 'model'], |
|||
fixed: false, |
|||
block: true, |
|||
width: 100 |
|||
}, |
|||
{ |
|||
key: 'appName', |
|||
title: '应用名称', |
|||
display: ['formA', 'formU', 'table', 'model'], |
|||
fixed: false, |
|||
block: true, |
|||
width: 100 |
|||
}, |
|||
{ |
|||
key: 'customerName', |
|||
title: '所属客户', |
|||
display: ['formA', 'formU', 'table', 'model'], |
|||
fixed: false, |
|||
block: true, |
|||
width: 100 |
|||
}, |
|||
{ |
|||
key: 'secret', |
|||
title: '秘钥', |
|||
display: ['formA', 'formU', 'table', 'model'], |
|||
fixed: false, |
|||
block: true, |
|||
width: 200 |
|||
}, |
|||
] |
|||
@ -0,0 +1,3 @@ |
|||
export const mockUrlPrefix = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad'; |
|||
|
|||
export const envIsDev = process.env.VUE_APP_NODE_ENV === "dev"; |
|||
@ -0,0 +1,67 @@ |
|||
/*--------------------------------------------------------------- |
|||
| 请求接口封装 | |
|||
---------------------------------------------------------------*/ |
|||
import axios from 'axios' |
|||
import log from 'dai-js/modules/log'; |
|||
import curry from 'dai-js/tools/curry'; |
|||
|
|||
const request = curry((method, url, data = {}, headers = {}, progress = () => {}) => { |
|||
return new Promise(reslove => { |
|||
let returnIniData = { |
|||
httpCode: '', |
|||
data: {}, |
|||
msg: '', |
|||
code: '', |
|||
}; |
|||
|
|||
const succFn = (res) => { |
|||
log(`[request成功] ${url}`, data, res); |
|||
let retData = { |
|||
...returnIniData, |
|||
...res.data, |
|||
httpCode: res.statusCode |
|||
}; |
|||
// if(typeof Vue.$afterRequestHook == 'function'){
|
|||
// retData = Vue.$afterRequestHook(retData);
|
|||
// }
|
|||
|
|||
reslove(retData); |
|||
}; |
|||
|
|||
const failFn = (err) => { |
|||
log(`[request失败] ${url}`, data, err); |
|||
|
|||
reslove(Object.assign({}, returnIniData, { |
|||
httpCode: '9999', //访问出现意外
|
|||
msg: '网络错误', |
|||
})); |
|||
}; |
|||
|
|||
if (method.toUpperCase() == 'POST') { |
|||
axios.post(url, data, { |
|||
headers, |
|||
responseType: 'json', |
|||
// progress,
|
|||
// credentials: false,
|
|||
}).then(succFn).catch(failFn); |
|||
} else { |
|||
axios.get(url, { |
|||
params: data, |
|||
headers, |
|||
responseType: 'json', |
|||
// credentials: true,
|
|||
}).then(succFn).catch(failFn); |
|||
} |
|||
}); |
|||
}); |
|||
|
|||
export const requestGet = request('get'); |
|||
|
|||
export const requestPost = request('post'); |
|||
|
|||
export default { |
|||
install(Vue) { |
|||
Vue.prototype.$requestGet = requestGet; |
|||
Vue.prototype.$requestPost = requestPost; |
|||
} |
|||
}; |
|||
@ -0,0 +1,204 @@ |
|||
<template> |
|||
<el-dialog |
|||
:visible.sync="visible" |
|||
:title="'编辑外部应用'" |
|||
:close-on-click-modal="false" |
|||
:before-close="handleClose" |
|||
:close-on-press-escape="false" |
|||
> |
|||
<el-form |
|||
:inline="true" |
|||
:model="dataForm" |
|||
:rules="dataRule" |
|||
ref="dataForm" |
|||
:label-width="'120px'" |
|||
> |
|||
<el-form-item label="应用名称" prop="appName"> |
|||
<el-input |
|||
class="item_width_1" |
|||
v-model="dataForm.appName" |
|||
placeholder="应用名称" |
|||
></el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="所属客户" prop="customerId"> |
|||
<el-select |
|||
class="item_width_1" |
|||
v-model="dataForm.customerId" |
|||
placeholder="请选择" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in customerList" |
|||
:key="item.customerId" |
|||
:label="item.customerName" |
|||
:value="item.customerId" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-form> |
|||
<template slot="footer"> |
|||
<el-button @click="visible = false">{{ $t("cancel") }}</el-button> |
|||
<el-button type="primary" @click="saveForm()">{{ |
|||
$t("confirm") |
|||
}}</el-button> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import { Loading } from "element-ui"; // 引入Loading服务 |
|||
import { requestPost } from "@/js/dai/request"; |
|||
import { envIsDev, mockUrlPrefix } from "@/js/dai/config"; |
|||
|
|||
// 当前是否是开发环境 |
|||
const isMockEnv = envIsDev && false; |
|||
const requestUrlPrefix = isMockEnv ? mockUrlPrefix : ""; |
|||
|
|||
let loading; // 加载动画 |
|||
export default { |
|||
data() { |
|||
return { |
|||
visible: false, |
|||
type: "", // 操作类型A/U |
|||
dataForm: { |
|||
appId: "", |
|||
appName: "", |
|||
customerId: "", |
|||
customerName: "", |
|||
}, |
|||
customerList: [ |
|||
// { |
|||
// customerId: "", |
|||
// customerName: "", |
|||
// } |
|||
], |
|||
}; |
|||
}, |
|||
created() { |
|||
this.queryCustomerList(); |
|||
}, |
|||
computed: { |
|||
dataRule() { |
|||
return { |
|||
customerId: [ |
|||
{ |
|||
required: true, |
|||
message: this.$t("validate.required"), |
|||
trigger: "blur", |
|||
}, |
|||
], |
|||
appName: [ |
|||
{ |
|||
required: true, |
|||
message: this.$t("validate.required"), |
|||
trigger: "blur", |
|||
}, |
|||
], |
|||
}; |
|||
}, |
|||
}, |
|||
methods: { |
|||
async queryCustomerList() { |
|||
const { data, code, msg } = await requestPost( |
|||
requestUrlPrefix + "/commonservice/externalcustomer/list", |
|||
{ |
|||
pageNo: 1, |
|||
pageSize: 1000, |
|||
} |
|||
); |
|||
if (code === 0) { |
|||
this.customerList = data.list; |
|||
} |
|||
}, |
|||
init(dataForm, type) { |
|||
this.type = type; |
|||
this.visible = true; |
|||
// this.dataForm=dataForm |
|||
|
|||
this.$nextTick(() => { |
|||
Object.assign(this.dataForm, dataForm); |
|||
}); |
|||
}, |
|||
addRequest() { |
|||
this.dataForm.domainNameList.push(""); |
|||
}, |
|||
delRequest(index) { |
|||
this.dataForm.domainNameList.splice(index, 1); |
|||
}, |
|||
|
|||
saveForm() { |
|||
this.$refs["dataForm"].validate((valid) => { |
|||
if (!valid) { |
|||
this.$message.error("表单验证失败!"); |
|||
} else { |
|||
let url = ""; |
|||
if (this.type === "U") { |
|||
url = requestUrlPrefix + "/commonservice/externalcustomer/update"; |
|||
} else { |
|||
url = requestUrlPrefix + "/commonservice/externalcustomer/add"; |
|||
} |
|||
this.dataForm.functionGroup = "1"; |
|||
window.app.ajax.post( |
|||
url, |
|||
this.dataForm, |
|||
(data, rspMsg) => { |
|||
this.$message({ |
|||
type: "success", |
|||
message: "保存成功", |
|||
}); |
|||
this.$emit("editDiaOK"); |
|||
this.visible = false; |
|||
}, |
|||
(rspMsg, data) => { |
|||
this.endLoading(); |
|||
this.$message.error(rspMsg); |
|||
} |
|||
); |
|||
} |
|||
}); |
|||
}, |
|||
handleClose() { |
|||
this.visible = false; |
|||
}, |
|||
|
|||
// 开启加载动画 |
|||
startLoading() { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: "正在加载……", // 加载中需要显示的文字 |
|||
background: "rgba(0,0,0,.7)", // 背景颜色 |
|||
}); |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading() { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close(); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.function-icon { |
|||
width: 28px; |
|||
} |
|||
.item_width_1 { |
|||
width: 300px; |
|||
} |
|||
.item_width_2 { |
|||
width: 700px; |
|||
} |
|||
.block { |
|||
display: block; |
|||
} |
|||
.btn_serve { |
|||
float: left; |
|||
margin-top: 4px; |
|||
margin-left: 10px; |
|||
vertical-align: bottom; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,147 @@ |
|||
<template> |
|||
<div> |
|||
<el-card shadow="never" class="aui-card--fill"> |
|||
<el-form :inline="true" :model="tableParams"> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="addShow">新增</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<c-table |
|||
column-type="" |
|||
ref="table" |
|||
keyword="partnerApp" |
|||
:url="tableUrl" |
|||
:params="tableParams" |
|||
:operationWidth="80" |
|||
:operations="operations" |
|||
@editShow="editShow" |
|||
@copySecret="copySecret" |
|||
@del="del" |
|||
> |
|||
</c-table> |
|||
</el-card> |
|||
|
|||
<edit ref="edit" @editDiaOK="editDiaOK"></edit> |
|||
</div> |
|||
</template> |
|||
|
|||
<style lang="scss" src="@/assets/scss/modules/wx-mini/index-set.scss"></style> |
|||
|
|||
<script> |
|||
import { mapGetters } from "vuex"; |
|||
import CTable from "@c/CTable"; |
|||
import edit from "./edit"; |
|||
import { requestPost } from "@/js/dai/request"; |
|||
import { envIsDev, mockUrlPrefix } from "@/js/dai/config"; |
|||
import { Loading } from "element-ui"; |
|||
import nextTick from "dai-js/tools/nextTick"; |
|||
|
|||
// 当前是否是开发环境 |
|||
const isMockEnv = envIsDev && false; |
|||
const requestUrlPrefix = isMockEnv ? mockUrlPrefix : ""; |
|||
|
|||
export default { |
|||
mixins: [], |
|||
components: { CTable, edit }, |
|||
|
|||
data() { |
|||
return { |
|||
tableUrl: requestUrlPrefix + "/commonservice/externalapp/list", |
|||
// 查询条件 |
|||
tableParams: {}, |
|||
|
|||
operations: [ |
|||
{ |
|||
lable: "修改", // 按钮显示名称 |
|||
size: "mini", |
|||
style: "margin: 0 6px;", |
|||
type: "text", |
|||
slot: "", |
|||
plain: false, |
|||
methodName: "editShow", // 回调方法名称 |
|||
isShow: (row) => { |
|||
return true; |
|||
}, |
|||
}, |
|||
{ |
|||
lable: "复制秘钥", // 按钮显示名称 |
|||
size: "mini", |
|||
style: "margin: 0 6px;", |
|||
type: "text", |
|||
slot: "", |
|||
plain: false, |
|||
methodName: "copySecret", // 回调方法名称 |
|||
isShow: (row) => { |
|||
return true; |
|||
}, |
|||
}, |
|||
// { |
|||
// lable: "删除", // 按钮显示名称 |
|||
// size: "mini", |
|||
// style: "margin: 0 6px;", |
|||
// type: "text", |
|||
// slot: "", |
|||
// plain: false, |
|||
// methodName: "del", // 回调方法名称 |
|||
// isShow: (row) => { |
|||
// return true; |
|||
// }, |
|||
// }, |
|||
], |
|||
}; |
|||
}, |
|||
|
|||
computed: { |
|||
tableHeight() { |
|||
return this.clientHeight - 60 - 80 - 80 - 90; |
|||
}, |
|||
...mapGetters(["clientHeight", "env"]), |
|||
}, |
|||
|
|||
created() { |
|||
this.refresh(); |
|||
}, |
|||
|
|||
methods: { |
|||
// 刷新 |
|||
async refresh() { |
|||
await nextTick(); |
|||
this.$refs.table.loadData(); // 获取表格数据 |
|||
}, |
|||
// 新增 |
|||
addShow() { |
|||
const row = { |
|||
appId: "", |
|||
appName: "", |
|||
customerId: "", |
|||
customerName: "", |
|||
}; |
|||
this.$refs["edit"].init(row, "A"); |
|||
}, |
|||
copySecret(row) { |
|||
const { secret } = row; |
|||
var aux = document.createElement("input"); |
|||
aux.setAttribute("value", secret); |
|||
document.body.appendChild(aux); |
|||
aux.select(); |
|||
document.execCommand("copy"); |
|||
document.body.removeChild(aux); |
|||
console.log("复制成功", secret); |
|||
}, |
|||
// 编辑 |
|||
editShow(row) { |
|||
this.$refs["edit"].init(row, "U"); |
|||
}, |
|||
del(row) { |
|||
this.$message({ |
|||
type: "error", |
|||
message: "无法删除，因为没有提供接口", |
|||
}); |
|||
}, |
|||
editDiaOK() { |
|||
this.refresh(); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,143 @@ |
|||
<template> |
|||
<el-dialog :visible.sync="visible" |
|||
:title="'编辑外部客户'" |
|||
:close-on-click-modal="false" |
|||
:before-close="handleClose" |
|||
:close-on-press-escape="false"> |
|||
<el-form :inline="true" |
|||
:model="dataForm" |
|||
:rules="dataRule" |
|||
ref="dataForm" |
|||
:label-width="'120px'"> |
|||
<el-form-item label="客户名称" |
|||
prop="customerName"> |
|||
<el-input class="item_width_1" |
|||
v-model="dataForm.customerName" |
|||
placeholder="客户名称"></el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
<template slot="footer"> |
|||
<el-button @click="visible = false">{{ $t('cancel') }}</el-button> |
|||
<el-button type="primary" |
|||
@click="saveForm()">{{ $t('confirm') }}</el-button> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
|
|||
let loading// 加载动画 |
|||
export default { |
|||
data () { |
|||
return { |
|||
visible: false, |
|||
type: '', // 操作类型A/U |
|||
dataForm: { |
|||
customerId: '', |
|||
customerName: '' |
|||
}, |
|||
uploadUlr: window.SITE_CONFIG['apiURL'] + '/oss/file/function/upload', |
|||
} |
|||
}, |
|||
created () { |
|||
// this.queryFunctionList() |
|||
}, |
|||
computed: { |
|||
dataRule () { |
|||
return { |
|||
customerName: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
init (dataForm, type) { |
|||
this.type = type |
|||
this.visible = true |
|||
// this.dataForm=dataForm |
|||
|
|||
this.$nextTick(() => { |
|||
Object.assign(this.dataForm, dataForm) |
|||
}) |
|||
}, |
|||
addRequest () { |
|||
this.dataForm.domainNameList.push('') |
|||
}, |
|||
delRequest (index) { |
|||
this.dataForm.domainNameList.splice(index, 1) |
|||
}, |
|||
|
|||
saveForm () { |
|||
this.$refs['dataForm'].validate((valid) => { |
|||
if (!valid) { |
|||
this.$message.error('表单验证失败!') |
|||
} else { |
|||
let url = '' |
|||
if (this.type === 'U') { |
|||
url = '/commonservice/externalcustomer/update' |
|||
} else { |
|||
url = '/commonservice/externalcustomer/add' |
|||
} |
|||
this.dataForm.functionGroup = '1' |
|||
window.app.ajax.post(url, this.dataForm, |
|||
(data, rspMsg) => { |
|||
this.$message({ |
|||
type: 'success', |
|||
message: '保存成功' |
|||
}) |
|||
this.$emit('editDiaOK') |
|||
this.visible = false |
|||
}, |
|||
(rspMsg, data) => { |
|||
this.endLoading() |
|||
this.$message.error(rspMsg) |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
handleClose () { |
|||
this.visible = false |
|||
}, |
|||
|
|||
// 开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading () { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.function-icon { |
|||
width: 28px; |
|||
} |
|||
.item_width_1 { |
|||
width: 300px; |
|||
} |
|||
.item_width_2 { |
|||
width: 700px; |
|||
} |
|||
.block { |
|||
display: block; |
|||
} |
|||
.btn_serve { |
|||
float: left; |
|||
margin-top: 4px; |
|||
margin-left: 10px; |
|||
vertical-align: bottom; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,122 @@ |
|||
<template> |
|||
<div> |
|||
<el-card shadow="never" class="aui-card--fill"> |
|||
<el-form :inline="true" :model="tableParams"> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="addShow">新增</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<c-table |
|||
column-type="" |
|||
ref="table" |
|||
keyword="partner" |
|||
:url="tableUrl" |
|||
:params="tableParams" |
|||
:operationWidth="80" |
|||
:operations="operations" |
|||
@editShow="editShow" |
|||
@del="del" |
|||
> |
|||
</c-table> |
|||
</el-card> |
|||
|
|||
<edit ref="edit" @editDiaOK="editDiaOK"></edit> |
|||
</div> |
|||
</template> |
|||
|
|||
<style lang="scss" src="@/assets/scss/modules/wx-mini/index-set.scss"></style> |
|||
|
|||
<script> |
|||
import { mapGetters } from "vuex"; |
|||
import CTable from "@c/CTable"; |
|||
import edit from "./edit"; |
|||
import { requestPost } from "@/js/dai/request"; |
|||
import { envIsDev, mockUrlPrefix } from "@/js/dai/config"; |
|||
import { Loading } from "element-ui"; |
|||
import nextTick from "dai-js/tools/nextTick"; |
|||
|
|||
// 当前是否是开发环境 |
|||
const isMockEnv = envIsDev && false; |
|||
const requestUrlPrefix = isMockEnv ? mockUrlPrefix : ""; |
|||
|
|||
export default { |
|||
mixins: [], |
|||
components: { CTable, edit }, |
|||
|
|||
data() { |
|||
return { |
|||
tableUrl: requestUrlPrefix + "/commonservice/externalcustomer/list", |
|||
// 查询条件 |
|||
tableParams: {}, |
|||
|
|||
operations: [ |
|||
{ |
|||
lable: "修改", // 按钮显示名称 |
|||
size: "mini", |
|||
style: "margin: 0 6px;", |
|||
type: "text", |
|||
slot: "", |
|||
plain: false, |
|||
methodName: "editShow", // 回调方法名称 |
|||
isShow: (row) => { |
|||
return true; |
|||
}, |
|||
}, |
|||
// { |
|||
// lable: "删除", // 按钮显示名称 |
|||
// size: "mini", |
|||
// style: "margin: 0 6px;", |
|||
// type: "text", |
|||
// slot: "", |
|||
// plain: false, |
|||
// methodName: "del", // 回调方法名称 |
|||
// isShow: (row) => { |
|||
// return true; |
|||
// }, |
|||
// }, |
|||
], |
|||
}; |
|||
}, |
|||
|
|||
computed: { |
|||
tableHeight() { |
|||
return this.clientHeight - 60 - 80 - 80 - 90; |
|||
}, |
|||
...mapGetters(["clientHeight", "env"]), |
|||
}, |
|||
|
|||
created() { |
|||
this.refresh(); |
|||
}, |
|||
|
|||
methods: { |
|||
// 刷新 |
|||
async refresh() { |
|||
await nextTick(); |
|||
this.$refs.table.loadData(); // 获取表格数据 |
|||
}, |
|||
// 新增 |
|||
addShow() { |
|||
const row = { |
|||
customerId: "", |
|||
customerName: "", |
|||
}; |
|||
this.$refs["edit"].init(row, "A"); |
|||
}, |
|||
// 编辑 |
|||
editShow(row) { |
|||
this.$refs["edit"].init(row, "U"); |
|||
}, |
|||
del(row) { |
|||
this.$message({ |
|||
type: "error", |
|||
message: "无法删除，因为没有提供接口", |
|||
}); |
|||
}, |
|||
editDiaOK() { |
|||
this.refresh(); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
Loading…
Reference in new issue