勋章管理接口联调完成

src/views/modules/medal.vue

@@ -8,18 +8,20 @@
                 </div>
             </div>
             <el-table :data="dataList" border cell-class-name="vertical-top-cell" v-loading="loading" empty-text="暂无勋章" style="margin-top: 20px;">
-                <el-table-column prop="xxx" label="勋章名称"></el-table-column>
+                <el-table-column prop="medalName" label="勋章名称"></el-table-column>
                 <el-table-column prop="xxx" label="勋章图片">
-                    <template slot-scope="scope"></template>
+                    <template slot-scope="scope">
+                      <img :src="scope.row.imageUrl" style="width: 90px;height: auto;">
+                    </template>
                 </el-table-column>
-                <el-table-column prop="xxx" label="指定发放时间"></el-table-column>
-                <el-table-column prop="xxx" label="发放条件"></el-table-column>
-                <el-table-column prop="xxx" label="操作">
+                <el-table-column prop="issueBeginTime" label="发放开始时间"></el-table-column>
+                <el-table-column prop="issueEndTime" label="发放结束时间"></el-table-column>
+                <el-table-column label="操作">
                     <template slot-scope="scope">
-                        <el-button type="text" @click="handleEdit">编辑</el-button>
-                        <el-button type="text" @click="handleOpenClose(1)">启用</el-button>
+                        <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
+                        <!-- <el-button type="text" @click="handleOpenClose(1)">启用</el-button> -->
                         <!-- <el-button type="text" @click="handleOpenClose(0)">停用</el-button> -->
-                        <el-button type="text" @click="handleDelete">删除</el-button>
+                        <el-button type="text" @click="handleDelete" v-if="scope.row.isDefault==0">删除</el-button>
                     </template>
                 </el-table-column>
             </el-table>
@@ -35,8 +37,8 @@
         </div>
         <el-dialog width="800px" :visible.sync="show" :title="title" @close="cancel">
           <el-form ref="medalRef" :model="form" :rules="rules" label-width="110px" style="width: 70%;margin: 0 auto;">
-            <el-form-item label="勋章名称" prop="aaa">
-              <el-input v-model="form.aaa" placeholder="请输入勋章名称"></el-input>
+            <el-form-item label="勋章名称" prop="medalName">
+              <el-input v-model="form.medalName" placeholder="请输入勋章名称"></el-input>
             </el-form-item>
             <el-form-item label="勋章图片" class="redLabel">
                 <el-upload
@@ -53,13 +55,11 @@
                 </el-upload>
                 <div class="upload_tip">建议尺寸：180*180像素，点击上传勋章图片</div>
             </el-form-item>
-            <el-form-item label="选择发放时间" prop="bbb">
-                <el-date-picker v-model="form.bbb" type="datetime" format="yyyy-MM-dd HH:mm" style="width: 100%;"></el-date-picker>
+            <el-form-item label="发放开始时间" :class="{'red':form.isDefault===0}">
+                <el-date-picker v-model="form.issueBeginTime" type="datetime" format="yyyy-MM-dd HH:mm:ss" style="width: 100%;" :disabled="form.isDefault===1"></el-date-picker>
             </el-form-item>
-            <el-form-item label="设置发放条件" prop="ccc">
-                <el-select v-model="form.ccc" placeholder="请选择发放条件" style="width: 100%;">
-                    <el-option label="发放条件一" :value="1"></el-option>
-                </el-select>
+            <el-form-item label="发放结束时间" :class="{'red':form.isDefault===0}">
+              <el-date-picker v-model="form.issueEndTime" type="datetime" format="yyyy-MM-dd HH:mm:ss" style="width: 100%;" :disabled="form.isDefault===1"></el-date-picker>
             </el-form-item>
           </el-form>
           <div class="demo-drawer__footer" style="display: flex;justify-content: end;margin-top: 200px;">
@@ -71,6 +71,7 @@
 </template>
 
 <script>
+import moment from 'moment'
 import Cookies from 'js-cookie'
 export default {
   data () {
@@ -86,20 +87,21 @@ export default {
       title: '新增勋章',
       form: {
         id: '',
-        aaa: '',
-        imgUrl: '',
-        bbb: '',
-        ccc: ''
+        isDefault: 0,
+        medalName: '',
+        imageUrl: '',
+        issueBeginTime: '',
+        issueEndTime: ''
       },
       rules: {
-        aaa: [
+        medalName: [
           { required: true, message: '请输入勋章名称', trigger: 'blur' }
         ],
-        bbb: [
-          { required: true, message: '请选择发放时间', trigger: 'change' }
+        issueBeginTime: [
+          { required: true, message: '请选择发放开始时间', trigger: 'change' }
         ],
-        ccc: [
-          { required: true, message: '请设置发放条件', trigger: 'change' }
+        issueEndTime: [
+          { required: true, message: '请选择发放结束时间', trigger: 'change' }
         ]
       },
       buttonLoading: false,
@@ -107,24 +109,38 @@ export default {
       fileList: []
     }
   },
+  mounted () {
+    this.getDataList()
+  },
   methods: {
     handleAdd () {
       this.title = '新增勋章'
       this.show = true
     },
-    handleEdit () {
+    handleEdit (row) {
       this.title = '编辑勋章'
-      this.show = true
+      this.$http.get(`/core/medal/${row.id}`).then(({ data: res }) => {
+        if (res.code !== 0) return this.$message.error(res.msg)
+        this.form = res.data
+        if (this.form.imageUrl) {
+          this.fileList = [
+            { name: '', url: this.form.imageUrl }
+          ]
+        }
+        this.show = true
+      })
     },
-    handleDelete () {
+    handleDelete (row) {
       this.$confirm('确定要删除该勋章吗？', '提示', {
         type: 'warning'
       }).then(() => {
         this.buttonLoading = true
-        setTimeout(() => {
+        this.$http.del('/core/medal', { params: [ row.id ] }).then(({ data: res }) => {
+          if (res.code !== 0) return this.$message.error(res.msg)
+          this.$message.success('删除成功')
           this.getDataList()
           this.buttonLoading = false
-        }, 1000)
+        })
       })
     },
     handleOpenClose (status) {},
@@ -136,7 +152,13 @@ export default {
       this.queryParams.page = val
       this.getDataList()
     },
-    getDataList () {},
+    getDataList () {
+      this.$http.get('/core/medal/page', { params: this.queryParams }).then(({ data: res }) => {
+        if (res.code !== 0) return this.$message.error(res.msg)
+        this.dataList = res.data.list
+        this.total = res.data.total
+      })
+    },
     beforeUploadHandle (file, index, fixedNumber) {
       if (file.type !== 'image/jpg' && file.type !== 'image/jpeg' && file.type !== 'image/png') {
         this.$message.error(
@@ -145,11 +167,11 @@ export default {
         return false
       }
     },
-    handleRemoveCover (file, fileList) {
+    handleRemove (file, fileList) {
       this.fileList = fileList.map((item) => item) || []
-      this.form.imgUrl = ''
+      this.form.imageUrl = ''
     },
-    successHandleCover (res, file, fileList) {
+    successHandle (res, file, fileList) {
       if (res.code !== 0) {
         return this.$message.error(res.msg)
       }
@@ -157,18 +179,27 @@ export default {
         name: '',
         url: res.data
       })
-      this.form.imgUrl = this.fileList[0].url
+      this.form.imageUrl = this.fileList[0].url
     },
     submitForm () {
       this.$refs['medalRef'].validate((valid) => {
         if (valid) {
-          if (!this.form.imgUrl) return this.$message.error('请上传勋章图片')
+          if (!this.form.imageUrl) return this.$message.error('请上传勋章图片')
+          if (this.form.isDefault === 0) {
+            if (!this.form.issueBeginTime) return this.$message.error('请选择发放开始时间')
+            if (!this.form.issueEndTime) return this.$message.error('请选择发放结束时间')
+            if (Date.parse(this.form.issueBeginTime) > Date.parse(this.form.issueEndTime)) return this.$message.error('发放开始时间不能大于结束时间')
+            this.form.issueBeginTime = moment(this.form.issueBeginTime).format('YYYY-MM-DD HH:mm:ss')
+            this.form.issueEndTime = moment(this.form.issueEndTime).format('YYYY-MM-DD HH:mm:ss')
+          }
           this.buttonLoading = true
-          setTimeout(() => {
+          this.$http[this.form.id ? 'put' : 'post']('/core/medal', this.form).then(({ data: res }) => {
+            if (res.code !== 0) return this.$message.error(res.msg)
+            this.$message.success(`${this.form.id ? '编辑' : '新增'}成功`)
             this.show = false
             this.getDataList()
             this.buttonLoading = false
-          }, 1000)
+          })
         } else {
           return false
         }
@@ -177,11 +208,13 @@ export default {
     cancel () {
       this.form = {
         id: '',
-        aaa: '',
-        imgUrl: '',
-        bbb: '',
-        ccc: ''
+        isDefault: 0,
+        medalName: '',
+        imageUrl: '',
+        issueBeginTime: '',
+        issueEndTime: ''
       }
+      this.fileList = []
       this.$refs['medalRef'].resetFields()
       this.show = false
     }
@@ -189,6 +222,13 @@ export default {
 }
 </script>
 
+<style>
+.el-form-item.red .el-form-item__label::before{
+      content: "*";
+      color: #F56C6C;
+      margin-right: 4px;
+}
+</style>
 <style scoped lang="scss">
 .top{
     &-left{