zx-admin-erp/src/views/accounts/qwMapping/index.vue

<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
            <el-form-item label="" prop="channel">
                <el-input
                    v-model="queryParams.channel"
                    placeholder="请输入公众号"
                    clearable
                    size="small"
                    style="width: 200px"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="" prop="platformName">
                <el-select v-model="queryParams.platformName" placeholder="请选择书城" size="small" filterable style="width: 100%" clearable @keyup.enter.native="handleQuery">
                    <el-option
                        v-for="item in bookCityData"
                        :key="item.id"
                        :label="item.platformName"
                        :value="item.platformName">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="" prop="qwName">
                <el-input
                    v-model="queryParams.qwName"
                    placeholder="企微号"
                    clearable
                    size="small"
                    style="width: 200px"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="" prop="resourceName">
                <el-input
                    v-model="queryParams.resourceName"
                    placeholder="资源名称"
                    clearable
                    size="small"
                    style="width: 200px"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item prop="startTime" >
                <el-date-picker
                    v-model="queryParams.startTime"
                    type="date"
                    size="small"
                    value-format="yyyy-MM-dd"
                    placeholder="选择开始日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item prop="endTime" >
                <el-date-picker
                    v-model="queryParams.endTime"
                    type="date"
                    size="small"
                    value-format="yyyy-MM-dd"
                    placeholder="选择结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8" align="middle">
            <el-col :span="1.5">
                <el-button type="primary" size="small" @click="addHandle">新增企微映射</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table :data="dataList" size="mini" :border="true">
            <el-table-column label="ID" prop="id" width="55" align="center"/>
            <el-table-column label="资源名称" prop="resourceName" align="center" width="140" :show-overflow-tooltip="true"/>
            <el-table-column label="公众号appName" prop="mpAppName" width="120" align="center"/>
            <el-table-column label="公众号appId" prop="mpAppId" align="center" width="160"/>
            <el-table-column label="书城名称" prop="platformName" align="center" width="100"/>
            <el-table-column label="书城key" prop="platformKey" align="center" width="100"/>
            <el-table-column label="企微appName" prop="qwAppName" align="center" width="150"/>
            <el-table-column label="企微appId" prop="qwAppId" align="center" width="160" :show-overflow-tooltip="true"/>
            <el-table-column label="开始时间" prop="startTime" align="center" width="100"/>
            <el-table-column label="结束时间" prop="endTime" align="center" width="100"/>
            <el-table-column label="创建时间" prop="createTime" align="center" width="135"/>
            <el-table-column label="操作" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        style="margin-right: 10px"
                        @click="handleEditTen(scope.row)"
                    >修改</el-button>
                    <el-popconfirm
                        title="确定删除吗？"
                        @confirm="handleDel(scope.row.id)"
                    >
                        <el-button slot="reference" type="text" size="mini" style="color: red" icon="el-icon-delete">删除</el-button>
                    </el-popconfirm>
                </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="visible" 
            width="450px"
            append-to-body
        >
            <el-form :model="qwParamsForm" :rules="qwRulesType" ref="platFormQw" label-width="80px">
                <el-form-item label="资源名称" prop="resourceName">
                    <el-select
                        v-model="qwParamsForm.resourceName"
                        filterable
                        remote
                        reserve-keyword
                        placeholder="请输入关键词"
                        :remote-method="remoteMethod"
                        :loading="loading"
                    >
                        <el-option
                            v-for="item in options"
                            :key="item.id"
                            :label="item.resourceName"
                            :value="item.resourceName">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="书城" prop="platformKey" >
                    <el-select v-model="qwParamsForm.platformKey" placeholder="请选择" filterable style="width: 100%" clearable>
                        <el-option
                            v-for="item in bookCityData"
                            :key="item.id"
                            :label="item.platformName"
                            :value="item.platformKey">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="公众号" prop="mpAppData" >
                    <el-select v-model="qwParamsForm.mpAppData" placeholder="请选择" filterable style="width: 100%" clearable>
                        <el-option
                            v-for="item in gzhData"
                            :key="item.id"
                            :label="item.appName"
                            :value="item.appName + '_' + item.appId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="企微" prop="qwAppData" >
                    <el-select v-model="qwParamsForm.qwAppData" placeholder="请选择" filterable style="width: 100%" clearable>
                        <el-option
                            v-for="item in qwData"
                            :key="item.id"
                            :label="item.appName"
                            :value="item.appName + '_' + item.appId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="开始时间" prop="startTime" >
                    <el-date-picker
                        v-model="qwParamsForm.startTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间" prop="endTime" >
                    <el-date-picker
                        v-model="qwParamsForm.endTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="qwParamsForm = {platformKey: 'YOU_ZI'};visible = false">取 消</el-button>
                <el-button type="primary" @click="submit('platFormQw')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getQwChanelList, addOrEditQwChanel, getChanelList, getBookPlatformAll, delQwChanel, queryApi } from '@/api/accounts/qwMapping'
export default {
    data () {
        return {
            queryParams: {
                pageNum: 1,
                pageSize: 20,
                channel: null
            },
            dataList: [],
            total: 0,
            showSearch: true,
            visible: false,
            qwParamsForm: {
                platformKey: 'YOU_ZI'
            },
            qwRulesType: {
                resourceName:  [{ required: true, message: '请输入资源名称', trigger: 'blur' }],
                platformKey: [{ required: true, message: '请选择书城', trigger: 'blur' }]
            },
            title: '新增企微映射',
            bookCityData: [],
            gzhData: [],
            qwData: [],
            loading: false,
            options: []
        }
    },
    watch: {
        'qwParamsForm.platformKey': {
            handler(val) {
                if (val) {
                    getChanelList({ platformKey: val }).then(res => {
                        let data = res.data
                        if (data && Array.isArray(data)) {
                            this.gzhData = data.filter(item => item.type === 0)
                            this.qwData = data.filter(item => item.type === 1)
                        }
                    })
                }
            },
            immediate: true,
        },
    },
    created() {
        this.getList()
        this.getAll()
    },
    methods: {
        remoteMethod(query) {
            if (query !== '') {
                this.loading = true;
                queryApi({resourceName: query}).then(res => {
                    this.options = res.data
                    this.loading = false;
                }).catch(err => this.loading = false)
            } else {
                this.options = [];
            }
        },
        getAll () {
            getBookPlatformAll().then(res => {
                this.bookCityData = res.data
            })
        },
        getList () {
            getQwChanelList(this.queryParams).then(res => {
                let data = res.data
                this.total = data.total
                let records = data.records
                this.dataList = records
            })
        },
        handleQuery() {
            this.queryParams = { ...this.queryParams, pageNum: 1 }
            this.getList();
        },
        resetQuery() {
            this.resetForm("queryForm");
            this.getList();
        },
        addHandle() {
            this.visible = true
            this.title = '新增企微映射'
        },
        handleEditTen(row) {
            console.log('修改--->', row)
            this.title = '修改企微映射'
            const { id, endTime, startTime, mpAppId, mpAppName, platformKey, qwAppId, qwAppName, resourceName} = row
            this.qwParamsForm = { startTime, id, endTime, platformKey, resourceName }
            if (mpAppId && mpAppName) {
                this.$set(this.qwParamsForm, 'mpAppData', mpAppName + '_' + mpAppId);
            }
            if (qwAppId && qwAppName) {
                this.$set(this.qwParamsForm, 'qwAppData', qwAppName + '_' + qwAppId);
            }
            this.visible = true
        },
        handleDel(id) {
            delQwChanel({id}).then(res => {
                if (res.data) {
                    this.msgSuccess("删除成功");
                    this.getList()
                }
            })
        },
        submit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log('11111', this.qwParamsForm);
                    if (Object.keys(this.qwParamsForm).includes('mpAppData') || Object.keys(this.qwParamsForm).includes('qwAppData')) {
                        let params = JSON.parse(JSON.stringify(this.qwParamsForm))
                        if (Object.keys(this.qwParamsForm).includes('mpAppData')) {
                            params.mpAppName = params.mpAppData.split('_')[0]
                            params.mpAppId = params.mpAppData.split('_')[1]
                            delete params.mpAppData
                        }
                        if (Object.keys(this.qwParamsForm).includes('qwAppData')) {
                            params.qwAppName = params.qwAppData.split('_')[0]
                            params.qwAppId = params.qwAppData.split('_')[1]
                            delete params.qwAppData
                        }
                        addOrEditQwChanel(params).then(res => {
                            console.log('addOrEditQwChanel---->', res)
                            if (res.data) {
                                if (this.qwParamsForm.id) { // 修改
                                    this.msgSuccess("新增成功");
                                } else {
                                    this.msgSuccess("修改成功");
                                }
                                this.getList()
                                this.qwParamsForm = { platformKey: 'YOU_ZI' }
                                this.visible = false
                            }
                        })
                    } else {
                        this.$message.error('公众号和企微必须选择一个');
                    }
                } else {
                    return false;
                }
            });
        }
    }
}
</script>