oa-system/src/components/OP/OpDelegationEnData.vue

<template>
    <div class="car_add">
        <div>
            <div class="communal-title">
                <div>{{ title }}</div>
            </div>
        </div>
        <hr style='background-color:#5555; height:1px; border:none;' />
        <div>
            <el-form :model="OpDelegationEnData" ref="OpDelegationEnData" :rules="OpDelegationEnDataRules"
                label-width="100px" class="demo-ruleForm">
                <div style="display: flex;">
                    <div style="width: 25%;">
                        <el-form-item label="区域:" prop="area" label-width="160px">
                            <el-input clearable placeholder="区域" v-model="OpDelegationEnData.area">
                            </el-input>
                        </el-form-item>
                    </div>

                </div>

                <div style="display: flex;">
                    <div style="width: 40%;">
                        <div>
                            <el-form-item label="职务(中文):" prop="job" label-width="160px">
                                <el-input clearable placeholder="职务(中文)" v-model="OpDelegationEnData.job">
                                </el-input>
                            </el-form-item>
                        </div>
                        <div>
                            <el-form-item label="团组背景(中文):" prop="delegationSetting" label-width="160px">
                                <el-input type="textarea" :rows="3" placeholder="团组背景(中文)"
                                    v-model="OpDelegationEnData.delegationSetting"></el-input>
                            </el-form-item>
                        </div>
                    </div>
                    <div style="width: 20%;text-align: center;align-self:center;">
                        <el-button type="primary" @click="translation">一键翻译</el-button>
                    </div>
                    <div style="width: 40%;">
                        <div>
                            <el-form-item label="职务(英文):" prop="jobEn" label-width="160px">
                                <el-input clearable placeholder="职务(英文)" v-model="OpDelegationEnData.jobEn">
                                </el-input>
                            </el-form-item>
                        </div>

                        <div>
                            <el-form-item label="团组背景(英文):" prop="delegationSettingEn" label-width="160px">
                                <el-input type="textarea" :rows="3" placeholder="团组背景(英文)"
                                    v-model="OpDelegationEnData.delegationSettingEn"></el-input>
                            </el-form-item>
                        </div>
                    </div>

                </div>
                <el-form-item>
                    <div style="margin-left: 60%;">
                        <el-button type="primary" @click="addBtn">保存</el-button>
                        <router-link to='/home/OfficialActivities'>
                            <el-button>取消</el-button>
                        </router-link>
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
import { el } from '@fullcalendar/core/internal-common'
export default {
    data() {
        return {
            title: "新增请示资料",
            token: '',
            OpDelegationEnData: {
                status: 0,
                id: 0,
                createUserId: 0,
                remark: '',
                area: '',
                job: '',
                jobEn: '',
                delegationSetting: '',
                delegationSettingEn: ''
            },
            OpDelegationEnDataRules: {
                area: [
                    { required: true, message: '该信息为必填信息', trigger: 'blur' },
                    { required: true, message: '该信息为必填信息', trigger: 'change' },
                ],
                job: [
                    { required: true, message: '该信息为必填信息', trigger: 'blur' },
                    { required: true, message: '该信息为必填信息', trigger: 'change' },
                ],
                jobEn: [
                    { required: true, message: '该信息为必填信息', trigger: 'blur' },
                    { required: true, message: '该信息为必填信息', trigger: 'change' },
                ],
                delegationSetting: [
                    { required: true, message: '该信息为必填信息', trigger: 'blur' },
                    { required: true, message: '该信息为必填信息', trigger: 'change' },
                ],
                delegationSettingEn: [
                    { required: true, message: '该信息为必填信息', trigger: 'blur' },
                    { required: true, message: '该信息为必填信息', trigger: 'change' },
                ],
            },
        }
    },

    methods: {

        QueryDelegationEnDataById() {
            var url = "/api/Groups/QueryDelegationEnDataById"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    Id: that.OpDelegationEnData.id,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    var dataList = res.data.data
                    that.OpDelegationEnData.id = dataList.id
                    that.OpDelegationEnData.area = dataList.area
                    that.OpDelegationEnData.job = dataList.job
                    that.OpDelegationEnData.jobEn = dataList.jobEn
                    that.OpDelegationEnData.delegationSetting = dataList.delegationSetting
                    that.OpDelegationEnData.delegationSettingEn = dataList.delegationSettingEn
                }

            })
        },
        translation() {
            const loading = this.$loading({
                lock: true,
                text: '翻译中,请稍后...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            const that = this;
            var url = "/api/SmallFun/GetTranslate"
            that.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    portType: 0,
                    pageIndex: 0,
                    pageSize: 0,
                    from: "zh-CHS",
                    to: "en",
                    txt: "(" + that.OpDelegationEnData.job + ")" + that.OpDelegationEnData.delegationSetting
                }
            }).then(function (res) {

                if (res.data.code == 200) {
                    var TransStr = res.data.data.translation.split(') ');
                    that.OpDelegationEnData.jobEn = TransStr[0].substring(1);
                    that.OpDelegationEnData.delegationSettingEn = TransStr[1]
                    loading.close();

                } else {
                    that.OpDelegationEnData.jobEn = "翻译失败,请自行翻译"
                    that.OpDelegationEnData.delegationSettingEn = "翻译失败,请自行翻译"
                    loading.close();
                }
            })
        },
        addBtn() {
            const that = this;
            if (isNaN(that.OpDelegationEnData.id)) {
                that.OpDelegationEnData.id = 0
            }
            that.$refs.OpDelegationEnData.validate((valid) => {
                if (valid) {
                    var url = "/api/Groups/OpDelegationEnData"
                    this.$axios({
                        method: 'post',
                        url: url,
                        headers: {
                            Authorization: 'Bearer ' + that.token
                        },
                        data: that.OpDelegationEnData
                    }).then(function (res) {

                        if (res.data.code == 200) {
                            that.$message({
                                message: res.data.msg,
                                type: 'success'
                            });
                            setTimeout(() => {
                                that.$router.push('/home/DelegationEnData')
                            }, 3000);
                            that.loading = true;
                        } else {
                            that.$message.error(res.data.msg);
                        }
                    })
                } else {
                    this.$message.error('请完善信息在保存！');
                    return false;
                }
            })
        },
    },

    mounted() {
        debugger
        this.token = JSON.parse(localStorage.getItem('userinif')).token;
        this.OpDelegationEnData.createUserId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId
        this.OpDelegationEnData.id = parseInt(this.$route.query.id)
        if (this.OpDelegationEnData.id != null && this.OpDelegationEnData.id != undefined && this.OpDelegationEnData.id != 0 && !isNaN(this.OpDelegationEnData.id)) {
            this.QueryDelegationEnDataById();
            this.title = "修改请示资料";
            this.OpDelegationEnData.status = 2
        } else {
            this.OpDelegationEnData.status = 1
            this.title = "新增请示资料"
        }

    }
}
</script>
<style>
.communal-list {
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
}

.car_add .communal-title {
    display: flex;
    font-size: 17px;
    font-weight: 600;
    color: #555;
    margin-bottom: 20px;
    justify-content: space-between;
    align-items: center;
}

.appraise-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 50px 0;
}

.appraise-box>div {
    width: 30%;
}

.communal-box {
    display: flex;
}

.communal-box>button {
    margin-left: 10px;
    padding: 8px 20px;
}

.car_add {
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
}

@media screen and (max-width: 1700px) {
    .appraise-box>div {
        width: 48%;
    }

    .appraise-box>div el-form-item__content {
        width: 260px !important;
    }
}
</style>