SmartCommunity/userCenter/src/views/sysManage/appVersionManage/popups/addAppVersionManage.vue

<template>
    <div class="versionPop">
        <zz-form class="add-device-form-style" :cols="formCols" :data="formData" :rules="formRules" labelWidth="120" ref="form">
            <!-- 产品类型 -->
            <el-select slot="productType" v-model="formData.productType" placeholder="请选择产品类型">
                <el-option v-for="(item, index) in productTypes" :key="index" :label="item.label" :value="item.id">{{
                    item.label
                }}</el-option>
            </el-select>
            <!-- 手机系统 -->
            <el-select slot="mobileOS" v-model="formData.mobileOS" placeholder="请选择手机系统">
                <el-option v-for="(item, index) in phoneSystems" :key="index" :value="item.label">{{ item.label }}</el-option>
            </el-select>
            <template slot="updateContent">
                <el-input type="textarea" v-model="formData.remark" rows="5" resize="none"></el-input>
            </template>
            <template slot="isNewestVer">
                <el-radio v-model="formData.isNewestVer" :label="1">是</el-radio>
                <el-radio v-model="formData.isNewestVer" :label="0">否</el-radio>
            </template>
            <template slot="isForcedUpgrade">
                <el-radio v-model="formData.isForcedUpgrade" :label="1">是</el-radio>
                <el-radio v-model="formData.isForcedUpgrade" :label="0">否</el-radio>
            </template>
            <p slot="forcedUpgradeVersionNotice" class="scene-tip-style">
                <span>注：用户版本号＜强制升级版本号，需要强制升级最新版本</span>
            </p>
            <div slot="uploadApk" class="uploadApk">
                <el-input class="uploadinput" slot="tip" v-model="isUpload" :placeholder="isUpload ? '' : isUploadText"></el-input>
                <el-upload
                    name="avatarfile"
                    action="/sc-community/systemConfig/addAppPackage"
                    :headers="token"
                    :show-file-list="true"
                    :limit="1"
                    accept=".apk"
                    :data="uploads"
                    :on-success="(response, file, fileList) => uploadsuccess(response, file, fileList)"
                    :before-upload="beforefileUpload"
                    :on-remove="removeFile"
                >
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
            </div>
        </zz-form>
    </div>
</template>

<script>
export default {
    props: ['params'],
    data() {
        return {
            token: {
                [localStorage.getItem('SC_token') && 'Authorization']: 'Bearer ' + localStorage.getItem('SC_token')
            },
            uploads: {
                filePath: ''
            },
            phoneSystems: [
                {
                    value: 1,
                    label: '安卓'
                },
                {
                    value: 2,
                    label: '苹果'
                }
            ],
            isUpload: '',
            isUploadText: '请上传安装包',
            productTypes: [],
            formData: {
                id: '',
                productType: '',
                mobileOS: '',
                isNewestVer: 1,
                isForcedUpgrade: 1,
                curAppVer: '',
                remark: '',
                forcedUpgradeVer: '',
                download: '',
                verUrl: ''
            },
            formCols: [
                [
                    {
                        label: '产品类型',
                        prop: 'productType',
                        slot: 'productType'
                    },
                    {
                        label: '手机系统',
                        prop: 'mobileOS',
                        slot: 'mobileOS'
                    },
                    {
                        label: '当前版本',
                        prop: 'curAppVer',
                        input: true
                    },
                    {
                        label: '更新内容',
                        prop: 'remark',
                        slot: 'updateContent'
                    },
                    {
                        label: '是否最新版本',
                        prop: 'isNewestVer',
                        slot: 'isNewestVer'
                    },
                    {
                        label: '是否强制升级',
                        prop: 'isForcedUpgrade',
                        slot: 'isForcedUpgrade'
                    },
                    {
                        label: '强制升级版本',
                        prop: 'forcedUpgradeVer',
                        input: true
                    },
                    {
                        prop: 'forcedUpgradeVersionNotice',
                        slot: 'forcedUpgradeVersionNotice'
                    },
                    {
                        label: '上传安装包',
                        prop: 'uploadApk',
                        slot: 'uploadApk'
                    },
                    {
                        label: 'IOS下载地址',
                        prop: 'download',
                        input: true
                    }
                ]
            ],
            formRules: {
                productType: [this.$valid.selectRequired('产品类型')],
                mobileOS: [this.$valid.selectRequired('手机系统')],
                curAppVer: [this.$valid.inputRequired('当前版本'), this.$valid.versionRegular()],
                isNewestVer: [this.$valid.selectRequired('是否最新版本')],
                isForcedUpgrade: [this.$valid.selectRequired('是否强制升级')],
                forcedUpgradeVer: [this.$valid.versionRegular()]
                // uploadApk:[this.$valid.inputPageRequired('上传安装包')]
            }
        };
    },
    watch: {
        isUpload(val) {
            this.isUpload = val;
        }
    },
    methods: {
        removeFile(file) {
            this.isUpload = '';
            this.isUploadText = '请上传安装包';
        },
        beforefileUpload(file) {
            const isApk = file.type === 'application/vnd.android.package-archive';
            const isApkSize = file.size > 0;
            let textfill = '';

            if (!isApk) {
                this.$message.error('上传文件只能是apk格式!');
            }
            if (!isApkSize) {
                this.$message.error('上传文件大小不能为空!');
            }
            if (this.formData.productType === '' || this.formData.curAppVer === '') {
                textfill = false;
                this.$message.error('请先填写完其他信息!');
            } else {
                textfill = true;
                this.isUploadText = '正在上传';
                this.uploads.filePath = `/${this.formData.productType}/${this.formData.curAppVer}/`;
            }
            return isApk && isApkSize && textfill;
        },
        uploadsuccess(res, file, fileList) {
            console.log(res);
            if (res.status === 0) {
                let str = res.data;

                let index = str.lastIndexOf('/');

                str = str.substring(index + 1, str.length);
                this.isUpload = str;
                this.formData.verUrl = res.data;
            } else {
                this.$message.error(res.msg);
            }
        },
        getProductType() {
            this.$http.post('/sc-user-center/dict/selectList', { parentDictCode: 'SYSTEM_PRODUCT_TYPE' }).then(({ status, data, msg }) => {
                if (0 === status) {
                    console.log(data);
                    let datas = [];
                    datas = data.map((item, index) => ({
                        id: item.dictCode,
                        label: item.dictValue
                    }));
                    this.productTypes = datas;
                }
            });
        },
        submit() {
            new Promise((resolve) => {
                this.$refs.form.validate(resolve);
            }).then(() => {
                var loading = this.$loading();
                var posturl = '';
                if (this.params.todo === 'edit') {
                    posturl = '/sc-user-center/verManage/updateVerManage';
                } else {
                    posturl = '/sc-user-center/verManage/addVerManage';
                }
                this.$http
                    .post(posturl, this.formData)
                    .then(({ status, data, msg }) => {
                        loading.close();
                        if (0 == status) {
                            console.log(this.formData);
                            this.$message.success(msg);
                            this.params.callback && this.params.callback();
                            this.$emit('close');
                        } else {
                            this.$message.error(msg);
                        }
                    })
                    .catch((err) => {
                        loading.close();
                    });
            });
        }
    },
    created() {
        this.getProductType();
        if ('edit' === this.params.todo) {
            this.__setValue('formData');
            if (this.params.data.verUrl) {
                let str = this.params.data.verUrl;
                let index = str.lastIndexOf('/');
                str = str.substring(index + 1, str.length);
                this.isUpload = str;
            }
        }
        // this.uploads.filePath = this.formData.productType+"/"+this.formData.curAppVer+"/"
        // this.formData = this.params.data.productTypeName
        // this.formData.id = this.params.data.id?this.params.data.id:this.formData.id;
        // this.formData.productType = this.params.data.productTypeName?this.params.data.productTypeName:this.formData.productType;
        // this.formData.mobileOS = this.params.data.mobileOS?this.params.data.mobileOS:this.formData.mobileOS;
        // this.formData.curAppVer = this.params.data.curAppVer?this.params.data.curAppVer:this.formData.curAppVer;
        // this.formData.remark = this.params.data.remark?this.params.data.remark:this.formData.remark;
        // this.formData.isNewestVer = this.params.data.isNewestVer?this.params.data.isNewestVer:this.formData.isNewestVer;
        // this.formData.isForcedUpgrade = this.params.data.isForcedUpgrade?this.params.data.isForcedUpgrade:this.formData.isForcedUpgrade;
        // this.formData.forcedUpgradeVer = this.params.data.forcedUpgradeVer?this.params.data.forcedUpgradeVer:this.formData.forcedUpgradeVer;
    }
};
</script>

<style lang="scss">
@import '@assets/css/public-style.scss';
.versionPop {
    .uploadinput {
        width: 320px;
        // height: 30px;
        // border:1px solid #d8d8d8;
        // text-indent: 15px;
        // color:#d8d8d8;
        // border-radius: 5px;
    }
}
.el-upload--text {
    width: 80px;
    border: none;
    background: transparent;
    position: absolute;
    top: 0;
    left: 323px;
    .el-button--primary {
        height: 25px;
        line-height: 5px;
    }
}
</style>