|
|
@@ -0,0 +1,362 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <el-form :model="queryParams" ref="queryForm" :inline="true" size="small" label-width="90px">
|
|
|
+ <el-form-item label="销售昵称">
|
|
|
+ <el-input v-model="queryParams.nickName" placeholder="销售昵称" clearable @keyup.enter.native="handleQuery"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="手机号">
|
|
|
+ <el-input v-model="queryParams.phone" placeholder="联系人手机号" clearable @keyup.enter.native="handleQuery"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="AppId">
|
|
|
+ <el-input v-model="queryParams.appId" placeholder="AppId" clearable @keyup.enter.native="handleQuery"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="状态">
|
|
|
+ <el-select v-model="queryParams.status" placeholder="全部" clearable>
|
|
|
+ <el-option label="启用" :value="1"/>
|
|
|
+ <el-option label="禁用" :value="0"/>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
|
|
+ <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <el-row :gutter="10" class="mb8">
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增飞书账号</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-table v-loading="loading" :data="list">
|
|
|
+ <el-table-column label="ID" prop="id" width="70" align="center"/>
|
|
|
+ <el-table-column label="销售昵称" min-width="120" show-overflow-tooltip>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.nickName || scope.row.userName || '-' }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="联系人手机号" prop="phone" min-width="120" show-overflow-tooltip/>
|
|
|
+ <el-table-column label="AppId" prop="appId" min-width="180" show-overflow-tooltip/>
|
|
|
+ <el-table-column label="状态" width="90" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'" size="mini">
|
|
|
+ {{ scope.row.status === 1 ? '启用' : '禁用' }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="已使用次数" prop="numberUse" width="100" align="center"/>
|
|
|
+ <el-table-column label="错误信息" prop="errorMsg" min-width="140" show-overflow-tooltip/>
|
|
|
+ <el-table-column label="更新时间" prop="updateTime" width="160" align="center"/>
|
|
|
+ <el-table-column label="操作" width="180" align="center" fixed="right">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button type="text" size="mini" @click="handleAssign(scope.row)">分配销售</el-button>
|
|
|
+ <el-button type="text" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
|
|
|
+ <el-button type="text" size="mini" class="danger-text" @click="handleDelete(scope.row)">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <pagination
|
|
|
+ v-show="total > 0"
|
|
|
+ :total="total"
|
|
|
+ :page.sync="queryParams.pageNum"
|
|
|
+ :limit.sync="queryParams.pageSize"
|
|
|
+ @pagination="getList"
|
|
|
+ />
|
|
|
+
|
|
|
+ <el-dialog :title="title" :visible.sync="open" :width="isBatchAdd ? '860px' : '560px'" append-to-body>
|
|
|
+ <el-form ref="form" :model="form" :rules="formRules" label-width="110px">
|
|
|
+ <template v-if="isBatchAdd">
|
|
|
+ <el-form-item label="所属销售人员" prop="companyUserId">
|
|
|
+ <el-select v-model="form.companyUserId" placeholder="请选择销售" filterable style="width: 100%;">
|
|
|
+ <el-option
|
|
|
+ v-for="user in salesOptions"
|
|
|
+ :key="user.userId"
|
|
|
+ :label="user.nickName || user.userName"
|
|
|
+ :value="user.userId"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="状态">
|
|
|
+ <el-radio-group v-model="form.status">
|
|
|
+ <el-radio :label="1">启用</el-radio>
|
|
|
+ <el-radio :label="0">禁用</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="账号列表" required>
|
|
|
+ <el-table :data="accountRows" border size="small" class="account-table">
|
|
|
+ <el-table-column label="序号" type="index" width="55" align="center"/>
|
|
|
+ <el-table-column label="联系人手机号" min-width="150">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input v-model="scope.row.phone" placeholder="选填"/>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="AppId" min-width="180">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input v-model="scope.row.appId" placeholder="应用 AppId"/>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="AppSecret" min-width="180">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input v-model="scope.row.appSecret" type="password" show-password placeholder="应用 AppSecret"/>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" width="120" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button type="text" size="mini" @click="addAccountRow">新增</el-button>
|
|
|
+ <el-button
|
|
|
+ v-if="accountRows.length > 1"
|
|
|
+ type="text"
|
|
|
+ size="mini"
|
|
|
+ class="danger-text"
|
|
|
+ @click="removeAccountRow(scope.$index)"
|
|
|
+ >删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <el-form-item label="所属销售人员" prop="companyUserId">
|
|
|
+ <el-select v-model="form.companyUserId" placeholder="请选择销售" filterable style="width: 100%;">
|
|
|
+ <el-option
|
|
|
+ v-for="user in salesOptions"
|
|
|
+ :key="user.userId"
|
|
|
+ :label="user.nickName || user.userName"
|
|
|
+ :value="user.userId"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="联系人手机号" prop="phone">
|
|
|
+ <el-input v-model="form.phone" placeholder="可选填写联系人手机号"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="AppId" prop="appId">
|
|
|
+ <el-input v-model="form.appId" placeholder="应用 AppId"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="!assignOnly" label="AppSecret" prop="appSecret">
|
|
|
+ <el-input v-model="form.appSecret" type="password" show-password :placeholder="form.id ? '不修改可留空' : '应用 AppSecret'"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="!assignOnly" label="状态" prop="status">
|
|
|
+ <el-radio-group v-model="form.status">
|
|
|
+ <el-radio :label="1">启用</el-radio>
|
|
|
+ <el-radio :label="0">禁用</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer">
|
|
|
+ <el-button @click="open = false">取消</el-button>
|
|
|
+ <el-button type="primary" :loading="submitLoading" @click="submitForm">确定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {
|
|
|
+ listCompanyFeishuAccount,
|
|
|
+ getFeishuAccount,
|
|
|
+ addCompanyFeishuAccount,
|
|
|
+ addCompanyFeishuAccountBatch,
|
|
|
+ updateCompanyFeishuAccount,
|
|
|
+ delCompanyFeishuAccount
|
|
|
+} from '@/api/feishu/feishuAccount'
|
|
|
+import { listUser } from '@/api/company/companyUser'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'FeishuAccount',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: false,
|
|
|
+ submitLoading: false,
|
|
|
+ total: 0,
|
|
|
+ list: [],
|
|
|
+ salesOptions: [],
|
|
|
+ title: '',
|
|
|
+ open: false,
|
|
|
+ assignOnly: false,
|
|
|
+ accountRows: [],
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ nickName: null,
|
|
|
+ phone: null,
|
|
|
+ appId: null,
|
|
|
+ status: null
|
|
|
+ },
|
|
|
+ form: {},
|
|
|
+ baseRules: {
|
|
|
+ companyUserId: [{ required: true, message: '请选择销售人员', trigger: 'change' }],
|
|
|
+ appId: [{ required: true, message: 'AppId不能为空', trigger: 'blur' }],
|
|
|
+ appSecret: [{ required: true, message: 'AppSecret不能为空', trigger: 'blur' }]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ isBatchAdd() {
|
|
|
+ return !this.form.id && !this.assignOnly
|
|
|
+ },
|
|
|
+ formRules() {
|
|
|
+ if (this.isBatchAdd) {
|
|
|
+ return { companyUserId: this.baseRules.companyUserId }
|
|
|
+ }
|
|
|
+ if (this.form.id && !this.assignOnly) {
|
|
|
+ return {
|
|
|
+ companyUserId: this.baseRules.companyUserId,
|
|
|
+ appId: this.baseRules.appId,
|
|
|
+ appSecret: []
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (this.assignOnly) {
|
|
|
+ return { companyUserId: this.baseRules.companyUserId }
|
|
|
+ }
|
|
|
+ return this.baseRules
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getList()
|
|
|
+ this.loadSalesOptions()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ createAccountRow() {
|
|
|
+ return { phone: null, appId: null, appSecret: null }
|
|
|
+ },
|
|
|
+ resetAccountRows() {
|
|
|
+ this.accountRows = [this.createAccountRow()]
|
|
|
+ },
|
|
|
+ addAccountRow() {
|
|
|
+ this.accountRows.push(this.createAccountRow())
|
|
|
+ },
|
|
|
+ removeAccountRow(index) {
|
|
|
+ this.accountRows.splice(index, 1)
|
|
|
+ },
|
|
|
+ loadSalesOptions() {
|
|
|
+ listUser({ pageNum: 1, pageSize: 500, status: '0' }).then(res => {
|
|
|
+ this.salesOptions = res.rows || []
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getList() {
|
|
|
+ this.loading = true
|
|
|
+ listCompanyFeishuAccount(this.queryParams).then(res => {
|
|
|
+ this.list = res.rows || []
|
|
|
+ this.total = res.total || 0
|
|
|
+ this.loading = false
|
|
|
+ }).catch(() => {
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleQuery() {
|
|
|
+ this.queryParams.pageNum = 1
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ resetQuery() {
|
|
|
+ this.resetForm('queryForm')
|
|
|
+ this.queryParams.status = null
|
|
|
+ this.handleQuery()
|
|
|
+ },
|
|
|
+ resetFormData() {
|
|
|
+ this.form = {
|
|
|
+ id: null,
|
|
|
+ companyUserId: null,
|
|
|
+ phone: null,
|
|
|
+ appId: null,
|
|
|
+ appSecret: null,
|
|
|
+ status: 1
|
|
|
+ }
|
|
|
+ this.resetAccountRows()
|
|
|
+ },
|
|
|
+ validateAccountRows() {
|
|
|
+ for (let i = 0; i < this.accountRows.length; i++) {
|
|
|
+ const row = this.accountRows[i]
|
|
|
+ if (!row.appId || !row.appId.trim()) {
|
|
|
+ this.$message.warning(`第 ${i + 1} 行 AppId 不能为空`)
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ if (!row.appSecret || !row.appSecret.trim()) {
|
|
|
+ this.$message.warning(`第 ${i + 1} 行 AppSecret 不能为空`)
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return true
|
|
|
+ },
|
|
|
+ handleAdd() {
|
|
|
+ this.assignOnly = false
|
|
|
+ this.resetFormData()
|
|
|
+ this.open = true
|
|
|
+ this.title = '新增飞书账号(支持批量)'
|
|
|
+ this.$nextTick(() => this.$refs.form && this.$refs.form.clearValidate())
|
|
|
+ },
|
|
|
+ handleUpdate(row) {
|
|
|
+ this.assignOnly = false
|
|
|
+ getFeishuAccount(row.id).then(res => {
|
|
|
+ this.form = Object.assign({}, res.data, { appSecret: '' })
|
|
|
+ this.open = true
|
|
|
+ this.title = '编辑飞书账号'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleAssign(row) {
|
|
|
+ this.assignOnly = true
|
|
|
+ this.form = {
|
|
|
+ id: row.id,
|
|
|
+ companyUserId: row.companyUserId,
|
|
|
+ phone: row.phone,
|
|
|
+ appId: row.appId,
|
|
|
+ appSecret: '',
|
|
|
+ status: row.status
|
|
|
+ }
|
|
|
+ this.open = true
|
|
|
+ this.title = '重新分配账号所属销售'
|
|
|
+ this.$nextTick(() => this.$refs.form && this.$refs.form.clearValidate())
|
|
|
+ },
|
|
|
+ submitForm() {
|
|
|
+ this.$refs.form.validate(valid => {
|
|
|
+ if (!valid) return
|
|
|
+ if (this.isBatchAdd) {
|
|
|
+ if (!this.validateAccountRows()) return
|
|
|
+ this.submitLoading = true
|
|
|
+ const payload = this.accountRows.map(row => ({
|
|
|
+ companyUserId: this.form.companyUserId,
|
|
|
+ phone: row.phone,
|
|
|
+ appId: row.appId.trim(),
|
|
|
+ appSecret: row.appSecret.trim(),
|
|
|
+ status: this.form.status
|
|
|
+ }))
|
|
|
+ addCompanyFeishuAccountBatch(payload).then(() => {
|
|
|
+ this.$message.success(`成功新增 ${payload.length} 条账号`)
|
|
|
+ this.open = false
|
|
|
+ this.getList()
|
|
|
+ }).finally(() => {
|
|
|
+ this.submitLoading = false
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const req = this.form.id
|
|
|
+ ? updateCompanyFeishuAccount(this.form)
|
|
|
+ : addCompanyFeishuAccount(this.form)
|
|
|
+ req.then(() => {
|
|
|
+ this.$message.success('操作成功')
|
|
|
+ this.open = false
|
|
|
+ this.getList()
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleDelete(row) {
|
|
|
+ this.$confirm('确定删除该账号?', '提示', { type: 'warning' }).then(() => {
|
|
|
+ return delCompanyFeishuAccount(row.id)
|
|
|
+ }).then(() => {
|
|
|
+ this.$message.success('删除成功')
|
|
|
+ this.getList()
|
|
|
+ }).catch(() => {})
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.danger-text {
|
|
|
+ color: #f56c6c;
|
|
|
+}
|
|
|
+.account-table {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+</style>
|