feat: complete rsf-design phase 1 integration

zhou zhou

15 小时以前 40905cbd04c2e332cd4bc2b9e0c5b3e1da9cccfa

 rsf-design/src/views/system/user/modules/user-search.vue

@@ -3,61 +3,143 @@
    ref="searchBarRef"
    v-model="formData"
    :items="formItems"
    :rules="rules"
    @reset="handleReset"
    @search="handleSearch"
  >
  </ArtSearchBar>
  />
</template>

<script setup>
  import { createUserSearchState } from '../userPage.helpers'

  const props = defineProps({
    modelValue: { required: true }
    modelValue: { required: true },
    deptTreeOptions: { required: false, default: () => [] },
    roleOptions: { required: false, default: () => [] }
  })

  const emit = defineEmits(['update:modelValue', 'search', 'reset'])
  const searchBarRef = ref()

  const formData = computed({
    get: () => props.modelValue,
    set: (val) => emit('update:modelValue', val)
  })
  const rules = {
    // userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
  }
  const statusOptions = ref([])
  function fetchStatusOptions() {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve([
          { label: '在线', value: '1' },
          { label: '离线', value: '2' },
          { label: '异常', value: '3' },
          { label: '注销', value: '4' }
        ])
      }, 1e3)
    })
  }
  onMounted(async () => {
    statusOptions.value = await fetchStatusOptions()
  })

  const formItems = computed(() => [
    {
      label: '用户名',
      key: 'userName',
      key: 'username',
      type: 'input',
      placeholder: '请输入用户名',
      clearable: true
      props: {
        placeholder: '请输入用户名',
        clearable: true
      }
    },
    {
      label: '昵称',
      key: 'nickname',
      type: 'input',
      props: {
        placeholder: '请输入昵称',
        clearable: true
      }
    },
    {
      label: '手机号',
      key: 'userPhone',
      key: 'phone',
      type: 'input',
      props: { placeholder: '请输入手机号', maxlength: '11' }
      props: {
        placeholder: '请输入手机号',
        clearable: true
      }
    },
    {
      label: '邮箱',
      key: 'userEmail',
      key: 'email',
      type: 'input',
      props: { placeholder: '请输入邮箱' }
      props: {
        placeholder: '请输入邮箱',
        clearable: true
      }
    },
    {
      label: '工号',
      key: 'code',
      type: 'input',
      props: {
        placeholder: '请输入工号',
        clearable: true
      }
    },
    {
      label: '部门',
      key: 'deptId',
      type: 'treeselect',
      props: {
        data: props.deptTreeOptions,
        props: {
          label: 'label',
          value: 'value',
          children: 'children'
        },
        placeholder: '请选择部门',
        clearable: true,
        checkStrictly: true
      }
    },
    {
      label: '角色',
      key: 'roleIds',
      type: 'select',
      props: {
        placeholder: '请选择角色',
        clearable: true,
        multiple: true,
        collapseTags: true,
        filterable: true,
        options: props.roleOptions
      }
    },
    {
      label: '性别',
      key: 'sex',
      type: 'select',
      props: {
        placeholder: '请选择性别',
        clearable: true,
        options: [
          { label: '未知', value: 0 },
          { label: '男', value: 1 },
          { label: '女', value: 2 }
        ]
      }
    },
    {
      label: '真实姓名',
      key: 'realName',
      type: 'input',
      props: {
        placeholder: '请输入真实姓名',
        clearable: true
      }
    },
    {
      label: '身份证号',
      key: 'idCard',
      type: 'input',
      props: {
        placeholder: '请输入身份证号',
        clearable: true
      }
    },
    {
      label: '关键字',
      key: 'condition',
      type: 'input',
      props: {
        placeholder: '输入关键字搜索',
        clearable: true
      }
    },
    {
      label: '状态',
@@ -65,28 +147,22 @@
      type: 'select',
      props: {
        placeholder: '请选择状态',
        options: statusOptions.value
      }
    },
    {
      label: '性别',
      key: 'userGender',
      type: 'radiogroup',
      props: {
        clearable: true,
        options: [
          { label: '男', value: '1' },
          { label: '女', value: '2' }
          { label: '正常', value: 1 },
          { label: '禁用', value: 0 }
        ]
      }
    }
  ])

  function handleReset() {
    console.log('重置表单')
    emit('update:modelValue', createUserSearchState())
    emit('reset')
  }

  async function handleSearch(params) {
    await searchBarRef.value.validate()
    emit('search', params)
    console.log('表单数据', params)
  }
</script>