From 433fea8672ceba1de60da21a916faf7a8bdcaa6a Mon Sep 17 00:00:00 2001
From: Gaoxs <gaoxiaosong@huoban.com>
Date: Tue, 23 May 2023 00:18:52 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=BF=81=E7=A7=BB=E7=B4=A0=E6=9D=90?=
 =?UTF-8?q?=E5=BA=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/tools/material.js                     |  46 ++
 src/api/tools/materialgroup.js                |  52 ++
 src/components/Material/index.ts              |   3 -
 src/components/Material/src/Material.vue      | 481 --------------
 .../Material/src/Materials copy.vue           | 624 ------------------
 src/components/Material/src/Materials.vue     | 402 -----------
 src/components/Materials/index.ts             |   9 +
 src/components/Materials/src/Materials.vue    | 514 +++++++++++++++
 src/views/mp/material/index.vue               |  17 +
 9 files changed, 638 insertions(+), 1510 deletions(-)
 create mode 100644 src/api/tools/material.js
 create mode 100644 src/api/tools/materialgroup.js
 delete mode 100644 src/components/Material/index.ts
 delete mode 100644 src/components/Material/src/Material.vue
 delete mode 100644 src/components/Material/src/Materials copy.vue
 delete mode 100644 src/components/Material/src/Materials.vue
 create mode 100644 src/components/Materials/index.ts
 create mode 100644 src/components/Materials/src/Materials.vue

diff --git a/src/api/tools/material.js b/src/api/tools/material.js
new file mode 100644
index 0000000..855ac03
--- /dev/null
+++ b/src/api/tools/material.js
@@ -0,0 +1,46 @@
+/*
+ * @Author: Gaoxs
+ * @Date: 2023-05-21 23:40:06
+ * @LastEditors: Gaoxs
+ * @Description:
+ */
+import request from '@/config/axios'
+
+export async function getPage(query) {
+  return await request.get({
+    url: '/shop/material/page',
+
+    params: query
+  })
+}
+
+export async function addObj(obj) {
+  return await request.post({
+    url: '/shop/material/create',
+
+    data: obj
+  })
+}
+
+export async function getObj(id) {
+  return await request.ge({
+    url: '/shop/material/' + id
+  })
+}
+
+export async function delObj(id) {
+  return await request.delete({
+    url: '/shop/material/delete',
+    params: {
+      id
+    }
+  })
+}
+
+export async function putObj(obj) {
+  return await request.put({
+    url: '/shop/material/update',
+
+    data: obj
+  })
+}
diff --git a/src/api/tools/materialgroup.js b/src/api/tools/materialgroup.js
new file mode 100644
index 0000000..4c9b02d
--- /dev/null
+++ b/src/api/tools/materialgroup.js
@@ -0,0 +1,52 @@
+/*
+ * @Author: Gaoxs
+ * @Date: 2023-05-21 23:40:06
+ * @LastEditors: Gaoxs
+ * @Description:
+ */
+import request from '@/config/axios'
+
+export async function getPage(query) {
+  return await request.get({
+    url: '/shop/material-group/page',
+
+    params: query
+  })
+}
+
+export async function getList(query) {
+  return await request.get({
+    url: '/shop/material-group/list',
+
+    params: query
+  })
+}
+
+export async function addObj(obj) {
+  return await request.post({
+    url: '/shop/material-group/create',
+
+    data: obj
+  })
+}
+
+export async function getObj(id) {
+  return await request.ge({
+    url: '/shop/material-group/' + id
+  })
+}
+
+export async function delObj(id) {
+  return await request.delete({
+    url: '/shop/material-group/delete',
+    params: { id }
+  })
+}
+
+export async function putObj(obj) {
+  return await request.put({
+    url: '/shop/material-group/update',
+
+    data: obj
+  })
+}
diff --git a/src/components/Material/index.ts b/src/components/Material/index.ts
deleted file mode 100644
index f5bd9dc..0000000
--- a/src/components/Material/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-// import Materials from './src/Materials.vue'
-
-// export { Materials }
diff --git a/src/components/Material/src/Material.vue b/src/components/Material/src/Material.vue
deleted file mode 100644
index 967c653..0000000
--- a/src/components/Material/src/Material.vue
+++ /dev/null
@@ -1,481 +0,0 @@
-<!-- <template>
-  <div v-if="type == 'image'">
-    <div v-if="myValue != ''">
-      <ul class="el-upload-list el-upload-list--picture-card">
-        <li tabindex="0" class="el-upload-list__item is-ready" :style="'width: '+width+'px;height: '+height+'px'">
-          <div>
-            <img :src="myValue" alt="" class="el-upload-list__item-thumbnail">
-            <span class="el-upload-list__item-actions">
-              <span class="el-upload-list__item-delete" @click="deleteMaterial">
-                <i class="el-icon-delete" />
-              </span>
-            </span>
-          </div>
-        </li>
-      </ul>
-    </div>
-    <div v-else tabindex="0" class="el-upload el-upload--picture-card" :style="'width: '+width+'px;height: '+height+'px;'+'line-height:'+height+'px;'" @click="toSeleteMaterial">
-      <i class="el-icon-plus" />
-    </div>
-
-    <el-dialog
-      append-to-body
-      :visible.sync="dialogVisible"
-      width="35%"
-    >
-      <img :src="url" alt="" style="width: 100%">
-    </el-dialog>
-
-    <el-dialog
-      title="图片素材库"
-      append-to-body
-      :visible.sync="listDialogVisible"
-      width="70%"
-    >
-      <el-container>
-        <el-aside width="unset">
-          <div style="margin-bottom: 10px">
-            <el-button
-              class="el-icon-plus"
-              size="small"
-              @click="materialgroupAdd()"
-            >
-              添加分组
-            </el-button>
-          </div>
-          <el-tabs v-model="materialgroupObjId" v-loading="materialgroupLoading" tab-position="left" @tab-click="tabClick">
-            <el-tab-pane
-              v-for="(item,index) in materialgroupList"
-              :key="item.id"
-              :name="item.id"
-            >
-              <span slot="label"> {{ item.name }}</span>
-            </el-tab-pane>
-          </el-tabs>
-        </el-aside>
-        <el-main>
-          <el-card>
-            <div slot="header">
-              <el-row>
-                <el-col :span="12">
-                  <span>{{ materialgroupObj.name }}</span>
-                  <span v-if="materialgroupObj.id != '-1'">
-                    <el-button size="small" type="text" class="el-icon-edit" style="margin-left: 10px;" @click="materialgroupEdit(materialgroupObj)">重命名</el-button>
-                    <el-button size="small" type="text" class="el-icon-delete" style="margin-left: 10px;color: red" @click="materialgroupDelete(materialgroupObj)">删除</el-button>
-                  </span>
-                </el-col>
-                <el-col :span="12" style="text-align: right;">
-                  <el-upload
-                    :action="uploadApi"
-                    :headers="headers"
-                    :file-list="[]"
-                    :on-progress="handleProgress"
-                    :before-upload="beforeUpload"
-                    :on-success="handleSuccess"
-                    :data="{type: 1}"
-                    multiple
-                  >
-                    <el-button size="small" type="primary">批量上传</el-button>
-                  </el-upload>
-                </el-col>
-              </el-row>
-            </div>
-            <div v-loading="tableLoading">
-              <el-alert
-                v-if="tableData.length <= 0"
-                title="暂无数据"
-                type="info"
-                :closable="false"
-                center
-                show-icon
-              />
-              <el-row :gutter="5">
-                <el-checkbox-group v-model="urls" :max="num - myValue.length">
-                  <el-col v-for="(item,index) in tableData" :key="index" :span="4">
-                    <el-card :body-style="{ padding: '5px' }">
-                      <el-image
-                        style="width: 100%;height: 100px"
-                        :src="item.url"
-                        fit="contain"
-                        :preview-src-list="[item.url]"
-                        :z-index="999"
-                      />
-                      <div>
-                        <el-checkbox class="material-name" :label="item.url">
-                          选择
-                        </el-checkbox>
-                        <el-row>
-                          <el-col :span="24" class="col-do">
-                            <el-button type="text" size="medium" @click="materialDel(item)">删除</el-button>
-                          </el-col>
-                        </el-row>
-
-                      </div>
-                    </el-card>
-                  </el-col>
-                </el-checkbox-group>
-              </el-row>
-              <el-pagination
-                :current-page.sync="page.currentPage"
-                :page-sizes="[12, 24]"
-                :page-size="page.pageSize"
-                layout="total, sizes, prev, pager, next, jumper"
-                :total="page.total"
-                class="pagination"
-                @size-change="sizeChange"
-                @current-change="pageChange"
-              />
-            </div>
-          </el-card>
-        </el-main>
-      </el-container>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="listDialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="sureUrls">确 定</el-button>
-      </span>
-    </el-dialog>
-  </div>
-
-</template>
-
-<script>
-import { getList as materialgroupPage, addObj as materialgroupAdd, delObj as materialgroupDel, putObj as materialgroupEdit } from '@/api/tools/materialgroup'
-import { getPage, addObj, delObj, putObj } from '@/api/tools/material'
-import { getToken } from '@/utils/auth'
-import { mapGetters } from 'vuex'
-
-export default {
-  name: 'MaterialList',
-  props: {
-    // 素材数据
-    value: {
-      type: String
-    },
-    // 素材类型
-    type: {
-      type: String
-    },
-    // 素材限制数量，默认5个
-    num: {
-      type: Number,
-      default() {
-        return 5
-      }
-    },
-    // 宽度
-    width: {
-      type: Number,
-      default() {
-        return 150
-      }
-    },
-    // 宽度
-    height: {
-      type: Number,
-      default() {
-        return 150
-      }
-    }
-  },
-  data() {
-    return {
-      headers: {
-        Authorization: getToken()
-      },
-      dialogVisible: false,
-      myValue: this.value,
-      url: '',
-      listDialogVisible: false,
-      materialgroupList: [],
-      materialgroupObjId: '',
-      materialgroupObj: {},
-      materialgroupLoading: false,
-      tableData: [],
-      resultNumber: 0,
-      page: {
-        total: 0, // 总页数
-        currentPage: 1, // 当前页数
-        pageSize: 12, // 每页显示多少条
-        ascs: [], // 升序字段
-        descs: 'create_time'// 降序字段
-      },
-      tableLoading: false,
-      groupId: null,
-      urls: []
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'uploadApi'
-    ])
-  },
-  watch: {
-    value: function(val) {
-      this.myValue = val
-    }
-  },
-  methods: {
-    moveMaterial(index, type) {
-      if (type == 'up') {
-        const tempOption = this.value[index - 1]
-        this.$set(this.value, index - 1, this.value[index])
-        this.$set(this.value, index, tempOption)
-      }
-      if (type == 'down') {
-        const tempOption = this.value[index + 1]
-        this.$set(this.value, index + 1, this.value[index])
-        this.$set(this.value, index, tempOption)
-      }
-    },
-    zoomMaterial(index) {
-      this.dialogVisible = true
-      this.url = this.value[index]
-    },
-    deleteMaterial() {
-      const that = this
-      this.$confirm('是否确认删除？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(function() {
-        that.myValue = ''
-        that.urls = []
-      })
-    },
-    toSeleteMaterial() {
-      this.listDialogVisible = true
-      if (this.tableData.length <= 0) {
-        this.materialgroupPage()
-      }
-    },
-    materialgroupPage() {
-      this.materialgroupLoading = true
-      materialgroupPage({
-        total: 0, // 总页数
-        page: 1, // 当前页数
-        size: 100, // 每页显示多少条
-        ascs: [], // 升序字段
-        sort: 'create_time,desc'// 降序字段
-      }).then(response => {
-        this.materialgroupLoading = false
-        const materialgroupList = response
-        materialgroupList.unshift({
-          id: '-1',
-          name: '全部分组'
-        })
-        this.materialgroupList = materialgroupList
-        this.tabClick({
-          index: 0
-        })
-      })
-    },
-    materialgroupDelete(materialgroupObj) {
-      const that = this
-      this.$confirm('是否确认删除该分组？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(function() {
-        materialgroupDel(materialgroupObj.id)
-          .then(function() {
-            that.$delete(that.materialgroupList, materialgroupObj.index)
-          })
-      })
-    },
-    materialgroupEdit(materialgroupObj) {
-      const that = this
-      this.$prompt('请输入分组名', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        inputValue: materialgroupObj.name
-      }).then(({ value }) => {
-        materialgroupEdit({
-          id: materialgroupObj.id,
-          name: value
-        }).then(function() {
-          materialgroupObj.name = value
-          that.$set(that.materialgroupList, materialgroupObj.index, materialgroupObj)
-        })
-      }).catch(() => {
-
-      })
-    },
-    materialgroupAdd() {
-      const that = this
-      this.$prompt('请输入分组名', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消'
-      }).then(({ value }) => {
-        materialgroupAdd({
-          name: value
-        }).then(function() {
-          that.materialgroupPage()
-        })
-      }).catch(() => {
-
-      })
-    },
-    tabClick(tab, event) {
-      this.urls = []
-      const index = Number(tab.index)
-      const materialgroupObj = this.materialgroupList[index]
-      materialgroupObj.index = index
-      this.materialgroupObj = materialgroupObj
-      this.materialgroupObjId = materialgroupObj.id
-      this.page.currentPage = 1
-      this.page.total = 0
-      if (materialgroupObj.id != '-1') {
-        this.groupId = materialgroupObj.id
-      } else {
-        this.groupId = null
-      }
-      this.getPage(this.page)
-    },
-    getPage(page, params) {
-      this.tableLoading = true
-      getPage(Object.assign({
-        page: page.currentPage - 1,
-        size: page.pageSize,
-        descs: this.page.descs,
-        ascs: this.page.ascs,
-        sort: 'create_time,desc'
-      }, {
-        groupId: this.groupId
-      })).then(response => {
-        const tableData = response.content
-        this.page.total = response.totalElements
-        this.page.currentPage = page.currentPage
-        this.page.pageSize = page.pageSize
-        this.tableData = tableData
-        this.tableLoading = false
-      }).catch(() => {
-        this.tableLoading = false
-      })
-    },
-    sizeChange(val) {
-      console.log(val)
-      this.page.currentPage = 1
-      this.page.pageSize = val
-      this.getPage(this.page)
-    },
-    pageChange(val) {
-      console.log(val)
-      this.page.currentPage = val
-      // this.page.pageSize = val
-      this.getPage(this.page)
-    },
-    materialRename(item) {
-      const that = this
-      this.$prompt('请输入素材名', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        inputValue: item.name
-      }).then(({ value }) => {
-        putObj({
-          id: item.id,
-          name: value
-        }).then(function() {
-          that.getPage(that.page)
-        })
-      }).catch(() => {
-
-      })
-    },
-    materialUrl(item) {
-      const that = this
-      this.$prompt('素材链接', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        inputValue: item.url
-      }).then(({ value }) => {
-
-      }).catch(() => {
-
-      })
-    },
-    materialDel(item) {
-      const that = this
-      this.$confirm('是否确认删除该素材？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(function() {
-        delObj(item.id)
-          .then(function() {
-            that.getPage(that.page)
-          })
-      })
-    },
-    handleCommand(command) {
-      const that = this
-      const s = command.split('-')
-      putObj({
-        id: s[0],
-        groupId: s[1]
-      }).then(function() {
-        that.getPage(that.page)
-      })
-    },
-    handleProgress(event, file, fileList) {
-      console.log(event)
-      // let uploadProgress = file.percentage.toFixed(0)
-      // this.uploadProgress = uploadProgress
-    },
-    handleSuccess(response, file, fileList) {
-      const that = this
-      this.uploadProgress = 0
-      addObj({
-        type: '1',
-        groupId: this.groupId != '-1' ? this.groupId : null,
-        name: file.name,
-        url: response.link
-      }).then(() => {
-        this.resultNumber++
-        if (fileList.length === this.resultNumber) {
-          that.getPage(that.page)
-          this.resultNumber = 0
-        }
-      })
-    },
-    beforeUpload(file) {
-      const isPic =
-        file.type === 'image/jpeg' ||
-        file.type === 'image/png' ||
-        file.type === 'image/gif' ||
-        file.type === 'image/jpg'
-      const isLt2M = file.size / 1024 / 1024 < 2
-      if (!isPic) {
-        this.$message.error('上传图片只能是 JPG、JPEG、PNG、GIF 格式!')
-        return false
-      }
-      if (!isLt2M) {
-        this.$message.error('上传头像图片大小不能超过 2MB!')
-      }
-      return isPic && isLt2M
-    },
-    sureUrls() {
-      console.log('this.urls:' + this.urls)
-      this.myValue = this.urls[0]
-      this.$emit('input', this.urls[0])
-      this.listDialogVisible = false
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-  ::v-deep .el-icon-circle-close{
-    color: red;
-  }
-  .material-name{
-    padding: 8px 0px;
-  }
-  .col-do{
-    text-align: center;
-  }
-  .button-do{
-    padding: unset!important;
-    font-size: 12px;
-  }
-</style>
- -->
diff --git a/src/components/Material/src/Materials copy.vue b/src/components/Material/src/Materials copy.vue
deleted file mode 100644
index 942d64b..0000000
--- a/src/components/Material/src/Materials copy.vue	
+++ /dev/null
@@ -1,624 +0,0 @@
-<!-- <template>
-  <div>
-    <ul
-      v-for="(item, index) in value"
-      :key="index"
-      class="el-upload-list el-upload-list--picture-card"
-    >
-      <li
-        tabindex="0"
-        class="el-upload-list__item is-ready"
-        :style="'width: ' + width + 'px;height: ' + height + 'px'"
-      >
-        <div>
-          <img :src="item" alt="" class="el-upload-list__item-thumbnail" />
-          <span class="el-upload-list__item-actions">
-            <span
-              v-if="index != 0"
-              class="el-upload-list__item-preview"
-              @click="moveMaterial(index, 'up')"
-            >
-              <i class="el-icon-back" />
-            </span>
-            <span class="el-upload-list__item-preview" @click="zoomMaterial(index)">
-              <i class="el-icon-view" />
-            </span>
-            <span class="el-upload-list__item-delete" @click="deleteMaterial(index)">
-              <i class="el-icon-delete" />
-            </span>
-            <span
-              v-if="index != value.length - 1"
-              class="el-upload-list__item-preview"
-              @click="moveMaterial(index, 'down')"
-            >
-              <i class="el-icon-right" />
-            </span>
-          </span>
-        </div>
-      </li>
-    </ul>
-    <div
-      v-if="num > value.length"
-      tabindex="0"
-      class="el-upload el-upload--picture-card"
-      :style="'width: ' + width + 'px;height: ' + height + 'px;' + 'line-height:' + height + 'px;'"
-      @click="toSeleteMaterial"
-    >
-      <i class="el-icon-plus" />
-    </div>
-
-    <el-dialog append-to-body :visible.sync="dialogVisible" width="35%">
-      <img :src="url" alt="" style="width: 100%" />
-    </el-dialog>
-
-    <el-dialog title="图片素材库" append-to-body :visible.sync="listDialogVisible" width="70%">
-      <el-container>
-        <el-aside width="unset">
-          <div style="margin-bottom: 10px">
-            <el-button class="el-icon-plus" size="small" @click="materialgroupAdd()">
-              添加分组
-            </el-button>
-          </div>
-          <el-tabs
-            v-model="materialgroupObjId"
-            v-loading="materialgroupLoading"
-            tab-position="left"
-            @tab-click="tabClick"
-          >
-            <el-tab-pane v-for="(item, index) in materialgroupList" :key="item.id" :name="item.id">
-              <span slot="label"> {{ item.name }}</span>
-            </el-tab-pane>
-          </el-tabs>
-        </el-aside>
-        <el-main>
-          <el-card>
-            <div slot="header">
-              <el-row>
-                <el-col :span="12">
-                  <span>{{ materialgroupObj.name }}</span>
-                  <span v-if="materialgroupObj.id != '-1'">
-                    <el-button
-                      size="small"
-                      type="text"
-                      class="el-icon-edit"
-                      style="margin-left: 10px"
-                      @click="materialgroupEdit(materialgroupObj)"
-                      >重命名</el-button
-                    >
-                    <el-button
-                      size="small"
-                      type="text"
-                      class="el-icon-delete"
-                      style="margin-left: 10px; color: red"
-                      @click="materialgroupDelete(materialgroupObj)"
-                      >删除</el-button
-                    >
-                  </span>
-                </el-col>
-                <el-col :span="12" style="text-align: right">
-                  <el-upload
-                    :action="uploadApi"
-                    :headers="headers"
-                    :file-list="[]"
-                    :on-progress="handleProgress"
-                    :before-upload="beforeUpload"
-                    :on-success="handleSuccess"
-                    :data="{ type: 1 }"
-                    multiple
-                  >
-                    <el-button size="small" type="primary">批量上传</el-button>
-                  </el-upload>
-                </el-col>
-              </el-row>
-            </div>
-            <div v-loading="tableLoading">
-              <el-alert
-                v-if="tableData.length <= 0"
-                title="暂无数据"
-                type="info"
-                :closable="false"
-                center
-                show-icon
-              />
-              <el-row :gutter="5">
-                <el-checkbox-group v-model="urls" :max="num - value.length">
-                  <el-col v-for="(item, index) in tableData" :key="index" :span="4">
-                    <el-card :body-style="{ padding: '5px' }">
-                      <el-image
-                        style="width: 100%; height: 100px"
-                        :src="item.url"
-                        fit="contain"
-                        :preview-src-list="[item.url]"
-                        :z-index="9999"
-                      />
-                      <div>
-                        <el-checkbox  class="material-name" :label="item.url"> 选择 </el-checkbox>
-                        <el-row>
-                          <el-col :span="24" class="col-do">
-                            <el-button type="text" size="medium" @click="materialDel(item)"
-                              >删除</el-button
-                            >
-                          </el-col>
-                        </el-row>
-                      </div>
-                    </el-card>
-                  </el-col>
-                </el-checkbox-group>
-              </el-row>
-              <el-pagination
-                :current-page.sync="page.currentPage"
-                :page-sizes="[12, 24]"
-                :page-size="page.pageSize"
-                layout="total, sizes, prev, pager, next, jumper"
-                :total="page.total"
-                class="pagination"
-                @size-change="sizeChange"
-                @current-change="pageChange"
-              />
-            </div>
-          </el-card>
-        </el-main>
-      </el-container>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="listDialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="sureUrls">确 定</el-button>
-      </span>
-    </el-dialog>
-  </div>
-</template>
-
-<script  setup lang="ts" name="Materials">
-// import {
-//   getList as materialgroupPage,
-//   addObj as materialgroupAdd,
-//   delObj as materialgroupDel,
-//   putObj as materialgroupEdit
-// } from '@/api/tools/materialgroup'
-import * as MaterialGroupApi from '@/api/mall/shop/materialGroup'
-//import { getPage, addObj, delObj, putObj } from '@/api/mall/tools/material'
-// import { getToken } from '@/utils/auth'
-// import { mapGetters } from 'vuex'
-import { propTypes } from '@/utils/propTypes'
-import { getAccessToken, getTenantId } from '@/utils/auth'
-
-const props = defineProps({
-  modelValue: {
-    type: Array as PropType<string[]>,
-    required: true
-  },
-  height: propTypes.string.def('150px'), // 组件高度 ==> 非必传（默认为 150px）
-  width: propTypes.string.def('150px'), // 组件宽度 ==> 非必传（默认为 150px）
-  num: propTypes.number.def(5) // 最大图片上传数 ==> 非必传（默认为 5张）
-})
-
-
-let dialogVisible = ref(false)
-let url = ref("")
-let listDialogVisible = ref(false)
-let materialgroupList = ref([])
-let materialgroupObjId = ref("")
-let materialgroupObj = reactive({})
-let materialgroupLoading = ref(false)
-let tableData = ref([])
-let resultNumber = ref(0)
-let tableLoading = ref(false)
-let groupId = ref(0)
-left urls = ref([])
-
-
-const page = reactive({
-        total: 0, // 总页数
-        currentPage: 1, // 当前页数
-        pageSize: 12, // 每页显示多少条
-        ascs: [], // 升序字段
-        descs: 'create_time' // 降序字段
-})
-
-const moveMaterial = (index: number, type: string) => {
-  if (type == 'up') {
-        const tempOption = props.modelValue[index - 1]
-        props.modelValue[index - 1] = props.modelValue[index]
-        props.modelValue[index] = tempOption
-        //this.$set(this.value, index - 1, this.value[index])
-       // this.$set(this.value, index, tempOption)
-      }
-      if (type == 'down') {
-        const tempOption = props.modelValue[index + 1]
-        props.modelValue[index +1] = props.modelValue[index]
-        props.modelValue[index] = tempOption
-        // this.$set(this.value, index + 1, this.value[index])
-        // this.$set(this.value, index, tempOption)
-      }
-}
-
-const zoomMaterial = (index: number) => {
-      dialogVisible.value = true
-      url.value = props.modelValue[index]
-      //this.url = this.value[index]
-},
-
-const deleteMaterial = (index: number) => {
-  console.log(index)
-}
-
-const toSeleteMaterial = () => {
-
-}
-
-const materialgroupPage = () => {
-
-}
-
-const materialgroupDelete = () => {
-
-}
-
-const materialgroupEdit = () => {
-
-}
-
-const materialgroupAdd = () => {
-
-}
-
-const tabClick = () => {
-
-}
-
-const getPage = () => {
-
-}
-
-const sizeChange = (val: number) => {
-  console.log(val)
-}
-
-const pageChange = (val: number) => {
-  console.log(val)
-}
-
-const materialRename = (item: object) => {
-  console.log(item)
-}
-
-const materialUrl = (item: object) => {
-  console.log(item)
-}
-const materialDel = (item: object) => {
-  console.log(item)
-}
-cons
-
-export default {
-  name: 'MaterialList',
-  // props: {
-  //   // 素材数据
-  //   value: {
-  //     type: Array,
-  //     default() {
-  //       return []
-  //     }
-  //   },
-  //   // 素材类型
-  //   type: {
-  //     type: String
-  //   },
-  //   // 素材限制数量，默认5个
-  //   num: {
-  //     type: Number,
-  //     default() {
-  //       return 5
-  //     }
-  //   },
-  //   // 宽度
-  //   width: {
-  //     type: Number,
-  //     default() {
-  //       return 150
-  //     }
-  //   },
-  //   // 宽度
-  //   height: {
-  //     type: Number,
-  //     default() {
-  //       return 150
-  //     }
-  //   }
-  // },
-  data() {
-    return {
-      // headers: {
-      //   Authorization: getToken()
-      // },
-     // dialogVisible: false,
-     // url: '',
-      //listDialogVisible: false,
-     // materialgroupList: [],
-     // materialgroupObjId: '',
-     // materialgroupObj: {},
-     // materialgroupLoading: false,
-     // tableData: [],
-     // resultNumber: 0,
-      // page: {
-      //   total: 0, // 总页数
-      //   currentPage: 1, // 当前页数
-      //   pageSize: 12, // 每页显示多少条
-      //   ascs: [], // 升序字段
-      //   descs: 'create_time' // 降序字段
-      // },
-      // tableLoading: false,
-      // groupId: null,
-      // urls: []
-    }
-  },
-  // computed: {
-  //   ...mapGetters(['uploadApi'])
-  // },
-  methods: {
-    // moveMaterial(index, type) {
-    //   if (type == 'up') {
-    //     const tempOption = this.value[index - 1]
-    //     this.$set(this.value, index - 1, this.value[index])
-    //     this.$set(this.value, index, tempOption)
-    //   }
-    //   if (type == 'down') {
-    //     const tempOption = this.value[index + 1]
-    //     this.$set(this.value, index + 1, this.value[index])
-    //     this.$set(this.value, index, tempOption)
-    //   }
-    // },
-    // zoomMaterial(index) {
-    //   this.dialogVisible = true
-    //   this.url = this.value[index]
-    // },
-    // deleteMaterial(index) {
-    //   const that = this
-    //   this.$confirm('是否确认删除？', '提示', {
-    //     confirmButtonText: '确定',
-    //     cancelButtonText: '取消',
-    //     type: 'warning'
-    //   }).then(function () {
-    //     that.value.splice(index, 1)
-    //     that.urls = []
-    //   })
-    // },
-    // toSeleteMaterial() {
-    //   this.listDialogVisible = true
-    //   if (this.tableData.length <= 0) {
-    //     this.materialgroupPage()
-    //   }
-    // },
-    // materialgroupPage() {
-    //   this.materialgroupLoading = true
-    //   materialgroupPage({
-    //     total: 0, // 总页数
-    //     page: 1, // 当前页数
-    //     size: 100, // 每页显示多少条
-    //     ascs: [], // 升序字段
-    //     sort: 'create_time,desc' // 降序字段
-    //   }).then((response) => {
-    //     this.materialgroupLoading = false
-    //     const materialgroupList = response
-    //     materialgroupList.unshift({
-    //       id: '-1',
-    //       name: '全部分组'
-    //     })
-    //     this.materialgroupList = materialgroupList
-    //     this.tabClick({
-    //       index: 0
-    //     })
-    //   })
-    // },
-    // materialgroupDelete(materialgroupObj) {
-    //   const that = this
-    //   this.$confirm('是否确认删除该分组？', '提示', {
-    //     confirmButtonText: '确定',
-    //     cancelButtonText: '取消',
-    //     type: 'warning'
-    //   }).then(function () {
-    //     materialgroupDel(materialgroupObj.id).then(function () {
-    //       that.$delete(that.materialgroupList, materialgroupObj.index)
-    //     })
-    //   })
-    // },
-    // materialgroupEdit(materialgroupObj) {
-    //   const that = this
-    //   this.$prompt('请输入分组名', '提示', {
-    //     confirmButtonText: '确定',
-    //     cancelButtonText: '取消',
-    //     inputValue: materialgroupObj.name
-    //   })
-    //     .then(({ value }) => {
-    //       materialgroupEdit({
-    //         id: materialgroupObj.id,
-    //         name: value
-    //       }).then(function () {
-    //         materialgroupObj.name = value
-    //         that.$set(that.materialgroupList, materialgroupObj.index, materialgroupObj)
-    //       })
-    //     })
-    //     .catch(() => {})
-    // },
-    // materialgroupAdd() {
-    //   const that = this
-    //   this.$prompt('请输入分组名', '提示', {
-    //     confirmButtonText: '确定',
-    //     cancelButtonText: '取消'
-    //   })
-    //     .then(({ value }) => {
-    //       materialgroupAdd({
-    //         name: value
-    //       }).then(function () {
-    //         that.materialgroupPage()
-    //       })
-    //     })
-    //     .catch(() => {})
-    // },
-    // tabClick(tab, event) {
-    //   this.urls = []
-    //   const index = Number(tab.index)
-    //   const materialgroupObj = this.materialgroupList[index]
-    //   materialgroupObj.index = index
-    //   this.materialgroupObj = materialgroupObj
-    //   this.materialgroupObjId = materialgroupObj.id
-    //   this.page.currentPage = 1
-    //   this.page.total = 0
-    //   if (materialgroupObj.id != '-1') {
-    //     this.groupId = materialgroupObj.id
-    //   } else {
-    //     this.groupId = null
-    //   }
-    //   this.getPage(this.page)
-    // },
-    // getPage(page, params) {
-    //   this.tableLoading = true
-    //   getPage(
-    //     Object.assign(
-    //       {
-    //         page: page.currentPage - 1,
-    //         size: page.pageSize,
-    //         descs: this.page.descs,
-    //         ascs: this.page.ascs,
-    //         sort: 'create_time,desc'
-    //       },
-    //       {
-    //         groupId: this.groupId
-    //       }
-    //     )
-    //   )
-    //     .then((response) => {
-    //       const tableData = response.content
-    //       this.page.total = response.totalElements
-    //       this.page.currentPage = page.currentPage
-    //       this.page.pageSize = page.pageSize
-    //       this.tableData = tableData
-    //       this.tableLoading = false
-    //     })
-    //     .catch(() => {
-    //       this.tableLoading = false
-    //     })
-    // },
-    // sizeChange(val) {
-    //   console.log(val)
-    //   this.page.currentPage = 1
-    //   this.page.pageSize = val
-    //   this.getPage(this.page)
-    // },
-    // pageChange(val) {
-    //   console.log(val)
-    //   this.page.currentPage = val
-    //   // this.page.pageSize = val
-    //   this.getPage(this.page)
-    // },
-    // materialRename(item) {
-    //   const that = this
-    //   this.$prompt('请输入素材名', '提示', {
-    //     confirmButtonText: '确定',
-    //     cancelButtonText: '取消',
-    //     inputValue: item.name
-    //   })
-    //     .then(({ value }) => {
-    //       putObj({
-    //         id: item.id,
-    //         name: value
-    //       }).then(function () {
-    //         that.getPage(that.page)
-    //       })
-    //     })
-    //     .catch(() => {})
-    // },
-    // materialUrl(item) {
-    //   const that = this
-    //   this.$prompt('素材链接', '提示', {
-    //     confirmButtonText: '确定',
-    //     cancelButtonText: '取消',
-    //     inputValue: item.url
-    //   })
-    //     .then(({ value }) => {})
-    //     .catch(() => {})
-    // },
-    // materialDel(item) {
-    //   const that = this
-    //   this.$confirm('是否确认删除该素材？', '提示', {
-    //     confirmButtonText: '确定',
-    //     cancelButtonText: '取消',
-    //     type: 'warning'
-    //   }).then(function () {
-    //     delObj(item.id).then(function () {
-    //       that.getPage(that.page)
-    //     })
-    //   })
-    // },
-    // handleCommand(command) {
-    //   const that = this
-    //   const s = command.split('-')
-    //   putObj({
-    //     id: s[0],
-    //     groupId: s[1]
-    //   }).then(function () {
-    //     that.getPage(that.page)
-    //   })
-    // },
-    handleProgress(event, file, fileList) {
-      console.log(event)
-      // let uploadProgress = file.percentage.toFixed(0)
-      // this.uploadProgress = uploadProgress
-    },
-    handleSuccess(response, file, fileList) {
-      const that = this
-      this.uploadProgress = 0
-      addObj({
-        type: '1',
-        groupId: this.groupId != '-1' ? this.groupId : null,
-        name: file.name,
-        url: response.link
-      }).then(() => {
-        this.resultNumber++
-        if (fileList.length === this.resultNumber) {
-          that.getPage(that.page)
-          this.resultNumber = 0
-        }
-      })
-    },
-    beforeUpload(file) {
-      const isPic =
-        file.type === 'image/jpeg' ||
-        file.type === 'image/png' ||
-        file.type === 'image/gif' ||
-        file.type === 'image/jpg'
-      const isLt2M = file.size / 1024 / 1024 < 2
-      if (!isPic) {
-        this.$message.error('上传图片只能是 JPG、JPEG、PNG、GIF 格式!')
-        return false
-      }
-      if (!isLt2M) {
-        this.$message.error('上传头像图片大小不能超过 2MB!')
-      }
-      return isPic && isLt2M
-    },
-    sureUrls() {
-      this.urls.forEach((item) => {
-        this.$set(this.value, this.value.length, item)
-      })
-      this.listDialogVisible = false
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-::v-deep .el-icon-circle-close {
-  color: red;
-}
-.material-name {
-  padding: 8px 0px;
-}
-.col-do {
-  text-align: center;
-}
-.button-do {
-  padding: unset !important;
-  font-size: 12px;
-}
-</style>
- -->
diff --git a/src/components/Material/src/Materials.vue b/src/components/Material/src/Materials.vue
deleted file mode 100644
index d5abab6..0000000
--- a/src/components/Material/src/Materials.vue
+++ /dev/null
@@ -1,402 +0,0 @@
-<!-- <template>
-  <div>
-    <ul
-      v-for="(item, index) in value"
-      :key="index"
-      class="el-upload-list el-upload-list--picture-card"
-    >
-      <li
-        tabindex="0"
-        class="el-upload-list__item is-ready"
-        :style="'width: ' + width + 'px;height: ' + height + 'px'"
-      >
-        <div>
-          <img :src="item" alt="" class="el-upload-list__item-thumbnail" />
-          <span class="el-upload-list__item-actions">
-            <span
-              v-if="index != 0"
-              class="el-upload-list__item-preview"
-              @click="moveMaterial(index, 'up')"
-            >
-              <i class="el-icon-back" ></i>
-            </span>
-            <span class="el-upload-list__item-preview" @click="zoomMaterial(index)">
-              <i class="el-icon-view" ></i>
-            </span>
-            <span class="el-upload-list__item-delete" @click="deleteMaterial(index)">
-              <i class="el-icon-delete" ></i>
-            </span>
-            <span
-              v-if="index != value.length - 1"
-              class="el-upload-list__item-preview"
-              @click="moveMaterial(index, 'down')"
-            >
-              <i class="el-icon-right" ></i>
-            </span>
-          </span>
-        </div>
-      </li>
-    </ul>
-    <div
-      v-if="num > value.length"
-      tabindex="0"
-      class="el-upload el-upload--picture-card"
-      :style="'width: ' + width + 'px;height: ' + height + 'px;' + 'line-height:' + height + 'px;'"
-      @click="toSeleteMaterial"
-    >
-      <i class="el-icon-plus"></i>
-      eee
-    </div>
-
-    <el-dialog append-to-body v-model="dialogVisible" width="35%">
-      <img :src="url" alt="" style="width: 100%" />
-    </el-dialog>
-
-    <el-dialog title="图片素材库" append-to-body v-model="listDialogVisible" width="70%">
-      <el-container>
-        <el-aside width="unset">
-          <div style="margin-bottom: 10px">
-            <el-button class="el-icon-plus" size="small" @click="materialgroupAdd()">
-              添加分组
-            </el-button>
-          </div>
-          <el-tabs
-            v-model="materialgroupObjId"
-            v-loading="materialgroupLoading"
-            tab-position="left"
-            @tab-click="tabClick"
-          >
-            <el-tab-pane v-for="(item) in materialgroupList" :key="item.id" :name="item.id">
-              <span > {{ item.name }}</span>
-            </el-tab-pane>
-          </el-tabs>
-        </el-aside>
-        <el-main>
-          <el-card>
-            <template v-slot:header>
-            <div>
-              <el-row>
-                <el-col :span="12">
-                  <span>{{ materialgroupObj.name }}</span>
-                  <span v-if="materialgroupObj.id != '-1'">
-                    <el-button
-                      size="small"
-                      type="text"
-                      class="el-icon-edit"
-                      style="margin-left: 10px"
-                      @click="materialgroupEdit(materialgroupObj)"
-                      >重命名</el-button
-                    >
-                    <el-button
-                      size="small"
-                      type="text"
-                      class="el-icon-delete"
-                      style="margin-left: 10px; color: red"
-                      @click="materialgroupDelete(materialgroupObj)"
-                      >删除</el-button
-                    >
-                  </span>
-                </el-col>
-                <el-col :span="12" style="text-align: right">
-                  <el-upload
-                    :action="updateUrl"
-                    :headers="uploadHeaders"
-                    :file-list="[]"
-                    :before-upload="beforeUpload"
-                    :on-success="uploadSuccess"
-                    :on-error="uploadError"
-                    :on-exceed="handleExceed"
-                    :data="{ type: 1 }"
-                    multiple
-                  >
-                    <el-button size="small" type="primary">批量上传</el-button>
-                  </el-upload>
-                </el-col>
-              </el-row>
-            </div>
-            </template>
-            <div v-loading="tableLoading">
-              <el-alert
-                v-if="tableData.length <= 0"
-                title="暂无数据"
-                type="info"
-                :closable="false"
-                center
-                show-icon
-              />
-              <el-row :gutter="5">
-                <el-checkbox-group v-model="urls" :max="num - value.length">
-                  <el-col v-for="(item, index) in tableData" :key="index" :span="4">
-                    <el-card :body-style="{ padding: '5px' }">
-                      <el-image
-                        style="width: 100%; height: 100px"
-                        :src="item.url"
-                        fit="contain"
-                        :preview-src-list="[item.url]"
-                        :z-index="9999"
-                      />
-                      <div>
-                        <el-checkbox  class="material-name" :label="item.url"> 选择 </el-checkbox>
-                        <el-row>
-                          <el-col :span="24" class="col-do">
-                            <el-button type="text" size="medium" @click="materialDel(item)"
-                              >删除</el-button
-                            >
-                          </el-col>
-                        </el-row>
-                      </div>
-                    </el-card>
-                  </el-col>
-                </el-checkbox-group>
-              </el-row>
-              <el-pagination
-                :modal:current-page="page.currentPage"
-                :page-sizes="[12, 24]"
-                :page-size="page.pageSize"
-                layout="total, sizes, prev, pager, next, jumper"
-                :total="page.total"
-                class="pagination"
-                @size-change="sizeChange"
-                @current-change="pageChange"
-              />
-            </div>
-          </el-card>
-        </el-main>
-      </el-container>
-      <template v-slot:header>
-      <span class="dialog-footer">
-        <el-button @click="listDialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="sureUrls">确 定</el-button>
-      </span>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script  setup lang="ts" name="Materials">
-//import * as MaterialGroupApi from '@/api/mall/shop/materialGroup'
-import { propTypes } from '@/utils/propTypes'
-import { getAccessToken, getTenantId } from '@/utils/auth'
-import { ElNotification } from 'element-plus'
-import type { UploadProps, UploadFile, UploadUserFile } from 'element-plus'
-
-const message = useMessage() // 消息弹窗
-
-type FileTypes =
-  | 'image/apng'
-  | 'image/bmp'
-  | 'image/gif'
-  | 'image/jpeg'
-  | 'image/pjpeg'
-  | 'image/png'
-  | 'image/svg+xml'
-  | 'image/tiff'
-  | 'image/webp'
-  | 'image/x-icon'
-
-const props = defineProps({
-  modelValue: {
-    //type: Array as PropType<string[]>,
-    type: Array as PropType<UploadUserFile[]>,
-    required: true
-  },
-  fileSize: propTypes.number.def(5), // 图片大小限制 ==> 非必传（默认为 5M）
-  fileType: propTypes.array.def(['image/jpeg', 'image/png', 'image/gif']), 
-  updateUrl: propTypes.string.def(import.meta.env.VITE_UPLOAD_URL),
-  height: propTypes.string.def('150px'), // 组件高度 ==> 非必传（默认为 150px）
-  width: propTypes.string.def('150px'), // 组件宽度 ==> 非必传（默认为 150px）
-  num: propTypes.number.def(5) // 最大图片上传数 ==> 非必传（默认为 5张）
-})
-
-const value = ref(props.modelValue)
-let dialogVisible = ref(false)
-let url = ref("")
-let listDialogVisible = ref(false)
-let materialgroupList = ref([])
-let materialgroupObjId = ref("")
-let materialgroupObj = reactive({})
-let materialgroupLoading = ref(false)
-let tableData = ref([])
-//let resultNumber = ref(0)
-let tableLoading = ref(false)
-//let groupId = ref(0)
-let urls = ref([])
-
-
-const page = reactive({
-        total: 0, // 总页数
-        currentPage: 1, // 当前页数
-        pageSize: 12, // 每页显示多少条
-        ascs: [], // 升序字段
-        descs: 'create_time' // 降序字段
-})
-
-const moveMaterial = (index: number, type: string) => {
-  if (type == 'up') {
-        const tempOption = props.modelValue[index - 1]
-        props.modelValue[index - 1] = props.modelValue[index]
-        props.modelValue[index] = tempOption
-        //this.$set(this.value, index - 1, this.value[index])
-       // this.$set(this.value, index, tempOption)
-      }
-      if (type == 'down') {
-        const tempOption = props.modelValue[index + 1]
-        props.modelValue[index +1] = props.modelValue[index]
-        props.modelValue[index] = tempOption
-        // this.$set(this.value, index + 1, this.value[index])
-        // this.$set(this.value, index, tempOption)
-      }
-}
-
-const zoomMaterial = (index: number) => {
-      dialogVisible.value = true
-      console.log(index)
-     // url.value = props.modelValue[index]
-      //this.url = this.value[index]
-}
-
-const deleteMaterial = (index: number) => {
-  console.log(index)
-}
-
-const toSeleteMaterial = () => {
- listDialogVisible.value = true
-  if (tableData.value.length <= 0) {
-    materialgroupPage()
-  }
-}
-
-const materialgroupPage = () => {
-
-}
-
-const materialgroupDelete = () => {
-
-}
-
-const materialgroupEdit = () => {
-
-}
-
-const materialgroupAdd = () => {
-
-}
-
-const tabClick = () => {
-  // urls.value = []
-  // const index = Number(tab.index)
-  // const materialgroupObj = materialgroupList.value[index]
-  // materialgroupObj.index = index
-  // materialgroupObj.value = materialgroupObj
-  // materialgroupObjId.value = materialgroupObj.id
-  // page.currentPage = 1
-  // page.total = 0
-  // if (materialgroupObj.id != '-1') {
-  //   groupId.value = materialgroupObj.id
-  // } else {
-  //   groupId.value = null
-  // }
-  // materialgroupPage(page.value)
-}
-
-// const getPage = () => {
-
-// }
-
-const sizeChange = (val: number) => {
-  console.log(val)
-}
-
-const pageChange = (val: number) => {
-  console.log(val)
-}
-
-// const materialRename = (item: object) => {
-//   console.log(item)
-// }
-
-// const materialUrl = (item: object) => {
-//   console.log(item)
-// }
-const materialDel = (item: object) => {
-  console.log(item)
-}
-
-const uploadHeaders = ref({
-  Authorization: 'Bearer ' + getAccessToken(),
-  'tenant-id': getTenantId()
-})
-
-
-const fileList = ref<UploadUserFile[]>(props.modelValue)
-/**
- * @description 文件上传之前判断
- * @param rawFile 上传的文件
- * */
-const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
-  const imgSize = rawFile.size / 1024 / 1024 < props.fileSize
-  const imgType = props.fileType
-  if (!imgType.includes(rawFile.type as FileTypes))
-    ElNotification({
-      title: '温馨提示',
-      message: '上传图片不符合所需的格式！',
-      type: 'warning'
-    })
-  if (!imgSize)
-    ElNotification({
-      title: '温馨提示',
-      message: `上传图片大小不能超过 ${props.fileSize}M！`,
-      type: 'warning'
-    })
-  return imgType.includes(rawFile.type as FileTypes) && imgSize
-}
-
-// 图片上传成功
-interface UploadEmits {
-  (e: 'update:modelValue', value: UploadUserFile[]): void
-}
-const emit = defineEmits<UploadEmits>()
-const uploadSuccess = (response, uploadFile: UploadFile) => {
-  if (!response) return
-  uploadFile.url = response.data
-  emit('update:modelValue', fileList.value)
-  message.success('上传成功')
-}
-
-// 图片上传错误提示
-const uploadError = () => {
-  ElNotification({
-    title: '温馨提示',
-    message: '图片上传失败，请您重新上传！',
-    type: 'error'
-  })
-}
-
-// 文件数超出提示
-const handleExceed = () => {
-  ElNotification({
-    title: '温馨提示',
-    message: `当前最多只能上传 ${props.limit} 张图片，请移除后上传！`,
-    type: 'warning'
-  })
-}
-
-
-</script>
-
-<style lang="scss" scoped>
-::v-deep .el-icon-circle-close {
-  color: red;
-}
-.material-name {
-  padding: 8px 0px;
-}
-.col-do {
-  text-align: center;
-}
-.button-do {
-  padding: unset !important;
-  font-size: 12px;
-}
-</style>
- -->
diff --git a/src/components/Materials/index.ts b/src/components/Materials/index.ts
new file mode 100644
index 0000000..6a12b83
--- /dev/null
+++ b/src/components/Materials/index.ts
@@ -0,0 +1,9 @@
+/*
+ * @Author: Gaoxs
+ * @Date: 2023-05-21 23:36:03
+ * @LastEditors: Gaoxs
+ * @Description:
+ */
+import Materials from './src/Materials.vue'
+
+export default Materials
diff --git a/src/components/Materials/src/Materials.vue b/src/components/Materials/src/Materials.vue
new file mode 100644
index 0000000..fff0d6b
--- /dev/null
+++ b/src/components/Materials/src/Materials.vue
@@ -0,0 +1,514 @@
+<template>
+  <div v-if="type == 'image'">
+    <ul
+      v-for="(item, index) in value"
+      :key="index"
+      class="el-upload-list el-upload-list--picture-card"
+    >
+      <li
+        tabindex="0"
+        class="el-upload-list__item is-ready"
+        :style="'width: ' + width + 'px;height: ' + height + 'px'"
+      >
+        <div>
+          <img :src="item" alt="" class="el-upload-list__item-thumbnail" />
+          <span class="el-upload-list__item-actions">
+            <span
+              v-if="index != 0"
+              class="el-upload-list__item-preview"
+              @click="moveMaterial(index, 'up')"
+            >
+              <i class="el-icon-back"></i>
+            </span>
+            <span class="el-upload-list__item-preview" @click="zoomMaterial(index)">
+              <i class="el-icon-view"></i>
+            </span>
+            <span class="el-upload-list__item-delete" @click="deleteMaterial(index)">
+              <i class="el-icon-delete"></i>
+            </span>
+            <span
+              v-if="index != value.length - 1"
+              class="el-upload-list__item-preview"
+              @click="moveMaterial(index, 'down')"
+            >
+              <i class="el-icon-right"></i>
+            </span>
+          </span>
+        </div>
+      </li>
+    </ul>
+    <div
+      v-if="num > value.length"
+      tabindex="0"
+      class="el-upload el-upload--picture-card"
+      :style="'width: ' + width + 'px;height: ' + height + 'px;' + 'line-height:' + height + 'px;'"
+      @click="toSeleteMaterial"
+    >
+      <i class="el-icon-plus"></i>
+    </div>
+
+    <el-dialog title="图片素材库" append-to-body v-model="listDialogVisible" width="70%">
+      <el-container>
+        <el-aside width="100px">
+          <div style="margin-bottom: 10px">
+            <el-button class="el-icon-plus" size="small" @click="handleMaterialgroupAdd()">
+              添加分组
+            </el-button>
+          </div>
+          <el-tabs
+            v-model="materialgroupObjId"
+            v-loading="materialgroupLoading"
+            tab-position="left"
+            @tab-click="tabClick"
+          >
+            <el-tab-pane v-for="item in materialgroupList" :key="item.id" :name="item.id">
+              <template #label>
+                <span> {{ item.name }}</span>
+              </template>
+            </el-tab-pane>
+          </el-tabs>
+        </el-aside>
+        <el-main>
+          <el-card>
+            <template #header>
+              <div>
+                <el-row>
+                  <el-col :span="12">
+                    <span>{{ materialgroupObj.name }}</span>
+                    <span v-if="materialgroupObj.id != '-1'">
+                      <el-button
+                        size="small"
+                        type="text"
+                        class="el-icon-edit"
+                        style="margin-left: 10px"
+                        @click="handleMaterialgroupEdit(materialgroupObj)"
+                        >重命名</el-button
+                      >
+                      <el-button
+                        size="small"
+                        type="text"
+                        class="el-icon-delete"
+                        style="margin-left: 10px; color: red"
+                        @click="materialgroupDelete(materialgroupObj)"
+                        >删除</el-button
+                      >
+                    </span>
+                  </el-col>
+                  <el-col :span="12" style="text-align: right">
+                    <el-upload
+                      :action="uploadApi"
+                      :headers="headers"
+                      :file-list="[]"
+                      :on-progress="handleProgress"
+                      :before-upload="beforeUpload"
+                      :on-success="handleSuccess"
+                      :data="{ type: 1 }"
+                      multiple
+                    >
+                      <el-button size="small" type="primary">批量上传</el-button>
+                    </el-upload>
+                  </el-col>
+                </el-row>
+              </div>
+            </template>
+            <div v-loading="tableLoading">
+              <el-alert
+                v-if="tableData.length <= 0"
+                title="暂无数据"
+                type="info"
+                :closable="false"
+                center
+                show-icon
+              />
+              <el-checkbox-group v-model="urls" :max="num - value.length">
+                <el-row :gutter="5">
+                  <el-col v-for="(item, index) in tableData" :key="index" :span="4">
+                    <el-card :body-style="{ padding: '5px' }">
+                      <el-image
+                        style="width: 100%; height: 100px"
+                        :src="item.url"
+                        fit="contain"
+                        :preview-src-list="[item.url]"
+                        :z-index="9999"
+                      />
+                      <div>
+                        <el-checkbox class="material-name" :label="item.url"> 选择 </el-checkbox>
+                        <el-row>
+                          <el-col :span="24" class="col-do">
+                            <el-button type="text" size="medium" @click="materialDel(item)"
+                              >删除</el-button
+                            >
+                          </el-col>
+                        </el-row>
+                      </div>
+                    </el-card>
+                  </el-col>
+                </el-row>
+              </el-checkbox-group>
+
+              <el-pagination
+                v-model:current-page="page.currentPage"
+                :page-sizes="[12, 24]"
+                :page-size="page.pageSize"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="page.total"
+                class="pagination"
+                @size-change="sizeChange"
+                @current-change="pageChange"
+              />
+            </div>
+          </el-card>
+        </el-main>
+      </el-container>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="listDialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="sureUrls">确 定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ElMessageBox } from 'element-plus'
+import { ref } from 'vue'
+import {
+  getList as materialgroupPage,
+  addObj as materialgroupAdd,
+  delObj as materialgroupDel,
+  putObj as materialgroupEdit
+} from '@/api/tools/materialgroup'
+import { getPage, addObj, delObj } from '@/api/tools/material'
+// import { getToken } from '@/utils/auth'
+// import { useStore } from 'vuex'
+
+const props = defineProps({
+  value: {
+    type: Array,
+    default() {
+      return []
+    }
+  },
+  // 素材类型
+  type: {
+    type: String
+  },
+  // 素材限制数量，默认5个
+  num: {
+    type: Number,
+    default() {
+      return 5
+    }
+  },
+  // 宽度
+  width: {
+    type: Number,
+    default() {
+      return 150
+    }
+  },
+  // 宽度
+  height: {
+    type: Number,
+    default() {
+      return 150
+    }
+  }
+})
+
+const headers = ref({
+  // Authorization: getToken()
+})
+const value = ref(props.value)
+const dialogVisible = ref(false)
+const url = ref('')
+const listDialogVisible = ref(false)
+const listDialogVisible2 = ref(false)
+const materialgroupList = ref([])
+const materialgroupObjId = ref('')
+const materialgroupObj = ref({})
+const materialgroupLoading = ref(false)
+const tableData = ref([])
+const resultNumber = ref(0)
+const page = ref({
+  total: 0, // 总页数
+  currentPage: 1, // 当前页数
+  pageSize: 12, // 每页显示多少条
+  ascs: [], // 升序字段
+  descs: 'create_time' // 降序字段
+})
+const tableLoading = ref(false)
+const groupId = ref(null)
+const urls = ref([])
+
+// const store = useStore()
+
+const uploadApi = import.meta.env.VITE_UPLOAD_URL
+
+function moveMaterial(index, type) {
+  if (type == 'up') {
+    const tempOption = value.value[index - 1]
+    value.value[index - 1] = value.value[index]
+    value.value[index] = tempOption
+  }
+  if (type == 'down') {
+    const tempOption = value.value[index + 1]
+    value.value[index + 1] = value.value[index]
+    value.value[index] = tempOption
+  }
+}
+function zoomMaterial(index) {
+  dialogVisible.value = true
+  url.value = value.value[index]
+}
+function deleteMaterial(index) {
+  // 修改为新的提示
+  ElMessageBox.confirm('是否确认删除？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(function () {
+    value.value.splice(index, 1)
+    urls.value = []
+  })
+}
+function toSeleteMaterial() {
+  listDialogVisible.value = true
+  listDialogVisible2.value = true
+  if (tableData.value.length <= 0) {
+    getMaterialgroupPage()
+  }
+}
+function getMaterialgroupPage() {
+  materialgroupLoading.value = true
+  materialgroupPage({
+    total: 0, // 总页数
+    page: 1, // 当前页数
+    size: 100, // 每页显示多少条
+    ascs: [], // 升序字段
+    sort: 'create_time,desc' // 降序字段
+  }).then((response) => {
+    materialgroupLoading.value = false
+    materialgroupList.value = response
+    materialgroupList.value.unshift({
+      id: '-1',
+      name: '全部分组'
+    })
+
+    tabClick({
+      index: 0
+    })
+  })
+}
+function materialgroupDelete(materialgroupObj) {
+  ElMessageBox.confirm('是否确认删除该分组？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(function () {
+    materialgroupDel(materialgroupObj.id).then(function () {
+      getMaterialgroupPage()
+    })
+  })
+}
+function handleMaterialgroupEdit(materialgroupObj) {
+  ElMessageBox.prompt('请输入分组名', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    inputValue: materialgroupObj.name
+  })
+    .then(({ value }) => {
+      materialgroupEdit({
+        id: materialgroupObj.id,
+        name: value
+      }).then(function () {
+        materialgroupObj.name = value
+        materialgroupList.value[materialgroupObj.index] = materialgroupObj
+      })
+    })
+    .catch(() => {})
+}
+function handleMaterialgroupAdd() {
+  ElMessageBox.prompt('请输入分组名', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消'
+  })
+    .then(({ value }) => {
+      materialgroupAdd({
+        name: value
+      }).then(function () {
+        getMaterialgroupPage()
+      })
+    })
+    .catch(() => {})
+}
+function tabClick(tab) {
+  urls.value = []
+  const index = Number(tab.index)
+  materialgroupObj.value = materialgroupList.value[index]
+
+  console.log('🚀 ~ file: Materials.vue:351 ~ tabClick ~ materialgroupObj:', materialgroupObj)
+
+  materialgroupObj.value.index = index
+  materialgroupObjId.value = materialgroupObj.value.id
+
+  page.value.currentPage = 1
+  page.value.total = 0
+  if (materialgroupObj.value.id != '-1') {
+    groupId.value = materialgroupObj.value.id
+  } else {
+    groupId.value = null
+  }
+  getMaterialPage(page.value)
+}
+function getMaterialPage(initPage) {
+  tableLoading.value = true
+  getPage(
+    Object.assign(
+      {
+        page: initPage.currentPage - 1,
+        size: initPage.pageSize,
+        descs: initPage.descs,
+        ascs: initPage.ascs,
+        sort: 'create_time,desc'
+      },
+      {
+        groupId: groupId.value
+      }
+    )
+  )
+    .then((response) => {
+      console.log('🚀 ~ file: Materials.vue:382 ~ .then ~ response:', response.list)
+      console.log('🚀 ~ file: Materials.vue:382 ~ .then ~ response:', response.total)
+      page.value.total = response.total
+      page.value.currentPage = initPage.currentPage
+      page.value.pageSize = initPage.pageSize
+      tableData.value = response.list
+      console.log('🚀 ~ file: Materials.vue:387 ~ .then ~ tableData.value:', tableData.value)
+      tableLoading.value = false
+    })
+    .catch((error) => {
+      console.log('🚀 ~ file: Materials.vue:391 ~ getMaterialPage ~ error:', error)
+      tableLoading.value = false
+    })
+}
+function sizeChange(val) {
+  console.log(val)
+  page.value.currentPage = 1
+  page.value.pageSize = val
+  getMaterialPage(this.page)
+}
+function pageChange(val) {
+  console.log(val)
+  page.value.currentPage = val
+  // this.page.pageSize = val
+  getMaterialPage(page.value)
+}
+// function materialRename(item) {
+//   ElMessageBox.prompt('请输入素材名', '提示', {
+//     confirmButtonText: '确定',
+//     cancelButtonText: '取消',
+//     inputValue: item.name
+//   })
+//     .then(({ value }) => {
+//       putObj({
+//         id: item.id,
+//         name: value
+//       }).then(function () {
+//         getMaterialPage(page.value)
+//       })
+//     })
+//     .catch(() => {})
+// }
+// function materialUrl(item) {
+//   ElMessageBox.prompt('素材链接', '提示', {
+//     confirmButtonText: '确定',
+//     cancelButtonText: '取消',
+//     inputValue: item.url
+//   })
+//     .then(({ value }) => {})
+//     .catch(() => {})
+// }
+function materialDel(item) {
+  ElMessageBox.confirm('是否确认删除该素材？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(function () {
+    delObj(item.id).finally(function () {
+      console.log('getMaterialPage')
+      getMaterialPage(page.value)
+    })
+  })
+}
+// function handleCommand(command) {
+//   const s = command.split('-')
+//   putObj({
+//     id: s[0],
+//     groupId: s[1]
+//   }).then(function () {
+//     getMaterialPage(page.value)
+//   })
+// }
+function handleProgress(event) {
+  console.log(event)
+  // let uploadProgress = file.percentage.toFixed(0)
+  // this.uploadProgress = uploadProgress
+}
+function handleSuccess(response, file, fileList) {
+  addObj({
+    type: '1',
+    groupId: groupId.value != '-1' ? groupId.value : null,
+    name: file.name,
+    url: response.link
+  }).then(() => {
+    resultNumber.value++
+    if (fileList.length === resultNumber.value) {
+      getMaterialPage(page.value)
+      resultNumber.value = 0
+    }
+  })
+}
+function beforeUpload(file) {
+  const isPic =
+    file.type === 'image/jpeg' ||
+    file.type === 'image/png' ||
+    file.type === 'image/gif' ||
+    file.type === 'image/jpg'
+  const isLt2M = file.size / 1024 / 1024 < 2
+  if (!isPic) {
+    this.$message.error('上传图片只能是 JPG、JPEG、PNG、GIF 格式!')
+    return false
+  }
+  if (!isLt2M) {
+    this.$message.error('上传头像图片大小不能超过 2MB!')
+  }
+  return isPic && isLt2M
+}
+function sureUrls() {
+  urls.value.forEach((item) => {
+    value.value[value.value.length] = item
+  })
+  listDialogVisible.value = false
+}
+</script>
+
+<style lang="scss" scoped>
+.el-icon-circle-close {
+  color: red;
+}
+
+.material-name {
+  padding: 8px 0px;
+}
+
+.col-do {
+  text-align: center;
+}
+
+.button-do {
+  padding: unset !important;
+  font-size: 12px;
+}
+</style>
diff --git a/src/views/mp/material/index.vue b/src/views/mp/material/index.vue
index 486bd03..ab38e16 100644
--- a/src/views/mp/material/index.vue
+++ b/src/views/mp/material/index.vue
@@ -9,6 +9,16 @@
     </el-form>
   </ContentWrap>
 
+  <ContentWrap>
+    <MaterialList
+      v-model="form.coverImgArr"
+      style="width: 370px"
+      type="image"
+      :num="1"
+      :width="150"
+      :height="150"
+    />
+  </ContentWrap>
   <ContentWrap>
     <el-tabs v-model="type" @tab-change="onTabChange">
       <!-- tab 1：图片  -->
@@ -91,10 +101,17 @@ import VoiceTable from './components/VoiceTable.vue'
 import VideoTable from './components/VideoTable.vue'
 import UploadFile from './components/UploadFile.vue'
 import UploadVideo from './components/UploadVideo.vue'
+
+import MaterialList from '@/components/materials'
+
 import { UploadType } from './components/upload'
 import * as MpMaterialApi from '@/api/mp/material'
 const message = useMessage() // 消息
 
+const form = ref({
+  coverImgArr: null
+}) // 遮罩层
+
 const type = ref<UploadType>(UploadType.Image) // 素材类型
 const loading = ref(false) // 遮罩层
 const list = ref<any[]>([]) // 总条数