提交 e8f20cdf authored 作者: 王鹏飞's avatar 王鹏飞

chore: update

上级 970e033d
import httpRequest from '@/utils/axios' import httpRequest from '@/utils/axios'
import type { CreateChannelParams, ChannelListSearch } from './types' import type { ChannelRequestParams, ChannelListSearch } from './types'
// 获取渠道列表 // 获取渠道列表
export function getChannelList(params?: ChannelListSearch) { export function getChannelList(params?: ChannelListSearch) {
...@@ -17,12 +17,12 @@ export function getChannelUserList(params?: { id?: string | string[] }) { ...@@ -17,12 +17,12 @@ export function getChannelUserList(params?: { id?: string | string[] }) {
} }
// 新增渠道成员 // 新增渠道成员
export function memberCreate(data: { user_id: string; channels_id: string; roles: string; type?: string }) { export function addMember(data: { user_id: string; channels_id: string; roles: string; type?: string }) {
return httpRequest.post('/api/zws/v1/backend/channel/member-create', data) return httpRequest.post('/api/zws/v1/backend/channel/member-create', data)
} }
// 删除成员 // 删除成员
export function memberDelete(data: { user_id: string; channel_id: string; role_id: string; }) { export function deleteMember(data: { user_id: string; channel_id: string; role_id: string }) {
return httpRequest.post('/api/zws/v1/backend/channel/member-delete', data) return httpRequest.post('/api/zws/v1/backend/channel/member-delete', data)
} }
...@@ -32,16 +32,21 @@ export function getChannelMap() { ...@@ -32,16 +32,21 @@ export function getChannelMap() {
} }
// 搜索用户 // 搜索用户
export function searchUser(params: { q: string; }) { export function searchUser(params: { q: string }) {
return httpRequest.get('/api/zws/v1/backend/common/search-user', { params }) return httpRequest.get('/api/zws/v1/backend/common/search-user', { params })
} }
// 获取角色 // 获取渠道角色
export function getProjectRoles() { export function getRoles() {
return httpRequest.get('/api/zws/v1/backend/common/project-roles') return httpRequest.get('/api/zws/v1/backend/common/channel-roles')
} }
// 创建 // 创建渠道
export function createChannel(data: CreateChannelParams) { export function createChannel(data: ChannelRequestParams) {
return httpRequest.post('/api/zws/v1/backend/channel/create', data) return httpRequest.post('/api/zws/v1/backend/channel/create', data)
} }
// 更新渠道
export function updateChannel(data: { id: string } & ChannelRequestParams) {
return httpRequest.post('/api/zws/v1/backend/channel/update', data)
}
<script setup lang="ts"> <script setup lang="ts">
import { searchUser, getProjectRoles } from '../api' import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus' import type { User, Role } from '../types'
import { searchUser, getRoles } from '../api'
const emit = defineEmits(['update:modelValue', 'changeUser']) interface FormData {
user: User
// 用户搜索 role: Role[]
interface UserInfo {
id: string
nickname: string
mobile: string
} }
let userValue = $ref('') const emit = defineEmits<{
const loading = ref(false) (e: 'update:modelValue', modelValue: boolean): void
let userListOption = $ref<UserInfo[]>() (e: 'submit', data: FormData): void
}>()
const formRef = $ref<FormInstance>()
const form: Partial<FormData> = reactive({ user: undefined, role: [] })
const rules = reactive<FormRules>({
user: { required: true, message: '请选择成员', trigger: 'change' },
role: { type: 'array', required: true, message: '请选择角色', trigger: 'change' }
})
let userList = $ref<User[]>()
let loading = $ref(false)
const remoteMethod = (q: string) => { const remoteMethod = (q: string) => {
if (q) { if (!q) return
loading.value = true loading = true
searchUser({ q: q }).then((res: { data: UserInfo[] }) => { searchUser({ q }).then(res => {
loading.value = false loading = false
userListOption = res.data userList = res.data
}) })
}
} }
// 获取角色 let roleList = $ref<Role[]>()
interface ProjectRole { function fetchRoles() {
id: string getRoles().then((res: { data: Role[] }) => {
name: string roleList = res.data
})
} }
let roleValue = $ref([]) onMounted(() => {
let projectRoleOption = $ref<ProjectRole[]>() fetchRoles()
getProjectRoles().then((res: { data: ProjectRole[] }) => {
projectRoleOption = res.data
}) })
// 选择完成 // 选择完成
const submit = function () { function submit() {
if (Object.keys(roleValue).length && userValue) { formRef?.validate(() => {
const data = { emit('submit', form as FormData)
userInfo: userListOption.find(item => item.id === userValue), })
role: projectRoleOption.reduce((a: any, b) => {
if (roleValue.find((item: any) => item === b.id)) {
a.push(b)
}
return a
}, [])
}
emit('changeUser', data)
emit('update:modelValue', false)
userValue = ''
roleValue = []
} else {
ElMessage('请选择')
}
} }
</script> </script>
<template> <template>
<el-dialog title="添加项目成员" width="400px" :close-on-click-modal="false"> <el-dialog
<el-form style="display: block; width: 80%; margin: 0 auto" class="demo-form-inline"> title="添加渠道成员"
<el-form-item label="选择成员"> width="500px"
:close-on-click-modal="false"
@update:modelValue="$emit('update:modelValue')">
<el-form :rules="rules" :model="form" hide-required-asterisk ref="formRef">
<el-form-item label="选择成员" prop="user">
<el-select <el-select
v-model="userValue" v-model="form.user"
filterable filterable
remote remote
reserve-keyword reserve-keyword
placeholder="请输入" placeholder="请输入"
:remote-method="remoteMethod" :remote-method="remoteMethod"
:loading="loading" :loading="loading"
> value-key="id"
style="width: 100%">
<el-option <el-option
v-for="item in userListOption" v-for="item in userList"
:key="item.id" :key="item.id"
:label="item.mobile ? `${item.nickname}(${item.mobile}})` : item.nickname" :label="item.mobile ? `${item.nickname}(${item.mobile}})` : item.nickname"
:value="item.id" :value="item" />
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="选择角色" v-show="userValue"> <el-form-item label="选择角色" prop="role">
<el-select v-model="roleValue" multiple placeholder="请选择"> <el-select v-model="form.role" multiple placeholder="请选择" value-key="id" style="width: 100%">
<el-option v-for="item in projectRoleOption" :key="item.id" :label="item.name" :value="item.id" /> <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item" />
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
<span class="dialog-footer"> <el-button auto-insert-space @click="$emit('update:modelValue', false)">取消</el-button>
<el-button @click="emit('update:modelValue', false)">取消</el-button> <el-button auto-insert-space type="primary" @click="submit"> 确定 </el-button>
<el-button type="primary" @click="submit"> 确定 </el-button>
</span>
</template> </template>
</el-dialog> </el-dialog>
</template> </template>
<script setup lang="ts">
import type { FormRules } from 'element-plus'
import { searchUser } from '../api'
const form = $ref({
contact_person: '',
contact_phone: '',
contact_email: '',
agreement_id: '',
agreement_signing_time: '',
agreement_filing_time: '',
channel_open_time: '',
agreement_type: '',
division_proportion: '',
channel_tax_rate: '',
bank_account_name: '',
channel_bank: '',
channel_bank_account: '',
company_registered_address: ''
})
interface State {
id: string
name: string
}
interface Props {
agreementType: State[]
channelTaxRate: State[]
}
const prop = defineProps<Props>()
const rules = reactive<FormRules>({
contact_person: [{ required: true, message: '请输入' }],
contact_phone: [{ required: true, message: '请输入' }],
contact_email: [{ required: true, message: '请输入' }]
})
// 用户搜索
interface UserInfo {
id: string
nickname: string
mobile: string
}
const loading = ref(false)
let userListOption = $ref<UserInfo[]>()
const remoteMethod = (q: string) => {
if (q) {
loading.value = true
searchUser({ q: q }).then((res: { data: UserInfo[] }) => {
loading.value = false
userListOption = res.data
})
}
}
</script>
<template>
<div class="basic-info">
<h2 class="app-card-hd__title small">协议信息</h2>
<el-form label-width="100px" :model="form" class="demo-form-inline" :inline="true" :rules="rules">
<el-form-item label="联络人" prop="contact_person">
<el-select
v-model="form.contact_person"
filterable
remote
reserve-keyword
placeholder="请输入"
:remote-method="remoteMethod"
:loading="loading"
>
<el-option
v-for="item in userListOption"
:key="item.id"
:label="item.mobile ? `${item.nickname}(${item.mobile}})` : item.nickname"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="联络电话" prop="contact_phone">
<el-input v-model="form.contact_phone" placeholder="请输入" />
</el-form-item>
<el-form-item label="联络邮箱" prop="contact_email">
<el-input v-model="form.contact_email" placeholder="请输入" />
</el-form-item>
<!-- <el-form-item label="服务电话">
<el-input v-model="form.channel_tax_rate" placeholder="请输入" />
</el-form-item> -->
<el-form-item label="合作协议编号">
<el-input v-model="form.agreement_id" placeholder="请输入" />
</el-form-item>
<el-form-item label="协议签署时间">
<el-date-picker v-model="form.agreement_signing_time" type="date" placeholder="请选择" />
</el-form-item>
<el-form-item label="协议归档时间">
<el-date-picker v-model="form.agreement_filing_time" type="date" placeholder="请选择" />
</el-form-item>
<el-form-item label="账号开通时间">
<el-date-picker v-model="form.channel_open_time" type="date" placeholder="请选择" />
</el-form-item>
<el-form-item label="签约类型">
<el-select v-model="form.agreement_type" placeholder="请选择">
<el-option v-for="item in prop.agreementType" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="分成比例(%)">
<el-input v-model="form.division_proportion" placeholder="请输入" />
</el-form-item>
<el-form-item label="渠道税率">
<el-select v-model="form.channel_tax_rate" placeholder="请选择">
<el-option v-for="item in prop.channelTaxRate" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="银行开户名">
<el-input v-model="form.bank_account_name" placeholder="请输入" />
</el-form-item>
<el-form-item label="银行开户行">
<el-input v-model="form.channel_bank" placeholder="请输入" />
</el-form-item>
<el-form-item label="银行账号">
<el-input v-model="form.channel_bank_account" placeholder="请输入" />
</el-form-item>
<el-form-item label="注册地址">
<el-input v-model="form.company_registered_address" placeholder="请输入" />
</el-form-item>
</el-form>
</div>
</template>
<style lang="scss" scoped>
.basic-info {
padding-top: 20px;
}
</style>
<script setup lang="ts">
import type { FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { searchUser } from '../api'
import type { BasicInfoParams } from '../types'
const route = useRoute()
let form = $ref({
title: '',
service_phone: '',
channel_owner_user_id: '',
channel_status: '',
tags: [],
summary: '',
comment: ''
})
interface Props {
channelTags: string[]
type: string
channelStatus: {
id: string
name: string
}[]
data?: BasicInfoParams
}
const prop = defineProps<Props>()
const rules = reactive<FormRules>({
title: [{ required: true, message: '请输入' }],
channel_owner_user_id: [{ required: true, message: '请选择' }],
channel_status: [{ required: true, message: '请选择' }]
})
// 用户搜索
interface UserInfo {
id: string
nickname: string
mobile: string
}
const loading = ref(false)
let userListOption = $ref<UserInfo[]>()
const remoteMethod = (q: string) => {
if (q) {
loading.value = true
searchUser({ q: q }).then((res: { data: UserInfo[] }) => {
loading.value = false
userListOption = res.data
})
}
}
const formRule = $ref<any>()
const submit = function () {
return formRule
.validateField()
.then(() => {
const paramForm = JSON.parse(JSON.stringify(form))
paramForm.tags = paramForm.tags.toString()
console.log(paramForm, 'paramForm')
return paramForm
})
.catch(() => {
ElMessage({
message: '基本信息有误',
type: 'warning'
})
return false
})
}
defineExpose({
submit
})
// 数据回显
watch(
() => prop.data,
val => {
form = Object.assign(form, val)
remoteMethod(form.channel_owner_user_id)
}
)
</script>
<template>
<div class="basic-info">
<h2 class="app-card-hd__title small">基本信息</h2>
<el-form ref="formRule" label-width="100px" :model="form" class="demo-form-inline" :inline="true" :rules="rules">
<el-form-item label="渠道名称" prop="title">
<el-input v-model="form.title" placeholder="请输入" />
</el-form-item>
<el-form-item label="渠道电话" v-if="prop.type !== '1'">
<el-input v-model="form.service_phone" placeholder="请输入" />
</el-form-item>
<el-form-item label="渠道归属人" prop="channel_owner_user_id">
<el-select
v-model="form.channel_owner_user_id"
filterable
remote
reserve-keyword
placeholder="请输入"
:remote-method="remoteMethod"
:loading="loading"
>
<el-option
v-for="item in userListOption"
:key="item.id"
:label="item.mobile ? `${item.nickname}(${item.mobile}})` : item.nickname"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="状态" prop="channel_status">
<el-select v-model="form.channel_status" placeholder="请选择">
<el-option v-for="item in prop.channelStatus" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="渠道标签">
<el-select v-model="form.tags" placeholder="请选择" multiple>
<el-option v-for="item in prop.channelTags" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>
<el-form-item label="渠道摘要">
<el-input v-model="form.summary" :rows="2" type="textarea" placeholder="请输入" />
</el-form-item>
<el-form-item label="备注" v-if="prop.type === '3'">
<el-input v-model="form.comment" :rows="2" type="textarea" placeholder="请输入" />
</el-form-item>
</el-form>
</div>
</template>
<style lang="scss" scoped>
.basic-info {
padding-top: 20px;
}
</style>
<script setup lang="ts">
import type { FormRules } from 'element-plus'
import AppUploadVue from '@/components/base/AppUpload.vue'
const form = $ref({
company_name: '',
company_short_name: '',
tax_number: '',
channel_tax_rate: '',
contact_person: '',
contact_phone: '',
contact_email: '',
contact_wechat: '',
bank_account_name: '',
channel_bank: '',
channel_bank_account: '',
company_registered_address: '',
business_license: ''
})
const upload = $ref({
i1: '',
i2: '',
i3: ''
})
const uploadFile = $ref<{
company_legal_representative_id_card_front?: string
company_legal_representative_id_card_back?: string
business_license?: string
}>()
const prop = defineProps({
type: Number,
channelTags: Array
})
const rules = reactive<FormRules>({
contact_person: [{ required: true, message: '请输入' }],
contact_phone: [{ required: true, message: '请输入' }],
contact_email: [{ required: true, message: '请输入' }]
})
// 上传
const uploadI1 = function (file: any) {
console.log(file)
uploadFile.company_legal_representative_id_card_front = file.raw
}
const uploadI2 = function (file: any) {
uploadFile.company_legal_representative_id_card_back = file.raw
}
const uploadI3 = function (file: any) {
uploadFile.business_license = file.raw
}
</script>
<template>
<div class="basic-info">
<h2 class="app-card-hd__title small">公司信息</h2>
<el-form label-width="100px" :model="form" class="demo-form-inline" :inline="true" :rules="rules">
<el-form-item label="公司名称">
<el-input v-model="form.company_name" placeholder="请输入" />
</el-form-item>
<el-form-item label="公司字号">
<el-input v-model="form.company_short_name" placeholder="请输入" />
</el-form-item>
<el-form-item label="企业税号">
<el-input v-model="form.tax_number" placeholder="请输入" />
</el-form-item>
<el-form-item label="企业税率">
<el-input v-model="form.channel_tax_rate" placeholder="请输入" />
</el-form-item>
<el-form-item label="联络人" prop="contact_person">
<el-input v-model="form.contact_person" placeholder="请输入" />
</el-form-item>
<el-form-item label="联络电话" prop="contact_phone">
<el-input v-model="form.contact_phone" placeholder="请输入" />
</el-form-item>
<el-form-item label="联络邮箱" prop="contact_email">
<el-input v-model="form.contact_email" placeholder="请输入" />
</el-form-item>
<el-form-item label="联络微信">
<el-input v-model="form.contact_wechat" placeholder="请输入" />
</el-form-item>
<el-form-item label="银行开户名">
<el-input v-model="form.bank_account_name" placeholder="请输入" />
</el-form-item>
<el-form-item label="银行开户行">
<el-input v-model="form.channel_bank" placeholder="请输入" />
</el-form-item>
<el-form-item label="银行账号">
<el-input v-model="form.channel_bank_account" placeholder="请输入" />
</el-form-item>
<el-form-item label="注册地址">
<el-input v-model="form.company_registered_address" placeholder="请输入" />
</el-form-item>
<el-form-item label="法人身份证(国徽面)">
<AppUploadVue v-model="upload.i1" @success="uploadI1"></AppUploadVue>
</el-form-item>
<el-form-item label="法人身份证(头像面)">
<AppUploadVue v-model="upload.i2" @success="uploadI2"></AppUploadVue>
</el-form-item>
<el-form-item label="营业执照">
<AppUploadVue v-model="upload.i3" @success="uploadI3"></AppUploadVue>
</el-form-item>
</el-form>
</div>
</template>
<style lang="scss" scoped>
.basic-info {
padding-top: 20px;
}
</style>
<script setup lang="ts">
const form = $ref({
channel_quality: '',
distribution_status: '',
case_withdraw_status: '',
service_dialog_status: ''
})
interface State {
id: string
name: string
}
interface Props {
channelQuality: number[]
distributionStatus: State[]
caseWithdrawStatus: State[]
serviceDialogStatus: State[]
}
const prop = defineProps<Props>()
</script>
<template>
<div class="basic-info">
<h2 class="app-card-hd__title small">控制信息</h2>
<el-form label-width="100px" :model="form" class="demo-form-inline" :inline="true">
<el-form-item label="渠道质量">
<el-select v-model="form.channel_quality" placeholder="请选择">
<el-option v-for="item in prop.channelQuality" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>
<el-form-item label="分配状态">
<el-select v-model="form.distribution_status" placeholder="请选择">
<el-option v-for="item in prop.distributionStatus" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="回抽状态">
<el-select v-model="form.case_withdraw_status" placeholder="请选择">
<el-option v-for="item in prop.caseWithdrawStatus" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="咨询框状态">
<el-select v-model="form.service_dialog_status" placeholder="请选择">
<el-option v-for="item in prop.serviceDialogStatus" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
</el-form>
</div>
</template>
<style lang="scss" scoped>
.basic-info {
padding-top: 20px;
}
</style>
<script setup lang="ts">
import type { ChannelFormData } from '../types'
import { provideForm } from '../util'
import { searchUser } from '../api'
import { useMap } from '../composables/useMap'
const { options } = await useMap()
const form = inject(provideForm) as ChannelFormData
// 用户搜索
interface UserInfo {
id: string
nickname: string
mobile: string
}
const loading = ref(false)
let userListOption = $ref<UserInfo[]>()
const remoteMethod = (q: string) => {
if (q) {
loading.value = true
searchUser({ q: q }).then((res: { data: UserInfo[] }) => {
loading.value = false
userListOption = res.data
})
}
}
</script>
<template>
<el-card shadow="never" header="协议信息" style="margin-top: 20px">
<el-row :gutter="40">
<el-col :span="6">
<el-form-item label="联络人" prop="partner.contact_person">
<el-select
v-model="form.partner.contact_person"
filterable
remote
reserve-keyword
placeholder="请输入"
:remote-method="remoteMethod"
:loading="loading"
style="width: 100%">
<el-option
v-for="item in userListOption"
:key="item.id"
:label="item.mobile ? `${item.nickname}(${item.mobile}})` : item.nickname"
:value="item.id" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="联络电话" prop="contact_phone">
<el-input v-model="form.partner.contact_phone" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="联络邮箱" prop="contact_email">
<el-input v-model="form.partner.contact_email" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="服务电话">
<el-input v-model="form.partner.channel_tax_rate" placeholder="请输入" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="40">
<el-col :span="6">
<el-form-item label="合作协议编号">
<el-input v-model="form.partner.agreement_id" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="协议签署时间">
<el-date-picker
v-model="form.partner.agreement_signing_time"
type="date"
placeholder="请选择"
style="width: 100%" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="协议归档时间">
<el-date-picker
v-model="form.partner.agreement_filing_time"
type="date"
placeholder="请选择"
style="width: 100%" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="账号开通时间">
<el-date-picker
v-model="form.partner.channel_open_time"
type="date"
placeholder="请选择"
style="width: 100%" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="40">
<el-col :span="6">
<el-form-item label="签约类型">
<el-select v-model="form.partner.agreement_type" placeholder="请选择" style="width: 100%">
<el-option v-for="item in options.agreementType" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="分成比例(%)">
<el-input v-model="form.partner.division_proportion" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="渠道税率">
<el-select v-model="form.partner.channel_tax_rate" placeholder="请选择" style="width: 100%">
<el-option v-for="item in options.channelTaxRate" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="40">
<el-col :span="12">
<el-form-item label="开户银行">
<el-input v-model="form.partner.channel_bank" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="银行账号">
<el-input v-model="form.partner.channel_bank_account" placeholder="请输入" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="40">
<el-col :span="12">
<el-form-item label="注册地址">
<el-input v-model="form.partner.company_registered_address" placeholder="请输入" />
</el-form-item>
</el-col>
</el-row>
</el-card>
</template>
<script setup lang="ts">
import type { FormRules } from 'element-plus'
import type { ChannelFormData } from '../types'
import { provideForm } from '../util'
import { searchUser } from '../api'
import { useMap } from '../composables/useMap'
const { options } = await useMap()
const form = inject(provideForm) as ChannelFormData
const rules = reactive<FormRules>({
title: [{ required: true, message: '请输入', trigger: 'blur' }],
channel_owner_user_id: [{ required: true, message: '请选择', trigger: 'change' }],
channel_status: [{ required: true, message: '请选择', trigger: 'change' }]
})
// 用户搜索
interface UserInfo {
id: string
nickname: string
mobile: string
}
const loading = ref(false)
let userListOption = $ref<UserInfo[]>()
const remoteMethod = (q: string) => {
if (q) {
loading.value = true
searchUser({ q: q }).then((res: { data: UserInfo[] }) => {
loading.value = false
userListOption = res.data
})
}
}
</script>
<template>
<el-card shadow="never" header="基本信息">
<el-row justify="space-between">
<el-col :span="4">
<el-form-item label="渠道名称" prop="title" :rules="rules.title">
<el-input v-model="form.title" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="4" v-if="form.channel_type !== '1'">
<el-form-item label="渠道电话" prop="service_phone">
<el-input v-model="form.service_phone" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="渠道归属人" prop="channel_owner_user_id" :rules="rules.channel_owner_user_id">
<el-select
v-model="form.channel_owner_user_id"
filterable
remote
reserve-keyword
placeholder="请输入"
:remote-method="remoteMethod"
:loading="loading"
style="width: 100%">
<el-option
v-for="item in userListOption"
:key="item.id"
:label="item.mobile ? `${item.nickname}(${item.mobile}})` : item.nickname"
:value="item.id" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="渠道标签">
<el-select v-model="form.tags" placeholder="请选择" multiple style="width: 100%">
<!-- <el-option v-for="item in prop.channelTags" :key="item" :label="item" :value="item" /> -->
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="状态" prop="channel_status" :rules="rules.channel_status">
<el-select v-model="form.channel_status" placeholder="请选择" style="width: 100%">
<el-option v-for="item in options.channelStatus" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="渠道摘要" v-if="form.channel_type !== '3'">
<el-input v-model="form.summary" :rows="3" type="textarea" placeholder="请输入" />
</el-form-item>
<el-form-item label="备注" v-if="form.channel_type === '3'">
<el-input v-model="form.comment" :rows="3" type="textarea" placeholder="请输入" />
</el-form-item>
</el-card>
</template>
<script setup lang="ts">
import type { ChannelFormData } from '../types'
import { provideForm } from '../util'
import AppUpload from '@/components/base/AppUpload.vue'
const form = inject(provideForm) as ChannelFormData
</script>
<template>
<el-card shadow="never" header="公司信息" style="margin-top: 20px">
<el-row :gutter="40">
<el-col :span="6">
<el-form-item label="公司名称">
<el-input v-model="form.partner.company_name" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="公司字号">
<el-input v-model="form.partner.company_short_name" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="企业税号">
<el-input v-model="form.partner.tax_number" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="企业税率">
<el-input v-model="form.partner.channel_tax_rate" placeholder="请输入" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="40">
<el-col :span="6">
<el-form-item
label="联络人"
prop="partner.contact_person"
:rules="[{ required: true, message: '请输入', trigger: 'blur' }]">
<el-input v-model="form.partner.contact_person" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item
label="联络电话"
prop="partner.contact_phone"
:rules="[{ required: true, message: '请输入', trigger: 'blur' }]">
<el-input v-model="form.partner.contact_phone" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="联络邮箱" prop="contact_email">
<el-input v-model="form.partner.contact_email" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="联络微信">
<el-input v-model="form.partner.contact_wechat" placeholder="请输入" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="40">
<el-col :span="6">
<el-form-item label="银行开户名">
<el-input v-model="form.partner.bank_account_name" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="银行开户行">
<el-input v-model="form.partner.channel_bank" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="银行账号">
<el-input v-model="form.partner.channel_bank_account" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="注册地址">
<el-input v-model="form.partner.company_registered_address" placeholder="请输入" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="40">
<el-col :span="6">
<el-form-item label="法人身份证(国徽面)">
<AppUpload v-model="form.partner.company_legal_representative_id_card_front" accept="image/*"></AppUpload>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="法人身份证(头像面)">
<AppUpload v-model="form.partner.company_legal_representative_id_card_back" accept="image/*"></AppUpload>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="营业执照">
<AppUpload v-model="form.partner.business_license" accept="image/*"></AppUpload>
</el-form-item>
</el-col>
</el-row>
</el-card>
</template>
<script setup lang="ts">
import type { ChannelFormData } from '../types'
import { provideForm } from '../util'
import { useMap } from '../composables/useMap'
const { options } = await useMap()
const form = inject(provideForm) as ChannelFormData
</script>
<template>
<el-card shadow="never" header="控制信息" style="margin-top: 20px">
<el-row :gutter="40">
<el-col :span="6">
<el-form-item label="渠道质量">
<el-select v-model="form.channel_quality" placeholder="请选择" style="width: 100%">
<el-option v-for="item in options.channelQuality" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="分配状态">
<el-select v-model="form.distribution_status" placeholder="请选择" style="width: 100%">
<el-option v-for="item in options.distributionStatus" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="回抽状态">
<el-select v-model="form.case_withdraw_status" placeholder="请选择" style="width: 100%">
<el-option v-for="item in options.caseWithdrawStatus" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="咨询框状态">
<el-select v-model="form.service_dialog_status" placeholder="请选择" style="width: 100%">
<el-option v-for="item in options.serviceDialogStatus" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-card>
</template>
<script setup lang="ts">
import type { ChannelFormData, ChannelMember, User, Role } from '../types'
import AppList from '@/components/base/AppList.vue'
import { getChannelUserList, addMember, deleteMember } from '../api'
import { useMap } from '../composables/useMap'
import { ElMessage } from 'element-plus'
import { provideForm } from '../util'
import { useNow, useDateFormat } from '@vueuse/core'
const { hasAuth, projectId } = await useMap()
const AddMember = defineAsyncComponent(() => import('./AddMember.vue'))
const route = useRoute()
const isAdd = $computed(() => !route.params.id)
const form = inject(provideForm) as ChannelFormData
watchEffect(() => {
if (form.project_id) {
projectId.value = form.project_id
}
})
const appList = $ref<InstanceType<typeof AppList> | null>(null)
const listOptions = $computed(() => {
return {
remote: !isAdd ? { httpRequest: getChannelUserList, params: { id: route.params.id } } : {},
columns: [
{ label: '姓名', prop: 'name' },
{ label: '手机号', prop: 'mobile' },
{ label: '邮箱', prop: 'email' },
{ label: '角色', prop: 'role_name' },
{ label: '加入日期', prop: 'updated_time' },
{ label: '操作', prop: 'name', slots: 'table-x', width: 100 }
],
data: form.members
}
})
let memberVisible = $ref(false)
// 添加人员
const handleSubmitMember = function (data: { user: User; role: Role[] }) {
if (isAdd) {
const formatted = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss')
const temp = {
user_id: data.user.id,
name: data.user.realname || data.user.nickname,
mobile: data.user.mobile,
email: data.user.email,
role_name: data.role.map(item => item.name).join('、'),
role_id: data.role.map(item => item.id).join(','),
updated_time: formatted.value
}
form.members.unshift(temp)
memberVisible = false
} else {
const params = {
user_id: data.user.id,
projects_id: form.project_id,
roles: data.role.map(item => item.id).join(',')
}
addMember(params).then(() => {
memberVisible = false
ElMessage({ message: '添加成功', type: 'success' })
appList?.refetch()
})
}
}
// 删除人员
function handleDelete(row: ChannelMember, index: number) {
if (isAdd) {
form.members.splice(index, 1)
} else {
deleteMember({ user_id: row.user_id, role_id: row.role_id, project_id: form.project_id }).then(() => {
ElMessage({ message: '删除成功', type: 'success' })
appList?.refetch()
})
}
}
</script>
<template>
<el-card shadow="never" header="成员信息" style="margin-top: 20px">
<AppList v-bind="listOptions" ref="appList">
<template #header-buttons>
<el-button type="primary" @click="memberVisible = true" v-if="hasAuth('project-member-create')">
添加成员
</el-button>
</template>
<template #table-x="{ row, $index }">
<el-button text type="primary" @click="handleDelete(row, $index)" v-if="hasAuth('project-member-delete')">
删除
</el-button>
</template>
</AppList>
</el-card>
<AddMember v-model="memberVisible" @submit="handleSubmitMember" v-if="memberVisible"></AddMember>
</template>
<script setup lang="ts"> <script setup lang="ts">
import { ElMessage } from 'element-plus' import type { FormInstance, FormRules } from 'element-plus'
const emit = defineEmits(['update:modelValue', 'selectLeaders']) import { useMap } from '../composables/useMap'
const { leaders } = await useMap()
const prop = defineProps<{ const emit = defineEmits<{
leaders: { (e: 'submit', value: string): void
id: string
name: string
}[]
}>() }>()
const submit = function () { const formRef = $ref<FormInstance>()
if (leaderValue.length) { const form = reactive({ leaders_ids: [] })
emit('selectLeaders', leaderValue.toString()) const rules = reactive<FormRules>({
emit('update:modelValue', false) leaders_ids: { type: 'array', required: true, message: '请选择', trigger: 'change' }
} else { })
ElMessage('请选择')
}
}
const leaderValue = $ref([]) function submit() {
formRef?.validate().then(() => {
emit('submit', form.leaders_ids.join(','))
})
}
</script> </script>
<template> <template>
<el-dialog title="请选择管理人员" width="400px" :close-on-click-modal="false"> <el-dialog title="请选择管理人员" width="400px" :close-on-click-modal="false">
<el-checkbox-group v-model="leaderValue"> <el-form :rules="rules" :model="form" hide-required-asterisk ref="formRef">
<el-checkbox v-for="item in prop.leaders" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox> <el-form-item prop="leaders_ids">
<el-checkbox-group v-model="form.leaders_ids">
<el-checkbox v-for="item in leaders" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
</el-checkbox-group> </el-checkbox-group>
</el-form-item>
</el-form>
<template #footer> <template #footer>
<span class="dialog-footer"> <el-button @click="$emit('update:modelValue', false)">取消</el-button>
<el-button @click="emit('update:modelValue', false)">取消</el-button>
<el-button type="primary" @click="submit"> 确定 </el-button> <el-button type="primary" @click="submit"> 确定 </el-button>
</span>
</template> </template>
</el-dialog> </el-dialog>
</template> </template>
...@@ -5,16 +5,17 @@ interface State { ...@@ -5,16 +5,17 @@ interface State {
name: string name: string
} }
interface Project { interface Project {
project_id: string channel_id: string
roles: string[] roles: string[]
permissions: string[] permissions: string[]
tags: Record<string, string> tags: Record<string, string>
} }
const authProjectList = ref<Project[]>([]) const authList = ref<Project[]>([])
const tags = ref<Record<string, string>>({}) const tags = ref<Record<string, string>>({})
// 所有下拉的选项 // 所有下拉的选项
const optionsMap = ref<{ const options = ref<{
channelType: State[] channelType: State[]
channelQuality: number[] channelQuality: number[]
distributionStatus: State[] distributionStatus: State[]
...@@ -25,8 +26,8 @@ const optionsMap = ref<{ ...@@ -25,8 +26,8 @@ const optionsMap = ref<{
contractConversionType: State[] contractConversionType: State[]
contractType: State[] contractType: State[]
contractDivisionRuleType: State[] contractDivisionRuleType: State[]
contractSecondaryDivisionType: State[], contractSecondaryDivisionType: State[]
agreementType: State[], agreementType: State[]
channelTaxRate: State[] channelTaxRate: State[]
}>({ }>({
channelType: [], channelType: [],
...@@ -47,13 +48,13 @@ const optionsMap = ref<{ ...@@ -47,13 +48,13 @@ const optionsMap = ref<{
// 领导 // 领导
const leaders = ref<State[]>([]) const leaders = ref<State[]>([])
export function useMap() { export async function useMap() {
const projectId = ref('') const channelId = ref('')
const prefix = ref('') const prefix = ref('')
function fetchInfo() { async function fetchInfo() {
getChannelMap().then((res: any) => { await getChannelMap().then((res: any) => {
const data = res.data const data = res.data
optionsMap.value = { options.value = {
channelTags: data.tags_map || [], channelTags: data.tags_map || [],
channelType: data.channel_type_map?.slice(0, 3) || [], channelType: data.channel_type_map?.slice(0, 3) || [],
channelStatus: data.channel_status_map || [], channelStatus: data.channel_status_map || [],
...@@ -68,16 +69,16 @@ export function useMap() { ...@@ -68,16 +69,16 @@ export function useMap() {
agreementType: data.agreement_type_map || [], agreementType: data.agreement_type_map || [],
channelTaxRate: data.channel_tax_rate_map || [] channelTaxRate: data.channel_tax_rate_map || []
} }
authProjectList.value = data.project_auth_map || [] authList.value = data.channel_auth_map || []
tags.value = data.tags || {} tags.value = data.tags || {}
leaders.value = data.leaders_map || [] leaders.value = data.leaders_map || []
}) })
} }
if (!authProjectList.value.length) fetchInfo() if (!authList.value.length) await fetchInfo()
// 当前项目 // 当前项目
const project = computed(() => { const project = computed(() => {
return authProjectList.value.find(item => item.project_id === projectId.value) return authList.value.find(item => item.channel_id === channelId.value)
}) })
// 是否需要权限控制 // 是否需要权限控制
...@@ -86,17 +87,17 @@ export function useMap() { ...@@ -86,17 +87,17 @@ export function useMap() {
return Object.prototype.hasOwnProperty.call(tags.value, prop) return Object.prototype.hasOwnProperty.call(tags.value, prop)
} }
// 有没有权限 // 有没有权限
function hasAuth(key: string, pid: string = projectId.value, pre: string = prefix.value) { function hasAuth(key: string, pid: string = channelId.value, pre: string = prefix.value) {
const project = authProjectList.value.find(item => item.project_id === pid) const project = authList.value.find(item => item.channel_id === pid)
// 暂时先返回true; 有项目ID的必须定义项目ID,要不等于没做权限处理 // 暂时先返回true; 有项目ID的必须定义项目ID,要不等于没做权限处理
if (!project) return true if (!project) return true
const prop = pre + key const prop = pre + key
return Object.prototype.hasOwnProperty.call(project.tags, prop) return Object.prototype.hasOwnProperty.call(project.tags, prop)
} }
// 权限校验 // 权限校验
function checkAuth(key: string, pid: string = projectId.value, pre: string = prefix.value) { function checkAuth(key: string, pid: string = channelId.value, pre: string = prefix.value) {
return isAuth(key, pre) ? hasAuth(key, pid, pre) : true return isAuth(key, pre) ? hasAuth(key, pid, pre) : true
} }
return { leaders, optionsMap, authProjectList, tags, project, projectId, prefix, isAuth, hasAuth, checkAuth } return { leaders, options, authList, tags, project, channelId, prefix, isAuth, hasAuth, checkAuth }
} }
...@@ -7,14 +7,24 @@ export const routes: Array<RouteRecordRaw> = [ ...@@ -7,14 +7,24 @@ export const routes: Array<RouteRecordRaw> = [
component: AppLayout, component: AppLayout,
children: [ children: [
{ name: 'channelIndex', path: '', component: () => import('./views/Index.vue') }, { name: 'channelIndex', path: '', component: () => import('./views/Index.vue') },
{ name: 'channelCreate', path: 'create', component: () => import('./views/Update.vue'), props: { isAdd: true } }, {
name: 'channelCreate',
path: 'create',
component: () => import('./views/Update.vue'),
props: { action: 'add' }
},
{ {
name: 'channelUpdate', name: 'channelUpdate',
path: 'update/:id', path: 'update/:id',
component: () => import('./views/Update.vue'), component: () => import('./views/Update.vue'),
props: { isUpdate: true } props: route => ({ action: 'update', id: route.params.id })
}, },
{ name: 'channelView', path: 'view/:id', component: () => import('./views/Update.vue'), props: { isView: true } } {
name: 'channelView',
path: 'view/:id',
component: () => import('./views/Update.vue'),
props: route => ({ action: 'view', id: route.params.id })
}
] ]
} }
] ]
export interface BasicInfoParams {
title: string
service_phone?: string
channel_owner_user_id: string
channel_status: string
tags?: string
summary?: string
comment?: string
}
export interface ChannelListSearch { export interface ChannelListSearch {
channel_id?: string channel_id?: string
title?: string title?: string
...@@ -21,26 +11,63 @@ export interface ChannelListSearch { ...@@ -21,26 +11,63 @@ export interface ChannelListSearch {
page?: string page?: string
} }
export interface ProjectParams { export interface ChannelRequestParams {
project_id_name?: string channel_id: string
conversion_type: string channel_type: string
type: string title: string
location_limit?: string service_phone: string
unpaid_list_limit?: string channel_owner_user_id: string
expire_month?: number, channel_status: string
follower_user_id: string tags: string
division_rule: string summary: string
division_proportion: string comment: string
expire_range_month_start?: string channel_quality: string
expire_range_month_end?: string distribution_status: string
upload?: string case_withdraw_status: string
secondary_channel_id?: string service_dialog_status: string
secondary_division_type?: string leaders_id: string
secondary_division_rule?: string members?: string
secondary_division_proportion?: string projects?: string
} }
export interface CreateChannelParams extends BasicInfoParams { // 渠道成员
leaders_id: string export interface ChannelMember {
members: string user_id: string
role_id: string
updated_time: string
name: string
mobile: string
email: string
role_name: string
}
export type ChannelFormData = Omit<ChannelRequestParams, 'members' | 'projects'> & {
members: ChannelMember[]
partner: any
}
// 用户信息
export interface User {
id: string
realname: string
nickname: string
username: string
mobile: string
avatar: string
email: string
}
// 角色信息
export interface Role {
id: string
name: string
desc: string
levels: RoleLevel[]
}
export interface RoleLevel {
level_id: string
level_name: string
level_tag: string
level_group_tag: string
} }
import type { InjectionKey } from 'vue'
import type { ChannelFormData } from './types'
export const provideForm = Symbol() as InjectionKey<ChannelFormData>
...@@ -3,7 +3,7 @@ import AppList from '@/components/base/AppList.vue' ...@@ -3,7 +3,7 @@ import AppList from '@/components/base/AppList.vue'
import { useMap } from '../composables/useMap' import { useMap } from '../composables/useMap'
import { getChannelList } from '../api' import { getChannelList } from '../api'
const { optionsMap } = useMap() const { options } = await useMap()
const Label = defineAsyncComponent(() => import('../components/Label.vue')) const Label = defineAsyncComponent(() => import('../components/Label.vue'))
const QRCode = defineAsyncComponent(() => import('../components/QRCode.vue')) const QRCode = defineAsyncComponent(() => import('../components/QRCode.vue'))
...@@ -33,35 +33,35 @@ const listOptions = $computed(() => { ...@@ -33,35 +33,35 @@ const listOptions = $computed(() => {
type: 'select', type: 'select',
prop: 'tags', prop: 'tags',
placeholder: '渠道标签', placeholder: '渠道标签',
options: optionsMap.value.channelTags.reduce((a: any, b: string) => a.push({ label: b, value: b }) && a, []) options: options.value.channelTags.reduce((a: any, b: string) => a.push({ label: b, value: b }) && a, [])
}, },
{ {
type: 'select', type: 'select',
prop: 'code', prop: 'service_dialog_status',
placeholder: '咨询状态框', placeholder: '咨询框状态',
options: optionsMap.value.serviceDialogStatus, options: options.value.serviceDialogStatus,
labelKey: 'name', labelKey: 'name',
valueKey: 'id' valueKey: 'id'
}, },
{ {
type: 'select', type: 'select',
prop: 'code', prop: 'case_withdraw_status',
placeholder: '回抽状态', placeholder: '回抽状态',
options: optionsMap.value.caseWithdrawStatus, options: options.value.caseWithdrawStatus,
labelKey: 'name', labelKey: 'name',
valueKey: 'id' valueKey: 'id'
}, },
{ {
type: 'select', type: 'select',
prop: 'code', prop: 'distribution_status',
placeholder: '分配状态', placeholder: '分配状态',
options: optionsMap.value.distributionStatus options: options.value.distributionStatus
}, },
{ {
type: 'select', type: 'select',
prop: 'code', prop: 'channel_quality',
placeholder: '渠道质量', placeholder: '渠道质量',
options: optionsMap.value.channelQuality.reduce((a: any, b: number) => a.push({ label: b, value: b }) && a, []) options: options.value.channelQuality.reduce((a: any, b: number) => a.push({ label: b, value: b }) && a, [])
} }
] ]
} }
...@@ -136,10 +136,14 @@ function handleRemove(row: any) { ...@@ -136,10 +136,14 @@ function handleRemove(row: any) {
</template> </template>
<template #table-x="{ row }"> <template #table-x="{ row }">
<el-button text> <el-button text>
<router-link :to="{ name: 'channelView', params: { id: row.id } }">查看</router-link> <router-link :to="{ name: 'channelView', params: { id: row.id }, query: { channel_id: row.channel_id } }"
>查看</router-link
>
</el-button> </el-button>
<el-button text style="--el-button-text-color: #3276fc"> <el-button text style="--el-button-text-color: #3276fc">
<router-link :to="{ name: 'channelUpdate', params: { id: row.id } }">编辑</router-link> <router-link :to="{ name: 'channelUpdate', params: { id: row.id }, query: { channel_id: row.channel_id } }"
>编辑</router-link
>
</el-button> </el-button>
<el-button text style="--el-button-text-color: #00bfbf" @click="handleUser(row)">添加成员</el-button> <el-button text style="--el-button-text-color: #00bfbf" @click="handleUser(row)">添加成员</el-button>
<el-button text style="--el-button-text-color: #f59a23" @click="handleQRCode(row)">二维码</el-button> <el-button text style="--el-button-text-color: #f59a23" @click="handleQRCode(row)">二维码</el-button>
......
<script setup lang="ts"> <script setup lang="ts">
import type { ChannelRequestParams, ChannelFormData } from '../types'
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import { useMap } from '../composables/useMap' import { useMap } from '../composables/useMap'
import BasicInfo from '../components/BasicInfo.vue' import InfoBase from '../components/InfoBase.vue'
import CompanyInfo from '../components/CompanyInfo.vue' import InfoCompany from '../components/InfoCompany.vue'
import ControlInfo from '../components/ControlInfo.vue' import InfoAgreement from '../components/InfoAgreement.vue'
import UserInfo from '../components/UserInfo.vue' import InfoControl from '../components/InfoControl.vue'
import InfoMember from '../components/InfoMember.vue'
import Project from '../components/Project.vue' import Project from '../components/Project.vue'
import Leaders from '../components/Leaders.vue' import Leaders from '../components/Leaders.vue'
import Agreement from '../components/Agreement.vue' import { createChannel, updateChannel, getChannelDetail } from '../api'
import { createChannel, getChannelDetail } from '../api' import { provideForm } from '../util'
import type { CreateChannelParams, BasicInfoParams } from '../types'
// import AppUploadVue from '@/components/base/AppUpload.vue' const { options } = await useMap()
const router = useRouter()
const route = useRoute()
const { optionsMap, leaders } = useMap()
interface Props { interface Props {
isAdd?: boolean id?: string
isUpdate?: boolean action: string
isView?: boolean
} }
const props = defineProps<Props>() const props = withDefaults(defineProps<Props>(), { action: 'add', id: '' })
const router = useRouter()
const route = useRoute()
const title = $computed(() => { const title = $computed(() => {
return (props.isAdd && '创建渠道') || (props.isUpdate && '编辑渠道') || (props.isView && '查看渠道') || '' if (props.action === 'update') return '编辑渠道'
if (props.action === 'view') return '查看渠道'
return '创建渠道'
}) })
// 渠道类型 1:线上渠道,2:线下对公渠道,3:线下个人渠道 const formRef = $ref<FormInstance>()
const channelTypeValue = $ref('1')
const form: ChannelFormData = reactive({
channel_id: (route.query.channel_id as string) || '',
channel_type: '1', // 渠道类型 1:线上渠道,2:线下对公渠道,3:线下个人渠道
title: '',
service_phone: '',
channel_owner_user_id: '',
channel_status: '',
tags: '',
summary: '',
comment: '',
channel_quality: '',
distribution_status: '',
case_withdraw_status: '',
service_dialog_status: '',
leaders_id: '',
partner: {},
members: [],
projects: []
})
provide(provideForm, form)
const aa = $ref('') // 获取基本信息
const update = function (e: any, e2: any) { function fetchInfo() {
console.log(aa, e, 'eeee', e2) if (!props.id) return
getChannelDetail({ id: props.id }).then(res => {
Object.assign(form, res.data)
})
} }
onMounted(() => {
if (props.action !== 'add') fetchInfo()
})
// 选择管理人员 // 选择管理人员
const leadersLabelVisible = $ref(false) let leaderVisible = $ref(false)
// 基本信息 // 取消
const basicInfoRef = $ref<{ submit: () => BasicInfoParams | false }>() function handleCancel() {
// 成员信息 router.push('/base/channel')
const userInfo = $ref<{ data: () => string }>() }
const onSubmit = async function (e: string) {
const basicInfoForm = await basicInfoRef.submit() // 提交
console.log(userInfo.data(), 'userInfo/data') function handleSubmit() {
if (basicInfoForm) { formRef?.validate().then(() => {
const params = Object.assign( if (props.action === 'add') {
{ leaderVisible = true
channel_type: channelTypeValue, } else {
leaders_id: e, handleSubmitRequest()
members: userInfo.data() }
}, })
basicInfoForm }
) function handleSubmitLeader(ids: string) {
console.log(params, 'e', e) form.leaders_id = ids
leaderVisible = false
handleSubmitRequest()
}
function handleSubmitRequest() {
const members = form.members.map(item => {
return { user_id: item.user_id, roles: item.role_id }
})
const params = { ...form, members: JSON.stringify(members) }
if (props.action === 'add') handleAdd(params)
if (props.action === 'update') handleUpdate(params)
}
// 添加
function handleAdd(params: ChannelRequestParams) {
createChannel(params).then(() => { createChannel(params).then(() => {
router.go(-1) ElMessage({ message: '创建成功', type: 'success' })
router.push('/base/channel')
}) })
}
} }
// 修改
let viewData = $ref<CreateChannelParams>() function handleUpdate(params: ChannelRequestParams) {
onMounted(() => { updateChannel({ id: props.id, ...params }).then(() => {
if (props?.isUpdate) { ElMessage({ message: '更新成功', type: 'success' })
getChannelDetail({ id: route.params.id }).then((res: { data: CreateChannelParams }) => { router.push('/base/channel')
viewData = res.data
}) })
} }
})
</script> </script>
<template> <template>
<AppCard :title="title"> <AppCard :title="title">
<div style="padding-left: 20px"> <el-form label-suffix=":" size="large">
<el-form class="demo-form-inline"> <el-row :gutter="40">
<el-col :span="6">
<el-form-item label="渠道类型"> <el-form-item label="渠道类型">
<el-select v-model="channelTypeValue" placeholder="请选择"> <el-select v-model="form.channel_type" placeholder="请选择" style="width: 100%">
<el-option v-for="item in optionsMap.channelType" :key="item.id" :label="item.name" :value="item.id" /> <el-option v-for="item in options.channelType" :key="item.id" :label="item.name" :value="item.id" />
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col>
<el-col :span="6" v-if="props.id">
<el-form-item label="渠道编号">
<el-input v-model="form.channel_id" disabled />
</el-form-item>
</el-col>
</el-row>
</el-form> </el-form>
<!-- 基本信息(公用) --> <el-form :model="form" label-position="top" label-suffix=":" ref="formRef">
<BasicInfo :data="viewData" ref="basicInfoRef" :type="channelTypeValue" v-bind="optionsMap"></BasicInfo> <!-- 基本信息 -->
<!-- 协议信息 --> <InfoBase></InfoBase>
<agreement v-if="channelTypeValue !== '1'" v-bind="optionsMap"></agreement>
<!-- 公司信息 --> <!-- 公司信息 -->
<CompanyInfo v-if="channelTypeValue !== '1'"></CompanyInfo> <InfoCompany v-if="form.channel_type === '2'"></InfoCompany>
<!-- 控制信息 --> <!-- 控制信息 -->
<ControlInfo v-bind="optionsMap" v-if="channelTypeValue !== '1'"></ControlInfo> <InfoControl v-if="form.channel_type === '2' || form.channel_type === '3'"></InfoControl>
<!-- 协议信息 -->
<InfoAgreement v-if="form.channel_type === '3'"></InfoAgreement>
</el-form>
<!-- 成员信息 --> <!-- 成员信息 -->
<UserInfo :data="viewData" ref="userInfo"></UserInfo> <InfoMember></InfoMember>
<!-- 关联项目 --> <!-- 关联项目 -->
<Project v-bind="optionsMap"></Project> <!-- <Project></Project> -->
<!-- 选择管理人员 --> <!-- 选择管理人员 -->
<Leaders @selectLeaders="onSubmit" v-model="leadersLabelVisible" :leaders="leaders"></Leaders> <Leaders v-model="leaderVisible" @submit="handleSubmitLeader"></Leaders>
<el-button @click="leadersLabelVisible = true" style="margin: 20px auto; display: block" type="primary"
>提交</el-button <el-row justify="center" style="margin-top: 40px">
> <template v-if="action === 'view'">
</div> <el-button auto-insert-space @click="handleCancel">关闭</el-button>
</template>
<template v-else>
<el-button auto-insert-space @click="handleCancel">取消</el-button>
<el-button type="primary" auto-insert-space @click="handleSubmit">提交</el-button>
</template>
</el-row>
</AppCard> </AppCard>
</template> </template>
...@@ -71,7 +71,7 @@ function handleDelete(row: ProjectMember, index: number) { ...@@ -71,7 +71,7 @@ function handleDelete(row: ProjectMember, index: number) {
if (isAdd) { if (isAdd) {
form.members.splice(index, 1) form.members.splice(index, 1)
} else { } else {
deleteMember({ user_id: row.user_id, role_id: row.role_id, project_id: window.localStorage.projectId }).then(() => { deleteMember({ user_id: row.user_id, role_id: row.role_id, project_id: form.project_id }).then(() => {
ElMessage({ message: '删除成功', type: 'success' }) ElMessage({ message: '删除成功', type: 'success' })
appList?.refetch() appList?.refetch()
}) })
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论