<template>
|
<GlobalAlertWindow
|
:title="title"
|
:visible.sync="visible"
|
:confirm-working="isWorking"
|
@confirm="confirm"
|
>
|
<div class="tips-style">钉钉相关配置需要进入【<a src="https://open.dingtalk.com/">钉钉开放平台</a>】配置钉钉H5应用并获取对应的参数</div>
|
<el-form :model="form" ref="form" label-width="150px" label-suffix="：" :rules="rules" inline>
|
<div class="short-line">
|
<el-form-item label="CorpId" prop="corpId">
|
<el-input v-model="form.corpId" placeholder="请输入CorpId" v-trim/>
|
钉钉开放平台首页的CorpId
|
</el-form-item>
|
</div>
|
<div class="short-line">
|
<el-form-item label="AgentId" prop="agentId">
|
<el-input v-model="form.agentId" placeholder="请输入AgentId" v-trim/>
|
钉钉H5应用的AgentId
|
</el-form-item>
|
</div>
|
<div class="short-line">
|
<el-form-item label="app_key" prop="app_key">
|
<el-input v-model="form.app_key" placeholder="请输入app_key" v-trim/>
|
钉钉H5应用的app_key
|
</el-form-item>
|
</div>
|
<div class="short-line">
|
<el-form-item label="app_secret" prop="app_secret">
|
<el-input v-model="form.app_secret" placeholder="请输入app_secret" v-trim/>
|
钉钉H5应用的app_secret
|
</el-form-item>
|
</div>
|
</el-form>
|
<!-- <div slot="footer"></div> -->
|
</GlobalAlertWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalAlertWindow from '@/components/common/GlobalAlertWindow'
|
import UploadImage from '../common/UploadImage.vue'
|
// import { create } from '@/api/business/companyChange'
|
import { creditCode } from '@/utils/form'
|
import { update } from '@/api/business/clientManger'
|
export default {
|
name: 'OperaDDSettingWindow',
|
extends: BaseOpera,
|
components: { GlobalAlertWindow, UploadImage },
|
data () {
|
|
return {
|
isUploading: false,
|
// 表单数据
|
form: {
|
id: null,
|
|
corpId: '',
|
agentId: '',
|
app_key: '',
|
app_secret: '',
|
},
|
types:[],
|
// 验证规则
|
rules: {
|
corpId: [
|
{ required: true, message: '请输入CorpId', trigger: 'blur' }
|
],
|
agentId: [
|
{ required: true, message: '请输入AgentId', trigger: 'blur' }
|
],
|
app_key: [
|
{ required: true, message: '请输入app_key', trigger: 'blur' }
|
],
|
app_secret: [
|
{ required: true, message: '请输入app_secret', trigger: 'blur' }
|
],
|
// fileList: [
|
// { required: true, message: '请输入上传', trigger: 'change' }
|
// ],
|
companyShortName: [
|
{ required: true, message: '请输入客户简称', trigger: 'blur' }
|
],
|
userName: [
|
{ required: true, message: '请输入手机号码', trigger: 'blur' }
|
],
|
// address: [
|
// { required: true, validator: newRule, trigger: ['blur']}
|
// ],
|
creditCode: [
|
{ required: false, validator: creditCode, trigger: 'blur' }
|
],
|
|
}
|
}
|
},
|
created () {
|
this.config({
|
api: '/business/clientManger',
|
'field.id': 'id'
|
})
|
},
|
methods: {
|
open (title, target) {
|
this.title = title
|
this.visible = true
|
// this.form.fileList = []
|
// this.form.changeFileList = []
|
// 编辑
|
// debugger
|
this.$nextTick(() => {
|
this.$refs.form.clearValidate()
|
this.$refs.form.resetFields()
|
const dingdingInfo = target.dingdingInfo ? JSON.parse(target.dingdingInfo) : {}
|
// debugger
|
for (const key in this.form) {
|
this.form[key] = dingdingInfo[key]
|
}
|
this.form.id = target.id
|
// this.form.fileList = JSON.parse(JSON.stringify(target.fileList)) || []
|
// this.form.fileList.forEach(item => item.url = item.fileurlfull)
|
console.log(this.form);
|
})
|
},
|
begin() {
|
this.isUploading=true
|
},
|
end() {
|
this.isUploading=false
|
},
|
confirm() {
|
this.$refs.form.validate((valid) => {
|
if (!valid) {
|
return
|
}
|
this.isWorking = true
|
update({
|
id: this.form.id,
|
dingdingInfo: JSON.stringify(this.form)
|
})
|
.then(() => {
|
this.visible = false
|
this.$refs.form.resetFields()
|
this.$message.success('修改成功')
|
this.$emit('success')
|
})
|
.catch(e => {
|
this.$message.error(e)
|
})
|
.finally(() => {
|
this.isWorking = false
|
})
|
})
|
}
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.tips-style {
|
background-color: #f7f7f7;
|
height: 30px;
|
line-height: 30px;
|
a {
|
text-decoration:none
|
}
|
}
|
.item-line {
|
::v-deep .el-form-item__content {
|
width: 480px;
|
}
|
}
|
.short-line {
|
// ::v-deep .el-form-item__content {
|
// width: 686px;
|
// display: flex;
|
// .el-input--small {
|
// width: 286px!important;
|
// margin-right: 10px;
|
// }
|
// // width: 680px;
|
// }
|
::v-deep .el-form-item {
|
display: flex;
|
}
|
::v-deep .el-form-item__content {
|
display: flex;
|
.el-input--small {
|
width: 286px!important;
|
margin-right: 10px;
|
}
|
width: 680px;
|
}
|
|
}
|
.pic-line {
|
::v-deep .el-form-item__content {
|
width: 500px;
|
}
|
}
|
.address {
|
display: flex;
|
.line {
|
width: 10px;
|
}
|
}
|
.sub-title {
|
font-size: 20px;
|
font-weight: 600;
|
margin-top: 10px;
|
margin-bottom: 10px;
|
}
|
|
</style>
|
