<template>
<el-dialog
:visible="checkModelShow"
@close="cancel"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
class="init-dialog"
>
<el-steps :active="current" align-center class="mb30">
<el-step title="系统初始化" icon="el-icon-s-help"></el-step>
<el-step title="组织机构模板选择" icon="el-icon-s-grid"></el-step>
<el-step title="建立组织机构" icon="el-icon-finished"></el-step>
</el-steps>
<el-form v-show="showStep1" label-width="200px">
<el-form-item label="数据库连接:">
<el-input v-model="connect" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="数据库用户名:">
<el-input v-model="username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="数据库密码:">
<el-input type="password" v-model="password" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<el-form v-show="showStep2">
<el-form-item class="radio-btn-list">
<el-radio-group v-model="editOuModelInitInfo.templateModelCode">
<el-radio-button
v-for="(item, index) in ouModelTemplates"
:value="item.templateModelCode"
:key="index"
:label="item.name"
/>
</el-radio-group>
</el-form-item>
</el-form>
<el-form v-show="showStep3" label-width="200px">
<el-form-item label="组织机构名称:">
<el-input v-model="editOuModelInitInfo.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="组织机构编号:">
<el-input v-model="editOuModelInitInfo.modelCode" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="initSystem" v-show="showStep1">系统初始化</el-button>
<el-button @click="previous" v-show="showStep3">上一步</el-button>
<el-button @click="next" v-show="!showStep3&&!showStep1">下一步</el-button>
<el-button type="primary" v-if="showStep3" @click="confirm()">确 定</el-button>
</span>
</el-dialog>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import moment, { months } from "moment";
import { Form } from "element-ui";
import { State, Getter, Action, Mutation, namespace } from "vuex-class";
import { OuModelTemplate } from "@/@types/ou/model/organization/OuModelTemplate";
import { OuNode } from "@/@types/ou/model/organization/OuNode";
import { OuModelInitInfo } from "@/@types/ou/model/organization/OuModelInitInfo";
@Component
export default class EditTemplate extends Vue {
@State ouModelTemplates!: OuModelTemplate[];
@State rootNodes!: OuNode[];
current: number = 1;
checkModelShow: boolean = true;
connect: string = "";
username: string = "";
password: string = "";
fullscreenLoading: boolean = false;
editOuModelInitInfo: OuModelInitInfo = this.newOuModelInitInfo();
next() {
if (this.current < 3) {
this.current++;
}
}
previous() {
if (this.current > 2) {
this.current--;
}
}
get showStep1() {
if (this.current === 1) {
return true;
} else {
return false;
}
}
get showStep2() {
if (this.current === 2) {
return true;
} else {
return false;
}
}
get showStep3() {
if (this.current === 3) {
return true;
} else {
return false;
}
}
newOuModelInitInfo(): OuModelInitInfo {
return {
modelCode: "",
name: "",
templateModelCode: ""
};
}
// initSystem() {
// const loading = this.$loading({
// lock: true,
// text: 'Loading',
// spinner: 'el-icon-loading',
// background: 'rgba(0, 0, 0, 0.7)'
// });
// setTimeout(() => {
// loading.close();
// this.current++;
// }, 2000);
// }
initSystem() {
this.current++;
}
get validateRules() {
let rules: any = {
name: [{ required: true, message: "请填写名称", trigger: "blur" }],
radio: [{ required: true, message: "请选择模板", trigger: "blur" }]
};
return rules;
}
confirm() {
this.ouModelTemplates.forEach(m => {
if (m.name == this.editOuModelInitInfo.templateModelCode) {
this.editOuModelInitInfo.templateModelCode = m.templateModelCode;
}
});
this.$store.dispatch("saveInitInfo", this.editOuModelInitInfo);
this.checkModelShow = false;
}
cancel() {
this.checkModelShow = false;
}
}
</script>
vue步骤框代码
最新推荐文章于 2024-06-19 12:16:18 发布