配置

src/views/data/config/configItem.vue

@@ -17,7 +17,7 @@
           </el-space>
         </template>
       </BasicTable>
-    <editDialog v-if="editVisible" :configId="configId" :configItemId="configItemId" v-model:visible="editVisible" @success="reloadTable">
+    <editDialog v-if="editVisible" :configId="configId" :configItemId="configItemId" v-model:visible="editVisible" @success="reloadTable('noRefresh')">
     </editDialog>
   </PageWrapper>
 </template>
@@ -83,29 +83,28 @@ const actionColumn = reactive({
 });
 
 
-//刷新字典项值列表
+//刷新配置项值列表
-function reloadTable() {
+function reloadTable(noRefresh='') {
-  tableRef.value.reload({ pageNo: 1 });
+  tableRef.value.reload(noRefresh?{}:{pageNo:1});
 }
-
+//加载配置项值列表
-//加载字典项值列表
 const loadDataTable = async (res) => {
   const result = await getConfigItemList({ ...params.value, configId:props.configId, ...res });
   return result;
 };
-//新建字典
+//新建配置
 const handleAdd = async () => {
   configItemId.value=0
   await nextTick();
   editVisible.value=true
 };
-//编辑字典
+//编辑配置
 const handleEdit = async (record: Recordable) => {
   configItemId.value=record.row.id
   await nextTick();
   editVisible.value=true
 };
-//删除字典项
+//删除配置项
 async function handleDelete(record: Recordable) {
   let ids = []
   if (!record) {

src/views/data/config/editItem.vue

@@ -1,67 +1,97 @@
 <template>
-  <el-dialog
+  <el-dialog v-model="props.visible" :title="props.configItemId ? '编辑配置项' : '新增配置项'" width="500"
-      v-model="props.visible"
+    :close-on-click-modal="false" :before-close="dialogClose">
-      :title="props.configItemId?'编辑配置项':'新增配置项'"
+    <el-form class="ls-form" ref="formRef" :model="formData" label-width="100px">
-      width="500"
+      <el-form-item label="配置项名称" prop="name" :rules="{ required: true, message: '请输入配置项名称', trigger: 'blur' }">
-      :close-on-click-modal="false"
+        <el-input v-model="formData.name" placeholder="请输入配置项名称" clearable />
-      :before-close="dialogClose"
-  >
-    <el-form
-        class="ls-form"
-        ref="formRef"
-        :model="formData"
-        label-width="100px"
-    >
-      <el-form-item
-          label="配置项名称"
-          prop="name"
-          :rules="{ required: true, message: '请输入配置项名称', trigger: 'blur' }"
-      >
-        <el-input
-            class="ls-input"
-            v-model="formData.name"
-            placeholder="请输入配置项名称"
-            clearable
-        />
       </el-form-item>
-      <el-form-item
+      <el-form-item label="配置项编码" prop="code" :rules="{ required: true, message: '请输入配置项编码', trigger: 'blur' }">
-          label="配置项编码"
+        <el-input v-model="formData.code" placeholder="请输入配置项编码" clearable />
-          prop="code"
-          :rules="{ required: true, message: '请输入配置项编码', trigger: 'blur' }"
-      >
-        <el-input
-            class="ls-input"
-            v-model="formData.code"
-            placeholder="请输入配置项编码"
-            clearable
-        />
       </el-form-item>
-      <el-form-item
+
-          label="配置项值"
+      <el-form-item label="配置项类型" prop="type" class="flex-1"
-          prop="value"
+        :rules="{ required: true, message: '请选择配置项类型', trigger: 'change' }">
-      >
+        <el-select v-model="formData.type" class="flex-1" placeholder="请选择配置项类型" @change="handleTypeChange">
-        <el-input
-            class="ls-input"
-            v-model="formData.value"
-            placeholder="请输入配置项值"
-            clearable
-        />
-      </el-form-item>
-      <el-form-item label="配置项类型" prop="type" class="flex-1" :rules="{ required: true, message: '请选择配置项类型', trigger: 'change' }">
-          <el-select v-model="formData.type" class="flex-1" clearable placeholder="请选择配置项类型">
           <el-option v-for="(item, index) in typeList" :key="index" :label="item.name" :value="item.value" />
         </el-select>
       </el-form-item>
-        <el-form-item
+      <el-form-item label="配置项源" prop="options">
-          label="配置项源"
+        <el-icon :size="25" color="#165DFF" style="cursor:pointer;" @click="addOptions"><CirclePlusFilled /></el-icon>
-          prop="options"
+        <div v-for="(item,index) in optionsData" :key="index" style="margin-top:8px;">
-      >
+          <div class="flex item-center">
-        <el-input
+            <el-input v-model="item.name" placeholder="请输入name" clearable />
-            class="ls-input"
+            <div style="margin:0 10px;">-</div>
-            v-model="formData.options"
+            <el-input v-model="item.value" placeholder="请输入value" clearable />
-            placeholder="请输入配置项数据源"
+            <el-icon :size="25" color="#f56c6c" style="cursor:pointer;margin-left:10px;"  @click="delOptions(index)"><RemoveFilled /></el-icon>
-            clearable
+          </div>
-        />
+        </div>
+      </el-form-item>
+      <el-form-item label="配置项值" prop="value">
+        <template
+          v-if="formData.type == 'text' || formData.type == 'readonly' || formData.type == 'textarea' || formData.type == 'password'">
+          <el-input v-model="formData.value"
+            :type="formData.type == 'textarea' ? 'textarea' : (formData.type == 'password' ? 'password' : '')"
+            placeholder="请输入配置项值" clearable />
+        </template>
+        <template v-else-if="formData.type == 'number'">
+          <el-input-number v-model="formData.value" placeholder="请输入配置项值" />
+        </template>
+        <template v-else-if="formData.type == 'icon'">
+          <IconPicker  class="flex-1" v-model="formData.value" />
+        </template>
+        <template v-else-if="formData.type == 'radio'">
+          <el-radio-group v-model="formData.value">
+            <el-radio v-for="(item,index) in optionsData" :value="item.value" :key="index">
+              {{ item.name }}
+            </el-radio>
+          </el-radio-group>
+        </template>
+        <template v-else-if="formData.type == 'checkbox'">
+          <el-checkbox-group v-model="formData.values">
+            <el-checkbox :value="item.value" :key="index" v-for="(item, index) in optionsData">{{ item.name }}</el-checkbox>
+          </el-checkbox-group>
+        </template>
+        <template v-else-if="formData.type == 'select'">
+          <el-select v-model="formData.value">
+            <el-option v-for="(item, index) in optionsData" :key="index" :value="item.value" :label="item.name" />
+          </el-select>
+        </template>
+        <template v-else-if="formData.type == 'selects'">
+          <el-select v-model="formData.values" :multiple="true">
+            <el-option v-for="(item, index) in optionsData" :key="index" :value="item.value" :label="item.name" />
+          </el-select>
+        </template>
+        <template v-else-if="formData.type == 'date' || formData.type == 'datetime'">
+          <el-date-picker  :type="formData.type"
+          placeholder="请选择日期" v-model="formData.value" style="width:100%;"
+          :value-format="formData.type == 'date' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss'"
+          :format="formData.type == 'date' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss'" />
+        </template>
+        <template v-else-if="formData.type  == 'image'">
+              <UploadImg
+                      @changeFileName="(name)=>formData.fileName=name"
+                        :fileType=" ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']"
+                        name="config"
+                        :fileSize="200"
+                        v-model:image-url="formData.filePath">
+                <template v-slot:tip>支持扩展名: jpg png jpeg;文件大小不超过200M</template>
+              </UploadImg>
+            </template>
+            <template v-else-if="formData.type  == 'images'">
+              <UploadImgs @upload="fileUploads" file-type=".jpeg,.png,.jpg,.gif" name="config" 
+              :fileSize="200" :multiple="true" :fileList="formData.fileList"/>
+            </template>
+            <template v-else-if="formData.type  == 'file'">
+              <UploadFile @upload="fileUploadFile" file-type=".xlsx.xls.doc.docx" name="config"
+              :file-list="formData.filePath?[{name:formData.fileName,url:formData.filePath}]:[]"/>
+            </template>
+            <template v-else-if="formData.type  == 'files'">
+              <UploadFile @upload="fileUploads" file-type=".xlsx.xls.doc.docx" name="config" :multiple="true"
+              :file-list="formData.fileList"/>
+            </template>
+            <template v-else-if="formData.type  == 'ueditor'">
+              <Editor ref="editorRef" :height="fwbHeight" class="flex-1" name="config"/>
+            </template>
       </el-form-item>
       <el-form-item label="排序" prop="sort">
         <el-input-number v-model="formData.sort" />
@@ -91,7 +121,12 @@ import type {FormInstance} from "element-plus";
 import { getConfigItemDetail, configItemAdd, configItemUpdate } from "@/api/data/config";
 import { onMounted, ref, reactive, shallowRef } from "vue";
 import { message } from "@/utils/auth";
+import IconPicker from "@/components/icon/picker.vue";
 import { useLockFn } from "@/utils/useLockFn";
+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';
 
 const emit = defineEmits(["success", "update:visible"]);
 const formRef = shallowRef<FormInstance>();
@@ -100,12 +135,18 @@ const formData = reactive({
   name: "",
   code: "",
   value: "",
+  values:[],
+  fileName:'',
+  filePath:'',
+  fileList:[],
   sort: 0,
   options: '',
-  type:'',
+  type: 'text',
   status: 1,
   note: ''
 });
+const fwbHeight=document.body.clientHeight -400
+const optionsData=ref([])
 const typeList = ref([
   {
     name: '隐藏',
@@ -198,9 +239,35 @@ const props = defineProps({
     default: 0
   }
 });
+const handleTypeChange = ()=>{
+  formData.fileList = []
+  formData.fileName = ''
+  formData.filePath = ''
+  formData.values = []
+  formData.value=''
+}
 
 const handleSubmit = async () => {
   await formRef.value?.validate();
+  formData.options = ''
+  optionsData.value.map((item,index)=>{
+    formData.options+=`${item.value}=${item.name}${index<optionsData.value.length-1?',':''}`
+  })
+ 
+  if(formData.type=='checkbox' || formData.type=='selects'){
+    formData.value = formData.values.join(',')
+  }
+  if(formData.type=='image' || formData.type=='file'){
+    formData.value = formData.fileName +'|'+ formData.filePath
+  }
+  if(formData.type=='images' || formData.type=='files'){
+    formData.value =''
+    formData.fileList.map((item,index)=>{
+      formData.value+=`${item.fileName}|${item.filePath}${index<formData.fileList.length-1?',':''}`
+    })
+    
+  }
+  console.log(formData)
   props.configItemId ? await configItemUpdate({ ...formData, configId: props.configId }) : await configItemAdd({ ...formData, configId: props.configId });
   message("操作成功");
   emit("update:visible", false);
@@ -222,8 +289,56 @@ const setFormData = async () => {
       formData[key] = data[key];
     }
   }
+  if(formData.options) {
+    let arr = formData.options.split(',')
+    let kk = []
+    arr.map(item=>{
+      let v = item.split('=')
+      kk.push({name:v[1],value:v[0]})
+    })
+    optionsData.value = kk
+  }
+  if(formData.type=='checkbox' || formData.type=='selects'){
+    if(formData.value) {
+      formData.value = formData.value.split(',')
+      formData.values = formData.value
+    }
+  }
+  if(formData.type=='image' || formData.type=='file'){
+    if(formData.value) {
+      formData.fileName = formData.value.split('|')[0]
+      formData.filePath = formData.value.split('|')[1]
+    }
+  }
+  if(formData.type=='images' || formData.type=='files'){
+    if(formData.value) {
+      let arr =formData.value.split(',')
+      arr.map(item=>{
+        let kk = item.split('|')
+        formData.fileList.push({
+          fileName:kk[0],
+          filePath:kk[1],
+          name:kk[0],
+          url:kk[1]
+        })
+      })
+      console.log(formData.fileList)
+    }
+  }
+};
+const addOptions = ()=>{
+  optionsData.value.push({name:'',value:''})
+}
+const delOptions = (index)=>{
+  optionsData.value.splice(index,1)
+}
+const fileUploads = (list: any) => {
+  formData.fileList = list
+};
+const fileUploadFile = async (filePath: any, fileName: any) => {
+  formData.filePath = filePath;
+  formData.fileName = fileName;
 };
-
 onMounted(() => {
   if (props.configItemId) {
     setFormData();