feat: draw card

src/views/spring/fortune/card/components/AppManagementEdit.vue

@@ -0,0 +1,123 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
+    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
+      <el-form-item label="卡片标题" prop="title">
+        <el-input v-model="form.title" autocomplete="off" />
+      </el-form-item>
+      <el-form-item label="幸运等级" prop="fortuneLevel">
+        <el-select v-model="form.fortuneLevel" placeholder="请选择幸运等级">
+          <el-option label="吉祥" value="1" />
+          <el-option label="大吉" value="2" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="描述内容" prop="content">
+        <el-input v-model="form.content" autocomplete="off" />
+      </el-form-item>
+      <el-form-item label="卡片图片" prop="imageUrl">
+        <single-upload
+          v-model="form.imageUrl"
+          style="width: 100px; height: 100px"
+          :upload-url="uploadUrl"
+          @upload-success="handleUploadSuccess"
+        />
+      </el-form-item>
+      <el-form-item label="权重" prop="weight">
+        <el-input v-model="form.weight" autocomplete="off" />
+      </el-form-item>
+      <el-form-item label="是否启用" prop="isEnabled">
+        <el-switch v-model="form.isEnabled" active-text="启用" :active-value="true" inactive-text="禁用" :inactive-value="false" />
+      </el-form-item>
+    </el-form>
+
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { doEdit, doAdd } from '@/api/spring/fortune/card'
+  import SingleUpload from '@/components/SingleUpload'
+
+  export default {
+    name: 'AppManagementEdit',
+    components: { SingleUpload },
+    data() {
+      return {
+        id: '',
+        form: {
+          title: '',
+          fortuneLevel: '',
+          content: '',
+          imageUrl: '',
+          keywords: '',
+          weight: 1,
+          isEnabled: true,
+        },
+        rules: {
+          title: [{ required: true, trigger: 'blur', message: '请输入卡片标题' }],
+          fortuneLevel: [{ required: true, trigger: 'blur', message: '请选择幸运等级' }],
+          content: [{ required: true, trigger: 'blur', message: '请输入描述内容' }],
+          imageUrl: [{ required: true, trigger: 'blur', message: '请上传卡片图片' }],
+          weight: [{ required: true, trigger: 'blur', message: '请输入权重' }],
+          isEnabled: [{ required: true, trigger: 'blur', message: '请选择是否启用' }],
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    computed: {
+      uploadUrl() {
+        return `${process.env.VUE_APP_API_BASE_URL}/management/api/common/upload`
+      },
+    },
+    created() {},
+    methods: {
+      handleUploadSuccess(url) {
+        this.form.imageUrl = url
+      },
+      showEdit(row) {
+        if (!row) {
+          this.title = '添加'
+        } else {
+          this.title = '编辑'
+          this.form = {
+            title: row.title,
+            fortuneLevel: row.fortuneLevel,
+            content: row.content,
+            imageUrl: row.imageUrl,
+            type: row.type,
+            keywords: row.keywords,
+            weight: row.weight,
+            isEnabled: row.isEnabled,
+          }
+          this.id = row.id
+        }
+        this.dialogFormVisible = true
+      },
+      close() {
+        this.$refs['form'].resetFields()
+        this.form = this.$options.data().form
+        this.dialogFormVisible = false
+      },
+      save() {
+        this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            if (this.id) {
+              const { msg } = await doEdit(this.id, this.form)
+              this.$baseMessage(msg, 'success')
+            } else {
+              const { msg } = await doAdd(this.form)
+              this.$baseMessage(msg, 'success')
+            }
+            this.$emit('fetch-data')
+            this.close()
+          } else {
+            return false
+          }
+        })
+      },
+    },
+  }
+</script>