manHourHousekeeper/fhKeeper/formulahousekeeper/octopus/src/views/customer/list.vue

<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true">
                <el-form-item label="企业列表">
                    
                </el-form-item>
                <el-form-item >
                    <div>
                    <el-input style="float:left;" v-model="keyword" class="input-with-select" placeholder="请输入企业名称关键字" clearable="true">
                        <el-button slot="append" @click="searchList" icon="el-icon-search"></el-button>
                    </el-input>
                    </div>
                </el-form-item>
                <el-form-item >
                        <el-radio-group v-model="isMeal" size="small" @change="selIsmeal()">
                            <el-radio-button :label="0">全部</el-radio-button>
                            <el-radio-button :label="1">已签约</el-radio-button>
                        </el-radio-group>
                </el-form-item>
            </el-form>
        </el-col>

        <!--列表-->
        <el-table :data="list" highlight-current-row v-loading="listLoading" :height="tableHeight" style="width: 100%;">
            <el-table-column prop="companyName" label="企业名称" min-width="240" align="center">
            </el-table-column>
            <el-table-column prop="setMeal" label="是否签约"  min-width="80" align="center">
                <template slot-scope="scope">{{scope.row.setMeal ? "已签约" : "未签约"}}</template>
            </el-table-column>
            
            <el-table-column prop="expirationDate" label="有效期"  min-width="160" align="center">
            </el-table-column>
            <el-table-column prop="wxCorpid" label="企业微信"  min-width="160" align="center">
            </el-table-column>
            <el-table-column prop="dingdingCorpid" label="钉钉"  min-width="160" align="center">
            </el-table-column>
            <el-table-column prop="staffCountMax" label="人数上限"  min-width="80" align="center">
            </el-table-column>
            <el-table-column prop="packageWorktime" label="使用版本" align="left" min-width="500" header-align="center">
                <template slot-scope="scope">
                    <!-- <span>{{scope.row.packageWorktime ? "工时 +" : ""}}</span>
                    <span>{{scope.row.packageProject ? "项目协作 +" : ""}}</span>
                    <span>{{scope.row.packageContract ? "合同 +" : ""}}</span>
                    <span>{{scope.row.packageOa ? "OA +" : ""}}</span>
                    <span>{{scope.row.packageEtimecard ? "生产车间 +" : ""}}</span>
                    <span>{{scope.row.packageExpense ? "费用报销 +" : ""}}</span>
                    <span>{{scope.row.packageCustomer ? "客户管理 +" : ""}}</span>
                    <span>{{scope.row.packageEngineering ? "工程专业 +" : ""}}</span>
                    <span>{{scope.row.packageSimple ? "简单表格 +" : ""}}</span>
                    <span>{{scope.row.packageFinance ? "财务核算" : ""}}</span> -->
                    <span v-for="(item, index) in scope.row.arrList" :key="index">
                        {{item}} <span v-if="scope.row.arrList.length != 1 && scope.row.arrList.length - 1 != index">+</span>
                    </span>
                </template>
            </el-table-column>
            
            <el-table-column label="操作" width="240" class-name="btns" header-align="center" fixed="right">
                <template slot-scope="scope">
                    <el-button size="mini"  @click="editClick('A', scope.row)">增加人数</el-button>
                    <el-button size="mini"  @click="editClick('B', scope.row)">修改有效期</el-button>
                    <el-button size="mini"  @click="editClick('C', scope.row)">修改版本</el-button>
                    <el-button size="mini"  @click="editClick('D', scope.row)" v-if="!scope.row.setMeal">设为已签约</el-button>
                    <el-button size="mini"  @click="editClick('E', scope.row)" v-loading="dingdingSync" v-if="scope.row.dingdingCorpid">同步钉钉人员</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[20 , 50 , 80 , 100]"
                :page-size="20"
                layout="total, sizes, prev, pager, next"
                :total="total"
                style="float:right;"
            ></el-pagination>
        </el-col>

        <!--编辑界面-->
        <!-- 增加人数上限 -->
        <el-dialog v-if="editDialogA" :visible.sync="editDialogA" title="增加人数上限">
            <el-form>
                <el-form-item label="企业名称" label-width="150px">{{dialogData.companyName}}</el-form-item>
                <el-form-item label="当前人数上限" label-width="150px">{{dialogData.staffCountMax}}人</el-form-item>
                <el-form-item label="本次增加人数" label-width="150px">
                    <el-input-number size="small" controls-position="right" v-model="addStaffCountMaxNum" :step="5"></el-input-number> 人
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogA = false">取 消</el-button>
                <el-button type="primary" @click="ConfirmA()">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 修改有效期 -->
        <el-dialog v-if="editDialogB" :visible.sync="editDialogB" title="修改有效期">
            <el-form>
                <el-form-item label="企业名称" label-width="150px">{{dialogData.companyName}}</el-form-item>
                <el-form-item label="当前有效期至" label-width="150px">{{dialogData.expirationDate}}</el-form-item>
                <el-form-item label="修改有效期至" label-width="150px">
                    <el-date-picker
                        size="small"
                        v-model="expirationNewDate"
                        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="editDialogB = false">取 消</el-button>
                <el-button type="primary" @click="ConfirmB()">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 编辑版本 -->
        <el-dialog v-if="editDialogC" :visible.sync="editDialogC" title="修改版本">
            <el-form>
                <el-form-item label="企业名称" label-width="150px">{{dialogData.companyName}}</el-form-item>
                <el-form-item label="版本" label-width="150px">
                    <div style="width:80%">
                        <div style="width:33%; float:left;"><el-checkbox v-model="dialogData.packageWorktime">工时平台</el-checkbox></div>
                        <div style="width:33%; float:left;"><el-checkbox v-model="dialogData.packageProject">项目协作平台</el-checkbox></div>
                        <div style="width:33%; float:left;"><el-checkbox v-model="dialogData.packageContract">合同平台</el-checkbox></div>
                        <div style="width:33%; float:left;"><el-checkbox v-model="dialogData.packageOa">OA平台</el-checkbox></div>
                        <div style="width:33%; float:left;"><el-checkbox v-model="dialogData.packageEtimecard">生产车间平台</el-checkbox></div>
                        <div style="width:33%; float:left;"><el-checkbox v-model="dialogData.packageExpense">费用报销</el-checkbox></div>
                        <div style="width:33%; float:left;"><el-checkbox v-model="dialogData.packageCustomer">客户管理</el-checkbox></div>
                        <div style="width:33%; float:left;"><el-checkbox v-model="dialogData.packageEngineering">工程专业</el-checkbox></div>
                        <div style="width:33%; float:left;"><el-checkbox v-model="dialogData.packageSimple">简单表格</el-checkbox></div>
                        <div style="width:33%; float:left;"><el-checkbox v-model="dialogData.packageFinance">财务核算</el-checkbox></div>
                    </div>
                    
                    <!-- <span>{{scope.row.packageWorktime ? "工时 +" : ""}}</span>
                    <span>{{scope.row.packageProject ? "项目协作 +" : ""}}</span>
                    <span>{{scope.row.packageContract ? "合同 +" : ""}}</span>
                    <span>{{scope.row.packageOa ? "OA +" : ""}}</span>
                    <span>{{scope.row.packageEtimecard ? "生产车间 +" : ""}}</span>
                    <span>{{scope.row.packageExpense ? "费用报销 +" : ""}}</span>
                    <span>{{scope.row.packageCustomer ? "客户管理 +" : ""}}</span>
                    <span>{{scope.row.packageEngineering ? "工程专业 +" : ""}}</span>
                    <span>{{scope.row.packageSimple ? "简单表格 +" : ""}}</span>
                    <span>{{scope.row.packageFinance ? "财务核算" : ""}}</span> -->
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogC = false">取 消</el-button>
                <el-button type="primary" @click="ConfirmC()">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 设为已签约 -->
        <el-dialog v-if="editDialogD" :visible.sync="editDialogD" title="设为已签约">
            <el-form>
                <el-form-item label="企业名称" label-width="150px">{{dialogData.companyName}}</el-form-item>
                <el-form-item label="当前是否签约" label-width="150px">{{dialogData.setMeal ? "已签约" : "未签约"}}</el-form-item>
                <el-form-item label="即将设置为" label-width="150px">已签约</el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogD = false">取 消</el-button>
                <el-button type="primary" @click="ConfirmD()">确 定</el-button>
            </span>
        </el-dialog>
    </section>
</template>
<script>
    export default {
        data() {
            return {
                dingdingSync:false,
                isMeal:0, //是否已签约

                editDialogA: false,
                editDialogB: false,
                editDialogC: false,
                editDialogD: false,

                dialogData: null,
                // 增加人数上限
                addStaffCountMaxNum: 0,
                // 修改有效期
                expirationNewDate: null,



                keyword:null,
                tableHeight: 0,
                listLoading: false,
                total: 0,
                page: 1,
                size: 20,
                list: [],
            };
        },
        // 过滤器
        filters: {
        },
        methods: {
            // 名称搜索
            searchList() {
                this.page = 1;
                this.getList();
            },
            // 是否签约筛选
            selIsmeal(){
                this.getList()
            },
            // 编辑按钮
            editClick(i,obj){
                this.dialogData = JSON.parse(JSON.stringify(obj))
                console.log("data",this.dialogData);
                if(i == 'A'){ this.editDialogA = true, this.addStaffCountMaxNum = 0 }
                if(i == 'B'){ this.editDialogB = true, this.expirationNewDate = this.dialogData.expirationDate }
                if(i == 'C'){ this.editDialogC = true,
                    this.dialogData.packageWorktime = this.dialogData.packageWorktime ? true : false,
                    this.dialogData.packageProject = this.dialogData.packageProject ? true : false,
                    this.dialogData.packageContract = this.dialogData.packageContract ? true : false,
                    this.dialogData.packageOa = this.dialogData.packageOa ? true : false,
                    this.dialogData.packageEtimecard = this.dialogData.packageEtimecard ? true : false,
                    this.dialogData.packageExpense = this.dialogData.packageExpense ? true : false,
                    this.dialogData.packageCustomer = this.dialogData.packageCustomer ? true : false,
                    this.dialogData.packageEngineering = this.dialogData.packageEngineering ? true : false,
                    this.dialogData.packageSimple = this.dialogData.packageSimple ? true : false,
                    this.dialogData.packageFinance = this.dialogData.packageFinance ? true : false
                }
                if(i == 'D'){ this.editDialogD = true }
                if (i=='E') {
                    //同步钉钉的组织架构人员
                    this.startSyncDDMembs(obj);
                }
                console.log("data2",this.dialogData);
            },

            startSyncDDMembs(row) {
                this.dingdingSync = true;

                this.http.post('/company/syncDindDingMembs', { corpid:row.dingdingCorpid},
                res => {
                    this.dingdingSync = false;
                    if (res.code == "ok") {
                        this.editDialogA = false
                        this.$message({
                            message: "同步完成",
                            type: "success"
                        })
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.dingdingSync = false;
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },

            // 增加人数上限
            ConfirmA(){
                this.listLoading = true;
                this.http.post('/company/addMembCount', { companyId:this.dialogData.id , addCount:this.addStaffCountMaxNum },
                res => {
                    this.listLoading = false;
                    if (res.code == "ok") {
                        this.editDialogA = false
                        this.$message({
                            message: "人数上限修改成功",
                            type: "success"
                        })
                        this.getList()
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.listLoading = false;
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },


            // 修改有效期
            ConfirmB(){
                this.listLoading = true;
                this.http.post('/company/setExpDate', { companyId:this.dialogData.id , date:this.expirationNewDate },
                res => {
                    this.listLoading = false;
                    if (res.code == "ok") {
                        this.editDialogB = false
                        this.$message({
                            message: "有效期修改成功",
                            type: "success"
                        })
                        this.getList()
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.listLoading = false;
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },


            // 修改版本
            ConfirmC(){
                this.listLoading = true;
                this.http.post('/company/setPackageList',
                    {
                        id:this.dialogData.id,
                        packageWorktime: this.dialogData.packageWorktime ? 1 : 0,
                        packageProject: this.dialogData.packageProject ? 1 : 0,
                        packageContract: this.dialogData.packageContract ? 1 : 0,
                        packageOa: this.dialogData.packageOa ? 1 : 0,
                        packageEtimecard: this.dialogData.packageEtimecard ? 1 : 0,
                        packageExpense: this.dialogData.packageExpense ? 1 : 0,
                        packageCustomer: this.dialogData.packageCustomer ? 1 : 0,
                        packageEngineering: this.dialogData.packageEngineering ? 1 : 0,
                        packageSimple: this.dialogData.packageSimple ? 1 : 0,
                        packageFinance: this.dialogData.packageFinance ? 1 : 0
                    },
                res => {
                    this.listLoading = false;
                    if (res.code == "ok") {
                        this.editDialogC = false
                        this.$message({
                            message: "版本修改成功",
                            type: "success"
                        })
                        this.getList()
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.listLoading = false;
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },


            // 设为已签约
            ConfirmD(){
                this.listLoading = true;
                this.http.post('/company/setMeal', { companyId:this.dialogData.id },
                res => {
                    this.listLoading = false;
                    if (res.code == "ok") {
                        this.editDialogD = false
                        this.$message({
                            message: "签约成功",
                            type: "success"
                        })
                        this.getList()
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.listLoading = false;
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },





            //分页
            handleCurrentChange(val) {
                this.page = val;
                this.getList();
            },
            handleSizeChange(val) {
                this.size = val;
                this.getList();
            },

            //获取项目列表
            getList() {
                this.listLoading = true;
                this.http.post('/company/getList', {
                    pageIndex: this.page,
                    pageSize: this.size,
                    companyName: this.keyword,
                    isMeal: this.isMeal
                },
                res => {
                    this.listLoading = false;
                    if (res.code == "ok") {
                        for(var i in res.data.records) {
                            var arrList = []
                            res.data.records[i].packageWorktime == 1 ? arrList.push('工时') : ''
                            res.data.records[i].packageProject == 1 ? arrList.push('项目协作') : ''
                            res.data.records[i].packageContract == 1 ? arrList.push('合同') : ''
                            res.data.records[i].packageOa == 1 ? arrList.push('OA') : ''
                            res.data.records[i].packageEtimecard == 1 ? arrList.push('生产车间') : ''
                            res.data.records[i].packageExpense == 1 ? arrList.push('费用报销') : ''
                            res.data.records[i].packageCustomer == 1 ? arrList.push('客户管理') : ''
                            res.data.records[i].packageEngineering == 1 ? arrList.push('工程专业') : ''
                            res.data.records[i].packageSimple == 1 ? arrList.push('简单表格') : ''
                            res.data.records[i].packageFinance == 1 ? arrList.push('财务核算') : ''
                            res.data.records[i].arrList = arrList
                        }
                        var list = res.data.records;
                        this.list = list;
                        this.total = res.data.total;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.listLoading = false;
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
        },
        created() {
            let height = window.innerHeight;
            this.tableHeight = height - 195;
            const that = this;
            window.onresize = function temp() {
                that.tableHeight = window.innerHeight - 195;
            };
        },
        mounted() {
            this.getList();
        }
    };
</script>

<style lang="scss" scoped>
.rg_span{
    display: inline-block;
}
.rg_span span {
    text-align: right;
    box-sizing: border-box;
    padding-right: 10px;
}
.el-dialog__title {
    display: inline-table;
    margin-top: 20px;
}
.btns .el-button{
    margin-left: 10px;
    margin-bottom: 5px;
}
</style>