修改系统设置

src/views/setting/configWeb/BasicSetting.vue

@@ -1,9 +1,10 @@
 <template>
+  <div>
     <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 :label-width="150" :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">
+            :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}`"
@@ -34,7 +35,7 @@
               </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]"
+              <el-date-picker :type="item.type" :placeholder="`请选择${item.name}`" v-model="formData[item.code]" style="width:100%;"
                 :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'">
@@ -62,12 +63,13 @@
               <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>
+    <div class="submit-btn">
+      <el-button type="primary" @click="handleSubmit">更新系统设置</el-button>
+    </div>
+</div>
 </template>
 
 <script lang="ts" setup>
@@ -85,7 +87,12 @@ const props = defineProps({
     type: Array,
     required: true,
     default: []
-  }
+  },
+  activeName: {
+    type: String,
+    required: true,
+    default: ''
+  },
 });
 type FormInstance = InstanceType<typeof ElForm>;
 const editorRef=ref()
@@ -94,6 +101,7 @@ const fwbHeight=document.body.clientHeight -400
 
 const formData = reactive({});
 const configItemList = ref([])
+const emit = defineEmits(['success']);
 
 const handleSubmit = async () => {
   await formRef.value?.validate();
@@ -107,6 +115,7 @@ const handleSubmit = async () => {
   console.log(formData)
   await updateWeb(formData)
   message("更新成功");
+  emit('success',props.activeName)
 };
 const fileUploadImgs = (list: any,index:any) => {
   const code = configItemList.value[index].code
@@ -137,7 +146,7 @@ onMounted(() => {
   configItemList.value = JSON.parse(JSON.stringify(props.dataList))
   nextTick(()=>{
     let ueditorIndex = 0
-    configItemList.value.map((item,index)=>{
+    configItemList.value.map(item=>{
       formData[item.code] = item.value
       if(item.type=='ueditor'){
         if(editorRef.value) {
@@ -150,3 +159,10 @@ onMounted(() => {
 
 });
 </script>
+<style lang="scss" scoped>
+.submit-btn {
+  position: fixed;
+  bottom: 50px;
+  right: 4%;
+}
+</style>

src/views/setting/configWeb/index.vue

@@ -3,7 +3,7 @@
     <el-card shadow="never" size="small" class="proCard tabsCard">
       <el-tabs v-model="activeName" v-if="tabData.length>0">
         <el-tab-pane :name="item.configName" :label="item.configName" v-for="(item,index) in tabData" :key="index">
-          <BasicSetting :dataList="item.dataList" v-if="activeName==item.configName"/>
+          <BasicSetting :dataList="item.dataList" v-if="activeName==item.configName" @success="getReshTabData" :activeName="activeName"/>
         </el-tab-pane>
       </el-tabs>
     </el-card>
@@ -17,7 +17,7 @@
   const activeName = ref();
   const tabData=ref([])
 
-  const getTabData = async () => {
+  const getTabData = async (name) => {
     let res = await getWebInfo();
     res.map(item=>{
       item.dataList.map(sub=>{
@@ -54,7 +54,10 @@
       })
     })
     tabData.value = res
-    activeName.value=tabData.value[0].configName
+    activeName.value=name?name:tabData.value[0].configName
+  }
+  const getReshTabData = (name)=>{
+    getTabData(name)
   }
   onMounted(()=>{
     getTabData()