feat(素材库组件): 素材库

src/api/system/sample.js

@@ -38,3 +38,12 @@ export function removeSample(data) {
     data: data
   })
 }
+
+// 图片素材查询
+export function selectMaterial(data) {
+  return request({
+    url: '/review/storage/list',
+    method: 'post',
+    data: data
+  })
+}

src/views/setting/materialLibrary/index.vue

 <template>
-  <el-drawer title="我是标题" :visible.sync="drawerDisplay">
-    <span>素材库</span>
+  <el-drawer
+    title="素材库"
+    :visible.sync="drawerDisplay"
+    size="20%"
+    :wrapper-closable="false"
+  >
+    <div
+      v-for="(item, index) in materialList"
+      :key="index"
+      style="margin: 0 20px"
+    >
+      <div style="display: flex; align-items: center">
+        <div class="tips"></div>
+        <div>
+          <span style="color: #1a6fd7">
+            {{ item.createTime }}
+          </span>
+        </div>
+      </div>
+      <div class="imageContnet">
+        <div
+          v-for="(childItem, childIndex) in item.userPhotoStorageList"
+          :key="childIndex"
+          class="image"
+          @click="selectImage(index, childIndex, childItem.path, childItem.id)"
+        >
+          <el-image :src="childItem.path" style="height: 100%"> </el-image>
+          <div v-if="childItem.selected" class="selected-icon">
+            <i class="el-icon-success" style="font-size: 20px"> </i>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-loading="loading"></div>
+    <div style="height: 60px"></div>
+    <div class="submit-button">
+      <el-button type="primary" size="mini" @click="submit">确定</el-button>
+    </div>
   </el-drawer>
 </template>
 
 <script>
+import { selectMaterial } from '@/api/system/sample'
+
 export default {
   name: 'MaterialLibrary',
   props: {
@@ -12,8 +50,85 @@ export default {
       type: Boolean,
       default: false
     }
+  },
+  data() {
+    return {
+      loading: true,
+      materialList: [],
+      selectList: []
+    }
+  },
+  created() {
+    this.getMaterialList()
+  },
+  methods: {
+    selectImage(a, b, path, id) {
+      this.$set(this.materialList[a].userPhotoStorageList, b, {
+        selected: !this.materialList[a].userPhotoStorageList[b].selected,
+        path: path,
+        id: id
+      })
+      if (this.materialList[a].userPhotoStorageList[b].selected === true) {
+        this.selectList.push({ id: id, path: path })
+      } else {
+        this.selectList = this.selectList.filter(item => item.id !== id)
+      }
+      console.log(this.selectList)
+    },
+    getMaterialList() {
+      this.loading = true
+      selectMaterial({}).then(res => {
+        this.materialList = res.rows
+        this.materialList.forEach(data => {
+          data.userPhotoStorageList.forEach(item => {
+            item.selected = false
+          })
+        })
+        this.loading = false
+        console.log('图片素材', res)
+      })
+    },
+    submit() {
+      this.$emit('clickSubmit', this.selectList)
+      this.selectList = []
+      this.getMaterialList()
+    }
   }
 }
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.tips {
+  background-color: #1a6fd7;
+  width: 10px;
+  height: 25px;
+  margin-right: 10px;
+}
+.imageContnet {
+  margin-top: 20px;
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 20px;
+  .image {
+    width: 120px;
+    height: 120px;
+    flex: 0 0 50%;
+    padding-right: 10px;
+    padding-bottom: 10px;
+    position: relative;
+  }
+  .selected-icon {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    color: #1a6fd7;
+  }
+}
+.submit-button {
+  position: fixed;
+  bottom: 0px;
+  background: #ffffff;
+  width: 100%;
+  padding: 20px;
+}
+</style>

src/views/setting/sample/index.vue

@@ -277,12 +277,18 @@
             v-model="editParamsForm.trademark"
             :limit="1"
           ></image-upload>
+          <el-link type="primary" @click="selectMaterial">
+            从素材库选择</el-link
+          >
         </el-form-item>
         <el-form-item label="样品照片" prop="samplePhotos">
           <image-upload
             v-model="editParamsForm.samplePhotos"
             :limit="5"
           ></image-upload>
+          <el-link type="primary" @click="selectMaterial">
+            从素材库选择</el-link
+          >
         </el-form-item>
         <el-form-item label="备注" prop="remark">
           <el-input
@@ -339,6 +345,11 @@
         <el-button @click="dialogFormVisible = false">取 消</el-button>
       </div>
     </el-dialog>
+
+    <MaterialLibrary
+      :drawer-display="materialShow"
+      @clickSubmit="materialSubmit"
+    ></MaterialLibrary>
   </page-standard>
 </template>
 <script>
@@ -349,10 +360,14 @@ import {
   selectSampleInfo,
   selectSamplePage
 } from '@/api/system/sample'
+import MaterialLibrary from '@/views/setting/materialLibrary/index.vue'
+import materialLibrary from '@/views/setting/materialLibrary/index.vue'
 
 export default {
+  components: { MaterialLibrary },
   data() {
     return {
+      materialShow: false,
       clickNameForm: {},
       dialogFormVisible: false,
       addLoading: false,
@@ -406,11 +421,24 @@ export default {
       dialogTitle: '新建'
     }
   },
+  computed: {
+    materialLibrary() {
+      return materialLibrary
+    }
+  },
   watch: {},
   created() {
     this.getList()
   },
   methods: {
+    materialSubmit(data) {
+      console.log(data)
+      this.materialShow = false
+    },
+    selectMaterial() {
+      console.log(this.materialShow)
+      this.materialShow = true
+    },
     goTaskDetails(id) {
       this.$router.push({
         path: 'taskDetails',
@@ -418,6 +446,7 @@ export default {
       })
     },
     clickAddButton() {
+      this.dialogTitle = '新增'
       this.dialogVisible = true
       this.determineActiveName()
     },
@@ -508,6 +537,7 @@ export default {
       this.clickNameForm = {}
     },
     handleUpdate(id) {
+      this.dialogTitle = '编辑'
       selectSampleInfo({ id: id }).then(res => {
         this.editParamsForm = res.data
         this.dialogVisible = true