From 170e758893670590e7eef528c21d99a07c76510c Mon Sep 17 00:00:00 2001
From: lilinyuan <1084668738@qq.com>
Date: Tue, 19 Mar 2024 17:12:41 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AF=BC=E5=85=A5=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/fvcomponents/fvCheckbox/index.vue    |  41 +++++
 src/fvcomponents/fvForm/index.vue        | 109 +++++++++++++
 src/fvcomponents/fvPagination/index.vue  |  82 ++++++++++
 src/fvcomponents/fvRadio/index.vue       |  48 ++++++
 src/fvcomponents/fvSearchForm/index.vue  | 113 ++++++++++++++
 src/fvcomponents/fvSelect/index.vue      |  59 +++++++
 src/fvcomponents/fvTable/index.vue       | 188 +++++++++++++++++++++++
 src/fvcomponents/fvTableColumn/index.vue |  58 +++++++
 8 files changed, 698 insertions(+)
 create mode 100644 src/fvcomponents/fvCheckbox/index.vue
 create mode 100644 src/fvcomponents/fvForm/index.vue
 create mode 100644 src/fvcomponents/fvPagination/index.vue
 create mode 100644 src/fvcomponents/fvRadio/index.vue
 create mode 100644 src/fvcomponents/fvSearchForm/index.vue
 create mode 100644 src/fvcomponents/fvSelect/index.vue
 create mode 100644 src/fvcomponents/fvTable/index.vue
 create mode 100644 src/fvcomponents/fvTableColumn/index.vue

diff --git a/src/fvcomponents/fvCheckbox/index.vue b/src/fvcomponents/fvCheckbox/index.vue
new file mode 100644
index 0000000..014fb69
--- /dev/null
+++ b/src/fvcomponents/fvCheckbox/index.vue
@@ -0,0 +1,41 @@
+<template>
+  <el-checkbox-group v-model="localVal" v-bind="$attrs" @change="change">
+    <el-checkbox 
+      v-for="item in options"
+      :label="item.label"
+      :value="item.value"
+      :key="item.value"
+      :disabled="item.disabled || false"
+    />
+  </el-checkbox-group>
+</template>
+
+<script setup>
+const props = defineProps({
+  options: {
+    type: Array,
+    default: []
+  },
+  modelValue: {
+    type: Array,
+    default: []
+  }
+})
+
+const emits = defineEmits(['change', 'update:modelValue'])
+
+const localVal = ref([])
+
+watchEffect(()=>{
+  localVal.value = props.modelValue
+})
+
+const change = (val) => {
+  emits('update:modelValue', val)
+  emits('change', val)
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/fvcomponents/fvForm/index.vue b/src/fvcomponents/fvForm/index.vue
new file mode 100644
index 0000000..2d58b50
--- /dev/null
+++ b/src/fvcomponents/fvForm/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <el-form
+    :model="form"
+    v-bind="$attrs"
+    label-width="auto"
+    ref="formInstance"
+  >
+    <el-row>
+      <el-col
+        v-for="item in filterSchma"
+        v-bind="item.colProps || { span: 12}"
+        :key="item.prop"
+      >
+        <el-form-item 
+          v-bind="item"
+          :key="item.prop"
+        >
+          <template #default>
+            <component 
+              v-if="item.component"
+              :is="item.component"
+              v-bind="item.props || {}"
+              v-on="item.on || {}"
+              v-model="form[item.prop]"
+            >
+            </component>
+            <span v-else>
+              {{ form[item.prop] || '--' }}
+            </span>
+          </template>
+          <template #label>
+            <slot :name="item?.slots?.label" v-bind="{item, form}">
+              {{ item?.label || '' }}
+            </slot>
+          </template>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script setup lang="jsx">
+import { ElMessage } from 'element-plus';
+
+
+
+const props = defineProps({
+  schema: {
+    type: Array,
+    default: []
+  }
+})
+
+const emits = defineEmits(['getInstance'])
+
+const form = ref({})
+const formInstance = ref(null)
+
+const filterSchma = computed(()=>{
+  return props.schema.filter(item=>{
+    if(item.prop) return true
+  })
+})
+
+console.log(filterSchma.value, 'filterSchma');
+
+const validate = async () => {
+  let validObj = {}
+  await formInstance.value.validate((valid, fields)=>{
+    validObj.isValidate = valid
+    validObj.fields = fields
+  })
+  return validObj
+}
+
+const getValues = () => {
+  return form.value
+}
+
+const setValues = (data) => {
+  try {
+    if(data instanceof Object) {
+      form.value = {...data}
+    }
+  } catch (error) {
+    ElMessage.warning('传入参数格式有误')
+  }
+}
+
+const resetFields = () => {
+  formInstance.value.resetFields()
+}
+
+onMounted(()=>{
+  emits('getInstance',Object.assign({}, unref(formInstance), {
+    getValues,
+    validate,
+    setValues,
+    resetFields
+  }))
+})
+
+defineExpose({ getValues, setValues, validate, resetFields, formInstance, form })
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/fvcomponents/fvPagination/index.vue b/src/fvcomponents/fvPagination/index.vue
new file mode 100644
index 0000000..187aebe
--- /dev/null
+++ b/src/fvcomponents/fvPagination/index.vue
@@ -0,0 +1,82 @@
+<template>
+  <el-config-provider :locale="locale">
+    <el-pagination
+      v-model:current-page="currentPage"
+      v-model:page-size="pageSize"
+      :page-sizes="pageSizes"
+      :background="isBackground"
+      :small="small"
+      :disabled="disabled"
+      layout="->,total, sizes, prev, pager, next, jumper"
+      :total="total"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </el-config-provider>
+</template>
+
+<script setup>
+import { ElConfigProvider } from 'element-plus'
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+const emit = defineEmits(['goPage', 'changeSize','handleTop'])
+const props = defineProps({
+  total: {
+    type: Number,
+    default: 0,
+  },
+  currentPage: {
+    type: Number,
+    default: 1,
+  },
+  pageSize: {
+    type: Number,
+    default: 10,
+  },
+  pageSizes: {
+    type: Object,
+    default(rawProps) {
+      return [10, 15, 20, 30, 50]
+    },
+  },
+  small: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  isBackground: {
+    type: Boolean,
+    default: false,
+  },
+})
+//中文
+const locale = zhCn
+//总条数
+const total = ref(0)
+//对应页数
+const currentPage = ref(1)
+//每页多少条
+const pageSize = ref(10)
+//默认每页多少条的数组
+const pageSizes = ref([])
+//是否使用小型分页样式
+const small = ref(false)
+//是否禁用分页
+const disabled = ref(false)
+//分页大小
+const handleSizeChange = limit => {
+  emit('changeSize', limit)
+  emit('handleTop')
+}
+//分页切换
+const handleCurrentChange = page => {
+  emit('goPage', page)
+  emit('handleTop')
+}
+watchEffect(() => {
+  total.value = props.total
+  pageSizes.value = props.pageSizes
+})
+</script>
diff --git a/src/fvcomponents/fvRadio/index.vue b/src/fvcomponents/fvRadio/index.vue
new file mode 100644
index 0000000..ea6e821
--- /dev/null
+++ b/src/fvcomponents/fvRadio/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-radio-group v-model="localVal" v-bind="$attrs" @change="change">
+    <el-radio v-for="item in localOptions" :label="item.value" :key="item.value">
+      {{ item.label }}
+    </el-radio>
+  </el-radio-group>
+</template>
+
+<script setup>
+import { useCacheStore } from "@/stores/cache.js";
+const cacheStore = useCacheStore();
+const props = defineProps({
+  options: {
+    type: Array,
+    default: []
+  },
+  modelValue: {
+    type: [Number, String],
+    default: ''
+  },
+  cacheKey: {
+    type: String,
+    default: ''
+  }
+})
+
+const emits = defineEmits(['change', 'update: modelValue'])
+
+const localVal = ref()
+
+const localOptions = ref([])
+
+watchEffect(()=>{
+  localVal.value = props.modelValue
+  props.cacheKey ? 
+  localOptions.value = cacheStore.getDict(props.cacheKey) :
+  localOptions.value = props.options
+})
+
+const change = (val) => {
+  emits('change', val),
+  emits('update: modelValue', val)
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/fvcomponents/fvSearchForm/index.vue b/src/fvcomponents/fvSearchForm/index.vue
new file mode 100644
index 0000000..2b4f2fc
--- /dev/null
+++ b/src/fvcomponents/fvSearchForm/index.vue
@@ -0,0 +1,113 @@
+<template>
+  <el-form
+    :model="form"
+    v-bind="$attrs"
+    label-width="auto"
+    ref="formInstance"
+    class="search-form"
+  >
+    <el-row>
+      <el-col
+        v-for="(item, index) in filterConfig"
+        :span="5"
+        :offset="index == 0 || index / 4 ==1 ? 0 : 1"
+        :key="item.prop"
+      >
+        <el-form-item 
+          v-bind="item"
+          :key="item.prop"
+        >
+          <template #default>
+            <component 
+              :is="item.component"
+              v-bind="item.props || {}"
+              v-on="item.on || {}"
+              v-model="form[item.prop]"
+            >
+            </component>
+          </template>
+        </el-form-item>
+      </el-col>
+      <el-col :span="filterConfig.length % 4 == 0 ? 4 : 6" class="btn-col">
+        <el-form-item>
+          <el-button v-if="searchConfig.length>=4" link type="primary" @click="showMore = !showMore">
+            {{ showMore ? '收起' : '展开' }}
+          </el-button>
+          <el-button type="primary" @click="getValues" :icon="Search">搜索</el-button>
+          <el-button @click="handleReset" :icon="Refresh">重置</el-button>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script setup>
+import {Refresh, Search} from '@element-plus/icons-vue'
+
+const props = defineProps({
+  searchConfig: {
+    type: Array,
+    default: []
+  }
+})
+
+const emits = defineEmits(['getInstance', 'search'])
+
+const form = ref({})
+const formInstance = ref(null)
+
+const showMore = ref(false)
+
+const filterConfig = computed(()=>{
+  const arr = props.searchConfig.filter(item=>{
+    if(item.prop) return true
+  })
+  return arr.length >= 4 && showMore.value ? arr : arr.slice(0, 3)
+})
+
+console.log(filterConfig.value, 'filterConfig');
+
+// 搜索功能表单元素默认值
+const setDefaultFormValues = () => {
+  filterConfig.value.forEach(item=>{
+    form.value[item.prop] = item.props.defaultValue || null
+  })
+}
+
+watchEffect(()=>{
+  if(filterConfig.value.length) {
+    setDefaultFormValues()
+  }
+})
+
+const getValues = () => {
+  emits('search', form.value)
+  return form.value
+}
+
+//重置
+const handleReset = () => {
+  form.value = {}
+  setDefaultFormValues()
+  emits('search', form.value)
+}
+
+onMounted(()=>{
+  emits('getInstance', Object.assign({}, unref(formInstance),{
+    getValues,
+    handleReset,
+  }))
+})
+
+</script>
+
+<style lang="scss" scoped>
+.search-form {
+  padding-top: 18px;
+}
+.btn-col {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+</style>
\ No newline at end of file
diff --git a/src/fvcomponents/fvSelect/index.vue b/src/fvcomponents/fvSelect/index.vue
new file mode 100644
index 0000000..8d668ca
--- /dev/null
+++ b/src/fvcomponents/fvSelect/index.vue
@@ -0,0 +1,59 @@
+<template>
+  <el-select v-model="localVal" v-bind="$attrs" @change="change">
+    <el-option 
+      v-for="item in localOptions" 
+      :label="item.label" 
+      :value="item.value" 
+      :key="item.value" 
+      :disabled="item.disabled || false"
+    />
+  </el-select>
+</template>
+
+<script setup>
+import { useCacheStore } from "@/stores/cache.js";
+const cacheStore = useCacheStore();
+const props = defineProps({
+  options: {
+    type: Array,
+    default: []
+  },
+  modelValue: {
+    type: [String, Number, Array],
+    default: undefined
+  },
+  cacheKey: {
+    type: String,
+    default: ''
+  }
+})
+
+const emits = defineEmits(['change', 'update:modelValue'])
+
+const localVal = ref()
+
+const localOptions = ref([])
+
+watchEffect(()=>{
+  localVal.value = props.modelValue
+  props.cacheKey ? 
+  localOptions.value = cacheStore.getDict(props.cacheKey) :
+  localOptions.value = props.options
+})
+
+const change = (val) => {
+  let value
+  emits('update:modelValue', val)
+  if(val instanceof Array) {
+    value = val.map(item=>props.options.find(v=>item == v.value))
+  } else {
+    value = props.options.find(v=>v.value == val)
+  }
+  emits('change', value)
+}
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/fvcomponents/fvTable/index.vue b/src/fvcomponents/fvTable/index.vue
new file mode 100644
index 0000000..066c029
--- /dev/null
+++ b/src/fvcomponents/fvTable/index.vue
@@ -0,0 +1,188 @@
+<template>
+  <div class="fv-table-container">
+    <!-- 表格头部按钮 -->
+    <div class="fv-table-btn" v-if="tableConfig.btns">
+      <el-button 
+        v-for="btn in tableConfig.btns"
+        :key="btn.key" 
+        :type="btn.type || ''"
+        :v-perm="btn.auth || '[*:*:*]'"
+        @click="handleClickBtns(btn.key)"
+      >
+        {{ btn.name }}
+      </el-button>
+    </div>
+    <!-- 表格部分 -->
+    <div class="fv-table">
+      <el-table
+        :data="localData.list"
+        v-loading="localData.loading"
+        :row-key="tableConfig?.rowKey || 'id'"
+        v-bind="$attrs"
+        table-layout="fixed"
+        :show-overflow-tooltip="true"
+        highlight-current-row
+        @selection-change="selectionChange"
+        @row-click="rowClick"
+        @row-dblclick="rowDblclick"
+        @cell-click="cellClick"
+        v-tabh
+        ref="tableInstance"
+      >
+        <template #default>
+          <fvTableColumn v-for="column in tableConfig.columns" :key="column.prop" :columns="column">
+            <template v-if="column?.slots?.header" #[column?.slots?.header]="params">
+              <slot :name="column?.slots?.header" v-bind="params || {}"></slot>
+            </template>
+            <template v-if="column?.slots?.default" #[column?.slots?.default]="params">
+              <slot :name="column?.slots?.default" v-bind="params || {}"></slot>
+            </template>
+          </fvTableColumn>
+        </template>
+        <template #empty>
+          <slot name="empty"></slot>
+        </template>
+        <template #append>
+          <slot name="append"></slot>
+        </template>
+      </el-table>
+      <!-- 分页 -->
+      <fvPagination 
+        v-if="pagination"
+        :current-page="localData.query.pageNum"
+        :page-size="localData.query.pageSize"
+        :page-sizes="[10, 20, 30, 40,50]"
+        :total="localData.total"
+        @changeSize="handleSizeChange"
+        @goPage="handleCurrentChange"
+        >
+      </fvPagination>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ElMessage } from 'element-plus';
+import { requestList } from '../../api/common';
+
+const props = defineProps({
+  //表格配置
+  tableConfig: {
+    type: Object,
+    default: {}
+  },
+  //若使用外部数据
+  data: {
+    type: Array,
+    default: []
+  },
+  //是否使用分页
+  pagination: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const tableInstance = ref()
+
+const localData = reactive({
+  list: [], // 表格数据
+  query: {
+    pageSize: 10,
+    pageNum: 1
+  },
+  total: 0,
+  loading: false
+})
+
+const emits = defineEmits(['headBtnClick', 'selectionChange', 'rowClick', 'rowDblclick', 'getBaseQuery', 'cellClick'])
+
+const handleClickBtns = (key) => {
+  emits('headBtnClick', key)
+}
+
+const getList = async () => {
+  const { api, params } = props.tableConfig
+  const queryParmas = {...localData.query, ...params}
+  if(api) {
+    localData.loading = true
+    try {
+      const { code, data, msg } = await requestList(api, queryParmas)
+      if ( code === 1000 ) {
+        localData.list = data.rows
+        localData.total = data.total
+        localData.loading = false
+      } else {
+        ElMessage.error(msg)
+        localData.loading = false
+      }
+    } catch (error) {
+      ElMessage.error('请求数据失败')
+      localData.loading = false
+    }
+  } else {
+    localData.list = props.data
+  }
+}
+
+const selectionChange = (data) => {
+  emits('selectionChange', data)
+}
+
+const rowClick = (row, column) => {
+  emits('rowClick', row, column)
+}
+
+const rowDblclick = (row, column) => {
+  emits('rowDblclick', row, column)
+}
+
+const cellClick = (row, column) => {
+  emits('cellClick', row, column)
+}
+
+//切换每页显示条数
+const handleSizeChange = (val) => {
+  localData.query.pageSize = val
+  emits('getBaseQuery', localData.query)
+  getList()
+}
+//点击页码进行分页功能
+const handleCurrentChange = (val) => {
+  localData.query.pageNum = val
+  emits('getBaseQuery', localData.query)
+  getList()
+}
+
+// watchEffect(()=>{
+//   if(!props.tableConfig.api) {
+//     localData.list = props.data
+//   }else {
+//     getList()
+//   }
+// })
+//刷新
+const refresh = ({resetPage=false}={}) => {
+  resetPage ? localData.query.pageNum = 1 : null
+  getList()
+}
+//改变loading状态
+const updateLoading = (status) => {
+  localData.loading = status
+}
+//获取基础查询条件
+const getQuery = () => {
+  return localData.query
+}
+
+defineExpose({ refresh, updateLoading, getQuery, tableInstance })
+
+onMounted(() => {
+  getList()
+})
+ 
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/fvcomponents/fvTableColumn/index.vue b/src/fvcomponents/fvTableColumn/index.vue
new file mode 100644
index 0000000..243a370
--- /dev/null
+++ b/src/fvcomponents/fvTableColumn/index.vue
@@ -0,0 +1,58 @@
+<template>
+  <el-table-column 
+    v-bind="columns"
+  >
+    <template v-if="columns?.slots?.header" #header>
+      <slot :name="columns?.slots?.header"></slot>
+    </template>
+    <template #default="scope">
+      <template v-if="columns.children?.length">
+        <fvTableColumn 
+          v-for="columnChildren in columns.children"
+          :key="columnChildren.prop"
+          :columns="columnChildren"
+        >
+        </fvTableColumn>
+      </template>
+      <slot v-else-if="columns.slots?.default" :name="columns.slots?.default" v-bind="scope"></slot>
+      <component v-else-if="columns?.currentRender" :is="contentRender(columns?.currentRender, scope)"></component>
+      <template v-else-if="!['selection', 'index', 'expand'].includes(columns?.type)">
+        {{ renderCell(scope) }}
+      </template>
+    </template>
+  </el-table-column>
+</template>
+
+<script setup lang="jsx">
+import { isVNode } from 'vue'
+
+  defineOptions({
+    name: 'fvTableColumn',
+    inheritAttrs: false
+  })
+
+  const props = defineProps({
+    columns: {
+      type: Object,
+      default: []
+    }
+  })
+
+  const contentRender = (render, scope) => {
+    const content = render({row: unref(scope.row), index: scope.$index})
+    return isVNode(content) ? content : <span>{content || '!(^-^)!'}</span>
+  }
+
+  const renderCell = ({row, column, $index}) => {
+    const property = column.property
+    const value = property && row[property]
+    if(column && column?.formatter) {
+      return column.formatter(row, column, value, $index) || '--'
+    }
+    return value ? value.toString() : '--'
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file