From e4af824c411094df24d0275fa6e00e219b145798 Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Wed, 15 Dec 2021 18:21:37 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=93=E9=A2=98=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AppThematicConfig.vue.vue                 |  40 ++++
 .../AppThematicConfig.vue/components/List.vue | 219 ++++++++++++++++++
 2 files changed, 259 insertions(+)
 create mode 100644 packages/3.0.0/AppThematicConfig.vue/AppThematicConfig.vue.vue
 create mode 100644 packages/3.0.0/AppThematicConfig.vue/components/List.vue

diff --git a/packages/3.0.0/AppThematicConfig.vue/AppThematicConfig.vue.vue b/packages/3.0.0/AppThematicConfig.vue/AppThematicConfig.vue.vue
new file mode 100644
index 00000000..8cc8423b
--- /dev/null
+++ b/packages/3.0.0/AppThematicConfig.vue/AppThematicConfig.vue.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="AppThematicConfig">
+    <List
+      slot="content"
+      :instance="instance"
+      :dict="dict"
+      :permissions="permissions">
+    </List>
+  </div>
+</template>
+
+<script>
+  import List from './components/List.vue'
+
+  export default {
+    name: 'AppThematicConfig',
+    label: '专题配置',
+
+    components: {
+      List
+    },
+
+    props: {
+      instance: Function,
+      dict: Object,
+      permissions: Function
+    },
+
+    data () {
+      return {
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .AppThematicConfig {
+    height: 100%;
+  }
+</style>
diff --git a/packages/3.0.0/AppThematicConfig.vue/components/List.vue b/packages/3.0.0/AppThematicConfig.vue/components/List.vue
new file mode 100644
index 00000000..e4e74c93
--- /dev/null
+++ b/packages/3.0.0/AppThematicConfig.vue/components/List.vue
@@ -0,0 +1,219 @@
+<template>
+  <ai-list>
+    <ai-title slot="title" title="专题配置" isShowBottomBorder></ai-title>
+    <template slot="content">
+      <ai-search-bar bottomBorder>
+        <template #left>
+          <el-button type="primary" icon="iconfont iconAdd" size="small" @click="isShowAdd = true">添加 </el-button>
+        </template>
+        <template #right>
+          <el-input
+            v-model="search.title"
+            size="small"
+            placeholder="请输入标题"
+            clearable
+            @keyup.enter.native="search.current = 1, getList()"
+            @clear="search.current = 1, search.title = '', getList()"
+            suffix-icon="iconfont iconSearch">
+          </el-input>
+        </template>
+      </ai-search-bar>
+      <ai-table
+        :tableData="tableData"
+        :col-configs="colConfigs"
+        :total="total"
+        v-loading="loading"
+        style="margin-top: 16px;"
+        :current.sync="search.current"
+        :size.sync="search.size"
+        @getList="getList">
+        <el-table-column slot="img" width="160px" label="首页封面" align="center">
+          <template slot-scope="{ row }">
+            <ai-uploader v-model="row.img" disabled :instance="instance" :limit="1"></ai-uploader>
+          </template>
+        </el-table-column>
+        <el-table-column slot="options" width="160px" fixed="right" label="操作" align="center">
+          <template slot-scope="{ row }">
+            <div class="table-options" style="padding-right: 30px;">
+              <el-button type="text" @click="edit(row)">编辑</el-button>
+              <el-button type="text" @click="remove(row.id)">删除</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </ai-table>
+      <ai-dialog
+        :visible.sync="isShowAdd"
+        width="680px"
+        height="580px"
+        :title="id ? '添加专题' : '编辑专题'"
+        @close="onClose"
+        @onConfirm="onConfirm">
+        <el-form ref="form" :model="form" label-width="110px" label-position="right">
+          <div class="ai-form" :model="form" label-width="110px" label-position="right">
+            <el-form-item label="专题名称" prop="name" style="width: 100%;" :rules="[{ required: true, message: '请输入专题名称', trigger: 'blur' }]">
+              <el-input size="small" placeholder="请输入专题名称" v-model="form.name"></el-input>
+            </el-form-item>
+            <el-form-item label="首页封面" prop="pictureUrl" style="width: 100%;" :rules="[{ required: true, message: '请上传首页封面', trigger: 'change' }]">
+              <ai-uploader v-model="form.pictureUrl" :instance="instance" :limit="1"></ai-uploader>
+            </el-form-item>
+            <el-form-item label="应用类型" style="width: 100%;" prop="type" :rules="[{ required: true, message: '请选择应用类型', trigger: 'change' }]">
+              <ai-select
+                v-model="form.type"
+                :selectList="typeDict"
+                @change="onChange"
+                laceholder="请选择应用类型">
+              </ai-select>
+            </el-form-item>
+            <el-form-item label="小程序appid" prop="appId" style="width: 100%;" v-if="form.type === '0'" :rules="[{ required: true, message: '请输入小程序appid', trigger: 'blur' }]">
+              <el-input size="small" placeholder="请输入小程序appid" v-model="form.appId"></el-input>
+            </el-form-item>
+            <el-form-item label="链接" prop="url" style="width: 100%;" v-if="form.type === '1'" :rules="[{ required: true, message: '请输入链接', trigger: 'blur' }]">
+              <el-input size="small" placeholder="请输入链接" v-model="form.url"></el-input>
+            </el-form-item>
+          </div>
+        </el-form>
+      </ai-dialog>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+  export default {
+    name: 'List',
+
+    props: {
+      instance: Function,
+      dict: Object
+    },
+
+    data () {
+      return {
+        search: {
+          current: 1,
+          size: 10,
+          name: ''
+        },
+        form: {
+          type: '1',
+          pictureUrl: [],
+          url: '',
+          name: '',
+          appId: ''
+        },
+        typeDict: [{
+          dictName: '外链小程序',
+          dictValue: '0'
+        }, {
+          dictName: '外链h5',
+          dictValue: '1'
+        }],
+        isShowAdd: false,
+        colConfigs: [
+          { prop: 'name', label: '专题名称' },
+          { slot: 'img', align: 'center' },
+          { prop: 'type', align: 'center', label: '类型', formart: v => v === '0' ? '小程序' : '链接' },
+          { prop: 'url', align: 'center', label: '链接' },
+          { prop: 'appId', align: 'center', label: '小程序appid' },
+          { prop: 'createTime', align: 'center', label: '创建时间' }
+        ],
+        id: '',
+        tableData: [],
+        total: 0,
+        loading: false
+      }
+    },
+
+    created () {
+      this.getList()
+    },
+
+    methods: {
+      getList () {
+        this.instance.post(`/app/appminitopicconfig/list`, null, {
+          params: {
+            ...this.search
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            this.tableData = res.data.records.map(v => {
+              return {
+                ...v,
+                img: [{
+                  url: v.pictureUrl
+                }]
+              }
+            })
+            this.total = res.data.total
+            this.loading = false
+          } else {
+            this.loading = false
+          }
+        }).catch(() => {
+          this.loading = false
+        })
+      },
+
+      onChange () {
+        this.form.url = ''
+        this.form.appId = ''
+      },
+
+      onConfirm () {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            this.instance.post(`/app/appminitopicconfig/addOrUpdate`, {
+              ...this.form,
+              id: this.id || '',
+              pictureUrl: this.form.pictureUrl[0].url
+            }).then(res => {
+              if (res.code === 0) {
+                this.$message.success('添加成功')
+                this.isShowAdd = false
+
+                this.getList()
+              }
+            })
+          }
+        })
+      },
+
+      edit (e) {
+        this.id = e.id
+        this.form = {
+          ...e,
+          pictureUrl: [{
+            url: e.pictureUrl
+          }]
+        }
+
+        this.$nextTick(() => {
+          this.isShowAdd = true
+        })
+      },
+
+      onClose () {
+        this.id = ''
+        this.form.type = '1'
+        this.form.pictureUrl = []
+        this.form.url = ''
+        this.form.name = ''
+        this.form.appId = ''
+      },
+
+      remove (id) {
+        this.$confirm('确定删除该数据？').then(() => {
+          this.instance.post(`/app/appminitopicconfig/delete?ids=${id}`).then(res => {
+            if (res.code == 0) {
+              this.$message.success('删除成功！')
+              this.getList()
+            }
+          })
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+
+</style>