platformFront/src/components/safeControl/AddToken.vue

<!-- 添加常见科室症状  -->
<template>
    <div class="AddTokenWrapper">
        <crumbs
          :title="'令牌发放-'+titleText"
          class="topBack"
          :param="$route.params"
          linkTo="TokenControl"
        ></crumbs>
        <el-form ref="ruleForm"  class="addDepartForm" label-width="160px">
            <el-form-item  class="addDepartFormItem isRequired" label="服务器秘钥：">
                <!-- <input class="searchInput" type="text" v-model = "equipNum">  -->
               
                <el-input
                type="textarea"
                :autosize ="{minRows: 2}"
                placeholder="请输入内容"
                @blur="tokenAnalysis"
                v-model.trim="equipNum">
                </el-input>
                 <!-- <el-button
                    type="primary"
                    class="analysis"
                    @click="tokenAnalysis"
                    >解析</el-button> -->
            </el-form-item>
            <el-form-item class="isRequired" label="服务商：">
                 <el-input v-model.trim="server" placeholder="请输服务商"></el-input>
            </el-form-item>
             <el-form-item class="isRequired" label="医院：" >
                <el-input v-model.trim="hospital" placeholder="请输医院"></el-input>
            </el-form-item>
             
             <el-form-item class="isRequired" label="cpu：" >
                {{this.cpu}}
            </el-form-item>
            <el-form-item  label="ip：">
                {{this.ip}}
            </el-form-item>
            <el-form-item  label="主板：">
                {{this.mainboard}}
            </el-form-item>
            <el-form-item  label="硬盘：">
                {{this.disk}}
            </el-form-item>
            <el-form-item class="isRequired" label="使用天数（天）：" >
                <el-input v-model.trim="remainDay" onkeyup="value=value.replace(/[^\d]/g,'')" placeholder="请输入使用天数" type='text' min = '0'></el-input>
            </el-form-item>
            <el-form-item class="isRequired" label="有效时间（分钟）：" >
                <el-input v-model.trim="validTime" onkeyup="value=value.replace(/[^\d]/g,'')" placeholder="请输入有效时间" type='text' min = '0'></el-input>
            </el-form-item>
            <el-form-item  label="登录Key：" v-if="isEdit" >
                {{this.loginKey}}
            </el-form-item>
            <el-form-item label="备注：">
                <el-input v-model.trim="remark" 
                  type="textarea"
                 :autosize ="{minRows: 2}"
                placeholder="请输备注"></el-input>
            </el-form-item>
        </el-form>
        <div class="btn">
            <el-button
            type="primary"
            :disabled = 'saveDisable'
            @click="submitForm"
            >确 定</el-button>
        </div>
    </div>
    
</template>

<script>
  import api from '@api/safeControl.js';
  export default {
    name: 'AddToken',
    data() {
        return{
            titleText: '添加令牌',
            modifier: '', //操作人
            id: '',
            equipNum:'',
            remainDay: '',
            remark: '',
            server: '',
            hospital: '',
            cpu: '',
            mainboard: '',
            validTime: 30,
            disk: '',
            ip: '',
            loginKey: '',
            isEdit: false,
            saveDisable: false
           
        }
    },
    created(){
        const { isEdit, data } = this.$route.params;
        const userLoginDTO = JSON.parse(localStorage.getItem('userLoginDTO'))
        this.modifier = userLoginDTO && userLoginDTO.linkman
        if(isEdit) {
            if(isEdit) {
                this.isEdit = isEdit;
                this.titleText = '修改令牌';
                this.id = data.id
                this.equipNum = data.content
                this.remainDay = data.remainDay
                this.remark = data.remark
                this.server = data.server
                this.hospital = data.hospital
                this.cpu = data.cpu
                this.mainboard = data.mainboard
                this.validTime = data.validTime
                this.disk = data.disk
                this.ip = data.ip
                this.loginKey = data.loginKey
            } 
        } else {
            
        }
    },
    watch: {
       
    },
    methods: {
       
        back(){
            this.$router.go(-1);
        },
      
        submitForm() {
             if(!this.equipNum || !this.hospital || !this.server || !this.cpu || !this.remainDay || !this.validTime) {
                this.warning('请输入必填项！')
                return
            }
            this.showDelDialog()
        },
        tokenAnalysis() {
            const param = {
                content: this.equipNum
            }
            api.tokenAnalysis(param).then(res =>{
                if(res.data.code == '0') {
                    const data = res.data.data
                    this.mainboard = data['server.mainboard']
                    this.cpu = data['server.cpu']
                    this.disk = data['server.disk']
                }
            })
        },
        showDelDialog() {
           
            this.showConfirmDialog('是否生成该令牌？', () => {
                const param = {
                    id: this.id,
                    creator: this.modifier,
                    server: this.server,
                    hospital: this.hospital,
                    cpu: this.cpu,
                    remainDay: this.remainDay,
                    mainboard: this.mainboard,
                    disk: this.disk,
                    ip: this.ip,
                    remark: this.remark,
                    content: this.equipNum,
                    validTime: this.validTime
                }
                if(this.id) {
                    param.loginKey = this.loginKey
                }
                this.saveDisable = true  //提交保存按钮不可点击，返回结果时才可点击，防止频繁发送请求
                api.tokenSaveOrUpdate(param).then((res) => {
                if (res.data.code  === '0') {
                    this.warning(res.data.msg || '生成成功', 'success','1000')
                    setTimeout(() => {
                      //返回带搜索条件的首页
                    this.$router.push({
                        name:'TokenControl',
                      params: Object.assign({}, this.$route.params, {currentPage: 1})
                    })
                    }, 1000);
                } else {
                    this.warning(res.data.msg)
                }
                this.saveDisable = false
                }).catch((err) => {
                    this.warning(err);
                })
            });
        },
        showConfirmDialog(msg, resolve) {
            this.$alert(msg, '提示', {
                confirmButtonText: '确定',
                type: 'warning'
            }).then(() => {
                resolve();
            }).catch(() => {});
        },
        warning(msg, type,time) {
            this.$message({
                showClose: true,
                message: msg,
                type: type || 'warning',
                duration:time || '3000'
            })
        },
        handleInp(e){ //分组不能输入负数
            const value =  e;
            this.remainDay = value.replace(/\./g,'');
            console.log(this.remainDay)
            // e = value.replace(/[^\d]/g,'');
            // this.remainDay = value.replace(/[^\d]/g,'');
        }
    }
  }
</script>

<style lang="less">
    @import '../../less/common.less';
    .AddTokenWrapper {
        color: #606266;
        .topBack {
            top: 0;
        }
        .analysis{
            margin-top: 20px;
        }
        .searchInput, .searchName {
            display: inline-block;
            height: 32px;
            line-height: 32px;
            border: 1px solid #a9a9a9;
            margin: 0px 0 0 0;
            padding: 0 5px;
            float: left;
            margin-top: 4px;
        }
        .isRequired .el-form-item__label::before {
            content: '*';
            color: red;
        }
        .searchName {
            border-left: none;
            cursor: pointer;
            font-size: 16px;
            padding: 0 14px;
        }
        .addDepartForm {
            position: relative;
            background-color: #fff;
            padding: 20px;
            margin: 70px 20px 0px 20px;
            border-bottom: 1px solid #c0c4cc;
        }
        .addDepartFormItem {
            position: relative;
        }
        .symptomList {
            background-color: #fff;
             padding: 20px;
             margin: 0px 20px 0px 20px;
             min-height: 400px;
        }
        .btn {
            position: relative;
            background-color: #fff;
            margin: 0px 20px;
            height: 40px;
            padding: 20px;
            .el-button {
                position: absolute;
                right: 20px;
            }
        }
        .selectDepart {
            
        }
    }
    
</style>