6.2（2）

admin/src/views/model/index.vue

@@ -0,0 +1,346 @@
+<template>
+  <div>
+    <el-container>
+      <!--搜索-->
+      <el-header class="searchBox">
+        <el-form :inline="true" size="mini" :model="searchForm" class="demo-form-inline">
+          <el-form-item label="模板名称">
+            <el-input v-model="searchForm.templateName" placeholder="模板名称" />
+          </el-form-item>
+          <el-form-item label="模板代码">
+            <el-input v-model="searchForm.templateCode" placeholder="模板代码" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="searchBtn">查询</el-button>
+            <el-button @click="reset">重置</el-button>
+          </el-form-item>
+          <el-button style="float: right" type="warning" icon="el-icon-circle-plus-outline" @click="add">立即创建</el-button>
+        </el-form>
+      </el-header>
+
+      <!--列表-->
+      <el-main class="listBox">
+        <el-row :gutter="40">
+          <el-col v-for="(item,index) in tableData" :span="6" :key="index">
+            <div class="imgBox">
+              <el-image :src="imgurl+item.templatePhoto" style="width: 100%;height: 200px" fit="cover" />
+              <div class="text">{{ item.templateName }}</div>
+              <div class="text">ID：{{ item.templateCode }}</div>
+              <div class="text flex">
+                <a @click="edit(item)">编辑</a>
+                <a @click="dele(item.id)">删除</a>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </el-main>
+
+    </el-container>
+
+    <!--新增抽屉-->
+    <el-drawer
+      ref="addDrawer"
+      title="新增模板"
+      size="50%"
+      :before-close="addHandleClose"
+      :with-header="false"
+      :visible.sync="addDialog"
+      direction="rtl"
+      custom-class="demo-drawer"
+    >
+      <div class="demo-drawer__content">
+        <span>编辑产品分类</span>
+        <el-form :model="addForm">
+          <el-form-item label="模板名称" label-width="80px">
+            <el-input v-model="addForm.templateName" autocomplete="off" />
+          </el-form-item>
+          <el-form-item label="模板ID" label-width="80px">
+            <el-input v-model="addForm.templateCode" autocomplete="off" />
+          </el-form-item>
+          <el-form-item label="模板图示" label-width="80px">
+            <el-upload
+              class="avatar-uploader"
+              :action="imgapi"
+              :show-file-list="false"
+              :on-success="picPreview"
+            >
+              <img v-if="picUrl" :src="picUrl" class="avatar">
+              <i v-else class="el-icon-plus avatar-uploader-icon" />
+            </el-upload>
+          </el-form-item>
+        </el-form>
+        <div class="demo-drawer__footer">
+          <el-button @click="cancelForm">取 消</el-button>
+          <el-button type="primary" :loading="loading" @click="$refs.addDrawer.closeDrawer()">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
+        </div>
+      </div>
+    </el-drawer>
+
+    <!--编辑抽屉-->
+    <el-drawer
+      ref="editDrawer"
+      title="编辑产品分类"
+      size="50%"
+      :before-close="editHandleClose"
+      :with-header="false"
+      :visible.sync="editDialog"
+      direction="rtl"
+      custom-class="demo-drawer"
+    >
+      <div class="demo-drawer__content">
+        <span>编辑产品分类</span>
+        <el-form :model="editForm">
+          <el-form-item label="模板名称" label-width="80px">
+            <el-input v-model="editForm.templateName" autocomplete="off" />
+          </el-form-item>
+          <el-form-item label="模板ID" label-width="80px">
+            <el-input v-model="editForm.templateCode" disabled autocomplete="off" />
+          </el-form-item>
+          <el-form-item label="模板图示" label-width="80px">
+            <el-upload
+              class="avatar-uploader"
+              :action="imgapi"
+              :show-file-list="false"
+              :on-success="picPreview"
+            >
+              <img v-if="picUrl" :src="picUrl" class="avatar">
+              <i v-else class="el-icon-plus avatar-uploader-icon" />
+            </el-upload>
+          </el-form-item>
+        </el-form>
+        <div class="demo-drawer__footer">
+          <el-button @click="cancelForm">取 消</el-button>
+          <el-button type="primary" :loading="loading" @click="$refs.editDrawer.closeDrawer()">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
+        </div>
+      </div>
+    </el-drawer>
+  </div>
+
+</template>
+
+<script>
+import { post, get } from '@/api/common'
+export default {
+  name: 'ProduceClass',
+  data() {
+    return {
+      lin: 'https://img.zcool.cn/community/017a155cf0ed61a801213ec229ad50.jpg@1280w_1l_2o_100sh.jpg',
+      picUrl: '',
+      imgapi: process.env.VUE_APP_BASE_IMG_API,
+      imgurl: process.env.VUE_APP_BASE_IMG_URL,
+      loading: false,
+      editDialog: false,
+      addDialog: false,
+      searchForm: {
+        templateName: '',
+        templateCode: '',
+        pageSize: 200,
+        pageNum: 1
+      },
+      addForm: {
+        templateName: '',
+        templateCode: '',
+        templatePhoto: ''
+      },
+      editForm: {
+        templateName: '',
+        templateCode: '',
+        templatePhoto: ''
+      },
+      tableData: [],
+      total: 5000
+    }
+  },
+  created() {
+    var that = this
+    that.search()
+  },
+  methods: {
+    async search() { // 同步搜索
+      await get('/templateInfo/page', this.searchForm)
+        .then((res) => {
+          this.tableData = res.data.list
+          console.log(this.tableData)
+          this.total = res.data.total
+        }).catch((err) => {
+          console.log(err)
+        })
+    },
+    searchBtn() { // 搜索按钮
+      this.search()
+    },
+    reset() { // 重置
+      this.searchForm = {
+        cpid: '',
+        categoryName: '',
+        pageSize: 200,
+        pageNum: 1
+      }
+      this.search()
+    },
+    add() { // 新增
+      this.addDialog = true
+    },
+    addHandleClose(done) { // 新增数据
+      if (this.loading) return
+      this.$confirm('确定要提交吗？')
+        .then(_ => {
+          done()
+          this.addDialog = true
+          post('/templateInfo/create', this.addForm)
+            .then((res) => {
+              if (res.code === 10000) this.reset()
+              setTimeout(() => {
+                this.addDialog = false
+              }, 400)
+            })
+            .catch((err) => {
+              console.log(err)
+            })
+        })
+        .catch(_ => {
+          this.addDialog = false
+        })
+    },
+    edit(e) { // 编辑
+      this.editForm = e
+      this.editDialog = true
+    },
+    editHandleClose(done) { // 修改数据
+      if (this.loading) return
+      this.$confirm('确定要提交吗？')
+        .then(_ => {
+          done()
+          this.editDialog = true
+          post('/templateInfo/update/' + this.editForm.id, this.editForm)
+            .then((res) => {
+              if (res.code === 10000) this.reset()
+              setTimeout(() => {
+                this.editDialog = false
+              }, 400)
+            })
+            .catch((err) => {
+              console.log(err)
+            })
+        })
+        .catch(_ => {
+          this.editDialog = false
+        })
+    },
+    dele(e) { // 删除
+      this.$confirm('确定要删除么？')
+        .then(_ => {
+          post('/templateInfo/delete', { ids: [e] })
+            .then((res) => {
+              if (res.code === 10000) this.reset()
+            })
+        })
+    },
+    cancelForm() { // 关闭抽屉
+      console.log(123)
+      this.loading = false
+      this.editDialog = false
+      this.addDialog = false
+      clearTimeout(this.timer)
+    },
+    picPreview(file) {
+      this.picUrl = process.env.VUE_APP_BASE_IMG_URL + file.data
+      this.editForm.templatePhoto = file.data
+      this.addForm.templatePhoto = file.data
+    },
+    handleSizeChange(e) { // 单页数量
+      this.searchForm.pageSize = e
+      this.search()
+    },
+    handleCurrentChange(e) { // 跳页
+      this.searchForm.pageNum = e
+      this.search()
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.searchBox {
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow: #bfbfbf 0 0 2px;
+  height: unset !important;
+  form {
+    margin: auto;
+  }
+}
+.el-header {padding: 20px}
+.el-form-item {margin-bottom: unset}
+.flex {display: flex;justify-content: flex-end}
+.listBox {
+  margin-top: 20px;
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow: #bfbfbf 0 0 2px;
+  height: unset !important;
+  .imgBox {
+    margin: 10px 0;
+    border-radius: 6px;
+    box-shadow: #c7c7c7 1px 1px 3px;
+    .el-image {
+      border-radius: 6px 6px 0 0;
+    }
+    .text {
+      font-size: 14px;
+      text-align: center;
+      color: #333333;
+      line-height: 24px;
+      padding: 3px 15px;
+      a{
+        color: #20a0ff;
+        padding: 0 10px;
+      }
+    }
+  }
+}
+
+.demo-drawer__content {
+  padding: 20px 5%;
+  line-height: 32px;
+  .el-form-item {
+    margin-top: 20px;
+  }
+  .demo-drawer__footer {
+    position: fixed;
+    bottom: 30px;
+    width: 45%;
+    margin-top: 20px;
+    display: flex;
+    button {
+      flex: 1;
+    }
+  }
+}
+.avatar-uploader {
+  .el-upload {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+}
+.avatar-uploader-icon {
+  background-color: #fbfdff;
+  font-size: 28px;
+  color: #8c939d;
+  width: 148px;
+  height: 148px;
+  line-height: 148px;
+  text-align: center;
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+}
+.avatar-uploader-icon:hover {
+  border-color: #409EFF;
+}
+.avatar {
+  width: 148px;
+  height: 148px;
+  display: block;
+}
+</style>