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

<template>
    <div>
        <el-drawer :title="recordData.name + ' 变更记录'" append-to-body :visible.sync="visible" direction="rtl"
            :before-close="recordClose" custom-class="custom">
            <div class="cut">
                <el-button class="button" type="primary" icon="el-icon-plus" size="mini"
                    @click="handleCutRecord">插入起始记录</el-button>
                <el-table :data="recordList" size="mini" :lazy="true">
                    <el-table-column label="开始时间" prop="beginTime" align="center" width="90" />
                    <el-table-column label="结束时间" prop="endTime" align="center" width="90" />
                    <el-table-column label="企业号ID" prop="corpUserId" align="center" :show-overflow-tooltip="true"
                        width="120" />
                    <el-table-column label="企微ID" prop="corpId" :show-overflow-tooltip="true" width="300" />
                    <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="操作" align="center" fixed="right"
                        width="150">
                        <template slot-scope="scope">
                            <div>
                                <el-button type="text" @click="insertDownHandle(scope.row, '向后插入')"
                                    size="mini">往后插入</el-button>
                                <el-button type="text" @click="insertDownHandle(scope.row, '修改')" size="mini">修改</el-button>
                                <el-button type="text" style="color: red" size="mini"
                                    @click="delRecordHandle(scope.row)">删除</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-drawer>

        <!-- 新增 编辑记录弹窗 -->
        <el-dialog :title="title" :visible.sync="editShow" width="360px" append-to-body @close="editShow = false">
            <el-form :model="queryPlatformRecord" :rules="rules" ref="platFormRecord" label-width="80px">
                <el-form-item label="开始时间" prop="beginTime">
                    <el-date-picker v-model="queryPlatformRecord.beginTime" size="small" format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd" type="date" placeholder="选择开始时间" />
                </el-form-item>
                <el-form-item label="结束时间" prop="endTime">
                    <el-date-picker v-model="queryPlatformRecord.endTime" size="small" format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd" type="date" placeholder="选择开始时间" />
                </el-form-item>
                <el-form-item label="运营" prop="operUserId">
                    <el-select v-model="queryPlatformRecord.operUserId" size="small" placeholder="选择运营" filterable
                        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="queryPlatformRecord.putUserId" size="small" placeholder="选择投手" filterable 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="editShow = false; queryPlatformRecord = {}">取 消</el-button>
                <el-button type="primary" @click="submitRecord('platFormRecord')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getAllOfCorpList, addAllOfCorp, putAllOfCorp, delAllOfCorp } from "@/api/accounts/corpWeChat";
export default {
    data() {
        return {
            recordList: [],
            loading: false,
            title: '',
            editShow: false,
            queryPlatformRecord: {},
            rules: {
                beginTime: [
                    { required: true, message: '请选择开始时间', trigger: 'change' }
                ]
            }
        }
    },
    props: {
        recordData: {
            type: Object,
            default: {},
        },
        visible: {
            type: Boolean,
            default: false
        },
        userAll: {
            type: Array,
            default: []
        }
    },
    watch: {
        visible: {
            handler(val) {
                if (val) {
                    this.$nextTick(() => {
                        this.getList()
                    })
                }
            },
            immediate: true,
        },
    },
    methods: {
        submitRecord(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let params = JSON.parse(JSON.stringify(this.queryPlatformRecord))
                    if(params.beginTime) {
                        params.beginTime = params.beginTime
                    }
                    if(params.endTime) {
                        params.endTime = params.endTime
                    }
                    if(!params.id) { // 新增
                        addAllOfCorp(params).then(res => {
                            this.msgSuccess("插入成功");
                            this.resetForm(formName);
                            this.editShow = false
                            this.getList()
                        })
                    } else { // 修改
                        let { id, ...data } = params
                        putAllOfCorp({ recordId: id, ...data }).then(res => {
                            this.msgSuccess("修改成功");
                            this.resetForm(formName);
                            this.editShow = false
                            this.getList()
                        })
                    }
                }
            })
        },
        handleCutRecord() {
            const { id, putUserId, operUserId, corpId, corpUserId } = this.recordData
            this.title = '插入起始记录'
            this.editShow = true
            this.queryPlatformRecord = {
                resourceId: id,
                operUserId,
                putUserId,
                corpId,
                corpUserId
            }
        },
        /** 修改插入 */
        insertDownHandle(item, type) {
            this.title = `${type}记录`
            this.editShow = true
            let data = {}
            if (item.beginTime) {
                item.beginTime = item.beginTime.split(' ')[0]
            }
            if (item.endTime) {
                item.endTime = item.endTime.split(' ')[0]
            }
            const { beginTime, endTime, id, operUserId, putUserId, corpId, corpUserId } = item
            if (type === '修改') {
                data = { beginTime, endTime, id }
            } else {
                data = { nextId: id, corpId, corpUserId }
            }
            this.queryPlatformRecord = {
                ...data,
                operUserId,
                putUserId,
            }
        },
        /** 删除 */
        delRecordHandle(row) {
            this.$confirm('确定删除？', '删除', {
                distinguishCancelAndClose: true,
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                delAllOfCorp(row.id).then(res => {
                    if (res.data) {
                        this.msgSuccess('删除成功');
                        this.getList()
                    }
                })
            })
        },
        getList() {
            this.loading = true
            getAllOfCorpList(this.recordData.corpId, this.recordData.corpUserId).then(res => {
                if (res) {
                    this.recordList = res.data
                }
                this.loading = false
            }).catch(() => this.loading = false)
        },
        // 关闭
        recordClose() {
            this.$emit("close");
        }
    }
}
</script>

<style lang="scss">
.custom {
    width: 55% !important;
}

.cut {
    padding: 0 10px;
    box-sizing: border-box;

    .button {
        margin-bottom: 10px;
    }

    .el-table .cell {
        line-height: normal;
    }

    ul {
        padding-left: 0;

        .sumitInfo {
            // margin-top: 20px;
            font-weight: 600;
            margin-bottom: 10px;

            .button {
                margin-left: 20px;
            }
        }
    }
}
</style>