更新

src/views/system/themeManage/form.vue

@@ -0,0 +1,90 @@
+<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>