zhgdyun/src/views/projectFront/safetyEducation/classification.vue

<template>
<!-- 企业课程分类管理页面 暂时没用到 -->
    <div class="fullHeight">
        <div class="searchBox whiteBlock" v-if="$route.path.indexOf('/project/')==-1">
            <el-button size="medium" type="primary" @click="addBefore">{{$t('message.workType.operate.add')}}
                {{$t('message.safetyEducation.classification')}}<!-- 分类 -->
            </el-button>
        </div>
        <div class="table_wrap whiteBlock" style="margin-top:15px">
            <vue-scroll>
                <el-table class="tables" :data="workerList">
                    <el-table-column
                    type="index"
                    width="50"
                    align="center"
                    :label="$t('message.personnelPosition.beaconManage.table.index')"
                    ></el-table-column>
                    <!-- 分类名称 -->
                    <el-table-column prop="classifyName" :label="$t('message.safetyEducation.classificationName')">
                        <template slot-scope="scope">
                            <router-link v-if="$route.path.indexOf('/project/')==-1" class="primaryText" :to="{path:'/companyAdmin/safetyEducation/courseManage?name='+scope.row.classifyName+'&id='+scope.row.id}">{{scope.row.classifyName}}</router-link>
                            <router-link v-else class="primaryText" :to="{path:'/project/safetyEducation/courseManage?name='+scope.row.classifyName+'&id='+scope.row.id}">{{scope.row.classifyName}}</router-link>
                        </template>
                    </el-table-column>
                    <el-table-column width="200" v-if="$route.path.indexOf('/project/')==-1">
                        <template slot-scope="scope">
                            <div class="tableBtns">
                                <div @click="editBefore(scope.row)" class="operationText">
                                    <img src="@/assets/images/icon-edit.png" width="15px" height="15px"/>
                                    <span>{{$t('message.workType.edit')}}</span>
                                </div>
                                <div @click="deleteBefore(scope.row)" class="operationText">
                                    <img src="@/assets/images/icon-delete.png" width="15px" height="15px"/>
                                    <span>{{$t('message.workType.delete')}}</span>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </vue-scroll>
        </div>
        <el-dialog
                :modal-append-to-body="false"
                :title="$t('message.workType.operate')[type]"
                :visible.sync="dialogVisible"
                width="667px">
            <div class="dialog_content">
                <el-form label-width="120px" size="medium" class="dialogFormBox" ref="addEditForm" :model="workerInfo">
                    <!-- 分类名称 -->
                    <el-form-item :label="$t('message.safetyEducation.classificationName')" prop="classifyName" :rules="[
                            { required: true, message: $t('message.safetyEducation.pleaseEnter'), trigger: 'blur' }
                        ]">
                        <el-input v-model="workerInfo.classifyName"
                                  :placeholder="$t('message.workType.placeholder')"></el-input>
                    </el-form-item>
                    <div class="dialog-footer">
                        <el-button
                                class="cancleBtn"
                                @click="dialogVisible = false"
                                icon="el-icon-circle-close"
                                size="medium"
                        >{{$t('message.personnelPosition.cancel')}}
                        </el-button>
                        <el-button
                                type="primary"
                                icon="el-icon-circle-check"
                                @click="addWorker"
                                size="medium"
                        >{{$t('message.personnelPosition.determine')}}
                        </el-button>
                    </div>
                </el-form>
            </div>

        </el-dialog>
    </div>
</template>
<script>
    import {educationClassifyAddApi, educationClassifyEditApi, educationClassifyDeleteApi, educationClassifyListApi} from '@/assets/js/api/laborPerson'
    export default {
        mounted() {
            this.getWorkerList();
        },
        data() {
            return {
                type: 'add',
                workerInfo: {classifyName: ''},
                workerList: [],
                dialogVisible: false
            }
        },
        methods: {
            addWorker() {
                if (this.type === 'add') {
                     this.$refs['addEditForm'].validate((valid) => {
                        if (valid) {
                            educationClassifyAddApi({
                                sn: this.$store.state.userInfo.headquartersSn,
                                classifyName: this.workerInfo.classifyName,
                                type:1
                            }).then(result => {
                                if (result.success) {
                                    this.dialogVisible = false;
                                    this.$message.success(result.message);
                                    this.getWorkerList();
                                }
                            })
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                    
                } else if (this.type === 'edit') {
                    this.$refs['addEditForm'].validate((valid) => {
                        if (valid) {
                            educationClassifyEditApi(this.workerInfo).then(result => {
                                if (result.success) {
                                    this.dialogVisible = false;
                                    this.$message.success(result.message);
                                    this.getWorkerList();
                                }
                            })
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                    
                } else if (this.type === 'delete') {
                    educationClassifyDeleteApi({id: this.workerInfo.id}).then(result => {
                        if (result.success) {
                            this.$message.success(result.message);
                            this.getWorkerList();
                        }
                    })
                }
                
            },
            PopupBefore(type, worker) {
                this.dialogVisible = true;
                this.type = type;
                this.workerInfo = JSON.parse(JSON.stringify(worker));
            },
            addBefore() {
                this.PopupBefore('add', {classifyName: ''});
                console.log('添加前', this.type)
            },
            editBefore(worker) {
                this.PopupBefore('edit', worker);
                console.log('编辑前', this.type)
            },
            deleteBefore(worker) {
                // this.PopupBefore('delete', worker);
                this.type = 'delete';
                this.workerInfo = worker;
                console.log('删除前', this.type)
                this.$confirm(this.$t('message.personnelPosition.beaconManage.table.confirmText') + "【" + worker.classifyName + "】?", this.$t('message.personnelPosition.beaconManage.table.Tips'), {
                    confirmButtonText: this.$t('message.personnelPosition.confirmButtonText'),
                    cancelButtonText: this.$t('message.personnelPosition.cancelButtonText'),
                    type: "warning",
                }).then(() => {
                    this.addWorker();
                }).catch(() => {
                });
            },
            getWorkerList() {
                educationClassifyListApi({sn: this.$store.state.userInfo.headquartersSn}).then(result => {
                    this.workerList = result.result;
                })
            }
        }
    }
</script>
<style lang="less" scoped>
  .primaryText{
      text-decoration: none;
  }


</style>