From e9d9451aea6737cd50c656af16a9458acbe995ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=9C=9F=E8=B1=86=E5=93=A5?= <zhanglp15229380174@163.com>
Date: Mon, 22 Aug 2022 21:35:21 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=EF=BC=9A=E5=85=AC=E5=85=B1?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/QuickCrud/index.vue    |  15 ++-
 src/components/QuickDetail/index.vue  | 162 ++++++++++++++++++++++++++
 src/components/QuickForm/index.vue    |   2 +-
 src/components/QuickSearch/index.vue  |   2 +-
 src/components/QuickTable/index.vue   |   2 +-
 src/components/QuickToolbar/index.vue |   4 -
 src/components/QuickUpload/index.vue  |  68 +++++++++++
 src/layout/index.vue                  |   6 -
 8 files changed, 240 insertions(+), 21 deletions(-)
 create mode 100644 src/components/QuickDetail/index.vue
 create mode 100644 src/components/QuickUpload/index.vue

diff --git a/src/components/QuickCrud/index.vue b/src/components/QuickCrud/index.vue
index ef14734..4f4fe28 100644
--- a/src/components/QuickCrud/index.vue
+++ b/src/components/QuickCrud/index.vue
@@ -10,13 +10,12 @@ import {
   nextTick,
   onActivated,
 } from 'vue'
-import { ElMessage, ElTree, FormInstance } from 'element-plus'
-import { number } from 'echarts'
+import { ElMessage, ElTree } from 'element-plus'
 import QuickSearch from '@/components/QuickSearch/index.vue'
 import QuickTable from '@/components/QuickTable/index.vue'
 import QuickToolbar from '@/components/QuickToolbar/index.vue'
 import QuickForm from '@/components/QuickForm/index.vue'
-import { Actionbar, Toolbar } from '@/types/table'
+import { Actionbar, Column, Toolbar } from '@/types/table'
 import { FormItem } from '@/types/form'
 import { Page } from '@/types/page'
 import { LeftTree, Tree } from '@/types/tree'
@@ -118,18 +117,18 @@ const {
   height,
 } = toRefs(props) as {
   searchFormModel: Ref<boolean | any>
-  searchFormItems: Ref<FormItem[]>
+  searchFormItems: Ref<Array<FormItem>>
   dialogTitle: Ref<boolean | any>
   formModel: Ref<any>
-  formItems: Ref<FormItem[]>
+  formItems: Ref<Array<FormItem>>
   formInline: Ref<boolean>
-  leftTree: Ref<any>
+  leftTree: Ref<boolean | object>
   leftTreeRefresh: Ref<boolean>
   tableData: Ref<any>
-  tableColumns: Ref<any>
+  tableColumns: Ref<Array<Column>>
   tableActionbar: Ref<boolean | Actionbar>
   tableToolbar: Ref<boolean | Toolbar>
-  page: Ref<Page>
+  page: Ref<boolean | Page>
   loading: Ref<boolean>
   height: Ref<boolean | number>
 }
diff --git a/src/components/QuickDetail/index.vue b/src/components/QuickDetail/index.vue
new file mode 100644
index 0000000..2eab1e3
--- /dev/null
+++ b/src/components/QuickDetail/index.vue
@@ -0,0 +1,162 @@
+<script lang="ts" setup>
+import { defineProps, toRefs, Ref,defineEmits } from 'vue'
+import { Column } from '@/types/table'
+import { Tab, Detail } from '@/types/detail'
+
+/**
+ * props
+ */
+const props = defineProps({
+  activeName:{
+    type:String,
+    default:''
+  },
+  data: {
+    type: Array<Detail>,
+    default: () => {
+      return []
+    },
+  },
+  tabs: {
+    type: Array<Tab>,
+    default: () => {
+      return []
+    },
+  },
+  position: {
+    type: String,
+    default: 'top',
+  },
+  enableSlot:{
+    type: Boolean,
+    default: false,
+  }
+})
+/**
+ * props toRefs
+ */
+const { activeName,data, tabs, position,enableSlot } = toRefs(props) as {
+  activeName:Ref<string>
+  data: Ref<Array<Detail>>
+  tabs: Ref<Array<Tab>>
+  position: Ref<string>
+  enableSlot:Ref<boolean>
+}
+/**
+ * emits
+ */
+const emits=defineEmits(['onChange'])
+/**
+ * 函数
+ */
+const getData=(tab:Tab)=>{
+const item=data.value.find(x=>x.tabName===tab.name)
+return item?.data
+}
+const getRow=(tab:Tab,index:number)=>{
+ const rows=getData(tab)
+  if(!rows){
+    return null
+  }
+return rows[index]&&rows[index]
+}
+const getValue=(tab:Tab,columnItem:Column,index:number)=>{
+  const tabData=getData(tab)
+  if(!tabData){
+    return ''
+  }
+  return tabData[index]&&tabData[index][columnItem.prop]
+}
+const handleChange=(name: any)=>{
+ emits('onChange', name);
+}
+</script>
+
+<template>
+  <el-tabs
+    v-model="activeName"
+    :tab-position="position"
+    @tab-change="handleChange"
+  >
+    <template v-if="enableSlot"> <slot></slot> </template>
+    <template v-else>
+      <el-tab-pane
+        v-for="(item, index) in tabs"
+        :key="index"
+        :label="item.label"
+        :name="item.name"
+      >
+        <template v-if="item.type === 'table'">
+          <el-table
+            :data="getData(item)"
+            style="width: 100%"
+            row-key="id"
+            border
+            stripe
+          >
+            <el-table-column
+              v-for="(columnItem, columnIndex) in item.columns"
+              :key="columnIndex"
+              :prop="columnItem.prop"
+              :width="columnItem.width"
+              :type="columnItem.type"
+              :label="columnItem.label"
+              :align="columnItem.align"
+              :formatter="columnItem.format"
+              show-overflow-tooltip
+            />
+            <el-table-column label="操作" width="120">
+              <template #default="scope">
+                <slot name="tablebar" :row="scope.row"></slot>
+              </template>
+            </el-table-column>
+          </el-table>
+        </template>
+        <template v-else-if="item.type === 'title'">
+          <template
+            v-for="(title, titleIndex) in item.titles"
+            :key="titleIndex"
+          >
+            <el-descriptions
+              :column="item.column"
+              :border="item.border"
+              :direction="item.direction"
+              :title="title"
+            >
+              <template #extra>
+                <slot name="action" :row="getRow(item, titleIndex)"></slot>
+              </template>
+              <el-descriptions-item
+                v-for="(detacItem, detacIndex) in item.columns"
+                :key="detacIndex"
+                :label="detacItem.label"
+              >
+                {{ getValue(item, detacItem, titleIndex) }}
+              </el-descriptions-item>
+            </el-descriptions>
+          </template>
+        </template>
+        <template v-else>
+          <el-descriptions
+            :column="item.column"
+            :border="item.border"
+            :direction="item.direction"
+          >
+            <template #extra>
+              <slot name="action" :row="getRow(item, 0)"></slot>
+            </template>
+            <el-descriptions-item
+              v-for="(detacItem, detacIndex) in item.columns"
+              :key="detacIndex"
+              :label="detacItem.label"
+            >
+              {{ getValue(item, detacItem, 0) }}
+            </el-descriptions-item>
+          </el-descriptions>
+        </template>
+      </el-tab-pane>
+    </template>
+  </el-tabs>
+</template>
+
+<style lang="scss"></style>
diff --git a/src/components/QuickForm/index.vue b/src/components/QuickForm/index.vue
index 537643f..74a3f06 100644
--- a/src/components/QuickForm/index.vue
+++ b/src/components/QuickForm/index.vue
@@ -49,7 +49,7 @@ const { model, formInline, formItems, formType, actionSlot, hiddenAction } =
   toRefs(props) as {
     model: Ref<any>
     formInline: Ref<boolean>
-    formItems: Ref<FormItem[]>
+    formItems: Ref<Array<FormItem>>
     formType: Ref<string>
     actionSlot: Ref<boolean>
     hiddenAction: Ref<boolean>
diff --git a/src/components/QuickSearch/index.vue b/src/components/QuickSearch/index.vue
index 583bb35..2bca2c0 100644
--- a/src/components/QuickSearch/index.vue
+++ b/src/components/QuickSearch/index.vue
@@ -32,7 +32,7 @@ const props = defineProps({
 const { model, items, searchButtonName, resetButtonName, hiddenResetButton } =
   toRefs(props) as {
     model: Ref<any>
-    items: Ref<FormItem[]>
+    items: Ref<Array<FormItem>>
     searchButtonName: Ref<any>
     resetButtonName: Ref<any>
     hiddenResetButton: Ref<any>
diff --git a/src/components/QuickTable/index.vue b/src/components/QuickTable/index.vue
index 0d8527d..5264347 100644
--- a/src/components/QuickTable/index.vue
+++ b/src/components/QuickTable/index.vue
@@ -85,7 +85,7 @@ const {
   hiddenDetailButton,
 } = toRefs(props) as {
   data: Ref<any>
-  columns: Ref<Column[]>
+  columns: Ref<Array<Column>>
   height: Ref<boolean | number>
   rowKey: Ref<string>
   loading: Ref<boolean>
diff --git a/src/components/QuickToolbar/index.vue b/src/components/QuickToolbar/index.vue
index 6f361a8..f828aee 100644
--- a/src/components/QuickToolbar/index.vue
+++ b/src/components/QuickToolbar/index.vue
@@ -172,8 +172,4 @@ const handleCustomClick = (item: any) => {
 .toobar {
   margin-bottom: 10px;
 }
-
-.el-upload {
-  display: inline-flex;
-}
 </style>
diff --git a/src/components/QuickUpload/index.vue b/src/components/QuickUpload/index.vue
new file mode 100644
index 0000000..35646c9
--- /dev/null
+++ b/src/components/QuickUpload/index.vue
@@ -0,0 +1,68 @@
+<script lang="ts" setup>
+import { ref, defineProps, toRefs, Ref } from 'vue'
+import { Plus } from '@element-plus/icons-vue'
+
+/**
+ * props
+ */
+const props = defineProps({
+  action: {
+    type: String,
+    default: 'https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15',
+  },
+  type: {
+    type: [Boolean, String],
+    default: false,
+  },
+})
+/**
+ * props toRefs
+ */
+const { action, type } = toRefs(props) as {
+  action: Ref<string>
+  type: Ref<boolean | string>
+}
+const imageUrl = ref('')
+</script>
+
+<template>
+  <el-upload :action="action">
+    <template v-if="type === 'avatar'">
+      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+      <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+    </template>
+    <template v-else>
+      <el-button type="primary">上传</el-button>
+    </template>
+  </el-upload>
+</template>
+
+<style scoped>
+.avatar-uploader .avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+</style>
+<style>
+::v-deep .avatar-uploader .el-upload {
+  border: 1px dashed var(--el-border-color) !important;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: var(--el-color-primary);
+}
+
+.el-icon.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  text-align: center;
+}
+</style>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 33550e2..10c55ff 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -104,7 +104,6 @@ watch(tabList, (val) => {
               v-model="editableTabsValue"
               type="card"
               closable
-              class="demo-tabs"
               @edit="handleTabsEdit"
               @tab-change="handleClick"
             >
@@ -144,11 +143,6 @@ watch(tabList, (val) => {
 }
 </style>
 <style>
-.demo-tabs > .el-tabs__content {
-  padding: 10px;
-  color: #6b778c;
-  font-size: 32px;
-}
 .el-header {
   padding: 0;
   height: 50px;
-- 
Gitee