91 lines
2.8 KiB
Vue
91 lines
2.8 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" }
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
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
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
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-upload
|
|||
|
|
class="upload-demo"
|
|||
|
|
drag
|
|||
|
|
:limit="1"
|
|||
|
|
name="files"
|
|||
|
|
accept=".zip"
|
|||
|
|
:headers="{ Authorization: getToken().accessToken }"
|
|||
|
|
action="/adminapi/UploadFile/file_upload"
|
|||
|
|
:on-exceed="onExceed"
|
|||
|
|
:on-success="handleFileSuccess"
|
|||
|
|
>
|
|||
|
|
<i class="el-icon-upload"></i>
|
|||
|
|
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
|||
|
|
</el-upload>
|
|||
|
|
</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>
|