zx-admin-erp/src/views/accounts/corpWechat/mailList.vue

<template>
    <div>
        <el-dialog title="企微通讯录" v-if="visible" :visible.sync="visible" :before-close="beforeClose" width="750px">
            <el-row :gutter="10" class="mb8" align="middle">
                <el-col :span="1.5">
                    <el-input v-model="queryParams.name" placeholder="企微号名称" clearable size="small"
                                style="width: 140px" @keyup.enter.native="getList" />
                </el-col>
                <el-col :span="1.5"><el-button type="cyan" icon="el-icon-search" size="mini" @click="getList">搜索</el-button></el-col>
                <el-col :span="1.5">
                    <div class="grid-content">
                        <el-button type="primary" size="mini" @click="syncHandle">同步通讯录</el-button>
                    </div>
                </el-col>
            </el-row>
            <el-table :data="mailList" v-loading="loading" size="mini">
                <el-table-column label="企微号" prop="name" width="120" align="center" />
                <el-table-column label="运营" prop="operUserId" align="center" width="100">
                    <template slot-scope="scope">
                        <div>{{ scope.row.operUserId ? scope.row.operUser.nickName : '--' }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="投手" prop="putUserId" align="center" width="100">
                    <template slot-scope="scope">
                        <div>{{ scope.row.putUserId ? scope.row.putUser.nickName : '--' }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="状态" prop="status" align="center" width="100">
                    <template slot-scope="scope">
                        <div>{{ scope.row.status === 1 ? '已激活' : scope.row.status === 2 ? '已禁用' : scope.row.status === 4 ?
                            '未激活' : scope.row.status === 5 ? '退出企业' : '--' }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" prop="createTime" align="center" width="150" />
                <el-table-column label="操作" width="150" align="center" class-name="small-padding fixed-width" fixed="right">
                    <template slot-scope="scope">
                        <template>
                            <el-button size="mini" type="text" icon="el-icon-sort"
                                @click="handlePut(scope.row)">指派</el-button>
                            <el-button size="mini" type="text" icon="el-icon-tickets"
                                @click="handleRecord(scope.row)">变更记录</el-button>
                        </template>
                    </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>

        <el-dialog title="指派" :visible.sync="openSys" width="500px" append-to-body>
            <el-form :model="assignUSerData" :rules="rules" ref="platFormSysType" label-width="80px" label-position="top">
                <el-form-item label="开始时间" prop="beginTime">
                    <el-date-picker v-model="assignUSerData.beginTime" type="date" format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd" placeholder="选择开始时间"></el-date-picker>
                </el-form-item>
                <el-form-item label="运营" prop="operUserId">
                    <el-select v-model="assignUSerData.operUserId" placeholder="请选择" filterable style="width: 100%"
                        clearable>
                        <el-option v-for="item in userAll" :key="item.id" :label="item.nickName" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="投手" prop="putUserId">
                    <el-select v-model="assignUSerData.putUserId" placeholder="请选择" filterable style="width: 100%"
                        clearable>
                        <el-option v-for="item in userAll" :key="item.id" :label="item.nickName" :value="item.id" />
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="openSys = false; assignUSerData = {}">取 消</el-button>
                <el-button type="primary" @click="assignUSerSubmit">确 定</el-button>
            </span>
        </el-dialog>
        <changeRecord :visible="recordShow" :recordData="recordData" :userAll="userAll"
            @close="recordShow = false; recordData = {}" />
    </div>
</template>

<script>
import { putSyncCorpUser, getCorpMailList, putCorpSysUser } from "@/api/accounts/corpWeChat";
import { allUser } from "@/api/system/user";
import { formatDateYMD } from "@/utils"
import changeRecord from './changeRecord.vue'
export default {
    name: 'mailList',
    components: { changeRecord },
    data() {
        return {
            queryParams: {
                pageNum: 1,
                pageSize: 20
            },
            mailList: [],
            loading: false,
            total: 0,
            openSys: false,
            userAll: [], //所有用户
            assignUSerData: {},
            rules: {
                beginTime: [
                    { required: true, message: '请输入开始时间', trigger: 'blur' }
                ],
                operUserId: [
                    { required: true, message: '请选择运营', trigger: 'blur' }
                ],
                putUserId: [
                    { required: true, message: '请选择投手', trigger: 'blur' }
                ],
            },
            recordShow: false,
            recordData: {}
        }
    },
    props: {
        corpId: {
            type: String,
            default: '',
        },
        visible: {
            type: Boolean,
            default: false
        }
    },
    watch: {
        visible: {
            handler(val) {
                if (val) {
                    this.$nextTick(() => {
                        this.getList()
                        this.getAll()
                    })
                }
            },
            immediate: true,
        },
    },
    methods: {
        // 变更记录
        handleRecord(row) {
            this.recordShow = true
            this.recordData = row
        },
        // 指派
        handlePut(row) {
            this.openSys = true
            this.assignUSerData = {
                beginTime: formatDateYMD(new Date()),
                operUserId: row.operUserId,
                putUserId: row.putUserId,
                corpId: this.corpId,
                corpUserId: row.corpUserId
            }
        },
        assignUSerSubmit() {
            this.$refs['platFormSysType'].validate((valid) => {
                if (valid) {
                    console.log(this.assignUSerData);
                    const loading = this.$loading({
                        lock: true,
                        text: 'Loading',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    putCorpSysUser(this.assignUSerData).then(res => {
                        if (res.data) {
                            this.$message({
                                showClose: true,
                                message: '指派成功',
                                type: 'success'
                            });
                            this.openSys = false
                            this.assignUSerData = {}
                            this.getList()
                        }
                        loading.close()
                    }).catch(() => loading.close())
                }
            })
        },
        getAll() {
            // 所有用户
            allUser().then((response) => {
                let data = response.data;
                this.userAll = data.map((item) => {
                    return { id: item.userId, nickName: item.nickname };
                });
            });
        },
        beforeClose() {
            this.$emit("close");
        },
        syncHandle() {
            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            putSyncCorpUser(this.corpId).then(res => {
                this.msgSuccess("同步成功");
                loading.close()
                this.getList()
            }).catch(() => loading.close())
        },
        getList() {
            this.loading = true
            getCorpMailList({ corpId: this.corpId, ...this.queryParams }).then(res => {
                this.mailList = res.data.records
                this.total = res.data.total
                this.loading = false
            }).catch(() => this.loading = false)
        },
        onClose() {
            this.visible = false
        }
    }
}
</script>