From a5597938f535551f36980a87c9b3989a4babcf28 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E7=BA=A2=E4=B8=BD?= <1181930680@qq.com>
Date: Wed, 24 Jul 2024 10:49:01 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=B3=BB=E7=BB=9F=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/setting/configWeb/BasicSetting.vue | 158 ++++++++++---------
 src/views/setting/configWeb/index.vue        |   9 +-
 2 files changed, 93 insertions(+), 74 deletions(-)

diff --git a/src/views/setting/configWeb/BasicSetting.vue b/src/views/setting/configWeb/BasicSetting.vue
index a4d8b77..7cb990c 100644
--- a/src/views/setting/configWeb/BasicSetting.vue
+++ b/src/views/setting/configWeb/BasicSetting.vue
@@ -1,73 +1,75 @@
 <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>
+  <div>
+    <el-row :gutter="20">
+      <el-col :xs="24" :sm="20" :md="14" :lg="12" :xl="8">
+        <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">
+            <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]" 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'">
+              <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>
+      </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>
diff --git a/src/views/setting/configWeb/index.vue b/src/views/setting/configWeb/index.vue
index bcea7fe..67ae94b 100644
--- a/src/views/setting/configWeb/index.vue
+++ b/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()