164 lines
4.5 KiB
Vue
164 lines
4.5 KiB
Vue
<template>
|
|
<div class="add-switch-box">
|
|
<el-dialog
|
|
:title="title"
|
|
:visible.sync="dialogVisible"
|
|
width="400px"
|
|
:before-close="handleClose"
|
|
:close-on-click-modal="false"
|
|
:modal-append-to-body="false"
|
|
>
|
|
<el-form ref="form" :model="params" :rules="rules" label-width="100px">
|
|
<el-form-item label="模块名称:" prop="name">
|
|
<el-input v-model="params.name" size="small" placeholder="请输入名称"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="模块排序:" prop="sortNum">
|
|
<el-input v-model.number="params.sortNum" size="small" placeholder="请输入排序"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="模块类型:" prop="type">
|
|
<el-select v-model="params.type" size="small" placeholder="请选择类型" clearable>
|
|
<el-option
|
|
v-for="item in typeList"
|
|
:value="item.value"
|
|
:label="item.label"
|
|
:key="item.value"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="状态:" prop="status">
|
|
<el-select v-model="params.status" size="small" placeholder="请选择样式" clearable>
|
|
<el-option
|
|
v-for="item in statusList"
|
|
:value="item.value"
|
|
:label="item.label"
|
|
:key="item.value"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button @click="handleClose" size="small">取 消</el-button>
|
|
<el-button type="primary" @click="submitForm('form')" size="small">确 认</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import voteApi from "@/api/ai";
|
|
export default {
|
|
data() {
|
|
return {
|
|
dialogVisible: false,
|
|
title: "",
|
|
// 新增页面所需要数组
|
|
operType: "add",
|
|
params: {
|
|
id: "",
|
|
name: "",
|
|
sortNum: "",
|
|
status: "",
|
|
type: ""
|
|
},
|
|
typeList: [
|
|
{ label: "AI视频换脸", value: 1 },
|
|
{ label: "AI图片换脸", value: 2 },
|
|
],
|
|
statusList: [
|
|
{ label: "开启", value: 1 },
|
|
{ label: "关闭", value: 2 },
|
|
],
|
|
rules: {
|
|
name: [
|
|
{ required: true, message: "请输入名称", trigger: "blur" },
|
|
],
|
|
sortNum: [
|
|
{ required: true, message: "请输入排序", trigger: "blur" },
|
|
],
|
|
type: [
|
|
{ required: true, message: "请选择类型", trigger: "change" },
|
|
],
|
|
status: [
|
|
{ required: true, message: "请选择状态", trigger: "change" },
|
|
],
|
|
}
|
|
};
|
|
},
|
|
methods: {
|
|
// 表单验证提交
|
|
submitForm() {
|
|
this.$refs.form.validate(valid => {
|
|
if (valid) {
|
|
if (this.operType === "edit") {
|
|
this.edit();
|
|
} else {
|
|
this.add();
|
|
}
|
|
} else {
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
edit() {
|
|
voteApi.updateTemplate(this.params).then(res => {
|
|
if (res.code === 200) {
|
|
this.$message({
|
|
message: "编辑成功",
|
|
type: "success"
|
|
});
|
|
this.$emit("reloadpage");
|
|
} else {
|
|
this.$message.error("编辑失败,请重试");
|
|
}
|
|
this.handleClose();
|
|
});
|
|
},
|
|
add() {
|
|
voteApi.addTemplate(this.params).then(res => {
|
|
if (res.code === 200) {
|
|
this.$message({
|
|
message: "添加成功",
|
|
type: "success"
|
|
});
|
|
this.$emit("reloadpage");
|
|
} else {
|
|
this.$message.error("添加失败,请重试");
|
|
}
|
|
this.handleClose();
|
|
});
|
|
},
|
|
// 关闭弹窗
|
|
handleClose() {
|
|
this.dialogVisible = false;
|
|
this.params.id = "";
|
|
this.params.name = "";
|
|
this.params.sortNum = "";
|
|
this.params.status = "";
|
|
this.params.type = "";
|
|
this.$refs.form.resetFields();
|
|
},
|
|
open(type, param) {
|
|
// eslint-disable-next-line no-console
|
|
this.dialogVisible = true;
|
|
this.operType = type;
|
|
if (type === "edit") {
|
|
this.title = "编辑";
|
|
this.params.id = param.id;
|
|
this.params.name = param.name;
|
|
this.params.sortNum = param.sortNum;
|
|
this.params.status = param.status;
|
|
this.params.type = param.type;
|
|
} else {
|
|
this.title = "新增";
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
/deep/ .el-form-item__error {
|
|
left: 100px;
|
|
}
|
|
</style>
|