qimall/backend/modules/admin/views/expire-notice/index.php

<div id="app" v-cloak>
    <el-card class="box-card" v-loading="loading" shadow="never" style="border:0;min-width: 1200px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div class="form_box">
            <template>
                <el-card>
                    <el-form :model="ruleForm" size="small" ref="ruleForm" label-width="160px">
                        <el-tabs v-model="activeName">
                            <el-tab-pane label="证书提醒" name="certificate">
                                <el-form-item label="是否开启提醒">
                                    <el-col :span="12">
                                        <el-switch v-model="ruleForm.certificate.open_notice" :active-value="1" :inactive-value="0"></el-switch>
                                    </el-col>
                                </el-form-item>
                                <el-form-item label="ADMIN证书到期时间">
                                    <el-col :span="12">
                                        <el-date-picker type="date" v-model="ruleForm.certificate.admin_expire_date" value-format="yyyy-MM-dd"></el-date-picker>
                                    </el-col>
                                </el-form-item>
                                <el-form-item label="API证书到期时间">
                                    <el-col :span="12">
                                        <el-date-picker type="date" v-model="ruleForm.certificate.api_expire_date" value-format="yyyy-MM-dd"></el-date-picker>
                                    </el-col>
                                </el-form-item>
                                <el-form-item label="H5证书到期时间">
                                    <el-col :span="12">
                                        <el-date-picker type="date" v-model="ruleForm.certificate.h5_expire_date" value-format="yyyy-MM-dd"></el-date-picker>
                                    </el-col>
                                </el-form-item>
                                <el-form-item label="发薪猫H5证书到期时间" v-if="isInstallSalary">
                                    <el-col :span="12">
                                        <el-date-picker type="date" v-model="ruleForm.certificate.salary_h5_expire_date" value-format="yyyy-MM-dd"></el-date-picker>
                                    </el-col>
                                </el-form-item>
                                <el-form-item label="STATIC证书到期时间">
                                    <el-col :span="12">
                                        <el-date-picker type="date" v-model="ruleForm.certificate.static_expire_date" value-format="yyyy-MM-dd"></el-date-picker>
                                    </el-col>
                                </el-form-item>
                                <el-form-item label="证书" prop="ssl_path">
                                    <el-col :span="8">
                                        <el-input placeholder="请输入内容" v-model="ruleForm.certificate.ssl_path" disabled>
                                            <template slot="append">
                                            <el-upload
                                                action="/index.php?r=admin/file/upload"
                                                multiple
                                                :show-file-list="false"
                                                accept=".zip"
                                                :on-success="handleAvatarSuccess"
                                            >
                                                <el-button>点击上传</el-button>
                                            </el-upload>
                                            </template>
                                        </el-input>
                                    </el-col>
                                </el-form-item>
                            </el-tab-pane>
                            <el-tab-pane label="服务器提醒" name="server">
                                <el-form-item label="是否开启提醒">
                                    <el-col :span="12">
                                        <el-switch v-model="ruleForm.server.open_notice" :active-value="1" :inactive-value="0"></el-switch>
                                    </el-col>
                                </el-form-item>
                                <el-form-item label="到期时间">
                                    <el-col :span="12">
                                        <el-date-picker type="date" v-model="ruleForm.server.expire_date" value-format="yyyy-MM-dd"></el-date-picker>
                                    </el-col>
                                </el-form-item>
                            </el-tab-pane>
                            
                        </el-tabs>
                        <el-button :loading="btnLoading" type="primary" @click="submit" size="small">保 存</el-button>
                    </el-form>
                </el-card>
            </template>
        </div>
    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                btnLoading: false,
                activeName: 'certificate',
                ruleForm: {
                    certificate: {
                        open_notice: 0,
                        admin_expire_date: '',
                        api_expire_date: '',
                        h5_expire_date: '',
                        static_expire_date: '',
                        ssl_path: '',
                    },
                    server: {
                        open_notice: 0,
                        expire_date: '',
                    },
                },
                isInstallSalary: <?= $isInstallSalary ?>,
            }
        },
        mounted: function() {
            this.loadData()
        },
        methods: {
            loadData() {
                this.$request({
                    params: {
                        r: 'admin/expire-notice/index',
                    },
                    method: 'get',
                }).then(e => {
                    this.btnLoading = false;
                    if (e.data.code === 0) {
                        this.ruleForm = {...this.ruleForm, ...e.data.data}
                    } else {
                        this.$message.error(e.data.msg);
                    }
                })
            },
            submit() {
                this.$request({
                    params: {
                        r: 'admin/expire-notice/submit',
                    },
                    method: 'post',
                    data: this.ruleForm
                }).then(e => {
                    this.btnLoading = false;
                    if (e.data.code === 0) {
                        this.$message.success(e.data.msg);
                    } else {
                        this.$message.error(e.data.msg);
                    }
                })
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            handleAvatarSuccess(res, file) {
                if (res.code == 0) {
                    // let url = URL.createObjectURL(file.raw)
                    let url = res.data.path
                    this.ruleForm.certificate.ssl_path = url
                    console.log(this.ruleForm);
                } else {
                    this.$message.error(res.msg);
                }
            },
        }
    });
</script>