验证，组件优化，样式优化等

magic-boot-ui/src/components/magic/advanced/mb-form.vue

@@ -69,8 +69,7 @@
     var data = {}
     props.form.rows.forEach(row => {
       row.cols.forEach(col => {
-        // data[col.name] = col.defaultValue === null ? col.defaultValue : col.defaultValue || ''
-        data[col.name] = undefined
+        data[col.name] = col.defaultValue || undefined
       })
     })
     return data

magic-boot-ui/src/components/magic/basic/mb-search.vue

@@ -92,9 +92,17 @@ function reset() {
   for(var key in props.where){
     if(props.notReset.indexOf(key) == -1){
       if(props.where[key] instanceof Object){
-        props.where[key].value = null
+        if(props.where[key].value instanceof Array){
+          props.where[key].value = []
+        }else{
+          props.where[key].value = null
+        }
       }else{
-        props.where[key] = null
+        if(props.where[key] instanceof Array){
+          props.where[key] = []
+        }else{
+          props.where[key] = null
+        }
       }
     }
   }

magic-boot-ui/src/components/magic/basic/mb-table-column.vue

@@ -15,13 +15,15 @@
         {{ $common.getDictLabel(col.dictType, scope.row[col.field] + '') }}
       </span>
       <slot v-else-if="col.type == 'dynamic'" :name="col.field" :row="scope.row" :index="scope.$index" />
-      <el-switch
-        v-else-if="col.type == 'switch'"
-        v-model="scope.row[col.field]"
-        :active-value="col.activeValue || 1"
-        :inactive-value="col.inactiveValue || 0"
-        @change="col.change(scope.row)"
-      />
+      <div v-else-if="col.type == 'switch'">
+        <el-switch
+            v-if="col.if === undefined ? true : col.if(scope.row)"
+            v-model="scope.row[col.field]"
+            :active-value="col.activeValue || 1"
+            :inactive-value="col.inactiveValue || 0"
+            @change="col.change(scope.row)"
+        />
+      </div>
       <div v-else-if="col.type == 'btns'">
         <template v-for="btn in col.btns">
           <el-button v-if="btn.if === undefined ? true : btn.if(scope.row)" :icon="btn.icon" :key="btn.label" v-permission="btn.permission" :type="btn.type" :size="btn.size || 'small'" :class="btn.class" @click="btn.click(scope.row, scope.$index)">

magic-boot-ui/src/components/magic/basic/mb-table.vue

@@ -118,18 +118,22 @@ function getList() {
   } else {
     newWhere.size = 99999999
   }
-  request({
-    url: props.url,
-    method: props.method,
-    params: newWhere,
-    data: newWhere
-  }).then(res => {
+  var then = (res) => {
     const { data } = res
     total.value = data.total
     list.value = data.list
     listLoading.value = false
     props.done()
-  })
+  }
+  if(props.method.toLowerCase() == 'post'){
+    proxy.$post(props.url, newWhere).then(res => {
+      then(res)
+    })
+  }else{
+    proxy.$get(props.url, newWhere).then(res => {
+      then(res)
+    })
+  }
 }
 
 function sortChange(column) {

magic-boot-ui/src/components/magic/form/mb-checkbox-group.vue

@@ -1,6 +1,6 @@
 <template>
   <el-checkbox-group
-    v-model="modelValue"
+    v-model="selectValue"
     :size="size"
     :disabled="disabled"
     :min="min"
@@ -9,25 +9,24 @@
     :fill="fill"
     @change="change"
   >
-    <el-checkbox-button v-if="button" v-for="it in options" v-bind="it" :label="it[valueField]">
+    <el-checkbox-button v-if="button" v-for="it in checkboxOptions" v-bind="it" :label="it[valueField]">
       {{ it[labelField] }}
     </el-checkbox-button>
-    <el-checkbox v-if="!button" v-for="it in options" v-bind="it" :label="it[valueField]">
+    <el-checkbox v-if="!button" v-for="it in checkboxOptions" v-bind="it" :label="it[valueField]">
       {{ it[labelField] }}
     </el-checkbox>
   </el-checkbox-group>
 </template>
 
 <script setup>
-import {watch, ref, getCurrentInstance} from "vue";
+  import {watch, ref, getCurrentInstance, onMounted} from "vue";
   import request from '@/scripts/request'
   const emit = defineEmits(['update:modelValue', 'change'])
   const { proxy } = getCurrentInstance()
 
   const props = defineProps({
     modelValue: {
-      type: Array,
-      default: () => []
+      required: true
     },
     type: String,
     button: {
@@ -36,7 +35,7 @@ import {watch, ref, getCurrentInstance} from "vue";
     },
     options: Array,
     url: String,
-    params: Object,
+    data: Object,
     method: {
       type: String,
       default: 'get'
@@ -63,31 +62,72 @@ import {watch, ref, getCurrentInstance} from "vue";
     fill: {
       type: String,
       default: '#409EFF'
+    },
+    join: {
+      type: Boolean,
+      default: true
     }
   })
 
-  const options = ref([])
+  const selectValue = ref([])
+  const checkboxOptions = ref([])
 
-  if(props.type){
-    options.value = proxy.$common.getDictType(props.type)
-  }else if(props.url){
-    request({
-      url: props.url,
-      method: props.method,
-      params: props.params,
-      data: props.params
-    }).then(res => {
-      options.value = res.data.list || res.data
-    })
-  }else if(props.options){
-    options.value = props.options
+  watch(() => [props.type, props.url, props.options], () => {
+    loadData()
+  }, { deep: true })
+
+  watch(() => props.modelValue, (value) => {
+    setValue(value)
+  })
+
+  watch(selectValue, (value) => {
+    if(props.join){
+      emit('update:modelValue', value.join(','))
+      emit('change', value.join(','))
+    }else{
+      emit('update:modelValue', value)
+      emit('change', value)
+    }
+  })
+
+  onMounted(() => {
+    loadData()
+  })
+
+  function setValue(value){
+    if(value){
+      if(props.join){
+        selectValue.value = value.split(',')
+      }else{
+        selectValue.value = value
+      }
+    }
+  }
+
+  function loadData(){
+    if(props.type){
+      checkboxOptions.value = proxy.$common.getDictType(props.type)
+      setValue(props.modelValue)
+    }else if(props.url){
+      if(props.method.toLowerCase() == 'post'){
+        proxy.$post(props.url, props.data).then(res => {
+          checkboxOptions.value = res.data.list || res.data
+          setValue(props.modelValue)
+        })
+      }else{
+        proxy.$get(props.url, props.data).then(res => {
+          checkboxOptions.value = res.data.list || res.data
+          setValue(props.modelValue)
+        })
+      }
+    }else if(props.options){
+      checkboxOptions.value = props.options
+      setValue(props.modelValue)
+    }
   }
 
   function change(value){
     emit('change', value)
   }
 
-  watch(() => props.modelValue, (value) => {
-    emit('update:modelValue', value)
-  })
 </script>

magic-boot-ui/src/components/magic/form/mb-radio-group.vue

@@ -31,7 +31,7 @@
     },
     options: Array,
     url: String,
-    params: Object,
+    data: Object,
     method: {
       type: String,
       default: 'get'
@@ -64,14 +64,18 @@
   if(props.type){
     options.value = proxy.$common.getDictType(props.type)
   }else if(props.url){
-    request({
-      url: props.url,
-      method: props.method,
-      params: props.params,
-      data: props.params
-    }).then(res => {
+    var then = (res) => {
       options.value = res.data.list || res.data
-    })
+    }
+    if(props.method.toLowerCase() == 'post'){
+      proxy.$post(props.url, props.data).then(res => {
+        then(res)
+      })
+    }else{
+      proxy.$get(props.url, props.data).then(res => {
+        then(res)
+      })
+    }
   }else if(props.options){
     options.value = props.options
   }

magic-boot-ui/src/components/magic/form/mb-select.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-select v-if="mbType === 'select'" v-model="selectValue" v-bind="el" :style="{ width }" :placeholder="placeholder || '请选择'" filterable clearable>
+  <el-select v-model="selectValue" v-bind="props.props" :multiple="multiple" :style="{ width }" :placeholder="placeholder || (itemLabel && '请输入' + itemLabel)" filterable clearable>
     <el-option
       v-for="item in selectList"
       :key="item.value"
@@ -7,11 +7,6 @@
       :value="item.value"
     />
   </el-select>
-  <el-radio-group v-if="mbType === 'radio'" v-model="selectValue">
-    <el-radio v-for="item in selectList" :key="item.value" :label="item.value">
-      {{ item.label }}
-    </el-radio>
-  </el-radio-group>
 </template>
 
 <script setup>
@@ -23,25 +18,16 @@ const { proxy } = getCurrentInstance()
 const emit = defineEmits(['update:modelValue', 'change'])
 
 const props = defineProps({
-  data: {
-    type: Array,
-    default: () => []
+  modelValue: {
+    required: true
   },
   type: {
     type: String,
     default: ''
   },
-  // eslint-disable-next-line vue/require-prop-types
-  modelValue: {
-    required: true
-  },
-  width: {
-    type: String,
-    default: '100%'
-  },
-  allOption: {
-    type: Boolean,
-    default: false
+  options: {
+    type: Array,
+    default: () => []
   },
   url: {
     type: String,
@@ -59,72 +45,77 @@ const props = defineProps({
     type: String,
     default: 'value'
   },
-  mbType: {
-    type: String,
-    default: 'select'
-  },
-  el: {
+  props: {
     type: Object,
     default: () => {}
   },
+  width: {
+    type: String,
+    default: '100%'
+  },
+  allOption: {
+    type: Boolean,
+    default: false
+  },
   placeholder: {
     type: String,
     default: ''
+  },
+  itemLabel: String,
+  multiple: {
+    type: Boolean,
+    default: false
+  },
+  join: {
+    type: Boolean,
+    default: true
   }
 })
 
 const selectList = ref([])
-const selectValue = ref('')
+const selectValue = ref(props.multiple ? [] : '')
 
-watch(() => props.type, () => {
-  if (props.modelValue instanceof Array || props.modelValue.toString().indexOf(',') !== -1) {
-    selectValue.value = []
-  } else {
-    selectValue.value = ''
-  }
+watch(() => [props.type, props.url, props.options], () => {
   loadData()
-})
+}, { deep: true })
 
-watch(() => props.modelValue, () => {
-  loadData()
+watch(() => props.modelValue, (value) => {
+  setValue(value)
 })
 
 watch(selectValue, (value) => {
-  if (props.el && props.el.multiple && value.length > 0) {
-    value = value.join(',')
+  if(props.multiple && props.join){
+    emit('update:modelValue', value.join(','))
+    emit('change', value.join(','))
+  }else{
+    emit('update:modelValue', value)
+    emit('change', value)
   }
-  emit('update:modelValue', value)
-  emit('change', value)
 })
 
 onMounted(() => {
   loadData()
 })
 
-async function loadData() {
-  if (props.modelValue || props.modelValue == '') {
-    if ((!(props.modelValue instanceof Array) && props.modelValue.toString().indexOf(',') !== -1)) {
-      selectValue.value = props.modelValue.split(',')
-    } else {
-      if (props.el && props.el.multiple && !(props.modelValue instanceof Array)) {
-        selectValue.value = [props.modelValue]
-      } else {
-        selectValue.value = props.modelValue
-      }
-    }
-  } else {
-    if (props.el && props.el.multiple) {
-      selectValue.value = []
+function setValue(value){
+  if(value){
+    if(props.multiple && props.join){
+      selectValue.value = value.split(',')
+    }else{
+      selectValue.value = value
     }
   }
-  if (props.data && props.data.length > 0) {
-    listConcat(handlerData(props.data))
-  } else if (props.url) {
+}
+
+function loadData() {
+  if(props.type){
+    listConcat(proxy.$common.getDictType(props.type))
+  }else if(props.url){
     proxy.$get(props.url, props.params).then(res => {
       listConcat(handlerData(res.data.list || res.data))
     })
-  } else {
-    listConcat(proxy.$common.getDictType(props.type))
+  }else if(props.options && props.options.length > 0){
+    listConcat(handlerData(props.options))
   }
 }
 
@@ -138,6 +129,7 @@ function listConcat(dictData) {
   } else {
     selectList.value = dictData
   }
+  setValue(props.modelValue)
 }
 
 function handlerData(data) {