simulation-front/src/views/systemManagement/clusteringDetail.vue

<!--新增、编辑、查看集群信息-->
<template>
    <div>
        <el-form
            ref="form"
            :model="form"
            :rules="rules"
            label-width="200px"
            class="flexBox"
        >
            <div class="formItemBox">
                <el-form-item label="账户名称:" prop="userName">
                    <el-input
                        placeholder="请输入"
                        disabled
                        v-model="form.userName"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="独占类型:" prop="useType">
                    <!--<el-select v-model="form.useType" disabled>
                        <el-option
                            v-for="item in useTypeList"
                            :label="item.caption"
                            :value="item.code"
                            :key="item.code"
                        ></el-option>
                    </el-select>-->
                    <el-input
                        placeholder="请输入"
                        disabled
                        v-model="form.useType"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="仿真软件license数量:" prop="numSimulationLicense">
                    <el-input
                        placeholder="请输入"
                        maxlength="20"
                        v-autoTrim="{ obj: form, key: 'numSimulationLicense' }"
                        v-model="form.numSimulationLicense"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="到期时间:" prop="dateSimulationLicense">
                    <el-date-picker
                        v-model="form.dateSimulationLicense"
                        type="date"
                        placeholder="选择日期"
                        value-format="yyyy-MM-dd"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="动力学软件license数量:" prop="numDynamicLicense">
                    <el-input
                        placeholder="请输入"
                        maxlength="20"
                        v-autoTrim="{ obj: form, key: 'numDynamicLicense' }"
                        v-model="form.numDynamicLicense"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="到期时间:" prop="dateDynamicLicense">
                    <el-date-picker
                        v-model="form.dateDynamicLicense"
                        type="date"
                        placeholder="选择日期"
                        value-format="yyyy-MM-dd"
                    ></el-date-picker>
                </el-form-item>
            </div>
        </el-form>
        <div class="title">历史记录</div>
        <tableList
            ref="table"
            style="width:60%;min-width: 900px;margin: auto;"
            :columns="columns"
            :getDataWay="getDataWay"
            index
        >   
        </tableList>
        <div class="btns">
            <el-button type="primary" @click="save">保存</el-button>
            <el-button type="primary" plain @click="cancel">取消</el-button>
        </div>
    </div>
</template>

<script>
import tableList from "@/components/grid/TableList";

export default {
    name: "clusteringDetail",
    components: {tableList},
    data() {
        return {
            useTypeList: [],
            getDataWay:{
                dataType: "url",
                type: "post",
                firstRequest: false,
                data: this.$api.systemManagement.getClusterHistory,
                param: {
                    //userId: this.$route.query.userId
                },
            },
            columns: [
                //表格列
                {
                    label: "仿真软件license",
                    prop: "numSimulationLicense",
                },
                {
                    label: "到期时间",
                    prop: "dateSimulationLicense",
                    formatter:(data)=>{
                        return data.dateSimulationLicense.slice(0,10)
                    }
                },
                {
                    label: "动力学软件license",
                    prop: "numDynamicLicense",
                },
                {
                    label: "到期时间",
                    prop: "dateDynamicLicense",
                    formatter:(data)=>{
                        return data.dateDynamicLicense.slice(0,10)
                    }
                },
                {
                    label: "操作时间",
                    prop: "modifyTime",
                    formatter:(data)=>{
                        return this.$timeFormatter(data.modifyTime)
                    }
                }
            ],
            form: {
                userName:"",
                useType: "",
                id: "",
                userId: "",
                numSimulationLicense: "",
                dateSimulationLicense: "",
                numDynamicLicense: "",
                dateDynamicLicense: ""
            },
            rules: {
                numSimulationLicense: [{ required: true, message: "请输入", trigger: "blur" }],
                dateSimulationLicense: [{ required: true, message: "请选择", trigger: "blur" }],
                numDynamicLicense: [{ required: true, message: "请输入", trigger: "blur" }],
                dateDynamicLicense: [{ required: true, message: "请选择", trigger: "blur" }]
            }
        };
    },
    created(){
        if(this.$route.query.userId){
            this.form = {...this.$route.query}
            delete this.form.modifyTime
        }
    },
    async mounted() {
        if(this.$route.query.userId){
            this.getDataWay.param = {
                userId: this.$route.query.userId
            }
            this.$refs.table.loadData()
        }
        await this.$dicsListsInit({
            useTypeList: "useType"
        });
    },
    computed: {},
    methods: {
        save(){
            this.$refs.form.validate(valid=>{
                if(valid){
                    this.$axios({
                        method:"POST",
                        url:this.$api.systemManagement.saveCluster,
                        data:{
                            ...this.form
                        }
                    }).then(res=>{
                        if(res.code == 200){
                            this.$message.success("保存成功");
                            this.cancel()
                        }else{
                            this.$message.error(res.message || "保存失败");
                        }
                    })
                }
            }) 
        },
        cancel(){
            this.$router.replace({path: '/clusteringManagement'})
        },
    },
};
</script>

<style lang="less" scoped>
.el-form {
    width: 60%;
    min-width: 900px;
    padding-top: 60px;
    margin: 0 auto;

    .formItemBox {
        flex: 1;

        /deep/ .el-input,
        .el-select {
            width: 100%;
        }
    }

    .el-textarea {
        height: 96px;
    }
}

.btns {
    padding-top: 30px;
    text-align: center;
}
.title {
    width: 60%;
    min-width: 900px;
    margin: 4px auto;
    border-left: 6px solid @themeColor;
    padding-left: 20px;
    color: @themeColor;
    font-size: 16px;
    font-weight: bold;
}

</style>