Merge branch 'dev'

- 添加自定义搜索表单和内容组件
- 优化订单列表页面布局和功能
- 实现订单状态标签和操作按钮的自定义渲染

src/components/content/index.vue

@@ -0,0 +1,287 @@
+<template>
+  <div class="content">
+    <el-table
+      :border="!!config?.border"
+      :data="computedData"
+      ref="table"
+      row-key="nanoId"
+      v-bind="computedStyle"
+      :show-overflow-tooltip="config.tooltip"
+      :header-row-style="headerRowStyle"
+      :highlight-current-row="!!config.radio ? true : false"
+      :span-method="config?.spanMethod"
+      :tooltip-options="config?.tooltipOptions"
+      @current-change="handleTableCurrentChange"
+      @selection-change="hanldleTableSelectChange"
+    >
+      <el-table-column v-if="config.drag" label="排序" align="center" width="50px" prop="nanoId">
+        <!-- <template #default="{ row, column }"> -->
+        <!-- <span v-show="false">{{ row[column.property] }}</span> -->
+        <div class="move" style="width: 100%; height: 100%">
+          <svg-icon style="cursor: move" icon-class="move" />
+        </div>
+        <!-- </template> -->
+      </el-table-column>
+      <el-table-column v-if="config.select" type="selection" width="50px" />
+      <el-table-column
+        :index="indexMethod"
+        v-if="config.index"
+        type="index"
+        align="center"
+        width="50px"
+        label="序号"
+      />
+      <template v-for="scheme in config.schemes" :key="scheme.attrs.label">
+        <el-table-column v-bind="scheme.attrs">
+          <template #default="{ row, column, $index }">
+            <slot
+              v-if="!!scheme.slot"
+              :name="scheme.slot"
+              :row="row"
+              :column="column"
+              :index="$index"
+            ></slot>
+          </template>
+        </el-table-column>
+      </template>
+      <template #empty>
+        <el-empty description="获取数据为空" />
+      </template>
+    </el-table>
+    <div class="bottom">
+      <el-pagination
+        class="pagination"
+        v-show="isShow"
+        v-model:current-page="current"
+        v-model:page-size="size"
+        :background="props.background"
+        :layout="props.layout"
+        :total="props.total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { computed, onBeforeMount, onMounted, watch } from 'vue'
+  import Sortable from 'sortablejs'
+  import { nanoid } from '@/utils/jsencrypt'
+
+  const props = defineProps({
+    data: {
+      type: Array,
+      default: () => []
+    },
+    config: {
+      type: Object,
+      required: true
+    },
+    maxHeight: {
+      type: [String, Number],
+      default: () => ''
+    },
+    headerRowStyle: {
+      type: [Function, Object],
+      default: () => ({
+        background: '#F1F3F7'
+      })
+    },
+    showPagination: {
+      type: Boolean,
+      default: () => true
+    },
+    layout: {
+      type: String,
+      default: () => 'total, sizes, prev, pager, next, jumper'
+    },
+    background: {
+      type: Boolean,
+      default: () => true
+    },
+    minHieght: {
+      type: String,
+      default: ''
+    },
+    pageSize: {
+      type: Number,
+      default: () => 10
+    },
+    total: {
+      type: Number,
+      default: () => 400
+    },
+    currentPage: {
+      type: Number,
+      default: () => 1
+    }
+  })
+  const emits = defineEmits([
+    'update:page-size',
+    'update:current-page',
+    'update:checkData',
+    'selection',
+    'changePage',
+    'changeSize',
+    'rowSort'
+  ])
+
+  const current = ref(props.currentPage)
+  const size = ref(props.pageSize)
+  const computedData = ref([])
+  const table = ref(null)
+  const isShow = computed(() => {
+    return props.showPagination && !!computedData.value.length
+  })
+  const computedStyle = computed(() => {
+    if (props.maxHeight) {
+      return {
+        'max-height': props.maxHeight
+      }
+    } else {
+      return null
+    }
+  })
+  watch(
+    () => props.data,
+    (data) => {
+      // if (props.config.drag) {
+      computedData.value = data.map((item) => {
+        if (!item.nanoId) {
+          item.nanoId = nanoid()
+        }
+        return item
+      })
+      // } else {
+      //   computedData.value = data
+      // }
+    },
+    {
+      deep: true
+    }
+  )
+  watch(
+    () => current.value,
+    (newVal) => {
+      emits('update:current-page', newVal)
+    }
+  )
+  watch(
+    () => size.value,
+    (newVal) => {
+      emits('update:page-size', newVal)
+    }
+  )
+  watch(
+    () => props.currentPage,
+    (newVal) => {
+      current.value = newVal
+    }
+  )
+  watch(
+    () => props.pageSize,
+    (newVal) => {
+      size.value = newVal
+    }
+  )
+
+  function reset() {
+    current.value = 1
+    size.value = 10
+  }
+
+  function handleSizeChange(v) {
+    emits('changeSize', v)
+  }
+
+  function handleCurrentChange(v) {
+    emits('changePage', v)
+  }
+  function hanldleTableSelectChange(newSelection) {
+    console.log(newSelection, 'newSelection')
+    emits('selection', { newSelection })
+  }
+
+  function handleTableCurrentChange(data) {
+    console.log(data, 'data')
+    emits('update:checkData', data)
+  }
+
+  function indexMethod(index) {
+    const cur = size.value * (current.value - 1) + index + 1
+    return cur
+  }
+
+  function rowDrag() {
+    const tbody = table.value.$refs.bodyWrapper.querySelector('tbody')
+    Sortable.create(tbody, {
+      ghostClass: 'sortable-ghost',
+      animation: 150,
+      handle: '.move',
+      onEnd: (event) => {
+        if (event.oldIndex !== undefined && event.newIndex !== undefined) {
+          let newArr = computedData.value
+          const curRow = newArr.splice(event.oldIndex, 1)[0]
+          newArr.splice(event.newIndex, 0, curRow)
+          computedData.value = [...newArr]
+          emits('rowSort', newArr)
+        }
+      }
+    })
+  }
+
+  onBeforeMount(() => {
+    // if (props.config.drag) {
+    computedData.value = props.data.map((item) => {
+      if (!item.nanoId) {
+        item.nanoId = nanoid()
+      }
+      return item
+    })
+    // } else {
+    //   computedData.value = props.data
+    // }
+  })
+
+  onMounted(() => {
+    props.config.drag && rowDrag()
+  })
+
+  defineExpose({
+    table,
+    reset
+  })
+</script>
+
+<style lang="scss" scoped>
+  .content {
+    background: #fff;
+    border-radius: 4px;
+    padding: 20px 20px 0 20px;
+    box-sizing: border-box;
+    :deep(.el-table) {
+      .current-row {
+        background-color: #e5f1fd;
+      }
+      .sortable-ghost {
+        opacity: 1;
+        cursor: grab !important;
+        background-color: #ebf5ff !important;
+      }
+    }
+    .bottom {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      .right {
+        margin-top: 20px;
+        flex: 1 0 auto;
+      }
+      .pagination {
+        margin-top: 20px;
+        height: 75px;
+      }
+    }
+  }
+</style>

src/components/searchForm/index.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="search-form">
+    <!-- 头部搜索栏 -->
+    <el-form v-model="formData" inline>
+      <el-form-item
+        v-for="(item, index) in searchFormData"
+        :key="index"
+        :label="item.label"
+        :prop="item.prop"
+      >
+        <template v-if="item.type === 'select'">
+          <template v-if="item.remote">
+            <el-select
+              v-model="formData[item.prop]"
+              :filterable="item.filterable ?? true"
+              remote
+              :placeholder="item.placeholder"
+              :remote-method="item.remoteMethod"
+              :clearable="item.clearable ?? true"
+              :remote-show-suffix="item.remoteShowSuffix ?? true"
+              :style="{ width: item.width || '100%' }"
+            >
+              <el-option
+                v-for="val in options"
+                :key="val.value"
+                :label="val.label"
+                :value="val.value"
+              />
+            </el-select>
+          </template>
+          <template v-else>
+            <el-select
+              v-model="formData[item.prop]"
+              :filterable="item.filterable ?? true"
+              :placeholder="item.placeholder"
+              :clearable="item.clearable ?? true"
+              :style="{ width: item.width || '100%' }"
+            >
+              <el-option
+                v-for="val in item.children.list"
+                :key="val.value"
+                :label="val.label"
+                :value="val.value"
+              />
+            </el-select>
+          </template>
+        </template>
+        <template v-else-if="item.type === 'daterange'">
+          <el-date-picker
+            v-model="formData[item.prop]"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            value-format="YYYY-MM-DD"
+            end-placeholder="结束日期"
+            :style="{ width: item.width || '100%' }"
+          />
+        </template>
+        <template v-else-if="item.type === 'monthrange'">
+          <el-date-picker
+            v-model="formData[item.prop]"
+            type="monthrange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            value-format="YYYY-MM"
+            end-placeholder="结束日期"
+            :style="{ width: item.width || '100%' }"
+          />
+        </template>
+        <template v-else-if="item.type === 'treeSelect'">
+          <el-tree-select
+            filterable
+            v-model="formData[item.prop]"
+            :data="treeData"
+            placeholder="请选择"
+            :render-after-expand="false"
+            :style="{ width: item.width || '100%' }"
+            :props="defaultProps"
+            value-key="id"
+          />
+        </template>
+        <template v-else>
+          <component
+            :is="`el-${item.type}`"
+            v-model="formData[item.prop]"
+            :placeholder="item.placeholder"
+            :style="{ width: item.width || '100%' }"
+          >
+          </component>
+        </template>
+      </el-form-item>
+      <el-form-item v-if="showBtn">
+        <el-button type="primary" @click="searchForm">查询</el-button>
+        <el-button @click="reset">重置</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script setup>
+  import { onBeforeMount, watch, watchEffect, ref, reactive } from 'vue'
+  let obj = {}
+  const props = defineProps({
+    /**
+     * @param {Array} search 搜索栏
+     */
+    search: { type: Array, default: () => [] },
+    showBtn: {
+      type: Boolean,
+      default: () => true
+    }
+  })
+  const treeData = ref([])
+  const defaultProps = { value: 'id', label: 'label', children: 'children' }
+  const options = ref([])
+  const formData = ref({})
+  const searchFormData = ref(props.search)
+  const emits = defineEmits(['searchData'])
+  watchEffect(() => {
+    const items = props.search
+    items.forEach((item) => {
+      obj[item.prop] = undefined
+    })
+    formData.value = JSON.parse(JSON.stringify(obj))
+  })
+
+  watch(
+    () => formData.value,
+    (newVal) => {
+      console.log('newVal', newVal, !props.showBtn)
+      !props.showBtn && searchForm()
+    }
+  )
+
+  function searchForm() {
+    emits('searchData', formData.value)
+  }
+
+  function reset() {
+    formData.value = JSON.parse(JSON.stringify(obj))
+    emits('resetData', formData.value)
+  }
+
+  function createRemoteMethod(fn) {
+    return async (query) => {
+      const res = await fn(query)
+      options.value = res.data
+    }
+  }
+
+  // const getTreeData = async () => {
+  //   const response = await getDeptTree()
+  //   treeData.value = response
+  // }
+
+  onBeforeMount(() => {
+    // Object.keys(obj).includes('treeSelect') && getTreeData()
+    const findItem = searchFormData.value.find((item) => item.type === 'select' && item.remote)
+    if (findItem) {
+      findItem.remoteMethod = createRemoteMethod(findItem.remoteMethod)
+    }
+  })
+</script>
+
+<style lang="scss" scoped>
+  .search-form{
+    background: white;
+    padding: 1rem;
+    //padding-bottom: 0;
+    margin-top: 0.5rem;
+  }
+  div {
+    :deep(.el-form) {
+      display: flex;
+      flex-wrap: wrap;
+      row-gap: 20px;
+      .el-form-item {
+        margin-bottom: 0;
+      }
+    }
+  }
+</style>

src/config.js

@@ -0,0 +1,80 @@
+export  const ORDER_SEARCH_CONFIG = [
+  {
+    type: 'input',
+    prop:'orderId',
+    label: '订单号',
+    placeholder: '请输入',
+  },
+  {
+    type: 'daterange',
+    prop: 'times',
+    label: '申请时间',
+    valueFormat: 'YYYY-MM-DD',
+    placeholder: '请选择申请时间',
+    startPlaceholder: '开始日期',
+    endPlaceholder: '结束日期',
+    rangeSeparator: '-'
+  },
+]
+// 经费申请列表
+export const ORDER_TABLE_CONFIG = {
+  index: true,
+  schemes: [
+    {
+      attrs: {
+        label: '订单号',
+        prop: 'order_no',
+        align: 'center'
+      }
+    },
+    {
+      attrs: {
+        label: '商品名称',
+        prop: 'name',
+        align: 'center'
+      }
+    },
+    {
+      attrs: {
+        label: '价格',
+        align: 'center',
+        prop: 'price'
+      }
+    },
+    {
+      attrs: {
+        label: '类型',
+        align: 'center',
+        prop: 'order_type'
+      }
+    },
+    {
+      attrs: {
+        label: '状态',
+        prop: 'status',
+        align: 'center'
+      },
+      slot: 'status'
+    },{
+      attrs: {
+        label: '创建时间',
+        prop: 'CreatedAt',
+        align: 'center'
+      },
+    },{
+      attrs: {
+        label: '更新时间',
+        prop: 'UpdatedAt',
+        align: 'center'
+      },
+    },
+    {
+      attrs: {
+        label: '操作',
+        prop: 'operate',
+        align: 'center'
+      },
+      slot: 'operate'
+    }
+  ]
+}

src/view/order/order/index.vue

@@ -1,92 +1,116 @@
 <template>
     <div >
-        <data class="gva-search-box2">
-            <el-form :inline="true" ref="formRef" :model="paramsQuery" class="demo-form-inline">
-                <el-form-item label="订单号">
-                    <el-input v-model="paramsQuery.orderId" placeholder="请输入" clearable />
-                </el-form-item>
-                <el-form-item label="订单时间">
-                    <el-date-picker
-                        v-model="queryTime"
-                        type="daterange"
-                        unlink-panels
-                        range-separator="至"
-                        start-placeholder="开始时间"
-                        end-placeholder="结束时间"
-                        value-format="YYYY-MM-DD"
-                        style="width:100%"
-                    />
-                </el-form-item>
-                <el-form-item>
-                    <el-button type="primary" @click="onSubmit(formRef)">查询</el-button>
-                    <el-button @click="reset(formRef)">重置</el-button>
-                </el-form-item>
-            </el-form>
-        </data>
+        <div class="searchForm">
+          <searchForm
+            :search="ORDER_SEARCH_CONFIG"
+            @searchData="searchData"
+            @resetData="resetData"
+            class="search-box searchForm"
+          />
+        </div>
         <div class="gva-table-box">
-            <el-table :data="tableData" style="width: 100%">
-                <el-table-column type="index" label="序号" width="120" />
-                <el-table-column prop="order_no" label="订单号" width="180" />
-                <el-table-column prop="name" label="商品名称" />
-                <el-table-column prop="price" label="价格" />
-                <el-table-column prop="order_type" label="类型" />
-                <el-table-column prop="status" label="状态" />
-                <el-table-column prop="CreatedAt" label="创建时间" />
-                <el-table-column prop="UpdatedAt" label="更新时间" />
-                <el-table-column label="操作" fixed="right" width="100">
-                    <template #default="scope">
-                        <!-- <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button> -->
-                        <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
+<!--            <el-table :data="tableData" style="width: 100%">-->
+<!--                <el-table-column type="index" label="序号" width="120" />-->
+<!--                <el-table-column prop="order_no" label="订单号" width="180" />-->
+<!--                <el-table-column prop="name" label="商品名称" />-->
+<!--                <el-table-column prop="price" label="价格" />-->
+<!--                <el-table-column prop="order_type" label="类型" />-->
+<!--                <el-table-column prop="status" label="状态" />-->
+<!--                <el-table-column prop="CreatedAt" label="创建时间" />-->
+<!--                <el-table-column prop="UpdatedAt" label="更新时间" />-->
+<!--                <el-table-column label="操作" fixed="right" width="100">-->
+<!--                    <template #default="scope">-->
+<!--                        <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>-->
+<!--                    </template>-->
+<!--                </el-table-column>-->
+<!--            </el-table>-->
+
+            <Content
+              @changePage="changePage"
+              :total="total"
+              v-model:tabloading="tableLoading"
+              v-model:currentPage="queryParams.page"
+              v-model:pageSize="queryParams.pageSize"
+              :data="tableData"
+              :config="ORDER_TABLE_CONFIG"
+            >
+              <template #status="{ row }">
+                <el-tag :type="tag(row.status).type">{{ tag(row.status).label }}</el-tag>
+              </template>
+              <template #operate="{ row }">
+                <el-button type="text" @click="handleDetail(row)">详情</el-button>
+                <el-button type="text" @click="handleDelete(row)">删除</el-button>
+              </template>
+            </Content>
+
         </div>
     </div>
 </template>
 <script setup>
+import searchForm from '@/components/searchForm/index.vue'
+import Content from '@/components/content/index.vue'
 import {list} from '@/api/order'
 import { ref, reactive, onMounted } from 'vue'
-const formRef = ref()
-const paramsQuery = reactive({
+import { ORDER_SEARCH_CONFIG, ORDER_TABLE_CONFIG } from '@/config'
+const tableLoading = ref(true),  tableData = ref([{ status: 1 }])
+const queryParams = reactive({
     page: 1,
     pageSize: 10,
     orderId: '',
     startTime: '',
     endTime: ''
-}), total = ref(0), queryTime = ref([])
-const tableData = ref([])
+}), total = ref(0)
+const EMPTY_STR = '- -'
+const tag = (status) => {
+    const map = {
+        1: { type: 'success', label: '已完成' },
+        2: { type: 'info', label: '待处理' },
+        3: { type: 'warning', label: '处理中' },
+        4: { type: 'danger', label: '已拒绝' }
+    }
+    return map[status] || { type: '', label: EMPTY_STR }
+}
+const searchData = (data) => {
+  if (data.times) {
+    data.startTime = data.times[0]
+    data.endTime = data.times[1]
+  }
+  queryParams.value.page = 1
+  queryParams.value = { ...queryParams.value, ...data }
+  delete queryParams.value.times
+  // console.log(queryParams.value)
+  getList()
+}
+const resetData = () => {
+  queryParams.value = {
+    page: 1,
+    pageSize: 10,
+  }
+  getList()
+}
 onMounted(() => {
     getList()
 })
-
 async function getList() {
-    const res = await list(paramsQuery)
+    const res = await list(queryParams)
     if(res.code === 0) {
         tableData.value = res.data.list
         total.value = res.data.total
     }
 }
-function onSubmit() {
-    console.log(queryTime.value)
-    paramsQuery.startTime = queryTime.value[0]
-    paramsQuery.endTime = queryTime.value[1]
-    getList()
-}
-function reset(formEl) {
-    if (!formEl) return
-    formEl.resetFields()
-    getList()
-}
+
 function handleDelete(row) {
     console.log(row)
 }
+function handleDetail(row) {
+
+}
+
+
+function changePage(data) {
+queryParams.value.pageNum = data
+getList()
+}
 </script>
 <style lang="scss" scoped>
-.demo-form-inline{
-    background: white;
-    padding: 1rem;
-    padding-bottom: 0;
-    margin-top: 0.5rem;
-    
-}
-</style>
+</style>