wms-elevue/src/views/setting/configWeb/BasicSetting.vue

<template>
  <el-row :gutter="20">
    <el-col :xs="24" :sm="20" :md="14" :lg="12" :xl="8">
      <el-form label-position="top" :label-width="80" :model="formData" ref="formRef">
        <el-form-item v-for="(item, index) in configItemList.filter(item => item.type != 'hidden')" :key="index"
          :label="item.name" :prop="item.code">
          <template
            v-if="item.type == 'text' || item.type == 'readonly' || item.type == 'textarea' || item.type == 'password'">
            <el-input v-model="formData[item.code]" :placeholder="`请输入${item.name}`"
              :type="item.type == 'textarea' ? 'textarea' : (item.type == 'password' ? 'password' : '')"
              :readonly="item.type == 'readonly'" />
          </template>
          <template v-else-if="item.type == 'number'">
            <el-input-number v-model="formData[item.code]" :placeholder="`请输入${item.name}`" />
          </template>
          <template v-else-if="item.type=='icon'">
            <IconPicker class="flex-1" v-model="formData[item.code]"/>
          </template>
          <template v-else-if="item.type == 'radio'">
            <el-radio-group v-model="formData[item.code]" :name="item.code">
              <el-radio v-for="(value, key) in item.param" :label="key" :key="key">
                {{ value }}
              </el-radio>
            </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>
          <el-button type="primary" @click="handleSubmit">更新基本信息</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted,nextTick } from 'vue';
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 formData = reactive({});
const configItemList = ref([])

const handleSubmit = async () => {
  await formRef.value?.validate();
  let ueditorIndex = 0
  configItemList.value.map(item=>{
      if(item.type=='ueditor'){
        formData[item.code] = editorRef.value[ueditorIndex].myValue
        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})
  })
};

onMounted(() => {
  configItemList.value = JSON.parse(JSON.stringify(props.dataList))
  nextTick(()=>{
    let ueditorIndex = 0
    configItemList.value.map((item,index)=>{
      formData[item.code] = item.value
      if(item.type=='ueditor'){
        if(editorRef.value) {
          editorRef.value[ueditorIndex].myValue=item.value
          ueditorIndex++
        }
      }
    })
  })

});
</script>