87 lines
3.0 KiB
Vue
87 lines
3.0 KiB
Vue
<script setup lang="ts">
|
||
import { ref } from "vue";
|
||
import { message } from "@/utils/message";
|
||
import { getToken } from "@/utils/auth";
|
||
const ruleFormRef = ref();
|
||
const formRules = ref({
|
||
is_active: [
|
||
{ required: true, message: "请选择使用状态", trigger: "change" }
|
||
],
|
||
theme_color: [
|
||
{ required: true, message: "请选择主题色", trigger: "change" }
|
||
],
|
||
auxiliary_color: [
|
||
{ required: true, message: "请选择辅助色值", trigger: "change" }
|
||
],
|
||
file_url: [{ required: true, message: "请输入文件地址", trigger: "blur" }],
|
||
times: [
|
||
{ required: true, message: "请选择有效期", trigger: "change" }
|
||
],
|
||
theme_name: [{ required: true, message: "请输入主题名称", trigger: "blur" }],
|
||
});
|
||
const props = defineProps(["formInline"]);
|
||
const newFormInline = ref(
|
||
props.formInline
|
||
? props.formInline
|
||
: {
|
||
theme_name: "",
|
||
theme_color: "",
|
||
auxiliary_color: "",
|
||
file_url: "",
|
||
is_active: 0,
|
||
times: []
|
||
}
|
||
);
|
||
function getRef() {
|
||
return ruleFormRef.value;
|
||
}
|
||
function chanageEditorValue(val) {
|
||
newFormInline.value.content = val
|
||
}
|
||
function onExceed() {
|
||
message("最多上传1个文件，请先删除在上传");
|
||
};
|
||
function handleFileSuccess({ data, code }, file, fileList) {
|
||
// console.log(file)
|
||
// console.log(fileList)
|
||
// debugger
|
||
if (code) {
|
||
fileList.value = fileList.map(ele => { return ele.response.data.url })
|
||
// console.log(fileList.value)
|
||
newFormInline.value.file_url = fileList.value.join(',')
|
||
} else {
|
||
fileList.value = []
|
||
newFormInline.value.file_url = fileList.value.join(',')
|
||
}
|
||
}
|
||
defineExpose({ getRef });
|
||
</script>
|
||
|
||
<template>
|
||
<el-form ref="ruleFormRef" :model="newFormInline" :rules="formRules" label-width="120px">
|
||
<el-form-item label="主题名称" prop="theme_name">
|
||
<el-input v-model="newFormInline.theme_name" placeholder="请输入主题名称"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="主题色色值" prop="theme_color">
|
||
<el-color-picker v-model="newFormInline.theme_color"></el-color-picker>
|
||
</el-form-item>
|
||
<el-form-item label="辅助色值" prop="auxiliary_color">
|
||
<el-color-picker v-model="newFormInline.auxiliary_color"></el-color-picker>
|
||
</el-form-item>
|
||
<el-form-item label="文件地址" prop="file_url">
|
||
<el-input v-model="newFormInline.file_url" placeholder="请输入文件地址"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="有效期" prop="times">
|
||
<el-date-picker format="YYYY-MM-DD" value-format="YYYY-MM-DD" v-model="newFormInline.times" type="daterange"
|
||
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="使用状态" prop="is_active">
|
||
<el-radio-group v-model="newFormInline.is_active">
|
||
<el-radio label="暂不使用" :value="0" />
|
||
<el-radio label="使用" :value="1" />
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</el-form>
|
||
</template>
|