系统设置

src/api/data/config.ts

@@ -10,6 +10,13 @@ export function getConfigList(params?) {
     params,
   });
 }
+export function getConfigAllList(params?) {
+  return http.request({
+    url: '/config/list',
+    method: 'GET',
+    params,
+  });
+}
 /**
  * @description: 根据ID获取详情
  */
@@ -19,15 +26,6 @@ export function getConfigDetail(id) {
     method: 'get',
   });
 }
-/**
- * @description: 刷新缓存
- */
-export function refreshCache() {
-  return http.request({
-    url: '/config/refreshCache',
-    method: 'get',
-  });
-}
 /**
  * @description: 添加配置
  */
@@ -78,6 +76,13 @@ export function getConfigItemList(params?) {
     params,
   });
 }
+export function getConfigItemAllList(params?) {
+  return http.request({
+    url: '/config/item/list',
+    method: 'GET',
+    params,
+  });
+}
 /**
  * @description: 根据ID获取详情
  */

src/components/Upload/Images.vue

@@ -131,7 +131,7 @@ const handleHttpUpload = async (options: UploadRequestOptions) => {
           fileName: res.fileName
         })
       }
-      emit('upload', list)
+      emit('upload', list,props.zIndex)
     } else {
       emit("upload", res, props.zIndex);
     }
@@ -142,7 +142,7 @@ const handleHttpUpload = async (options: UploadRequestOptions) => {
       type: "error"
     });
     if (props.multiple) {
-      emit('upload', props.fileList)
+      emit('upload', props.fileList,props.zIndex)
     } else {
       uploadRef.value!.clearFiles();
       emit("upload", "", props.zIndex);
@@ -166,7 +166,7 @@ const handleEdit = (index: any) => {
 const handleRemove = (index: any) => {
   editIndex = index
   if (props.multiple) {
-    emit("upload", props.fileList.filter((f, i) => !(editIndex == i)))
+    emit("upload", props.fileList.filter((f, i) => !(editIndex == i)),props.zIndex)
   } else {
     uploadRef.value!.clearFiles();
     emit("upload", "" ,props.zIndex);
@@ -255,9 +255,10 @@ const beforeUpload: UploadProps["beforeUpload"] = (rawFile) => {
 .upload-box {
   position: relative;
   display: flex;
-
+  flex-wrap: wrap;
   >div {
     margin-right: 10px;
+    margin-bottom: 10px;
     position: relative;
 
     &.items {

src/components/Upload/file.vue

@@ -38,7 +38,7 @@
     <template #tip>
       <template v-if="!isBtn">
         <div v-if="props.fileType" class="el-upload__tip">支持扩展名：{{ props.fileType }}</div>
-        <div v-if="props.multiple" class="el-upload__tip">最多上传{{props.limit}}个文件</div>
+        <div v-if="props.multiple && props.limit" class="el-upload__tip">最多上传{{props.limit}}个文件</div>
       </template>
     </template>
   </el-upload>
@@ -72,7 +72,7 @@ const props = defineProps({
   },
   limit: {
     type: Number,
-    default: 2
+    default: undefined
   },
   fileList: {
     type: Array,
@@ -124,7 +124,7 @@ const handleHttpUpload = async (options: UploadRequestOptions) => {
         filePath: res.fileUrl,
         fileName:  res.fileName,
       })
-      emit('upload', list)
+      emit('upload', list,props.zIndex)
     }else{
       emit("upload", res.fileUrl,res.fileName,props.zIndex);
     }
@@ -135,7 +135,7 @@ const handleHttpUpload = async (options: UploadRequestOptions) => {
       type: "error"
     });
     if(props.multiple){
-      emit('upload', props.fileList)
+      emit('upload', props.fileList,props.zIndex)
     }else{
       uploadRef.value!.clearFiles();
       emit("upload", "", "",props.zIndex);
@@ -152,7 +152,7 @@ const onPreview=(uploadFile: UploadFile)=> {
 
 const handleRemove: UploadProps["onRemove"] = (file:any) => {
   if(props.multiple){
-    emit("upload",props.fileList.filter((f) => !(f === file.url)))
+    emit("upload",props.fileList.filter((f) => !(f === file.url)),props.zIndex)
   }else{
     uploadRef.value!.clearFiles();
     emit("upload", "", "", props.zIndex);

src/views/data/config/columnsItem.ts

@@ -69,6 +69,7 @@ export const columns = [
           break;
         case 'file':
           typeText='单个文件'
+          break;
         case 'files':
           typeText='多个文件'
           break;

src/views/setting/configWeb/BasicSetting.vue

@@ -1,52 +1,69 @@
 <template>
   <el-row :gutter="20">
     <el-col :xs="24" :sm="20" :md="14" :lg="12" :xl="8">
-      <el-form
+      <el-form label-position="top" :label-width="80" :model="formData" ref="formRef">
-        label-position="top"
+        <el-form-item v-for="(item, index) in configItemList.filter(item => item.type != 'hidden')" :key="index"
-        :label-width="80"
+          :label="item.name" :prop="item.code">
-        :model="formValue"
+          <template
-        :rules="rules"
+            v-if="item.type == 'text' || item.type == 'readonly' || item.type == 'textarea' || item.type == 'password'">
-        ref="formRef"
+            <el-input v-model="formData[item.code]" :placeholder="`请输入${item.name}`"
-      >
+              :type="item.type == 'textarea' ? 'textarea' : (item.type == 'password' ? 'password' : '')"
-        <el-form-item label="网站名称" prop="name">
+              :readonly="item.type == 'readonly'" />
-          <el-input v-model="formValue.name" placeholder="请输入网站名称" />
+          </template>
-        </el-form-item>
+          <template v-else-if="item.type == 'number'">
-
+            <el-input-number v-model="formData[item.code]" :placeholder="`请输入${item.name}`" />
-        <el-form-item label="备案编号" prop="icpCode">
+          </template>
-          <el-input placeholder="请输入备案编号" v-model="formValue.icpCode" />
+          <template v-else-if="item.type=='icon'">
-        </el-form-item>
+            <IconPicker class="flex-1" v-model="formData[item.code]"/>
-
+          </template>
-        <el-form-item label="联系电话" prop="mobile">
+          <template v-else-if="item.type == 'radio'">
-          <el-input placeholder="请输入联系电话" v-model="formValue.mobile" />
+            <el-radio-group v-model="formData[item.code]" :name="item.code">
-        </el-form-item>
+              <el-radio v-for="(value, key) in item.param" :label="key" :key="key">
-
+                {{ value }}
-        <el-form-item label="联系地址" prop="address">
+              </el-radio>
-          <el-input v-model="formValue.address" type="textarea" placeholder="请输入联系地址" />
-        </el-form-item>
-
-        <el-form-item label="登录验证码" prop="loginCode">
-          <el-radio-group v-model="formValue.loginCode" name="loginCode">
-            <el-space>
-              <el-radio :value="1">开启</el-radio>
-              <el-radio :value="0">关闭</el-radio>
-            </el-space>
             </el-radio-group>
+          </template>
+          <template v-else-if="item.type == 'checkbox'">
+            <el-checkbox-group v-model="formData[item.code]" :name="item.code">
+              <el-checkbox :label="key" :key="key" v-for="(value, key) in item.param">{{ value }}</el-checkbox>
+            </el-checkbox-group>
+          </template>
+          <template v-else-if="item.type == 'select' || item.type == 'selects'">
+            <el-select v-model="formData[item.code]" :multiple="item.type == 'selects'">
+              <el-option v-for="(value, key) in item.param" :key="key" :value="key" :label="value" />
+            </el-select>
+          </template>
+          <template v-else-if="item.type == 'date' || item.type == 'datetime'">
+            <el-date-picker :type="item.type" :placeholder="`请选择${item.name}`" v-model="formData[item.code]"
+              :value-format="item.type == 'date'?'YYYY-MM-DD':'YYYY-MM-DD HH:mm:ss'" :format="item.type == 'date'?'YYYY-MM-DD':'YYYY-MM-DD HH:mm:ss'" />
+          </template>
+          <template v-else-if="item.type == 'image'">
+            <UploadImg
+                       :fileType=" ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']"
+                       name="setting"
+                       :fileSize="200"
+                       v-model:image-url="formData[item.code]">
+              <template v-slot:tip>支持扩展名: jpg png jpeg;文件大小不超过200M</template>
+            </UploadImg>
+          </template>
+          <template v-else-if="item.type == 'images'">
+            <UploadImgs @upload="fileUploadImgs" file-type=".jpeg,.png,.jpg,.gif" name="setting" 
+            :fileSize="200" :multiple="true" :fileList="item.filePath" :z-index="index"/>
+          </template>
+          <template v-else-if="item.type == 'file'">
+            <UploadFile @upload="fileUploadFile" file-type=".xlsx.xls.doc.docx" name="setting"
+            :file-list="formData[item.code]?[{name:item.fileName,url:item.filePath}]:[]" :z-index="index"/>
+          </template>
+          <template v-else-if="item.type == 'files'">
+            <UploadFile @upload="fileUploadFiles" file-type=".xlsx.xls.doc.docx" name="setting" :multiple="true"
+            :file-list="item.filePath" :z-index="index"/>
+          </template>
+          <template v-else-if="item.type == 'ueditor'">
+            <Editor ref="editorRef" :height="fwbHeight" class="flex-1"/>
+          </template>
         </el-form-item>
-
-        <el-form-item label="网站开启访问" prop="systemOpen">
-          <el-switch size="large" v-model="formValue.systemOpen" @change="systemOpenChange" />
-        </el-form-item>
-
-        <el-form-item label="网站关闭提示" prop="closeText">
-          <el-input
-            v-model="formValue.closeText"
-            type="textarea"
-            placeholder="请输入网站关闭提示"
-          />
-        </el-form-item>
-
         <el-form-item>
-          <el-button type="primary" @click="formSubmit(formRef)">更新基本信息</el-button>
+          <el-button type="primary" @click="handleSubmit">更新基本信息</el-button>
         </el-form-item>
       </el-form>
     </el-col>
@@ -54,63 +71,82 @@
 </template>
 
 <script lang="ts" setup>
-  import { reactive, ref } from 'vue';
+import { reactive, ref, onMounted,nextTick } from 'vue';
-  import { ElMessageBox, ElMessage } from 'element-plus';
+import { message } from "@/utils/auth";
 import type { ElForm } from 'element-plus';
-
+import Editor from '@/components/Editor/tinymce.vue'
+import UploadImg from '@/components/Upload/Image.vue';
+import UploadImgs from '@/components/Upload/Images.vue';
+import UploadFile from '@/components/Upload/file.vue';
+import IconPicker from "@/components/icon/picker.vue";
+import { updateWeb } from '@/api/setting/web';
+const props = defineProps({
+  dataList: {
+    type: Array,
+    required: true,
+    default: []
+  }
+});
 type FormInstance = InstanceType<typeof ElForm>;
-
+const editorRef=ref()
 const formRef = ref<FormInstance>();
+const fwbHeight=document.body.clientHeight -400
 
-  const rules = {
+const formData = reactive({});
-    name: {
+const configItemList = ref([])
-      required: true,
+
-      message: '请输入网站名称',
+const handleSubmit = async () => {
-      trigger: 'blur',
+  await formRef.value?.validate();
-    },
+  let ueditorIndex = 0
-    mobile: {
+  configItemList.value.map(item=>{
-      required: true,
+      if(item.type=='ueditor'){
-      message: '请输入联系电话',
+        formData[item.code] = editorRef.value[ueditorIndex].myValue
-      trigger: 'input',
+        ueditorIndex++
-    },
+      }
+  })
+  console.log(formData)
+  await updateWeb(formData)
+  message("更新成功");
+};
+const fileUploadImgs = (list: any,index:any) => {
+  const code = configItemList.value[index].code
+  formData[code] = []
+  configItemList.value[index].filePath = []
+  list.map(item=>{
+    formData[code].push(item.filePath)
+    configItemList.value[index].filePath.push({filePath:item.filePath})
+  })
+};
+const fileUploadFile = async (filePath: any, fileName: any,index:any) => {
+  const code = configItemList.value[index].code
+  formData[code] = filePath?`${fileName}|${filePath}`:''
+  configItemList.value[index].filePath = filePath
+  configItemList.value[index].fileName = fileName
+};
+const fileUploadFiles = (list: any,index:any) => {
+  const code = configItemList.value[index].code
+  configItemList.value[index].filePath = []
+  formData[code] = []
+  list.map(item=>{
+    formData[code].push(`${item.name}|${item.url}`)
+    configItemList.value[index].filePath.push({name:item.name,url:item.url})
+  })
 };
 
-  const formValue = reactive({
+onMounted(() => {
-    name: '',
+  configItemList.value = JSON.parse(JSON.stringify(props.dataList))
-    mobile: '',
+  nextTick(()=>{
-    icpCode: '',
+    let ueditorIndex = 0
-    address: '',
+    configItemList.value.map((item,index)=>{
-    loginCode: 0,
+      formData[item.code] = item.value
-    closeText:
+      if(item.type=='ueditor'){
-      '网站维护中，暂时无法访问！本网站正在进行系统维护和技术升级，网站暂时无法访问，敬请谅解！',
+        if(editorRef.value) {
-    systemOpen: true,
+          editorRef.value[ueditorIndex].myValue=item.value
-  });
+          ueditorIndex++
-
+        }
-  function systemOpenChange(value) {
+      }
-    if (!value) {
-      ElMessageBox.confirm('您确定要关闭系统访问吗？该操作立马生效，请慎重操作！', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
     })
-        .then(() => {
-          ElMessage.success('操作成功');
   })
-        .catch(() => {
-          formValue.systemOpen = true;
-        });
-    }
-  }
 
-  function formSubmit(formEl: FormInstance | undefined) {
-    if (!formEl) return;
-    formEl.validate((valid) => {
-      if (valid) {
-        console.log('submit!');
-        ElMessage.success('验证成功');
-      } else {
-        ElMessage.error('验证失败，请填写完整信息');
-      }
 });
-  }
 </script>

src/views/setting/configWeb/index.vue

@@ -1,23 +1,64 @@
 <template>
   <PageWrapper>
     <el-card shadow="never" size="small" class="proCard tabsCard">
-      <el-tabs v-model="activeName">
+      <el-tabs v-model="activeName" v-if="tabData.length>0">
-        <el-tab-pane name="basic" label="基本设置">
+        <el-tab-pane :name="item.configName" :label="item.configName" v-for="(item,index) in tabData" :key="index">
-          <BasicSetting />
+          <BasicSetting :dataList="item.dataList" v-if="activeName==item.configName"/>
         </el-tab-pane>
-        <el-tab-pane name="reveal" label="显示设置"><RevealSetting /></el-tab-pane>
-        <el-tab-pane name="email" label="邮件设置"><EmailSetting /></el-tab-pane>
       </el-tabs>
     </el-card>
   </PageWrapper>
 </template>
 <script lang="ts" setup>
-  import { ref } from 'vue';
+  import { ref,onMounted } from 'vue';
+  import { getWebInfo } from '@/api/setting/web';
   import { PageWrapper } from '@/components/Page';
   import BasicSetting from './BasicSetting.vue';
-  import RevealSetting from './RevealSetting.vue';
+  const activeName = ref();
-  import EmailSetting from './EmailSetting.vue';
+  const tabData=ref([])
-  const activeName = ref('basic');
+
+  const getTabData = async () => {
+    let res = await getWebInfo();
+    res.map(item=>{
+      item.dataList.map(sub=>{
+        if(sub.type=='checkbox' || sub.type=='selects'){
+          const values = sub.value.split(',')
+          sub.value =values
+        }
+        if(sub.type=='images'){
+          sub.filePath = []
+          sub.value = []
+          if(sub.valueList && sub.valueList.length) {
+            sub.valueList.map(path=>{
+              sub.filePath.push({filePath:path})
+              sub.value.push(path)
+            })
+          }
+        }
+        if(sub.type=='file'){
+          let files = sub.value?.split('|')
+          sub.fileName = files[0]
+          sub.filePath = files[1]
+        }
+        if(sub.type=='files'){
+          sub.filePath = []
+          sub.value = []
+          if(sub.valueList && sub.valueList.length) {
+            sub.valueList.map(path=>{
+              let files = path.split('|')
+              sub.filePath.push({name:files[0],url:files[1]})
+              sub.value.push(`${files[0]}|${files[1]}`)
+            })
+          }
+        }
+      })
+    })
+    tabData.value = res
+    activeName.value=tabData.value[0].configName
+  }
+  onMounted(()=>{
+    getTabData()
+  })
 </script>
 <style lang="scss" scoped>
   .thing-cell {

src/views/setting/profile/BasicSetting.vue

@@ -100,9 +100,17 @@
   const data = await getUserInfo();
   for (const key in formData) {
     if (data[key] != null && data[key] != undefined) {
+      if(key=='city'){
+        if(data.city.length>0){
+          formData[key] = [parseInt(data.city[0]),parseInt(data.city[1]),parseInt(data.city[2]),parseInt(data.city[3])];
+        }else{
+          formData[key] =''
+        }
+      }else{
         formData[key] = data[key];
       }
     }
+  }
 };
   onMounted(() => {
     setUserInfo()