mb-list mb-form mb-xxx等统一请求方法列表(post) 保存(post) 删除(delete) 详情(get) 等

2026-05-15 00:00:02 +08:00 · 2022-03-08 00:56:23 +08:00
parent 0f4095a564
commit 3114b2c205
58 changed files with 1017 additions and 351 deletions
@@ -49,6 +49,12 @@ body{
 .toolbar-container{
  margin-bottom: 10px
 }
+.toolbar-container > div{
+  margin-left: 10px;
+}
+.toolbar-container > div:nth-child(1){
+  margin-left: 0px;
+}
 .clear{
  clear: both;
 }
@@ -1,9 +1,9 @@
 import { defineAsyncComponent } from 'vue'

-const components = import.meta.glob('./*/*.vue')
+const components = import.meta.glob('./**/*.vue')
 export default function install (app) {
  for (const [key, value] of Object.entries(components)) {
    const name = key.substring(key.lastIndexOf('/') + 1, key.lastIndexOf('.'))
    app.component(name, defineAsyncComponent(value))
  }
-}
+}
@@ -0,0 +1,114 @@
+<template>
+  <el-form
+    ref="dataForm"
+    :rules="rules"
+    :model="formData"
+    v-bind="form.props"
+  >
+    <el-row v-for="(row,i) in form.rows" :key="i" :gutter="row.gutter">
+      <el-col v-for="(col,j) in row.cols" :key="j" :span="col.span" v-bind="col.colProps">
+        <el-form-item :label="col.label" :label-width="col.labelWidth" :prop="col.name" v-bind="col.formItemProps">
+          <component
+            :is="!col.component ? 'mb-input' : col.component.startsWith('el-') ? col.component : 'mb-' + col.component"
+            v-model="formData[col.name]"
+            :label="col.label"
+            v-bind="col.props"
+          />
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script setup>
+  import {ref, reactive, getCurrentInstance, defineExpose } from 'vue'
+  const { proxy } = getCurrentInstance()
+  const rules = reactive(getRules())
+  const formData = ref(getFormData())
+  const dataForm = ref()
+  const props = defineProps({
+    form: {
+      type: Object,
+      default: () => {}
+    },
+    detail: {
+      type: Object,
+      default: () => {}
+    }
+  })
+  const emit = defineEmits(['reload-table'])
+
+  props.form.props = props.form.props || {}
+  proxy.$common.setDefaultValue(props.form.props, 'labelPosition', 'right')
+  proxy.$common.setDefaultValue(props.form.props, 'labelWidth', '120px')
+
+  if(props.detail.formData){
+    if(props.detail.handlerFormData){
+      props.detail.handlerFormData(props.detail.formData)
+    }
+    formData.value = props.detail.formData
+  }
+
+  if(props.detail.request){
+
+  }
+
+  function getRules(){
+    var _rules = {}
+    props.form.rows.forEach(row => {
+      row.cols.forEach(col => {
+        if (col.rules) {
+          _rules[col.name] = col.rules
+        }
+      })
+    })
+    return _rules
+  }
+
+  function getFormData() {
+    var data = {}
+    props.form.rows.forEach(row => {
+      row.cols.forEach(col => {
+        data[col.name] = col.defaultValue === null ? col.defaultValue : col.defaultValue || ''
+      })
+    })
+    return data
+  }
+
+  function save(d) {
+    dataForm.value.validate((valid) => {
+      if (valid) {
+        d.loading()
+        proxy.$post(props.form.request.url, formData.value).then(res => {
+          d.hideLoading()
+          proxy.$notify({
+            title: '成功',
+            message: (!formData.value.id ? '创建' : '修改') + '成功',
+            type: 'success',
+            duration: 2000
+          })
+          if(props.detail.formData){
+            props.detail.formData = {}
+          }
+          d.hide()
+          emit('reload-table')
+        }).catch(() => d.hideLoading())
+      }
+    })
+  }
+
+  function getDetail(id) {
+    formData.value.id = id
+    proxy.$get(props.detail.request.url, { id: id }).then(res => {
+      const { data } = res
+      for (var t in formData.value) {
+        if (data[t] && (!props.detail.excludeAssign || props.detail.excludeAssign.indexOf(t) === -1)) {
+          formData.value[t] = data[t]
+        }
+      }
+    })
+  }
+
+  defineExpose({ save, getDetail })
+
+</script>
@@ -0,0 +1,56 @@
+<template>
+  <div class="app-container">
+
+    <mb-search v-if="table.where" :where="table.where" :no-reset="search.noReset" @search="reload" />
+
+    <el-row class="toolbar-container">
+      <div v-for="(it, i) in tools" :key="i">
+        <el-button v-if="it.type == 'add'" v-permission="it.permission" class="filter-item" type="primary" icon="ElPlus" @click="it.click">
+          {{ it.label || '添加' }}
+        </el-button>
+        <mb-button v-if="it.type == 'delete'" v-permission="it.permission" :el="{ plain: true }" :request-url="it.url" :btn-type="'delete'" :request-data="{ id: ids }" :after-handler="reload" />
+      </div>
+    </el-row>
+
+    <mb-table ref="tableRef" v-bind="table" @selection-change="selectionChange" />
+
+  </div>
+</template>
+
+<script setup>
+  import { ref, defineExpose } from 'vue'
+  const tableRef = ref()
+  const ids = ref([])
+
+  const props = defineProps({
+    search: {
+      type: Object,
+      default: () => {}
+    },
+    tools: {
+      type: Array,
+      default: () => []
+    },
+    table: {
+      type: Object,
+      default: () => {}
+    }
+  })
+
+  props.tools.forEach(it => {
+    if(it.type == 'delete'){
+      props.table.selection = true
+    }
+  })
+
+  function reload(){
+    tableRef.value.reloadList()
+  }
+
+  function selectionChange(columns) {
+    ids.value = columns.map(it => it['id']).join(',')
+  }
+
+  defineExpose({ reload })
+
+</script>
@@ -9,6 +9,7 @@

 <script>
 import { getToken } from '@/scripts/auth'
+import {ElNotification} from "element-plus";

 export default {
  name: 'MbButton',
@@ -70,11 +71,11 @@ export default {
  created() {
    if (this.btnType) {
      if (this.btnType === 'delete') {
-        this.requestMethod_ = 'post'
+        this.requestMethod_ = 'delete'
        this.el_.type = 'danger'
        this.el_.text = '删除'
        this.el_.icon = 'ElDelete'
-        this.beforeConfirm_ = '确定删除吗？'
+        this.beforeConfirm_ = '此操作将永久删除该数据, 是否继续?'
        this.successTips_ = '删除成功！'
        this.failTips_ = '删除失败！'
      }
@@ -109,33 +110,25 @@ export default {
        })
      }
      return new Promise((resolve, reject) => {
-        if (this.requestMethod_ === 'get') {
-          this.$get(this.requestUrl, this.requestData).then(res => {
-            const { data } = res
-            if (data) {
-              this.$message({
-                type: 'success',
-                message: this.successTips_
-              })
-            } else {
-              this.$message.error(this.failTips_)
-            }
-            resolve()
-          })
-        } else {
-          this.$post(this.requestUrl, this.requestData).then(res => {
-            const { data } = res
-            if (data) {
-              this.$message({
-                type: 'success',
-                message: this.successTips_
-              })
-            } else {
-              this.$message.error(this.failTips_)
-            }
-            resolve()
-          })
-        }
+        this.$request({
+          url: this.requestUrl,
+          method: this.requestMethod_,
+          params: this.requestData,
+          data: this.requestData
+        }).then(res => {
+          const { data } = res
+          if (data) {
+            ElNotification({
+              title: '成功',
+              message: this.successTips_,
+              type: 'success',
+              duration: 2000
+            })
+          } else {
+            this.$message.error(this.failTips_)
+          }
+          resolve()
+        })
      })
    }
  }
@@ -0,0 +1,45 @@
+<template>
+  <el-date-picker
+    v-model="modelValue"
+    :type="type"
+    :format="format"
+    :value-format="valueFormat"
+    :placeholder="placeholder"
+    :start-placeholder="startPlaceholder"
+    :end-placeholder="endPlaceholder"
+    v-bind="props.props"
+  />
+</template>
+
+<script setup>
+  import { watch } from 'vue'
+  const emit = defineEmits(['update:modelValue'])
+  const props = defineProps({
+    modelValue: String,
+    type: String,
+    placeholder: {
+      type: String,
+      default: '请选择时间'
+    },
+    format: {
+      type: String,
+      default: 'yyyy-MM-dd'
+    },
+    valueFormat: {
+      type: String,
+      default: 'yyyy-MM-dd'
+    },
+    startPlaceholder: {
+      type: String,
+      default: '开始时间'
+    },
+    endPlaceholder: {
+      type: String,
+      default: '结束时间'
+    },
+    props: Object
+  })
+  watch(() => props.modelValue, (value) => {
+    emit('update:modelValue', value)
+  })
+</script>
@@ -0,0 +1,19 @@
+<template>
+  <el-input v-model="modelValue" :type="type" :value="value" :placeholder="placeholder || (label && '请输入' + label)" v-bind="props.props" />
+</template>
+
+<script setup>
+  import { watch } from 'vue'
+  const emit = defineEmits(['update:modelValue'])
+  const props = defineProps({
+    modelValue: String,
+    label: String,
+    placeholder: String,
+    value: String,
+    type: String,
+    props: Object
+  })
+  watch(() => props.modelValue, (value) => {
+    emit('update:modelValue', value)
+  })
+</script>
@@ -0,0 +1,17 @@
+<template>
+  <el-radio-group v-model="modelValue" v-bind="props.props">
+    <el-radio-button v-for="it in options" :label="it.value" :disabled="it.disabled" :name="it.disabled">{{ it.label }}</el-radio-button>
+  </el-radio-group>
+</template>
+
+<script setup>
+  import { watch } from 'vue'
+  const emit = defineEmits(['update:modelValue'])
+  const props = defineProps({
+    modelValue: String,
+    options: Array
+  })
+  watch(() => props.modelValue, (value) => {
+    emit('update:modelValue', value)
+  })
+</script>
@@ -0,0 +1,3 @@
+<template>
+
+</template>
@@ -0,0 +1,108 @@
+<template>
+  <div class="filter-container">
+    <el-form :inline="true" @keyup.enter="search">
+      <span v-for="(it, i) in where">
+        <el-form-item v-if="it && it.label" :label="it.label" :key="i">
+          <el-input v-if="!it.type || it.type == 'input'" @input="input(it.input)" v-model="it.value" :placeholder="it.placeholder || ('请输入' + it.label)" style="width: 200px;" class="filter-item" />
+          <mb-select v-else-if="it.type == 'select'" v-model="it.value" :placeholder="'请选择' + it.label" v-bind="it.properties" />
+          <el-date-picker
+            v-else-if="it.type == 'date' || it.type == 'datetime' || it.type == 'daterange' || it.type == 'datetimerange'"
+            v-model="it.value"
+            align="right"
+            :format="it.type.startsWith('datetime') ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD'"
+            :value-format="it.type.startsWith('datetime') ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD'"
+            :type="it.type"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            :placeholder="it.type.startsWith('datetime') ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD'"
+          >
+          </el-date-picker>
+          <component v-else :is="it.type" v-model="it.value" v-bind="it.properties" />
+        </el-form-item>
+      </span>
+      <el-form-item>
+        <el-button class="filter-item" type="primary" icon="ElSearch" @click="search">
+          搜索
+        </el-button>
+        <el-button class="filter-item" icon="ElDelete" @click="reset">
+          清空
+        </el-button>
+      </el-form-item>
+      <el-form-item>
+        <slot name="btns" />
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script setup>
+
+import { nextTick, watch } from 'vue'
+
+const props = defineProps({
+  where: {
+    type: Object,
+    default: () => {}
+  },
+  notReset: {
+    type: String,
+    default: ''
+  }
+})
+
+for(var key in props.where){
+  if(props.where[key] instanceof Object && props.where[key].value == undefined){
+    props.where[key].value = null
+  }
+}
+
+watch(() => props.where,() => {
+  console.log(props.where)
+})
+
+const emit = defineEmits(['search'])
+
+function input(input){
+  if(input){
+    emit('search')
+  }
+}
+
+function search(){
+  for(var key in props.where){
+    if(props.where[key] instanceof Object){
+      if(props.where[key].type && props.where[key].type.startsWith('date') && props.where[key].value instanceof Array){
+        props.where[key].value = props.where[key].value.join(',')
+      }
+    }
+  }
+  nextTick(() => {
+    emit('search')
+    for(var key in props.where){
+      if(props.where[key] instanceof Object){
+        if(props.where[key].type && props.where[key].type.startsWith('date')){
+          props.where[key].value = props.where[key].value.split(',')
+        }
+      }
+    }
+  })
+}
+
+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
+      }else{
+        props.where[key] = null
+      }
+    }
+  }
+  nextTick(() => emit('search'))
+}
+
+</script>
+
+<style scoped>
+
+</style>
@@ -0,0 +1,22 @@
+<template>
+  <el-switch
+    v-model="modelValue"
+    :active-value="activeValue"
+    :inactive-value="inactiveValue"
+    v-bind="props.props"
+  />
+</template>
+
+<script setup>
+  import { watch } from 'vue'
+  const emit = defineEmits(['update:modelValue'])
+  const props = defineProps({
+    modelValue: String,
+    activeValue: String,
+    inactiveValue: String,
+    props: Object
+  })
+  watch(() => props.modelValue, (value) => {
+    emit('update:modelValue', value)
+  })
+</script>
@@ -83,7 +83,7 @@ const props = defineProps({
  },
  method: {
    type: String,
-    default: 'get'
+    default: 'post'
  },
  cols: {
    type: Array,
@@ -121,7 +121,8 @@ function getList() {
  request({
    url: props.url,
    method: props.method,
-    params: newWhere
+    params: newWhere,
+    data: newWhere
  }).then(res => {
    const { data } = res
    total.value = data.total
@@ -0,0 +1,30 @@
+<template>
+  <treeselect v-model="modelValue" :options="options" :key="modelValue" :placeholder="placeholder || (label && '请选择' + label)" :show-count="true" v-bind="props.props" />
+</template>
+
+<script setup>
+  import { ref, getCurrentInstance } from "vue";
+  const { proxy } = getCurrentInstance()
+  const props = defineProps({
+    modelValue: {
+      type: String,
+      default: null
+    },
+    url: {
+      type: String,
+      default: '',
+      required: true
+    },
+    label: String,
+    placeholder: String,
+    props: Object
+  })
+
+  const options = ref([])
+
+  proxy.$get(props.url).then(res => {
+    options.value = res.data.list
+    proxy.$treeTable.deleteEmptyChildren(options.value)
+  })
+
+</script>
@@ -137,7 +137,7 @@ export default {
        this.$emit('update:modelValue', '')
        this.$emit('change', '')
      }
-      this.$get('file/delete', { url: encodeURI(url) })
+      this.$delete('file/delete', { url: encodeURI(url) })
    },
    handlePreview(file) {
      window.open(this.$global.filePrefix + file.response.data.url)
@@ -179,7 +179,7 @@ export default {
          this.fileList.splice(i, 1)
        }
      })
-      this.$get('file/delete', { url: encodeURI(url) })
+      this.$delete('file/delete', { url: encodeURI(url) })
      if (this.multiple) {
        this.$emit('update:modelValue', this.urls)
        this.$emit('change', this.urls)
@@ -1,100 +0,0 @@
-<template>
-  <div class="filter-container">
-    <el-form :inline="true" @keyup.enter="search">
-      <el-form-item :label="it.label" v-for="(it, i) in where" :key="i">
-        <el-input v-if="it.type == 'input'" @input="input(it.input)" v-model="it.value" :placeholder="it.placeholder || ('请输入' + it.label)" style="width: 200px;" class="filter-item" />
-        <mb-select v-else-if="it.type == 'select'" v-model="it.value" :placeholder="'请输入' + it.label" v-bind="it.properties" />
-        <el-date-picker
-          v-else-if="it.type == 'date' || it.type == 'datetime' || it.type == 'daterange' || it.type == 'datetimerange'"
-          v-model="it.value"
-          align="right"
-          :format="it.type.startsWith('datetime') ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD'"
-          :value-format="it.type.startsWith('datetime') ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD'"
-          :type="it.type"
-          start-placeholder="开始时间"
-          end-placeholder="结束时间"
-          :placeholder="it.type.startsWith('datetime') ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD'"
-        >
-        </el-date-picker>
-        <component v-else :is="it.type" v-model="it.value" v-bind="it.properties" />
-      </el-form-item>
-      <el-form-item>
-        <el-button class="filter-item" type="primary" icon="ElSearch" @click="search">
-          搜索
-        </el-button>
-        <el-button class="filter-item" icon="ElDelete" @click="reset">
-          清空
-        </el-button>
-      </el-form-item>
-      <el-form-item>
-        <slot name="btns" />
-      </el-form-item>
-    </el-form>
-  </div>
-</template>
-
-<script setup>
-
-import { nextTick, watch } from 'vue'
-
-const props = defineProps({
-  where: {
-    type: Object,
-    default: () => {}
-  },
-  notReset: {
-    type: String,
-    default: ''
-  }
-})
-
-watch(() => props.where,() => {
-  console.log(props.where)
-})
-
-const emit = defineEmits(['search'])
-
-function input(input){
-  if(input){
-    emit('search')
-  }
-}
-
-function search(){
-  for(var key in props.where){
-    if(props.where[key] instanceof Object){
-      if(props.where[key].type.startsWith('date') && props.where[key].value instanceof Array){
-        props.where[key].value = props.where[key].value.join(',')
-      }
-    }
-  }
-  nextTick(() => {
-    emit('search')
-    for(var key in props.where){
-      if(props.where[key] instanceof Object){
-        if(props.where[key].type.startsWith('date')){
-          props.where[key].value = props.where[key].value.split(',')
-        }
-      }
-    }
-  })
-}
-
-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
-      }else{
-        props.where[key] = null
-      }
-    }
-  }
-  nextTick(() => emit('search'))
-}
-
-</script>
-
-<style scoped>
-
-</style>
@@ -38,7 +38,7 @@ common.handleDelete = (options) => {
  }).then(() => {
    request({
      url: url,
-      method: 'post',
+      method: 'delete',
      params: {
        id: id
      }
@@ -167,4 +167,8 @@ common.loadConfig = async() => {
  })
 }

+common.setDefaultValue = (obj, attr, value) => {
+  obj[attr] = obj[attr] === undefined ? value : obj[attr]
+}
+
 export default common
@@ -27,7 +27,7 @@ function appComponent(app, item){
 }

 const install = (app) => {
-    app.config.globalProperties.$get('/component/list', { size: 999999 }).then((res) => {
+    app.config.globalProperties.$post('/component/list', { size: 999999 }).then((res) => {
        res.data.list.forEach(it => {
            appComponent(app, it)
        })
@@ -11,4 +11,4 @@ export default {
  filePrefix: '',
  visitedViews: reactive([]),
  tabValue: ref('')
-}
+}
@@ -1,5 +1,7 @@
 import * as PlusIcons from '@element-plus/icons-vue'
 import VueUeditorWrap from 'vue-ueditor-wrap'
+import Treeselect from 'vue3-treeselect'
+import 'vue3-treeselect/dist/vue3-treeselect.css'
 import request from './request'
 import global from './global'
 import common from './common'
@@ -19,6 +21,7 @@ const install = (app) => {
    }
  })
  app.config.globalProperties.$get = (url, data) => request({ url, params: data })
+  app.config.globalProperties.$delete = (url, data) => request({ url, method: 'delete', params: data })
  app.config.globalProperties.$global = global
  app.config.globalProperties.$common = common
  app.config.globalProperties.$treeTable = treeTable
@@ -26,5 +29,6 @@ const install = (app) => {
    app.component(`El${key}`, PlusIcons[key])
  }
  app.use(VueUeditorWrap)
+  app.component('treeselect', Treeselect)
 }
 export default install
@@ -0,0 +1,214 @@
+<template>
+  <mb-list ref="magicList" v-bind="listOptions" />
+  <mb-dialog ref="formDialog" @confirm-click="magicForm.save($event)" width="50%">
+    <template #content>
+      <mb-form ref="magicForm" @reload-table="magicList.reload" :key="magicFormKey" v-bind="formOptions" />
+    </template>
+  </mb-dialog>
+</template>
+
+<script setup>
+import { ref, reactive, getCurrentInstance } from 'vue'
+const { proxy } = getCurrentInstance()
+const formDialog = ref()
+const magicList = ref()
+const magicForm = ref()
+const magicFormKey = ref()
+const listOptions = reactive({
+  search: {
+    noReset: 'id'
+  },
+  tools: [{
+    type: 'add',
+    permission: 'user:save',
+    click: () => {
+      magicFormKey.value = Math.random()
+      formOptions.detail.formData = null
+      formDialog.value.show()
+    }
+  },{
+    type: 'delete',
+    permission: 'user:delete',
+    url: 'user/delete'
+  }],
+  table: {
+    url: 'user/list',
+    where: {
+      username: {
+        label: '登录名称',
+      },
+      name: {
+        label: '姓名/昵称',
+      },
+      roleId: {
+        type: 'select',
+        label: '角色',
+        props: {
+          url: 'role/all',
+          el: { multiple: true }
+        }
+      }
+    },
+    cols: [
+      {
+        field: 'username',
+        title: '登录名称',
+        sortable: 'custom'
+      }, {
+        field: 'name',
+        title: '姓名/昵称',
+        sortable: 'custom'
+      }, {
+        field: 'officeName',
+        title: '所属机构'
+      }, {
+        field: 'roles',
+        title: '角色'
+      }, {
+        field: 'phone',
+        title: '手机号',
+        sortable: 'custom'
+      }, {
+        field: 'isLogin',
+        title: '禁止登录',
+        type: 'switch',
+        width: 100,
+        change: (row) => {
+          proxy.$get('/user/change/login/status', {
+            id: row.id,
+            isLogin: row.isLogin
+          })
+        }
+      }, {
+        field: 'createDate',
+        title: '创建时间',
+        width: 180
+      }, {
+        title: '操作',
+        type: 'btns',
+        width: 140,
+        fixed: 'right',
+        btns: [
+          {
+            permission: 'user:save',
+            title: '修改',
+            type: 'text',
+            icon: 'ElEdit',
+            click: (row) => {
+              // magicForm.value.getDetail(row.id)
+              magicFormKey.value = Math.random()
+              formOptions.detail.formData = proxy.$common.copyNew(row)
+              formDialog.value.show()
+            }
+          }, {
+            permission: 'user:delete',
+            title: '删除',
+            type: 'text',
+            icon: 'ElDelete',
+            click: (row) => {
+              proxy.$common.handleDelete({
+                url: 'user/delete',
+                id: row.id,
+                done: () => magicList.value.reload()
+              })
+            }
+          }
+        ]
+      }
+    ]
+  }
+})
+const formOptions = reactive({
+  detail: {
+    // request: {
+    //   url: 'user/get'
+    // },
+    handlerFormData: (formData) => {
+      proxy.$get('user/roles', { userId: formData.id }).then((res) => {
+        formData.roles = res.data.join(',')
+      })
+    }
+  },
+  form: {
+    request: {
+      url: "user/save",
+      method: "post"
+    },
+    rows: [{
+      gutter: 24,
+      cols: [{
+        span: 12,
+        name: 'username',
+        label: '登录名称',
+        rules: [{ required: true, message: '请输入登录名称', trigger: 'change' }],
+        props: {
+          autocomplete: 'new-password'
+        }
+      }, {
+        span: 12,
+        name: 'password',
+        label: '密码',
+        rules: [{ required: true, message: '请输入密码', trigger: 'change' }],
+        props: {
+          type: 'password',
+          autocomplete: 'new-password'
+        }
+      }]
+    },{
+      gutter: 24,
+      cols: [{
+        span: 12,
+        name: 'name',
+        label: '姓名/昵称'
+      }, {
+        span: 12,
+        name: 'phone',
+        label: '手机号'
+      }]
+    },{
+      gutter: 24,
+      cols: [{
+        component: 'treeselect',
+        span: 12,
+        name: 'officeId',
+        label: '组织机构',
+        defaultValue: null,
+        // rules: [{ required: true, message: '请选择组织机构', trigger: 'change' }],
+        props: {
+          url: 'user/offices'
+        }
+      }, {
+        component: 'select',
+        span: 12,
+        name: 'roles',
+        label: '选择角色',
+        defaultValue: null,
+        rules: [{ required: true, message: '请选择角色', trigger: 'change' }],
+        props: {
+          url: 'role/all',
+          placeholder: '请选择角色',
+          el: { multiple: true }
+        }
+      }]
+    }, {
+      gutter: 24,
+      cols: [{
+        span: 24,
+        component: 'radio-button',
+        name: 'isLogin',
+        label: '登录状态',
+        defaultValue: '0',
+        props: {
+          options: [{
+            label: '有效',
+            value: '0'
+          }, {
+            label: '锁定',
+            value: '1'
+          }]
+        }
+      }]
+    }]
+  }
+})
+</script>
@@ -4,7 +4,7 @@
    <mb-search :where="tableOptions.where" @search="reloadTable" />

    <el-row class="toolbar-container">
-      <el-button v-permission="'role:save'" class="filter-item" type="primary" icon="ElPlus" @click="handleCreate">
+      <el-button v-permission="'component:save'" class="filter-item" type="primary" icon="ElPlus" @click="handleCreate">
        添加
      </el-button>
    </el-row>
@@ -17,6 +17,9 @@
          <el-form-item label="组件名称" prop="name">
            <el-input v-model="temp.name" />
          </el-form-item>
+          <el-form-item label="组件描述" prop="descRibe">
+            <el-input v-model="temp.descRibe" />
+          </el-form-item>
          <el-form-item label="组件代码" prop="code">
            <el-input v-model="temp.code" :rows="30" type="textarea" />
          </el-form-item>
@@ -42,6 +45,11 @@ const tableOptions = reactive({
            type: 'input',
            label: '组件名称',
            value: ''
+          },
+          descRibe: {
+            type: 'input',
+            label: '组件描述',
+            value: ''
          }
        },
        cols: [
@@ -49,6 +57,10 @@ const tableOptions = reactive({
            field: 'name',
            title: '组件名称'
          },
+          {
+            field: 'descRibe',
+            title: '组件描述'
+          },
          {
            title: '操作',
            type: 'btns',
@@ -85,6 +97,7 @@ const dialogTitle = ref('')
 const temp = ref(getTemp())
 const rules = reactive({
  name: [{ required: true, message: '请输入组件名称', trigger: 'change' }],
+  descRibe: [{ required: true, message: '请输入组件描述', trigger: 'change' }],
  code: [{ required: true, message: '请输入组件代码', trigger: 'change' }]
 })
 const downloadLoading = ref(false)
@@ -98,6 +111,7 @@ function getTemp(){
    id: '',
    name: '',
    code: '',
+    descRibe: ''
  }
 }

@@ -118,7 +132,7 @@ function save(d) {
  dataForm.value.validate((valid) => {
    if (valid) {
      d.loading()
-      proxy.$post('role/save', temp.value).then(() => {
+      proxy.$post('component/save', temp.value).then(() => {
        d.hideLoading()
        reloadTable()
        formDialog.value.hide()
@@ -32,12 +32,12 @@
      </el-col>
      <el-col :span="12">
        <el-form-item label="选择角色" prop="roles">
-          <mb-select v-model="temp.roles" url="role/list?size=999999" placeholder="请选择角色" labelField="name" valueField="id" :el="{ multiple: true }" />
+          <mb-select v-model="temp.roles" url="role/all" placeholder="请选择角色" :el="{ multiple: true }" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="登录状态" prop="isLogin">
-      <el-radio-group v-model="temp.isLogin" size="small">
+      <el-radio-group v-model="temp.isLogin">
        <el-radio-button label="0">有效</el-radio-button>
        <el-radio-button label="1">锁定</el-radio-button>
      </el-radio-group>
@@ -46,8 +46,6 @@
 </template>

 <script setup>
-import Treeselect from 'vue3-treeselect'
-import 'vue3-treeselect/dist/vue3-treeselect.css'

 import { ref, reactive, onBeforeMount, getCurrentInstance, nextTick, defineExpose } from 'vue'

@@ -130,6 +128,6 @@ function getInfo(row) {
  })
 }

-defineExpose({ getInfo, resetTemp })
+defineExpose({ save, getInfo, resetTemp })

 </script>
@@ -71,14 +71,13 @@ const tableOptions = reactive({
    roleId: {
      type: 'select',
      label: '角色',
-      value: '',
+      value: proxy.$route.query.roleId,
      properties: {
-        url: 'role/list?size=999999',
-        labelField: 'name',
-        valueField: 'id',
+        url: 'role/all',
        el: { multiple: true }
      }
-    }
+    },
+    officeId: proxy.$route.query.officeId
  },
  cols: [
    {
@@ -160,17 +159,20 @@ const userFormDialog = ref()
 const table = ref()
 const userForm = ref()

-onMounted(() => {
+// onMounted(() => {
  // setTimeout(function(){
-    console.log(proxy.$route.query.roleId)
-    if(proxy.$route.query.roleId){
-      tableOptions.where.roleId.value = proxy.$route.query.roleId
-    }
-    if(proxy.$route.query.officeId){
-      tableOptions.where.officeId = proxy.$route.query.officeId
-    }
+  // nextTick(() => {
+  //   console.log(proxy.$route.query.roleId)
+  //   if(proxy.$route.query.roleId){
+  //     tableOptions.where.roleId.value = proxy.$route.query.roleId
+  //   }
+  //   if(proxy.$route.query.officeId){
+  //     tableOptions.where.officeId = proxy.$route.query.officeId
+  //   }
+  // })
+
  // },1000)
-})
+// })

 function checkChange(values) {
  tableOptions.where.officeId = values